
ヘルスケアアプリ
プロダクトUX



自動車 · ディーラーのウェブサイトデザイン
MV Agustaディーラーの依頼で制作したウェブサイトデザインを、のちに自社で実際に動くショールームとして構築しました。モデルの探索、在庫の選択、販売店へのお問い合わせまで、ブランドのビジュアルの個性が一貫して続く体験です。
自動車 · デジタルプロダクト
モーターサイクルディーラーが顧客に返信し、来店を調整し、販売を進めるためのワークスペースです。メール、SMS、ウェブサイトの会話を一か所にまとめ、明確な担当責任のもと、モーターサイクルと次のステップをすぐに確認できます。
ウェブサイトは購入者がモーターサイクルを見つけてお問い合わせをするのを助けます。ワークスペースは、その文脈をディーラーの日常業務に引き継ぐよう設計されています。これらのデモは別々に動作しており、接続はライブではありません。
ブランドのエディトリアルなビジュアル言語をディーラーのウェブサイトに適用しました。購入者には、何があるのかを確認し、特定のモーターサイクルの詳細を比較し、販売店との明確な次のステップを見つけられることが求められました。
購入者はモーターサイクルについてメールで問い合わせ、テキストメッセージで続け、その後来店を希望するかもしれません。ディーラーはその会話を一つにまとめ、どのマネージャーが担当かを把握し、関心を明確な次のステップにつなげる必要があります。私たちは、返信、来店の調整、フォローアップを一続きのワークフローにすることを目指しました。
提供された構成案を出発点に、ビジュアルスタイル、構図、コンポーネント、ページ順序の一部を見直しました。大きな写真がブランドを印象づけ、在庫カード、仕様、直接アクションが購入までの流れを支えます。
デザインの納品後、私たち自身で実際に動くウェブサイトとして構築しました。共通のページパターンにより、同じナビゲーション、モデルの見せ方、在庫の選択がショールーム全体に行き渡っています。
顧客との会話を中心に据えました。メッセージにはチャネルが表示され、スタッフは同じ場所で返信方法を選べます。会話を顧客レコードに紐づけ、そこに担当マネージャーと関心のあるモーターサイクルをわかりやすく表示しています。
会話と来店をつなげました。スタッフがショールームの時間を提案し、購入者はオンラインで選択します。商談とタスクが次のアクションを引き継ぎます。各モーターサイクルには固有の在庫レコードがあり、別の公開ステップによって、ディーラーは購入者にウェブサイトで見せる内容を管理できます。
UX/UIデザインと再利用可能なコンポーネントを納品し、その後スタジオのプロジェクトとしてショールームのフロントエンドとモーションを開発しました。ブランドアイデンティティとモーターサイクルの画像はMV Agustaのものです。
プロダクトの方向性を形づくり、関係性とワークフローを整理し、最初のバージョンをセクションごとに確認して、レスポンシブなフロントエンドを設計・構築しました。人々が目にするインターフェースと、各セクションを連動させるルールの両方を手がけています。

01 / ディーラーの優先事項
ホームページでは、オープニング画像のすぐ後に在庫を配置しています。状態、年式、価格が一緒に表示されるため、ディーラーが提供できるモーターサイクルについて最初の判断ができます。
試乗とサービスが直接アクションとして続きます。これらはディーラーを訪れる日常的な理由であり、ページの階層に明確な位置を占めています。

02 / モデルの探索
モーターサイクル、利用可能なビュー、主要な仕様、「在庫を見る」を一貫性のある一つの商品カードにまとめました。購入者は実用的な情報を見失わずにモデルをじっくり確認できます。
「在庫を見る」は選択したモデルを在庫フィルターに引き継ぎます。これにより、表現力豊かなモデルページがディーラーの利用可能なモーターサイクルにつながります。

