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

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

エキスパートコラム

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

第5回:黒を使ったホームページ

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

2015年8月3日更新

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

閲覧数7,927views

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

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

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

「重い」意味を持つ黒

色には暗くなればなるほど、重く・堅く見えるという効果があります。全ての色の中で最も暗い色である黒は、その頂点に位置し、様々な大きな意味を持った色です。高級感や重厚感に代表されるようなイメージを作りたいときには欠かせない色なのです。

そのためホームページにおいても、様々な場所で使われている黒ですが、他の色との組み合わせ方によっては、伝えたいイメージがバラバラになってしまったり、まとまりにくくなることもある難しい色でもあります。

黒の中で光る様々な色のネオン。きれいだが、どれかひとつを目立たせるのは難しい

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

黒で連想される
イメージ
暗い・重厚・男性・抑圧・フォーマル・孤独・堅い・悪・高級・死・不吉・重い
黒で連想される物 夜・宇宙・闇・モダン・喪服・ピアノ・黒髪・カラス・葬式・大人・墨

黒から連想される言葉はいい意味も悪い意味も含めて、あまり軽々しい感じがしないものばかりです。その上、他に組み合わせる色によって、まったくイメージが変わってしまいます。計画的に配色ができなければ、あやしげな雰囲気に仕上がったり、下品でギラギラしたホームページになったりします。

色は暗くなれば重く感じられたりする。黒は軽いイメージを出すのには向いていない

黒の機能的な使い方として、白背景の上の文字の色が挙げられます。しかし、白背景の時に「わざわざ黒を使う」という意識をして使っている人は多くはなく、意識して黒を使わなければならないのは背景として大きく使う場合になります。

「重々しい感じ」と「不吉な感じ」では、同じ黒い背景であっても全然イメージは違うものになるはずです。そこで大事なのが「背景を黒とした場合、それ以外の色をどのように選び、どのくらいの分量で使うか」になってきます。

分量についてはシンプルに考えれば大丈夫です。ほとんどを黒にし、それ以外の色はほんの少しだけをポイントで使うようにします。それもできるだけ色数は減らすようにしましょう。

黒に少量の色を1色足した場合と、多くの色を足した場合のイメージの差

次に考えたいのは、どの色を選ぶかということです。

よく使われるのは高級感を出したい場合には、ゴールドやシルバーを組み合わせたり、重厚感を出したい場合には、ちょっと彩度を下げた暗めの色を組み合わせたりします。あざやかな色を加えると活発でスポーティーな感じが出たりします。

黒と他の色の組み合わせの一例

黒はとても強い力のある色ですが、派手さはない色ですので、あざやかな色の入った写真などがあれば、それを引き立たせることもできます。より中身を見せたい時に使うための機能的な色でもあるのです。

黒はどの色にも合いやすいが、あざやかな色は写真の良さを活かせない

黒が合う業種・合わない業種

黒を大きく使う業種と言えば、やはりホテルやレストラン・バーなどの夜の雰囲気を強く出したいページということになります。また伝統や文化などをアピールしたい学校や研究機関、しっかりした品質を表現したいメーカーなどでもよく使われています。

連想される言葉の中に「フォーマル」という言葉がありましたが、タキシードやドレスなどの具体的な物を販売しているサイトでは黒はよく見られますが、冠婚葬祭関連のサービスでは不吉なイメージを嫌うところから、黒はあまり使われていません。

黒を基調としたホームページ。色を写真に任せ、黒以外はボタンの色のみ。

ただし、黒の背景に白い文字だけでは、一時期流行った(今もありますが)あやしげな情報サイトに見えてしまいます。そして黒だけでイメージを完全にコントロールできませんし、それ以外の色も少量を使うのが基本ということであれば、実際に伝わるイメージの良さを左右するのは写真の出来の良さであると言えます。

他にもホームページのデザインそのものよりも、ページ内に配置した画像そのものが重要なホームページ(例えば写真家やデザイナーの作品を紹介するようなページ)などでは、黒かグレーを使って、使われている画像などを引き立たせることもできます。

夜や闇のイメージはやはり強いため、明るさや清潔感、軽さを表現したいというホームページには、はっきりと向いていません。

色選びの3つのポイント

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

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

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

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

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

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

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

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

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

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

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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