池田菜々子のポートフォリオ

デザインスタイル

ツールとしての「使いやすさ」をベースにしながらも、事務的な印象を与えないための遊び心を取り入れました。
複雑になりがちな計画情報を迷わず視認できるシンプルなUI設計と、「旅のワクワク感」を想起させる色やイラストのバランスを意識しています。

• コンセプトと配色：「旅」から連想される「地球」をコンセプトに、青と緑を基調とした配色を採用しました。アクションを促すボタンやリンクは青で統一し、一貫性を確保しています。
• 親しみやすさ：全体的に角の丸いフォルムを採用、セットアップ完了時のボタンを「All good!」とするカジュアルな言葉選びなど、親しみやすい印象を演出しました。
• ワクワク感：計画をただの「作業」にしない、旅が近づくワクワク感を高める仕掛けとして、イラストやカラーアイコン、短いアニメーションを取り入れました。

セットアップ：スムーズな計画スタートSetup

旅行の基本情報を登録するセットアップでは、入力の負担を感じさせず、スムーズに計画をスタートできる設計を意識しました。

• ステップ形式のフォーム：一度にすべての項目を入力する負担を避けるため、「タイトル→場所→日程→メンバー」と順を追って進むステップ形式を採用しました。画面上部には進捗メーターを配置し、「あとどれくらいで終わるか」を常に可視化することで、ユーザーが最後までストレスなく進められるよう配慮しています。
• 複数の目的地設定：「行き先が1つではない」という状況を想定し、複数の候補地を登録できることをUIで明確に示しました。
• 計画の段階に合わせたフロー：具体的な日程が決まっていない場合は、そのまま「日程投票」へ進めるようフローを分岐させました。ユーザーの今の状況に合わせて、スムーズに次のアクションへ移れるようにしています。

ホーム画面：直近の予定を後押しするダッシュボードHome

多くの旅行アプリでは予定が一覧で並ぶだけですが、このアプリでは「直近の旅行」に焦点を当てたダッシュボード形式を採用しました。開くたびに進捗や残り日数が目に入ることで、計画の停滞を防ぎ、準備のモチベーションを高めます。

• 直近の旅行に特化したダッシュボード：次の旅行のタスク進捗や出発までのカウントダウンを表示。スムーズなタスク管理と「旅が近づくワクワク感」を両立させました。
• 旅行の切り替え：複数の予定がある場合も、スワイプやドットインジケーターによってスムーズに表示を切り替えられます。
• 全ての旅行を閲覧できるリスト：右上のアイコンからは、すべての旅行を確認できる一覧ページへ。今後行く予定の「Upcoming」と、思い出を振り返ることができる「Past」に整理されています。

やりたいことリスト（Bucket list）：興味関心を手軽に共有Bucket list

セットアップが完了したら、まずはメンバー同士でやりたいことを自由に共有します。フォーマットに縛られず、思いついたアイデアを直感的にストックできる場所にしました。

• 2つの登録スタイル：テキストでパッとメモできる「Free Note」と、特定の場所を検索する「スポット登録」の2種類を用意。情報の精度に合わせて、柔軟に使い分けることができます。

• 旅程へのスムーズな連携：リストに並んだアイテムは、そのまま「旅程（Itinerary）」へ移行が可能。検討段階のアイデアを具体的なスケジュールとして組み込むことができます。
• リアクション機能：メンバーが登録したアイテムに、スタンプでリアクションを送れます。温度感がひと目で伝わるため、みんなの希望を取り入れた優先順位づけがしやすくなります。
• 優先順位が一目でわかるフラッグ機能：「これだけは絶対に行きたい！」というマストアイテムには、フラッグ（旗）を立てて上部に配置することができます。

旅程（Itinerary）：直感的に把握できるスケジュール設計Itinerary

決定した予定を時系列に整理する旅程画面では、当日の動きをスムーズにイメージできるよう、情報の「入力しやすさ」と「視認性の高さ」にこだわりました。

• 柔軟な登録スタイル：「Free Note」「Spot」「Transportation」に加え、あらかじめ出しておいた「Bucket list」から直接追加が可能。どんな種類の予定も迷わず登録できる構成にしています。

• マップで位置関係を可視化：旅程と連動したマップを同じ画面内に表示。ルートや位置関係を確認しながら計画を立てられるため、「移動に無理がないか」を直感的に判断できます。
• カテゴリが一目でわかるカラーアイコン：各アイテムには、カフェや公園などの種類に応じたアイコンと色を設定。色分けによって「午前は観光、午後はカフェ」といったスケジュールがパッと見で把握できるようなUIにしました。

チェックリスト（Checklist）：準備の「あれこれ」をまとめる場所Checklist

持ち物やTODO、予約したチケットの管理など、旅行前の細かな準備を一箇所にまとめられるようにしました。自分だけのメモと、メンバー全員で共有するタスクを切り分けて管理できるのが特徴です。

• 「みんなのタスク」と「自分の持ち物」を別々に管理：全員で分担するTODOと、個人的なパッキングリストなどが混ざらないように、「Group」と「Personal」の2つのタブで分けています。
• ダッシュボードと連動する進捗管理：タスク画面では、デフォルトで用意されたチェックリストにTODOアイテムの追加・編集が可能です。ここでの完了率がダッシュボードの進捗メーターに反映されます。
• 自由なメモ機能：「Note」ではフォーマットなしで自由にメモを作成できます。チェックリストを自作したり、ホテルや航空券の関連ファイルを添付したりと、ユーザーが必要な情報を好きな形で管理できるようにしました。

デザインシステム