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ライティングのコツ

    ソーシャルメディアと相性が良いスマートフォンでは、質の高い記事がFacebookやTwitterで拡…

  2. スクロールエフェクトを実装できる、おすすめjQueryプラグイン…

    画面のスクロールにあわせて写真やサムネイル、テキストを自由に動かすことができるスクロールエフェクト。…

  3. 外注やデザイナーに頼らずサクッとロゴを制作。ロゴジェネレーター3…

    LineやInstagramといったSNSの台頭にともない、コミュニケーションツールとしてあっという…

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

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

  5. WordPressの表示速度をアップさせるプラグイン5選

    アクセス解析やセキュリティなど豊富な機能が提供されているWordPressのプラグイン。使い方によっ…

  6. ジャンル・目的に合わせて幅広く利用可能。高品質なWebフォントサ…

    OSやデバイスを問わず制作サイドの意図通りのフォントを表示することができ、レスポンシブ対応にも相性の…

  7. あらためて整理しておきたい、Webサイトにおける「色」の効果

    ECサイトの制作プラットフォームを提供しているShopifyのリサーチ結果によれば、ユーザーの購買は…

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

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

PICKUP

PAGE TOP