サックリ読めるWebページのカラーレイアウト配色比率を紹介します。
基本的な配色比率の値
「配色比率の基準」があり、
「メインカラーは70％」
「サブカラー（メインカラー/テーマカラー/ブランドカラー）は25％」
「アクセントカラーは5％」
言葉の違いだけですが、
「ベースカラーは70％」
「サブカラー（メインカラー/テーマカラー/ブランドカラー）は25％」
「アクセントカラーは5％」
とも呼ばれ、比率はそのようになっています。
配色に自信が無くてもこの数値を時々意識すれば、テーマカラーがぶれなくなります。
ちなみにこの数値は厳密に守らなければいけない訳ではありませんので、面積の広い順に「ベース」「サブ(メイン)」「アクセント」の順番が入れ替わらなければ問題ありません。
それでは、「Webページ」とはカテゴリが異なりますが、「ファッション」にこの比率を充ててみるとどうなるでしょうか↓
ストレートで大雑把などれも奇抜なサンプルではありますが；真ん中と右の二つは左の服装よりも少々覚悟がいるのではないでしょうか。
本題の、Webページの配色比率の説明を始めます。
無彩色のサブカラー(メインカラー)レイアウト
無彩色だけですと、優先度の低い雑誌のモノクロ巻末ページようで何とも主張がなく落ち着いた寂しいイメージです。
なかなかWebページとして運用するには現実的ではありません。
有彩色のサブカラー(メインカラー)レイアウト
サブカラー(メインカラー)に有彩色のオレンジを充てました。
サブカラーはメインカラー/テーマカラー/ブランドカラーを表すので、活動感がでて、ページ内構成のプライオリティ/優先度も上がりました。
それでも決め手に欠けます。
アクセントカラーを追加した配色レイアウト
アクセントカラーのブルーを構成に加えると、「NEW」「新着」「おススメ」など利用者に対してポジティブなピックアップしたい、インフォメーションをさりげなくしたい部分が引き立ちます。
使用する色は原則、サブカラーで使用している色と「補色関係」にある暖色/寒色の色を充てていきます。
アラートカラー/注意喚起文言色を追加
ページ下部に書かれている「注意文言」については、今回の話題とは別になりますが、「アラートカラー」である「赤」は、利用者へ潜在的に注意を促す色であるため、配色比率が少ない小さな文字でも非常に目に入ってきます。
Webページでは、主に、注意を促したい場合やエラー画面での文字色として使用することで、利用者に正常遷移からの離脱を伝えられます。
ベースカラーの配色について
ベースカラーはページの大部分を占めるため、白以外の色に変更することでページの表情を大きく変えてしまいます。
最近では「ダークモード」を選べるOSと連動もするアプリケーションが増えてます。
ベースカラーの扱いとしては「白」か「黒」、「25％以下の薄い有彩色」になり、サンプル画像のような強い有彩色は「強いメッセージ」を伝えるランディングページ/特設ページでの運用に向いています。
重要）基本の配色比率が崩れるカラーレイアウト
「サンプル例」の真ん中は、「サブカラー(メインカラー)」をテキスト本文にも使用しているため、まとまり過ぎてしまっています。
原因は、配色比率が問題無くても、ページ構成として構成要素の多い「本文テキスト」に有彩色を使っているためです。
「サンプル例」の右は、どの項目もプライオリティ/優先度を上げて伝えたいためにアクセントカラーの割り当てを増やしたことが原因です。
アクセントカラーは5％程度におさめて必要最低限の訴求に充てていきましょう。
さいごに
以上のようにカラーレイアウトと配色比率例を紹介してきましたが、「基本だけにとらわれてもいけません」、強く主張したいここぞの部分では大胆に攻めて利用者と対話していきましょう。
※画像の配色比率については「配色 比率 調べる」等で検索すると、測定サイトがいくつか表示されます
次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。
他の記事をさがす ⇒ 記事一覧へ