スマートフォンサイトを表示する

  1. TOP
  2. 業種別ホームページカラーガイド : 第9回 自動車・バイク関連のホームページの配色

エキスパートコラム

業種別ホームページカラーガイド(全12回)

第9回:自動車・バイク関連のホームページの配色

執筆:坂本 邦夫(フォルトゥナ)

2016年12月19日更新

  • このエントリーをはてなブックマークに追加

閲覧数557views

このコラムをPDF形式でダウンロードする

このコラムでは、業種ごとに「合う色と合わない色」「注意すべきこと」をまとめています。

毎回、異なる業種を取り上げて解説しますが、それらの業種でよく使われる色やたびたび見られる失敗があり、それにはきちんとした理由があります。それに加え、ホームページの色は、看板や紙のパンフレットと同じ色の場合であっても、画面の構成や使い方のポイントも異なります。

第9回目は自動車・バイク関連のホームページの配色です。

自動車・バイク関連でよく使われている色

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

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

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

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

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

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

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

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

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

トリコロールの配色例

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

色の使い方と配色のポイント

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

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

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

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

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

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

さまざまな青

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

青を使ったレイアウト

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

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

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

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

上記の色の組み合わせ

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

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

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

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

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

まとめ

  1. よく使われるのはあざやかな「赤・オレンジ」と「青・緑」の2系統
  2. 配色の際には「はっきりした3色でかっこよく」のうちの1色をメインの色とする
  3. 信頼感・技術力を表現したい場合には、青を選ぶ
  4. あざやかな色を画面全部で使うと、文字や写真に意識が向かいにくくなる
  5. 文字を読みやすくするなら縁取り。デザインに自身がないなら、最初から色を使わないこと。
  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

坂本 邦夫(さかもと・くにお)

坂本 邦夫(さかもと・くにお)

カラー&Webデザイン フォルトゥナ 代表
http://www.color-fortuna.com/

1973年、大阪府東大阪市生まれ。関西大学文学部史学地理学科卒業。
2004年、色彩に関するノウハウをまとめたウェブサイト「基礎からわかるホームページの配色」を公開。以後、Web制作コンサルティングを主な業務としながら、書籍や雑誌などへの寄稿・セミナーなどで、ウェブにおける色彩環境の向上を使命として活動。日本色彩学会正会員。

主な著書に『ウェブ配色 決める! チカラ - 問題を解決する0からスタート ホームページ配色入門』(ワークスコーポレーション)、『ウェブ配色 コーディネートカタログ』(技術評論社)など。

ウェブデザイン&配色の見本帳

  • はじめてWEB 大感謝祭!~新規加入または2年目更新をし、アンケートに答えてギフト券をもらおう!~
  • Jimdoリメイク | プロがあなたのホームページを今なら45,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/3/19~2017/3/25]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!