03 / 在庫の選択
在庫の掲載にはモデル名以上の情報が必要です。提示価格、年式、走行距離、過去の所有者数、VINの一部をモーターサイクルの横に配置し、「問い合わせる」アクションを添えました。
ファミリー、モデル、状態のフィルターで一覧を絞り込み、並べ替えで価格と年式を比較できます。絞り込んだ表示は選択内容をURLに保持するため、共有できます。ここに表示している在庫はサンプルデータです。


04 / ビジュアルの方向性
大きなモーターサイクルの画像、力強いタイポグラフィ、明暗のコントラストにより、ショールームは一目でMV Agustaとわかるものになっています。ブランドの写真を新しい構図とコンポーネントシステムの中で使用しました。
モデルページでは、技術的な詳細に独自のビジュアルリズムを持たせました。クローズアップ、明快な見出し、短い説明という構成です。モーションもこの階層に沿い、印象的なオープニングから、詳細部分では穏やかなトランジションへと続きます。

01 / 顧客との会話
顧客はウェブサイトから始めて、テキストメッセージで続けることがあります。スタッフは購入者がどのチャネルを使っていても、返信時にそれまでのやり取りを確認する必要があります。
ウェブサイトのお問い合わせ、メール、SMSを同じチャット画面にまとめ、各メッセージにチャネルを表示しました。このサンプルでは、CarlosがウェブサイトからSMSへ移っています。スタッフは会話履歴の横で返信でき、その上に該当のモーターサイクルが表示されます。

02 / 顧客の担当責任
共有のディーラー窓口には、明確な担当責任が必要です。チームは顧客に担当マネージャーを割り当て、誰が関係を担当しているかを次のアクションとともに確認できます。
その担当責任を顧客レコードに結びつけました。連絡先から既存の顧客と判別できる場合、新しいお問い合わせはそのレコードにリンクされ、担当マネージャーが維持されます。会話とフォローアップ業務は同じ人に紐づいたままです。



03 / 会話から来店へ
「木曜日の仕事帰り」のような依頼は、購入者がオンラインで確定できる来店につながるべきです。会話の中にショールームの候補時間を置くことで、スタッフはリクエストを目の前にしたまま来店を調整できます。
購入者が時間を選ぶと、その選択が会話に紐づいた予約になります。このデモでは、メールプレビューから購入者側のフローをお試しいただけます。


04 / 最後まで進める
返信や来店予約の後も、チームは次に何が起こるかを把握する必要があります。各商談には購入者、特定のモーターサイクル、次のアクションがまとまっています。
次のステップを、商談とタスクリストで共有するタスクにし、担当者と期限を設定しました。購入者の元のメッセージを添付したままにできるため、フォローアップする担当者は合意内容を確認できます。ボードは期限超過のステップと、次のステップが未設定の商談を強調表示します。


05 / 在庫に関する判断
同じモデルの二台でも、価格、在庫状況、サイト掲載期間が異なることがあります。まとめてしまうと、ディーラーの判断に必要な詳細が隠れてしまいます。
個々の在庫ユニットを在庫とレポートの基本にしました。バイクごとに閲覧数とお問い合わせが記録されます。分析画面は、閲覧数が多いのにお問い合わせがないといったパターンをディーラーに示し、詳しい確認につなげます。

06 / ウェブサイトの管理
新しい価格や「予約済み」のステータスは、ディーラーが提供する内容を変えます。スタッフにはこれらの編集を一緒に確認する機会が必要です。
「下書きを保存」と「変更を公開」を分けました。保留中の変更はフィールドごとに表示され、公開は意図的な次のアクションになります。ニュースとCSVインポートも同じルールに従います。
成果
成果
デスクトップ、タブレット、スマートフォンで動作するアプリで、顧客との会話、担当責任、来店予約、販売フォローアップを、在庫とウェブサイトの管理につなげます。サンプルデータでワークフローをお試しいただけます。変更内容はお使いのブラウザ内にとどまります。このデモはディーラーのウェブサイト、メール、SMSサービスには接続されていません。
© 2026 SKARR.PRO
言語を選択してください