デザインプロセス事例1

アプリの記録を大切な家族の宝物に。連絡帳製本プロジェクト

「ルクミー連絡帳」は、保育施設を利用する保護者と、園・施設の先生方が園児の出欠連絡や家庭での様子、体調、食事、保育活動の様子などをテキストや写真で伝えるためのアプリケーションです。
このプロジェクトでは、アプリを利用している(していた)保護者からの「先生との大切なやり取りを本にして手元に残したい」という強いニーズに応えるため、アプリ内のデータを製本するサービスを提供します。
連絡帳製本プロジェクトの概要イメージ。保護者と保育者によるアプリのやりとりが製本化され、連絡帳の冊子になっていることを示した図です。
 

プロジェクトにおけるデザイナーの役割

企画段階から最終的な製本物の仕様策定にもデザイナーが参加し、さまざまなアウトプットを行いました。
企画、リサーチ、製本デザイン、UIデザイン、実装・テストの5ステップからなるプロジェクトフロー図。各工程でデザイナーが担当する具体的なタスクがリストアップされている。
  • リサーチ: 競合調査、サンプル品を用いたユーザーインタビュー、紙質・綴じ方の検証
  • 製本・誌面デザイン: 表紙デザインの作成、データ連動型の柔軟な誌面レイアウト設計とデザイン
  • UI/UXデザイン: 直感的でシンプルな注文フローを実現するためのユーザーシナリオの作成、購入導線のUI設計
 

リサーチから導く「ルクミーらしさ」「あるべきデザイン」

単なるデータの印刷ではなく、数年後も読み返したくなる「品質」を目指して、担当デザイナーがファシリテーターとなってチーム内でデザインに関するディスカッションを行い、方向性を検討しました。
連絡帳製本のデザインがどうあるべきか、デザインに関するディスカッションした際のオンラインホワイトボードの画像。「キュート・シンプル・汎用的・ブランドらしさ」の4軸で競合サービスや類似サービスのデザイン位置付けを分析したポジショニングマップ。その隣のスペースで、製本サービスや子育て記録アプリ、フォトブック・カレンダーなどの近しいサービスや商品のデザインを並べて見比べられるようにしています。
似ているサービスや商品の調査結果を共有し、デザインテイストやトンマナについてマッピング
また、このプロジェクトでは、bizメンバーを中心に複数回の定性・定量リサーチを行いました。デザイナーは製本サンプル品のデザインを作成し、ユーザーヒアリングに参加しました。
表紙デザインに関すること」と「全体の品質に関すること」の2つのカテゴリーで、ユーザーから寄せられた具体的なニーズ(写真の大きさ、文字の読みやすさ、メモ欄の有無など)を整理した図解。
アンケートやヒアリングで得られたインサイト
 
「写真は大きい方が嬉しい」という声からは表紙写真の重要性が、「空いたスペースに書き込みたい」からは光沢のない筆記しやすい紙質が、「何年後かに見返したい」からは耐久性のある素材が必要であることが分かりました。
ユーザーリサーチによって得られたこうしたインサイトを、製本の素材・質感・レイアウトなどに反映し、長く使いやすい連絡帳のデザインを検討しました。
 

製本・誌面デザイン

リサーチから製品仕様を検討し、ルクミーらしさを大切にした2種類の表紙デザインを作成。
購入後も家族で長く読み返せるよう、普遍的で落ち着いたデザインを基調に適度なトレンド感を加え、時代性や懐かしさを感じられるバランスを重視しました。
カラフルなあしらいのあるパステルと、あしらいが少なく写真を大きく表示できるシンプルの2種類の表紙デザインになっています。デザインのポイントは、「トレンドと定番のバランス」「ブランドらしさ」「わかりやすさ」です。
 

中身ページのデザインにおける考慮ポイント

連絡帳には体温・排便・睡眠・朝食内容など多様な項目が含まれます。これらを誌面に収めるため、サーバーデータとの連携や平均値の算出可否も踏まえてデザインしました。
連絡欄のテキストはユーザー・日によって記入量が異なるという難しさがありましたが、中央値に基づき読みやすい2段階のフォントサイズでレイアウトを調整。欠席日の空白の扱い、年齢による項目差異にも対応できる柔軟なレイアウトになっています。
保護者用・保育者用アプリの入力画面と、それらが反映された連絡帳の誌面レイアウトのサンプル。多様な項目や写真が整理されて配置されている様子
 

UI/UXデザイン(ユーザー体験設計)

表紙のデザインや写真の選択、お名前の入力など、ユーザーがスムーズに操作・購入できるような体験をUIに落とし込みました。
連絡帳の表紙を作成する4つのステップ(デザイン選択、名前入力、写真追加、作成中画面)を示すUIデザインの遷移図。
ユーザー体験設計
4つのユーザータイプ別のペルソナ分析と、認知から購入に至るまでの詳細な行動・思考・ニーズを整理したカスタマージャーニーマップの表。
ユーザーシナリオは、4つのユーザータイプを立て、認知から決済完了までの遷移を細かく定義
Figma上の膨大な画面遷移図と、各所に配置された多数のコメント吹き出し。制作過程での緻密なコミュニケーションの跡を示している。
figmaのデザインデータにはフィードバックや返信コメントなどが60件以上