ユーザー体験を拡張する「オンラインショールーム」の構築
2003年当時、ブロードバンドの普及とともに企業のウェブサイトは単なる会社案内から、より能動的なマーケティングツールへと変貌を遂げる過渡期にありました。 本プロジェクトでは、ダイハツ工業株式会社様の「オンラインショールーム」および「カーラインアップ」の構築において、ユーザーが画面越しに実車の魅力を体感し、購買意欲を醸成するためのインターフェースデザインを担当しました。 当時の自動車業界におけるウェブサイトの課題は、多岐にわたる車種情報やスペックをいかに整理し、ユーザーのライフスタイルに合致した形で提示できるかという点にありました。 本デザインでは、情報の網羅性と視認性の両立を最優先事項として掲げ、プロダクトの個性を際立たせる情報設計を行っています。目的別アプローチによる直感的なナビゲーション
トップページおよび「目的別クルマ選びガイド」では、ユーザーの利用シーンを「デイリーユース」「経済性」「アウトドア」「個性派」という4つのセグメントに分類。 単にスペックを並べるのではなく、ユーザーの生活にその車がどう関わるのかという「ベネフィット」を起点としたデザインを採用しました。 これにより、膨大なラインアップの中から、ユーザーが自分に最適な一台へと迷わず到達できる導線を確保しています。 視覚的には、当時のダイハツが掲げていた「ワンダフル スモール」というブランドメッセージを体現するため、清潔感のあるホワイトスペースを基調とし、コーポレートカラーである赤を効果的に配置。軽自動車というコンパクトなプロダクトが持つ、軽やかさと信頼感を共存させたビジュアルアイデンティティを構築しました。プロダクトの魅力を引き出すグリッドレイアウトとUX設計
「カーラインアップ」のページでは、多種多様なモデルを一覧比較できるよう、厳格なグリッドシステムを採用しました。各車種のサムネイル画像、価格帯、燃費、低排出ガスレベルなどの主要データを同一フォーマットで構成することで、情報の比較検討を容易にしています。 また、各詳細ページへの遷移を促すインタラクションにおいても、ストレスのないユーザビリティを追求しました。- ライフスタイル軸の情報設計：ユーザーの利用目的に合わせた4つのカテゴリー提示により、潜在的なニーズを顕在化させるUXデザイン。
- 視認性の高い比較インターフェース：車種ごとのスペックをアイコンやグラフで視覚化し、一目で特徴が把握できるデータ表示の最適化。
- ブランドメッセージの視覚化：「ワンダフル スモール」の世界観を、タイポグラフィとクリーンなレイアウトでウェブ上に再現。
- プロモーションの統合：CM情報やキャンペーン情報など、TVメディアと連動した最新コンテンツへのアクセス性を高める情報配置。
時代を反映したメディアミックスとコンテンツの連動
本サイトでは、Copen（コペン）やMira AVY（ミラ アヴィ）といった主力車種のプロモーション活動と密接に連動。CMライブラリや撮影エピソードを掲載する「CMで気になるあのクルマ」コーナーを設けるなど、ウェブサイトを単なる情報保管庫ではなく、多角的なメディア体験のハブとして機能させています。 当時の技術的制約の中で、いかにリッチなコンテンツを効率的に配信するかという点においても、緻密なコーディング設計とデザインの調和を図りました。信頼と親しみやすさを両立するデジタルコミュニケーション
この2003年のプロジェクトは、自動車という高関与商材において、デジタルの接点が顧客との信頼関係構築にいかに寄与できるかを追求した一例です。 MARZ DESIGNが重要視している「情報の整理（インフォメーション・アーキテクチャ）」と「情緒的価値の伝達（ビジュアルデザイン）」の融合により、20年以上が経過した現在でも色褪せない、目的意識の明確なデザインソリューションを提供しました。Constructing an “Online Showroom” Expanding the User Experience
In 2003, along with the proliferation of broadband, corporate websites were in a transitional phase, transforming from mere company profiles into more active marketing tools. In this project, for the construction of Daihatsu Motor Co., Ltd.’s “Online Showroom” and “Car Lineup,” we were in charge of the interface design to let users experience the appeal of actual vehicles through the screen and foster their purchasing intent. The challenge for websites in the automotive industry at the time lay in how to organize a wide variety of model information and specifications and present them in a form that matches the user’s lifestyle. In this design, we positioned balancing information comprehensiveness with visibility as the highest priority, executing information design that makes the individuality of each product stand out.Intuitive Navigation via Objective-Based Approaches
On the homepage and the “Car Selection Guide by Objective,” user utilization scenes were classified into four segments: “Daily Use,” “Economy,” “Outdoor,” and “Individualist.” Rather than simply listing specifications, we adopted a design rooted in the “benefits” of how the car relates to the user’s life. This secures a flow that allows users to reach the single vehicle best suited for them from a vast lineup without getting lost. Visually, to embody the brand message “Wonderful Small” that Daihatsu championed at the time, the visual identity was based on a clean whitespace with effective positioning of corporate red. We constructed an identity where the lightness and reliability possessed by compact products like mini-vehicles coexist.Grid Layouts and UX Engineering Drawing Out Product Appeal
On the “Car Lineup” page, we adopted a strict grid system so that a wide variety of models could be compared at a glance. By configuring key data—such as thumbnail images, price ranges, fuel economy, and low-emission levels for each model—in the same format, we made comparing and reviewing information effortless. Furthermore, we pursued stress-free usability in the interactions prompting transitions to each detailed page.- Lifestyle-Axis Information Design: UX design that brings latent needs to the surface by presenting four categories tailored to the user’s purpose of use.
- Highly Visible Comparison Interfaces: Optimizing data displays to grasp characteristics at a single glance by visualizing specifications for each model with icons and graphs.
- Visualizing the Brand Message: Recreating the worldview of “Wonderful Small” on the web through typography and clean layouts.
- Promotion Integration: Information placement that elevates accessibility to the latest content interlocking with TV media, such as commercial information and campaign updates.
Era-Reflecting Media Mixes and Content Interlocking
This site closely interlocked with promotional activities for core models such as the Copen and Mira AVY. By establishing a “That Car in the TV Commercial” corner featuring commercial libraries and filming episodes, we operated the website not as a mere information repository but as a hub for multifaceted media experiences. Even regarding how to efficiently distribute rich content within the technical constraints of that era, we aimed for harmony between meticulous coding architecture and design.Digital Communication Balancing Trust and Approachability
This 2003 project stands as an example of pursuing how digital touchpoints can contribute to building relationships of trust with customers for high-involvement products like automobiles. Through the fusion of “organizing information (information architecture)” and “transmitting emotional value (visual design)” that MARZ DESIGN prioritizes, we delivered a design solution with a clear sense of purpose that remains unfaded even now, more than 20 years later.■ 本WEBサイトに掲載されている、会社名、商品名、サービス名、ブランド名、ロゴマーク、サービスマーク、スローガン、キャッチコピー等の著作権・商標権は、各権利所有者に帰属します。■ 本コンテンツは、著者の制作実績およびスキルの紹介を目的として掲載しており、権利を侵害する意図はございません。■ 制作実績のうち、直接取引以外の案件につきましては、広告代理店、コンサルティング会社、制作会社等のパートナー企業様との提携、あるいは仲介による制作実績となります。■ 本ポートフォリオへの掲載に問題がある場合は、お手数ですがお問い合わせフォームよりご連絡ください。迅速に対応をさせていただきます。
