自動車・バイク関連のホームページのおすすめ配色の見本（第9回）

自動車・バイク関連のお店などの色は非常にはっきりした傾向が表れています。このような業種のホームページへの訪問者は「バイク屋さんのホームページはこんな感じ」という印象が固まっています。よほど他と違う特徴がないのであれば、基本に沿った配色をしていかなければ、「思っていた印象と違う」と感じて、ページから去られてしまうこともあるため注意が必要なのです。

それではまず基本となる色を見ていきましょう。主に以下の2つに分けられます。

1. あざやかな赤・オレンジ・黄
2. さまざまな青

最も多く使われているのは、あざやかな赤とオレンジ、その次に青となり、これらの2つのパターンで大半を占めると言ってもよいくらいです。

自動車・バイク関連で多く見られる色

もちろん特定のメーカーや商品を応援しているようなショップでは例外もありますが、紫やピンク・パステルカラーなど柔らかい・女性的な印象のする色はまったくと言ってよいほど見られません。

また金属的な製品ですので、木を連想させるような茶色は見られません。緑も自然を連想する色ですが、バイク関連のショップなどではちらほらと見受けられます。これはカワサキのバイクの色によるものかもしれませんが、自動車関連ではあまり見られません。

10年くらい前は自動車に関するホームページは白背景、バイクに関するホームページは黒背景という傾向が見られましたが、最近ではどちらも背景は白にしたホームページが多いようです。いずれの場合にもあざやかな色が使われ、派手な印象にまとめられています。

このような色の組み合わせをトリコロール配色（フランス語で3色の意味）と言います。トリコロールは国旗などでよく見られる配色で、単に3色であればよいのではなく、それぞれの色がしっかりと存在を主張するような組み合わせのことです。

トリコロールの配色例

例のような「はっきりした3色」のうち、あざやかな色のいずれかをメインで使う色にすると、自動車・バイク関連のページでよく見かける配色が出来上がります。

自動車やバイク関連のページであざやかな色を使う場合にもっとも重要なことは、メインの色を1色決めてしまうことです。色が増えれば増えるほどにぎやかになってしまいますが、強い色を同じくらいの分量で使うと、どっちつかずで画面が騒がしい印象になります。

色の扱いが苦手ならば、まず赤・オレンジ系統か青・緑系統のどちらで配色するかを決めてしまい、ほんの少しだけ別の色を使うようにすると配色はまとまりやすくなります。また白と黒は大きく使っても問題ありませんし、黒を意識して使うだけでも画面が引き締まって見えます。

あざやかな赤・オレンジ・黄

あざやかな色の中でも、赤やオレンジ・黄のような暖色系の色は特にエネルギッシュな色です。車・バイクをはじめ、スポーツ屋やエネルギー関連などのページで多く使われていますが、黒や暗いグレーと組み合わせることで、より力強さが増すように感じられるため、ボタンやサイドバーのメニューの背景に黒を使っているページが多く見られます。

黒とあざやかな色の組み合わせ

ホームページは色を見せるためのものではなく、文章や写真を見せるためのものなので、あまり色そのものが主張しすぎないように、あざやかな色が多くなりすぎないように注意します。

さまざまな青

青は赤・オレンジに比べると幅広い使われ方をしています。明るく薄めの水色が使われることもあれば、暗い紺色が大きく背景に使われることがあります。

青を使ったレイアウト

緑も一部で見られますが、使い方は青とほぼ同じようになります。ただし青に比べると非常に少ないです。デザインに自信がなければ使わない方が無難でしょう。

販売店よりも修理工場やカスタムバイクなどの技術や工場を持ち合わせた企業・店舗のホームページで青が使われる傾向にあり、信頼感や技術力の高さを表現しようとしている様子がうかがえます。

また赤やオレンジに比べると、色そのもののエネルギッシュな印象は少なく、大きめに使っても問題ありません。ただし、あざやかな青を全面に敷き詰めるような配色は、目がチカチカしますし、写真の色の印象を麻痺させてしまうため、避けなければなりません。

地味な色ほど大きく使いやすい

上記の色の組み合わせ

パーツ類や車検などのように商品やサービスを売っているお店などでは、暖色同士を重ね合わせたり、暖色と青の異なる系統の色を重ねて使っているのが多く見られます。特に車やバイクの本体ではない部品や目に見えないサービスを売っている場合は、写真では細かい部分も伝わらないことも多く、結果として写真以外の部分を目立たせようとして色数が増え、派手になっていく傾向があります。

しかし、どんなに派手にしたいと思っても、常に文字が読めるように、縁取りを上手く使うなどして、文字がきちんと読めるように常に意識しておきましょう。

文字を読みやすくする縁取りを付けた例

縁取りをしたからと言って、色を詰め込めば目立つというものではありません。デザイン技術がないのであれば、最初から色付きの文字にせず、白か黒の文字を使った方が、内容は伝わります。ワードアート（Wordの文字加工機能）などを安易に使うと、ページ全体が安っぽく見えてしまい、ホームページに大事な信頼感が損なわれます。

つい派手になりがちな業種ですが、それぞれの文章がきちんと読める範囲で、色を増やしていかなければなりません。