自動車・モビリティのホームページデザイン事例｜用途別の選び方と制作のポイント

公式案内から比較できる点

トヨタコネクティッドのデザイン組織を紹介するサイトです。AboutとMembersで活動やメンバーを案内し、UI、サービス、リサーチ、開発などの役割や外部の発信・採用情報につなげています。

自社で取り入れる場合：組織の活動紹介と商品購入を分け、公開できるプロジェクト、担当者の役割、採用先への案内をそろえます。

公式案内から比較できる点

日産グループのクルマづくりと幅広いビジネスを支援する会社です。エンジニアリング、カーライフサポート、ビジネスサービスの3分野を案内し、開発・品質関連に加えて販促、福利厚生や施設管理なども扱っています。

自社で取り入れる場合：事業の対象者と相談先を対応させます。拠点、取引先向けの情報、採用情報を分け、事業範囲を一つの専門業務だけで代表させないようにします。

公式案内から比較できる点

オープンソースの自動運転ソフトウェアAutowareを軸に、導入・運用・開発のサービス、製品、プロジェクトなどを紹介しています。掲載中の旧URLは、確認時点でtier4.co.jpへ転送されました。

自社で取り入れる場合：研究開発の説明、提供する製品・サービス、導入相談を分けます。技術紹介を、そのまま安全性やあらゆる環境での実用化の保証と読める表現にしないようにします。

公式案内から比較できる点

完全自動運転の実現を目指す開発企業です。E2Eの自動運転とAIに関する考え方、技術ブログ、会社・採用情報を案内しています。旧URLは確認時点でtur.ingへ転送されました。

自社で取り入れる場合：目標と実現済みの機能・実績を区別します。技術職向けの詳しい説明と、会社を初めて知る人向けの事業説明を用意します。

公式案内から比較できる点

GO株式会社によるEV導入・運用支援のサービスです。車両リース、充電インフラ、エネルギーマネジメント、導入事例、資料などを案内し、充電サービスには法人・個人向けの入口があります。

自社で取り入れる場合：車両、設備、運用のどの範囲を支援するかを説明します。費用や補助制度の案内には適用条件と確認時点を付け、導入効果を一律に保証しないようにします。

公式案内から比較できる点

車載電池を開発・製造・販売する会社で、旧社名はプライムアースEVエナジーです。ニッケル水素電池・リチウムイオン電池、受託試験、製造工程、品質、サステナビリティ、採用などを案内しています。

自社で取り入れる場合：企業理念だけでなく、製品の種類、技術、相談対象を示します。旧社名を知る訪問者にも会社のつながりが分かる説明を用意します。

公式案内から比較できる点

EVの企画・製造・販売に加えて、軽キャンピングカーも扱う会社です。企業情報、製品、採用、販売パートナー募集などを案内しています。

自社で取り入れる場合：企業の紹介と製品ごとの購入検討を分けます。仕様、購入先、サポートの条件を整理し、製品ごとに必要な利用条件は公式資料で確認できるようにします。

公式案内から比較できる点

自動車と航空宇宙の事業を紹介する企業サイトです。企業情報、IR、ニュース、サステナビリティ、採用に加え、自動車の商品サイトなどへの案内とリコール等の重要なお知らせを掲載しています。

自社で取り入れる場合：投資家、応募者、購入検討者、既存の利用者に必要な情報を分けます。企業の発信と、利用者が確認すべき重要情報の両方へ到達できる構成にします。

公式案内から比較できる点

長野県長野市の自動車整備会社です。特殊車両・一般車両の整備、車検・点検、修理、販売を案内し、電話・問い合わせフォーム、営業に関するお知らせ、採用情報を掲載しています。

自社で取り入れる場合：対応車種と作業範囲、所在地、営業日、相談方法を具体化します。予約方法、見積もりに必要な情報、追加作業の確認手順などを、自社の実際の運用に合わせて案内します。

公式サイトの画面で確かめられる点

ファーストビューは、ポルシェの車両を低い位置から撮った写真を全面に使っている。

上部のメニューは、車両販売、在庫車両、カスタム、メンテナンス、ギャラリーなど7項目で、右端に白い「お問い合わせ」ボタンを置いている。

右端に縦書きで、オリジナルブレーキキットなどの入口を出している。

自社で取り入れる場合：車両は店の前で撮った大きな写真を1枚使う。販売、整備、カスタムなど事業ごとの入口を、メニューと右端に分けて置く。

公式サイトの画面で確かめられる点

左に「凹んでも、凹まない。」と大きく書き、その下に英語の一文を添えている。

右は、整備士と車のボンネットを撮った写真を丸い形で切り抜いている。

上部のメニューは、事業案内、施工実績、採用情報など7項目。

自社で取り入れる場合：店の考え方を短い一文にして最初に出す。写真は働く人と車が一緒に写ったものを選び、切り抜きの形を決めて使う。

公式サイトの画面で確かめられる点

左3割を暗いグレーにして、「安全に 正しく 丁寧に」と店名を縦に並べている。

右は、工場で作業する人の後ろ姿を暗い色調で撮った写真で、複数枚を切り替える。

上部に電話番号を大きく出している。

自社で取り入れる場合：作業する人の後ろ姿や工具など、現場の写真を暗い色調にそろえる。電話番号は最初の画面の上部に大きく置く。

公式サイトの画面で確かめられる点

ファーストビューは、緑色の車の形をした枠に文字を入れ、右の枠に赤い車の写真を載せている。

左上のロゴの横に、橙色の「中古車買取希望はこちら」ボタンを置いている。

最初の画面の下にお知らせを1件、日付つきで出している。

自社で取り入れる場合：車の形を使った図形でコピーと写真を分けて載せる。買取の入口は、ロゴの隣に目立つ色のボタンで固定する。

公式サイトの画面で確かめられる点

上部の黒い帯に、ロゴを中央に置き、左右に8項目のメニューを並べている。

右上に電話、メール、Instagram、Facebook、LINE のアイコンを並べている。

帯の下は、販売車両の写真を全面に使い、切り替える。

自社で取り入れる場合：在庫の車は、現物の写真を大きく見せる。連絡手段は、電話やLINEなど複数をアイコンにして右上に並べる。

公式サイトの画面で確かめられる点

ファーストビューは、メルセデス・ベンツの車の写真を、左右に隣の画像をのぞかせて切り替える形で置いている。

写真の上に「年間販売台数5,000台以上の実績」と数字を大きく出している。

画面下に、ほかの7枚の画像を小さく並べている。

自社で取り入れる場合：販売台数など数字で言えることは、写真の上に最初の画面で書く。ほかの特集も小さく並べて、切り替えの入口にする。

公式サイトの画面で確かめられる点

ファーストビューは、車のイラストを中央に大きく置き、背景は薄い緑の1色にしている。

左上に「自分らしい車にカスタマイズ」と書き、下に「SELECT A CAR」の切り替えを置いている。

右下に黄色の「カタログ請求」ボタンを固定している。

自社で取り入れる場合：車種を切り替えながら見せる場合は、背景を1色にして車だけを大きく置く。資料請求のボタンは、ほかの色とは違う色で固定する。

公式サイトの画面で確かめられる点

ファーストビューは、電動の自転車、スクーター、小型車を3DCGで白い背景に並べている。

左に5項目のメニューを縦に置き、その下にキャッチコピーを大きな英字で載せている。

背景の色は白と緑の2色に絞っている。

自社で取り入れる場合：実車の写真が使えない場合は、3DCGやイラストで商品を並べる。色を2色までに絞り、メニューは左に縦にまとめる。