【デザイン事例紹介】TRIP CARD_「旅」の情報アプリケーションツール
「FIRST DRIVE」が提供する「旅」の情報アプリケーションツール「TRIP CARD」のUIデザインを担当しました。クライアント様の豊富なアイデアとハイエンドなコンテンツを、いかにプロダクトとして具現化していくかに注力。サイトマップ（画面遷移図）とモックアップを活用し、シックで落着きのあるブランドイメージと、コンセプトの肝である“カード”の質感にこだわってデザインをしました。
TRIP CARDとは
「FIRST DRIVE」が収録したホテルやレストラン、ローカルショップなど、初めて知る、訪ねたくなるようなスポット情報を”カード”に見立てて整理した旅情報アプリ。気になったスポットやその周辺のさまざまなスポットのカードを選んで、自分たちだけのドライブルートの旅をスマートに楽しむことができます。
プロジェクトについて
クライアント：WRANC株式会社
対応デバイス：iOS/Android
デザイン制作期間：約2ヶ月
使用ツール：Adobe XD／Illustrator／Photoshop
担当範囲：モバイルアプリUI／Apple CarPlay UI
目的：クライアントの新サービス開発／コンテンツの魅力最大化
効果：サイトマップとプロトタイプでアプリ完成イメージのすり合わせを行いながらプロジェクトを推進／ハイエンドなコンテンツを際立たせるプロダクトの実現で、ブランドイメージに寄与
注力したポイント
洗練されたブランドイメージをアプリデザインへ
「FIRST DRIVE」で、すでに洗練されたイメージを確立されていたクライアント様は、アプリのコンセプトやコンテンツに対しても初期段階より豊富なイメージをお持ちでした。本プロジェクトではそのイメージをプロダクトとして落とし込むことに注力しました。
サイトマップとモックアップを活用したアイデアの具現化
まずはゼロからアプリの画面マップを作成し、アプリの構成を整理してご提案しました。画面マップ上で要件を整理しながら進めていくことで、プロジェクトメンバーの認識を一致させながら要件定義を明確化していきました。
同時にデザインのテイストも複数案ご提案し、方向性をすり合わせていきました。「FIRST DRIVE」でも使用されているオレンジをプライマリーカラーとして使用し、全体はコンテンツが引き立つようスタンダードなデザインに仕上げています。また画面領域の狭いアプリながら、雑誌のように余白を意識したレイアウトで上品さを演出。そのほかにも、ドロップシャドウの調整や一部フォントにセリフ体を使用するなどして、全体的に上質感のあるブランドイメージを構築しました。
デジタル画面でも質感のある「カード」の表現
また、プロダクトのメインコンセプトでも「カード」の質感を重視しました。２次元のデジタル画面でも、物理的なカードを扱うような体験を感じられるよう、スワイプ操作でカードを入れ替えるUIをモックアップで作成してご提案しました。
また、リアルな遠近感を感じられるシャドウを施したり、一般的なカードの比率に合わせたサイズにするなど、「アプリ上でカードを扱う」という体験にフォーカスしたデザインにしています。表示するコンテンツが違ってもカードの比率を維持したまま表示できるよう、テキストサイズや余白の取り方、画像のトリミングなど、全体のバランスを細かく整えていきました。
機能を分断しない、フレキシブルな導線
さらに、各機能同士を直観的につなげるユーザー導線も整理しながらデザインを進めていきました。「ルート」を作るユーザー導線を好きなところから楽しめるように、「カードからルート作成」はもちろん、お気に入りのカードをマイフォルダに集めてからルートを作成したり、既存ルートをもとに新しいルートを作成するなど、モックアップを活用しながらユーザーの使い勝手がよくなるように調整していきました。
カーナビ用のデザインの作成も
ほかにも、Apple iOS「Car Play」のナビゲーションに対応したデザインも作成しました。ボタンの大きさなどをレギュレーションに則り調整。運転中の操作性を担保しながら、TRIP CARDのブランドイメージを踏襲したデザインに仕上げました。
お問い合わせ
クライアント様のご要望にお応えするのはもちろん、コミュニケーションを通じて、潜在的なニーズの掘り起こしや丁寧な認識のすり合わせを行います。また「1を頼めば、2，3が返ってくる」をモットーに、プラスアルファのご提案でプロジェクトの具体化を推進いたします。
資料や素材がなくても構いません。
「こんなことを考えている」「こんなサービスを作りたい」など、まずはお気軽にお問合せください！
お仕事に関するお問い合わせは、X(旧Twitter)のDMにて受け付けております。
この記事が気に入ったらサポートをしてみませんか？