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

  1. TOP
  2. 0からスタート ホームページ配色入門 : 第6回 誰でもできる色の整理方法

エキスパートコラム

0からスタート ホームページ配色入門(全6回)

第6回:誰でもできる色の整理方法

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

2014年10月20日更新

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

閲覧数5,874views

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

「0からスタート ホームページ配色入門」では、センスではなく、簡単な配色の知識やレイアウトのセオリー、情報伝達の基本を学ぶことで、あなたのホームページの目的を達成させるための配色を解説します。

最終回となる今回は、色が増えてきてわかりにくくなった時の対処の仕方や色のまとめ方を学び、多くの内容を掲載してもきちんと内容を読んでもらったり、画像バナーなどを見てもらえるようにしていきましょう。

色の数と分量を減らす

色数を減らす

配色は基本的に色の数や分量が増えるほどまとまりにくくなります。ここでデザインに慣れていない人は、新しい色を加えることで調整しようとすることがありますが、たいていの問題は多くの色をコントロールできていないことから生じていますので、「配色にまとまりがない」とか「にぎやかすぎる」と感じたら、まずは色数を減らすことができないかを考えてみます。

画面上で優先順位の低い情報、言い換えればそれほど目立たせなくてもよい部分の色を揃えることです。全ての部分を目立たせたいという気持ちはよくわかりますが、ここはリセットするつもりで画面上で重要な部分とそうでない部分には必ず優先順位を付けます。おおむね「最重要」「それなりに重要」「どちらかというと重要でない」くらいに分けられれば十分です。まったく不要な部分はそもそもホームページに掲載しないようにすればよいのです。

そして「最重要」でない部分の色を揃えたり、控えめにすることで、相対的に「最重要」の部分を目立たせることができるようになります。

色の面積を減らす

あるいは使う色の面積を減らすことでも、色を整理できるようになります。色は大きければ大きいほど、その印象も強くなるため、背景色ベタ塗りのように大きく使われている部分が強く見えます。

たとえばボタンなどに大きく色が使われているのであれば、ボタンの縁取り部分だけを残して、中の塗りつぶしをしないような感じで色を減らしていったり、見出しの色を左側のワンポイントだけにしてみるのもよいでしょう。

色を揃えるようにする

文章にはキーカラーを強調に

ホームページを作っていくうちに段々と使われる色は増えていくはずです。その時に思いついた色を何も考えずに使っていれば、色に統一感はなくなり、画面上はどんどん散らかっていきます。

文章中心のホームページであれば、段落ごとに色を変えたりしなければ、それほどおかしな色になることはありません。

キーカラーを見出しや強調で使うことは大きなメリットがあります。画面上部のヘッダで使われているキーカラーは画面をスクロールさせれば見えなくなってしまいますが、見出しなどで何度も使うことで、そのページの色の印象も残しやすくなります。また不要な色を増やさずに済むため、配色が苦手な人でもイメージが崩れにくくなります。

画像が多いページではキーカラーを繰り返す

特に画面上で色の混乱が発生しやすいのは写真や画像、キャッチコピーなどを一度にたくさん詰めこまなければならないネットショップや、さまざまな情報が1ページに詰め込まれたランディングページと呼ばれるような1枚もののページです。

伝えたい情報をできるだけ一度に見せようとすると、どうしても文字や写真はぎゅっと詰め込まれ、色が密集することで、それぞれの画像や文字が認識しにくくなってしまいます。看板が乱立する商店街のようなものです。

このような状態になると、画面内のどこに視線をやればよいかわからなくなり、重要な内容が伝わらなくなっていまいます。重要な部分を目立たせたり読ませたりするために色を使ったはずなのに、色の存在だけが目立ってしまい、その中で目立たせるためにまた多くの色を追加するという悪循環に陥っていきます。

画像が多く含まれるページでの色の使い方で最も重要なのは、それぞれの画像や文字などをより目立たせることではなく、メリハリを付けて単調にならないようにすることです。そのために、キーカラーを意図的に挟み込むことで、単なる画像の羅列ではなく、色を情報のまとまりにすることが可能です。簡単なのは見出しを入れたり、キーカラーを使ったブロック・囲みなどを追加します。あるいはキーカラーをメインに使った大きなバナーなども効果的です。

このような使い方をする場合、重要度の低い部分の色は彩度を下げた控えめな色に変更したり、可能であれば装飾のシンプルな文章を追加するなどをあわせて行うと、よりメリハリが付きます。

似たような情報をトーン(色調)を使ってまとめる

トーンでパーツ類の色を揃える

同じような明度と彩度の色をグループ化したものをトーン(日本語では色調)と言います。

同じトーンの色を使えば、「派手な感じ」や「落ち着いた感じ」などのイメージを伝えることができるようになるのと同時に、配色もまとまりやすくなります。

華やかにしたいときには鮮やかなトーンの色を選ぶようにし、控えめな感じにしたい時には落ち着いたトーンの色を使うようにします。

ただしどのトーンを選んでも、キーカラーを考慮せずに同じトーンの色だけで配色を行えば、全体のメリハリがなくなってしまい、焦点が定まらないぼんやりとした配色になってしまいます。

トーンを揃えるのであれば、ボタンの背景色のトーンを揃えて、文字は全て同じ色にまとめたり、複数が並ぶアイコンのような画面上の小さい部分の色をトーンで揃えたりすると、配色全体の統一感は失われにくくなります。

さいごに

6回にわたって色の基本的な扱い方について触れてきましたが、最も重要なのは上手く色を使うことではなく、伝えたいことを色のイメージや機能を使って伝えることにあります。無理に色を使うのではなく、情報を取捨選択し、重要でない部分の色は捨てることで、メリハリがついて自然に色の扱いも上達していきます。

プロのデザイナーであっても色を選ぶ際にはいつも悩んでいます。プロでない人が色で悩むのは当たり前のことですので、情報の重要度に合わせて色を少しずつ追加し、画面の色がおかしいと感じたり、どうしてよいか困ったときには、思い切って色を減らして整理することの繰り返しで、ホームページをどんどんブラッシュアップしていきましょう。

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

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

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

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

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

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

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

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

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

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

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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