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

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

エキスパートコラム

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

第9回:白を使ったホームページ

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

2015年12月7日更新

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

閲覧数3,771views

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

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

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

イメージを伝えられない白

インターネット上の様々なページを見ると、それがパソコンかスマートフォンかに関わらず、多くのページの背景色が白であることに気づくはずです。しかし、その背景の白を意識することはあまりなかったはずです。

普段当たり前のように背景に使われている白を意識的に使って、そのイメージを伝えるということは非常に難しいことなのです。ホームページに関する限り、写真やイラストを使って具体的なものを示さない限り、白は他の色に負けてしまって、イメージを伝えにくいということを覚えておきましょう。

真っ白な雪。ただの「白」では何のイメージも伝わらない

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

白で連想される
イメージ
威厳、神聖、明るい、空虚、軽い、平和、無、清潔、健康、無垢、祝福、純粋、新しい、冬、降参、善、冷たい、無罪
白で連想される物 うさぎ、豆腐、チョーク、牛乳、砂糖、紙、歯、障子、天使、白衣、病院、霧、綿、雲、紙

白を表現したいのであれば、具体的な物を写真やイラストで表現するのが簡単です。ですが「神聖」や「新しい」という抽象的な言葉を単に色を置くだけで伝えるのは難しいものです。

白のイメージを表現するなら写真。ウェディングと理解できれば色と意味がつながる

無垢や純血などの言葉に代表されるように、白は他の色と混じることで、その意味が大きく失われることがあります。もちろん色が純粋に1色でなくなるという意味もありますが、「空虚」「無」な中に別のものがあれば空虚ではなくなりますし、冷たい印象を出そうとしても、その他の色が混じっていればの暖かく感じられることもあります。

別の色が混じることで白の重要度が失われる。白い丸も線だけで赤丸や緑丸になる

少量の色が入るだけでも、「白」ではなくなることも多いため、もし伝えたいイメージに合う他の色があるのなら、他の色をメインの色とし、白はそれを補うために使うのが無難です。

どうしても白を主の色としたいという場合には、あらゆる部分をできる限り白くして、できるだけ色は写真でしか使わないようにするしかありません。おそらくそのようなページにした場合、写真で端的にイメージを表現できなければ、「なんとなくさみしい」というページになってしまいます。

そうならないためには高品質の写真を使うこと、写真以外にはほとんど色を使わないこと、またさみしい感じに負けず安易に他の色を足さない強い意志が必要になります。

白のイメージをメインにするのは、少なくともデザイン初心者は避けた方がよいでしょう。

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

ホームページの作成ということであれば、白は多くのページで背景として使われており、合わない業種というのはまずありませんが、上手く使わないとさみしいイメージになりますので、そうならないためには背景に少し薄い色を敷くだけでまったく印象が変わります。

このはじめてWEBでは非常に薄いオレンジが背景に使われていますが、これを白に変えると少し冷たい感じになり、初心者がとっつきにくい雰囲気になってしまいます。

はじめてWEBの背景の薄いオレンジは白のイメージを打ち消すためのもの

そして、ぴったり合うという業種というのもなかなかありません。強いて言えばウェディング関係や医療関係のページになるでしょうが、写真を優先して、細部まで配慮しないと白からは何も伝わらないことも多いでしょう。

取り扱っている製品や商品が真っ白である場合には、写真を白抜きにして、すっきりと仕上げることで白のイメージを伝えることはできます。そのような時でも白の意味を補強するイラストや写真がなければ、ただ余白が多いページになってしまいます。

白を中心にした配色は初心者でもプロでも難しいですし、筆者もまず挑戦しようとは思いません。

色選びの3つのポイント

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

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

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

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

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

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

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

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

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

コラム週間アクセスランキング[期間:2017/7/16~2017/7/22]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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