【自動車整備・販売会社】参考になるホームページ制作デザイン11選

自動車業界の裾野は広く、大手の販売会社以外にも、整備会社やカーディーラーなど様々な関連サービスがあります。

そこで今回はそのような自動車関連サービスのホームページの中から、爽やかだったり、かっこよく印象に残ったWebサイトをご紹介していきます。

爽やかな雰囲気のデザイン

下原自動車株式会社

https://shimohara-auto.co.jp/

白地の背景で明るく爽やかな雰囲気で、親しみやすさを感じられます。整備士さんの写真や、「凹んでも、凹まない」というキャッチフレーズで、車のトラブル時にサイトを開いたユーザーにも安心感を与えます。

スクロールすると、英字のキャッチフレーズが右から左に流れ、存在感を示しています。装飾的な役割も果たしつつ、キャッチフレーズ自体も印象付けています。

MOBY DICK(モビーディック)

https://www.flexnet.co.jp/mobydick/

メインビジュアルのアニメーションが面白いです。キャンピングカーとキャンプの様子の画像がカルーセル式で入れ替わりますが、次の画像が新しい画像を押し出すような形で流れてきます。
ナビゲーションはほとんど英字ですが、ヘッダーのメニューにオンマウスすると、英字が日本語訳に入れ替わり、わかりやすいです。デザイン性を保ちながらも、わかりやすさが担保されています。

吉見自動車株式会社

https://www.yoshimi-auto.com/

ページを開くと真っ白の背景に紺色のフォント、鉛筆のようなタッチのイラストが配置されています。これだけでもシンプルでお洒落な印象なのですが、中央のボタンにオンマウスすると、以下のように、左右それぞれが黄色で網掛けされ、英字のアイコンの日本語訳が表示されます。

サイト全体にイラストが配置されていて、イラストがメインのセクションもあり、絵本のように楽しくサイトを読み進められます。

Make Your own RENOCA | Renoca by FLEX

https://www.flexnet.co.jp/renoca/simulator/

ページトップには様々な車種の車のイラストが、アニメーションでテンポよく入れ替わります。イラストも写真のような高クオリティで、つい見入ってしまいます。

スクロールするとカタログのように車のイラストが並んでいます。詳細ページに遷移する前に価格帯が分かるのが安心できるポイントです。ファッション性が高くトレンドに敏感な潜在顧客に訴求しそうなサイトになっています。

シックな雰囲気のデザイン

エヌティサービス

https://www.ntservice.co.jp/

磨き上げられた車体の画像がメインビジュアルに大きく使われ、コーティング技術の高さが伝わります。黒字の背景にゴールドと白の細いフォントが、画像の光沢をさらに引き立て、全体として高級感ある雰囲気が作られています。

下層ページには施工前後のリアルな写真が貼られているので、信頼感がさらに増します。

株式会社四日市モータース商会

http://y-motors.jp/

レトロな雰囲気漂うメインビジュアルです。ページを開くと、キャッチフレーズと画像がアニメーションで順番に表示され、世界観に引き込まれます。モノクロの写真と白字のキャッチフレーズ「創業 昭和五年。」がマッチし、古き良き伝統ある企業の味わい深さが伝わります。

V2-Style

https://www.v2-s.net/

スクロール時のアニメーションが気持ちの良い、お洒落なデザインです。黒地の背景に画像・アニメーションが全面的に差し込まれ、文字は英字がメインでデザイン性が高いですが、オレンジの差し色が効果的で、素早くスクロールしても重要な情報を逃しにくくなっています。下層ページはテキストがメインで、情報量がかなり充実しています。

早川自動車整備工場

https://www.hayakawa-jidousya.com/

黒地の背景に工場での整備風景の写真がスライドで流れ、ドキュメンタリー映画のような世界観に引き込まれます。

スクロールするとどこか懐かしさを感じる工具の画像が並んで現れます。「昭和19年創業」という歴史的背景とも調和した、企業の伝統や熟練の技術を感じさせるデザインです。

シンプルなデザイン

ガリバー【公式】

https://221616.com/

大手ならではの、機能性重視のデザインです。メインビジュアルとして大きくコンバージョンボタンと検索フィルターのボックスが配置されており、ユーザーアクションを促します。

評価・口コミがポイント制で表示されているページもあり、企業・店舗への信頼感も高まります。あまり良くない口コミもそのまま掲載されており、企業の真摯な姿勢が伝わります。

Honda Cars東京中央

https://www.hondacars-tokyochuo.co.jp/

メインビジュアルに大きくナビゲーションメニューが配置されていて、機能性が高いですがデザインにも工夫が見えます。ボタンにオンマウンスすると、ボタンの内容に合わせて背景の写真が変わります。「事故・トラブルはこちら」というボタンは赤色目立つように中央に配置されていて、緊急時にもすぐに必要な情報にアクセスできます。

ボルボ・カー大阪中央

https://osakachuo.vc-dealer.jp/

シンプルですが高級感があり、欲しい情報もすぐに目に入ってくる、機能性もデザイン性も高いサイトです。白地の背景に車の画像が並び、ショールームにいるような感覚を味わえます。ヘッダーのメニューは予約ボタンのみで、他のページへのアクセスはハンバーガーメニューを通じて行右ようになっています。予約関連のメニューだけを目立たせることで、ユーザーのアクションを促す効果がありそうです。