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

  1. TOP
  2. 自分のホームページに合う色の選び方 : 第12回 灰色を使ったホームページ

エキスパートコラム

自分のホームページに合う色の選び方(全12回)

第12回:灰色を使ったホームページ

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

2016年3月7日更新

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

閲覧数3,863views

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

この連載では色のイメージとホームページの色が合わなければ、せっかく内容がよくできても、訪問者は中身を読まれずに去ってしまうこともあります。この連載では訪問者のイメージに合わせることができるように、色のイメージとその心理的な効果を説明し、色によって向いているサイトと向いていないサイトを解説していきます。

第12回目は灰色の持つ意味や心理的な効果、それに向いたホームページと向かないホームページについてまとめています。

白と黒の間の灰色

この連載もいよいよ最終回、最後の1色となりました。今回は灰色の使い方について考えてみましょう。

白でも黒でもない灰色は、「グレーゾーン」に代表されるようにはっきりしない場合に使われることが多い色です。ファッションなどでは無難な色として使われていますが、また同じ灰色でも明るい灰色と暗い灰色では受ける印象も変わってきます。

他のどの色と組み合わせられるか、写真と上手く見合わせられるかが、灰色を使う上でのキーポイントです。

暗い空は灰色の濃淡で明るい印象は感じられない

灰色のイメージと基本的な使い方

灰色で連想される
イメージ
陰気、穏やか、上品、疑惑、無機質、落ち着き、信頼、クール、スタイリッシュ、寂しさ、憂鬱、不安、あいまい、地味、迷い、薄暗い
灰色で連想される物 ビル、煙、灰、石、砂、ねずみ、コンクリート、雲、セメント、廃墟、都会、冬空

灰色の持つよいイメージはクールやスタイリッシュというところにあります。では全面に灰色を敷いたホームページがクールかというとそういう訳ではありません。コンクリートやセメントのイメージから、冷たく無機質に感じられることもあります。

灰色をかっこよく見せるための基本は、黒や鮮やかな色を使って、しっかりと明暗で差を付けることと、直線的なパーツを組み合わせることです。これによってぼんやりとした灰色が引き締まって見えます。

黒、鮮やかな色を組み合わせた灰色で引き締まった表現に

明るく柔らかい表現をしたいのであれば灰色はあまり向いておらず、はっきりとした白をつかうべきです。検索エンジンやFacebookなどの背景は白です。そのような白いページから灰色のページに移動すると、どうしても暗く感じられてしまいます。暗さやおちついた雰囲気を表現したいという目的であればよいのですが、そうでなければ白を選ぶのが無難です。

大きな灰色の背景は暗く感じられ、明るいイメージを出したい時には不利になる

また曲線はもやもやしたイメージが出やすいため、灰色のシャープな部分を出したい場合には、できるだけ直線的な形にします。もちろん雲や煙などの具体的なイメージがある場合には、曲線を使いましょう。

もやもやした灰色と直線の灰色

灰色が合う業種・合わない業種

灰色があまり主張をしない色であることから、写真やイラストなどを引き立たせるような業種で多く使われています。例えば写真家やデザイナーが自分の作品を展示するギャラリーページ、ファッションブランドなどがその代表例です。

赤や緑・青と言った色みのある色(有彩色と言います)を背景に使うと、背景の方が目立ってしまい、写真のよさを活かしにくくなります。写真や作品で使われている色は様々で、どこにどのような色が使われているかわからないことも多いため、どんな色とでも合わせやすい灰色は、作品を見せるというホームページの目的に最適なのです。

並んだ写真の背景で使われた灰色。鮮やかな色は写真より背景に視線が向かいがち

またその無機質なイメージから、機械・金属部品を扱うような企業でもよく使われます。暗めの色や黒と組み合わせて使われることも多いです。

さらに男性向けのページでは青系の色と、女性向けのページでは赤系や紫系の色・シルバーやゴールドと組み合わせられています。いずれもしっかりとしたきれいな写真があってこそ活きてくる配色です。他の色と組み合わせる場合には、灰色の分量をできるだけ多く、追加する色をできるだけ小さく使うようにしましょう。そうしなければ地味な灰色は他の色の強さに負けてしまいます。

男性向け・女性向けでよく見られる灰色の組み合わせ例

灰色はホームページでは主役ではなく、写真などの何かを引き立たせるための色であると考えて配色を行えば、灰色と他の色のよさの両方が出て、少ない色数でまとまりのいい配色に仕上がります。

最後に

全12回の連載で、赤・青・緑・黒・オレンジ・ピンク・黄・白・茶色・紫・灰色と11色の色の様々なイメージや使い方について解説してきました。これらの色のイメージや使い方はあくまで基本で、時には例外も存在します。

しかし、例外にたどり着くためには、ホームページの「目的」に合った色かどうかを考えて、基本から外れていてもよいのかどうかを見極めることが重要です。ホームページの主役はあくまでも中身なのです。その大事な主役を作る人の好みだけで損ねてしまうことがありますが、これはあまりにももったいない話です。

また一度決めた色を使い続けることで、訪問者に覚えられやすくなるという効果もあります。そのためにも最初に1色を決めるときに、できるだけ慎重に考え、その後変えなくてもいいように、しっかりしたイメージを持って色を選ぶように心がけましょう。

色選びの3つのポイント

  1. 色を選ぶ場合には、「この色を使いたい」だけでなく、「この色は使わない方がよい」というマイナスのイメージや訪問者の期待する色も合わせて考える
  2. どんな色でも使いすぎると中身の邪魔をする。多く使いたい場合には文章が入らない部分の背景に色を使うようにする
  3. どの色を選ぶか迷ったら、周囲の3人以上の人に聞くこと。1人だけに聞くと好みだけを言われ、意見が分かれるだけのこともある
  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

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

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

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

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

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

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

  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

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

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

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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