menu

Webサイトの配色に取り入れたい「70・25・5の法則」

ディレクター心得

Webサイトの配色を決めるためには、それぞれの色の特徴・効果とあわせて効果的な配色パターンを知っておくことも大切です。クライアントに対するプレゼンテーションや打ち合わせの際もあいまいなニュアンスではなく、ある程度理論づけて配色を説明することができれば、おのずと説得力も増し、クライアントからの信頼感もアップするでしょう。

70・25・5の法則

Webサイトで使う色は多くても3色程度にとどめておくのが有効です。色の種類が多すぎると雑多でまとまりのない印象を与え、サイト全体が安っぽいイメージになります。また、強調したいポイントやクリックできる箇所も分かりにくくなり、ユーザビリティが低下する可能性もあります。

使う色を3色程度に絞ったうえで押さえておきたいのが、「70・25・5」の法則です。これは一般的に最もバランスが良いとされる配色のパーセンテージを示したもので、Webサイトだけでなくポスターや広告など印刷物にも広く取り入れられています。

一番割合の大きい70%は全体の基調となるベースカラーで、Webページの場合は背景や余白部分が該当します。強調したい部分を引き立たせるためには、明度の高い色やグレーやパステルカラーなど淡い色を使うのが効果的です。フラットデザインを採用しているWebサイトでは白が用いられるのが一般的です。

25%がメインカラーで、実際のWebサイト制作ではブランドイメージやコーポレートカラーなどによって指定されている場合も多くなります。指定がない場合は、それぞれの色の特徴・効果とWebサイトに求められる役割を照らし合わせて決めていくといいでしょう。

最も割合の小さい5%はサブカラーです。サブカラーはメインカラーを引き立たせるとともに、デザイン全体にアクセントを与え、Webページの印象を引き締める役割を担っています。

メインカラーとサブカラーの組み合わせはさまざまなパターンが考えられますが、配色に迷った場合はAdobeのWebサイトで公開されているカラーホイールや、デザイン系のWebサイトにある色相環(色の総体を円形で示したもの)を参考にするのも1つ方法です。

例えば、色相環上で対極にある色を組み合わせるパターンは「コンプリメンタリー」と呼ばれ、コントラストをはっきりさせ、配分の多い方の色を引き立たせる効果があります。

小野 良勝 代表取締役

投稿一覧

横浜の制作会社アイティネットの代表取締役。WEB、モバイル、DTP、デジタルサイネージを事業展開。それぞれの特性を活かした メディアミックスを得意とする。iPhoneやiPadを活用したBtoB向けのアプリケーションを開発。モチベーションの高い人や異業種との交流がたまらない。華の47年組。趣味はオートキャンプ

Webサイトに動画コンテンツを取り入れるメリット&実際の制作費

ハイクオリティな動画素材を無料でダウンロードできるWebサイト3選

関連記事

  1. WordPressの初期設定で最低限押さえておきたい2つのポイン…

    レンタルサーバーとドメイン、FTPクライアントを準備し、インストールするだけで手軽に利用できるWor…

  2. オウンドメディアを成功させるために、Webディレクターがやってお…

    ブログなどの情報発信を続けることによって見込客を獲得し、ブランディングに成果をもたらすオウンドメディ…

  3. SNSの拡散(バズ)を視覚化。今すぐ役立てたい効果測定ツール3選…

    オウンドメディアとならんで、Webマーケティングの重要な要素の1つがSNSの活用です。「SNSを使っ…

  4. ランディングページの成功事例その2「TECH:CAMP」

    ベテランのWebディレクターでも頭を悩ませることの多いランディングページ制作。用途・目的に沿ったペー…

  5. 【Webサイト運営者必見】よく分からないKGI/KPIを優しく解…

    Webサイトでは「明確な目標」を持つのが難しく、それ故に目標もなくWebサイトを制作したりリニューア…

  6. CVだけでは分からない課題を浮き彫りにする「マイクロコンバージョ…

    コンバージョンはWebサイトにおける最も重要な指標の1つ。とりわけECサイトなどに関しては「まずコン…

  7. アイコンもセットで、レスポンシブデザインにも対応。CSSフレーム…

    WordPressと同じくWebサイト制作の生産性アップに役立てたいのが、CSSフレームワークです。…

  8. ツールを使って効率的に配色。カラーパレットのWebサービス4選

    ベテランのWebデザイナーでも頭を悩ますことの多いWebサイトの配色。256種類のカラーコードによる…

PICKUP

PAGE TOP