プロジェクトを相談 相談する
事例事例テンプレート · MV Agusta
モダンな黒いMacBookとiPhoneに表示されたMV Agustaディーラーのウェブサイト。ホームページには黄色のSuperveloce
MV Agusta自動車 · ディーラーのウェブサイトデザイン
ホームページの最初の画面:濃い赤の背景に黄色いモーターサイクルのクローズアップ、ウェルカムタイトル、在庫、特典、試乗についての一行
依頼を受けたデザインを、スタジオが実際に動くショールームとして実装

サービス

  • UX/UIデザイン
  • デザインシステム
  • フロントエンド開発
  • モーションデザイン

ツール

  • ブランドウェブサイト分析
  • 競合分析
  • ローカライズ調査
  • ユーザーフロー

技術スタック

  • HTML
  • CSS
  • Vanilla JavaScript
  • Web Animations API

MV Agusta

MV Agustaディーラーの依頼で制作したウェブサイトデザインを、のちに自社で実際に動くショールームとして構築しました。モデルの探索、在庫の選択、販売店へのお問い合わせまで、ブランドのビジュアルの個性が一貫して続く体験です。

ディーラーの二つの側面

ウェブサイトは購入者がモーターサイクルを見つけてお問い合わせをするのを助けます。ワークスペースは、その文脈をディーラーの日常業務に引き継ぐよう設計されています。これらのデモは別々に動作しており、接続はライブではありません。

ブリーフ

ブランドのエディトリアルなビジュアル言語をディーラーのウェブサイトに適用しました。購入者には、何があるのかを確認し、特定のモーターサイクルの詳細を比較し、販売店との明確な次のステップを見つけられることが求められました。

デザイン上の判断

提供された構成案を出発点に、ビジュアルスタイル、構図、コンポーネント、ページ順序の一部を見直しました。大きな写真がブランドを印象づけ、在庫カード、仕様、直接アクションが購入までの流れを支えます。

デザインの納品後、私たち自身で実際に動くウェブサイトとして構築しました。共通のページパターンにより、同じナビゲーション、モデルの見せ方、在庫の選択がショールーム全体に行き渡っています。

私たちの貢献

UX/UIデザインと再利用可能なコンポーネントを納品し、その後スタジオのプロジェクトとしてショールームのフロントエンドとモーションを開発しました。ブランドアイデンティティとモーターサイクルの画像はMV Agustaのものです。

オープニング画像の下に続くホームページ:状態、年式、価格を示す在庫の四台のモーターサイクル、「すべて見る」ボタン、続いて「試乗」と「サービス」のカード
在庫、試乗、サービスがショールーム内の最初の導線になります

入手可能なモーターサイクルを入口の近くに。

ホームページでは、オープニング画像のすぐ後に在庫を配置しています。状態、年式、価格が一緒に表示されるため、ディーラーが提供できるモーターサイクルについて最初の判断ができます。

試乗とサービスが直接アクションとして続きます。これらはディーラーを訪れる日常的な理由であり、ページの階層に明確な位置を占めています。

Dragster RR SCSのモデルカード:側面から見たモーターサイクル、角度を変える矢印、カラースウォッチ、六つの仕様、「在庫を見る」ボタン
モデルの詳細から同じモデルの在庫へ直接移動できます

次のステップをモデルのそばに。

モーターサイクル、利用可能なビュー、主要な仕様、「在庫を見る」を一貫性のある一つの商品カードにまとめました。購入者は実用的な情報を見失わずにモデルをじっくり確認できます。

「在庫を見る」は選択したモデルを在庫フィルターに引き継ぎます。これにより、表現力豊かなモデルページがディーラーの利用可能なモーターサイクルにつながります。

Dragster RR SCSで絞り込んだ「在庫のモーターサイクル」:価格、仕様、VINの一部、年式、走行距離、所有者数、カラー、「問い合わせる」ボタンを備えた一台
掲載中のモーターサイクル一台の詳細を含むDragsterセレクション

一台一台に固有の詳細を。

在庫の掲載にはモデル名以上の情報が必要です。提示価格、年式、走行距離、過去の所有者数、VINの一部をモーターサイクルの横に配置し、「問い合わせる」アクションを添えました。

ファミリー、モデル、状態のフィルターで一覧を絞り込み、並べ替えで価格と年式を比較できます。絞り込んだ表示は選択内容をURLに保持するため、共有できます。ここに表示している在庫はサンプルデータです。

Dragster RR SCSの最初の画面:暗い背景に赤と黒のモーターサイクルを大きく配し、モデル名と短いテキストを添えたもの
モデル紹介がスケールと個性を印象づけます
Dragsterのエディトリアルブロック:黄色いカウルの大きなクローズアップに、見出し「瞬時のスタートを支えるトラクションコントロール」と短いテキスト
クローズアップで一つの技術的特徴を集中的に説明します

購入までの流れ全体にブランドを貫く。

大きなモーターサイクルの画像、力強いタイポグラフィ、明暗のコントラストにより、ショールームは一目でMV Agustaとわかるものになっています。ブランドの写真を新しい構図とコンポーネントシステムの中で使用しました。

モデルページでは、技術的な詳細に独自のビジュアルリズムを持たせました。クローズアップ、明快な見出し、短い説明という構成です。モーションもこの階層に沿い、印象的なオープニングから、詳細部分では穏やかなトランジションへと続きます。

納品したデザインと、実際に動くショールーム。

依頼されたデザインを納品しました。その後、モデルページ、在庫フィルター、試乗、サービスを備えたこの28ページのショールームを自社で開発しました。表示版はサンプルコンテンツを使用しており、フォームは入力内容を検証しますが、送信はしません。

その他の事例

JA