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. キービジュアルはイメージより具体性。ファーストビューの効果的な改…

    多くの場合、Webサイトのファーストビューは、「メインコピー」、「キービジュアル」、「サブ要素」、「…

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

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

  3. プレゼンや打ち合わせに活用したい、無料モックアップ作成ツール3選…

    ワイヤーフレームと同様に情報共有やプレゼンテーションの精度を高めてくれるのがモックアップです。クライ…

  4. メンバーへの共有もより簡単に。ワイヤーフレーム作成ツール3選

    クライアントを含め複数のメンバーが携わるWebサイト制作において、情報共有やプロジェクトの進行に大き…

  5. Web運用を委託した方がいい企業5つの特徴!!と、1つの注意点

    Webサイト運用って何かと手間がかかるので、出来れば制作会社に委託したいと考えている企画担当の方が多…

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

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

  7. ツールを使って接客をシステム化。総合力に優れたWeb接客ツール3…

    シニア層のネットショッピングの利用拡大やECマーケットそのものの成長にあわせて、急速にニーズが高まり…

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

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

PICKUP

PAGE TOP