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運用を委託した方がいい企業5つの特徴!!と、1つの注意点

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

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

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

  3. 手軽に作ってWebサイトにアクセントを。無料のGif画像作成サー…

    複数の静止画を組み合わせてコマ送りで表示することによって、画像に動きをつけることができるGif。We…

  4. Webコンテンツの印象を大きく変えるタイポグラフィの4原則

    フォントを効果的に使うにはタイポグラフィ(書体の配置や構成といった表現)も大切です。デザインやレイア…

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

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

  6. 今さら人にも聞けない!WordPressの基本的なメリット

    2003年5月にリリースされて以来、多くのWebサイト制作に利用されているWordPress。もとも…

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

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

  8. コンテンツ制作に集中できる、SEO対策済みWordPressテン…

    ユーザーの役に立つ情報を発信することによって検索上位獲得を狙うコンテンツSEO対策が主力となった今で…

PICKUP

PAGE TOP