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ディレクター向けテキストエディタ4選

    Webサイトの記事の確認・作成に限らず、デザイナーをはじめとした制作スタッフとの情報共有や、備忘録・…

  2. 1000円以下でハイクオリティな素材を入手可能。優良ストックフォ…

    Webサイトの制作でイメージ・目的に合った画像を手に入れるのはなかなか難しいものです。プロのフォトグ…

  3. WordPressのメリットを活かす、アクセス解析プラグイン5選…

    Webサイトの運営に必須となるアクセス解析。ページ作成やコンテンツ更新が手軽にできるWordPres…

  4. ランディングページの成功事例その1「DHC 公式オンラインショッ…

    効果的なランディングページを制作するためには、ファーストビューに加えて、Webページ全体のレイアウト…

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

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

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

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

  7. 多種多様なメソッドも学べる、LP制作に使いたいフレームワーク3選…

    ユーザーの行動を喚起するランディングページにはストーリーの要素を加えるのが効果的ですが、もちろん方法…

  8. バズの傾向・経路をひと目で確認できる、SNS効果測定ツール4選

    「これは!」という、とっておきの情報が思いのほか拡散されなかったりする一方で、何気ないコンテンツ紹介…

PICKUP

PAGE TOP