高機能なCMSが続々とリリースされている今、特別な技術がなくてもホームページやランディングページを作成できるようになってきました。
そのため、Web制作会社やデザイナー等の専門職の方に頼らずにWebページを制作される方も増えてきていると思いますが、制作時につまづきやすいのが配色です。
配色はページ全体の印象を決めますが、作成者のセンスに左右されるため、デザイナーのように配色の知識が無い方は何かと時間をとられてしまいます。
今回は、配色に自信の無い方でも最新のホームページのような配色ができる無料のカラーパレットをご紹介します。
あらかじめ配色が決まっているもの、自分で配色を調整できるものなど様々なパレットがあるので、自身に合うものを探してみましょう。
カラーパレットを利用するまえにカラーコードの基本を知っておこう
基本的に、Web上で使われる全ての色には番号が振られており、色ごとに振られた番号をカラーコードと呼びます。
カラーコードは6桁の英数字で構成され、全部で256色あります。
一度使った色を再び使いたい場合は、カラーコード単位で記録しておくと感覚頼りになることもありません。
特に、複数色の微妙な組み合わせが肝となる配色パターンを形成する場合は、確実にカラーコードを把握しておいた方が良いでしょう。
カラーパレットを利用する前に、カラーコードの基本的な仕組みを理解しておきましょう。
参考：
16進数のカラーコードより色を推測するメソッド(カラーコードの仕組みについて)
こちらのブログでカラーコードの構成について非常にわかりやすく解説されています。
イマドキな配色パターンが豊富なカラーパレットまとめ
既に流通している配色パターンを利用すれば、自分で考える手間が省けるうえ、配色のメソッドから大きく外れることもありません。
こちらでは、フラットデザインやマテリアルデザインに最適な配色パターンを掲載しているサービスを集めました。
1.PLTTS- Popular
様々なパターンの配色が一度に閲覧できます。
好みの配色パターンをクリックすると、利用されている色のカラーコードを確認することができます。
2.COLOURlovers
Browse Palettes :: COLOURlovers
COLOURloversのユーザーが作成した配色パターンを自由に閲覧、利用することができます。
こちらも、配色パターンをクリックすると各色のカラーコードが確認できます。
3.Coolors
Coolors - The super fast color schemes generator!
CoolorsもCOLOURloversと同じく、ユーザーが作成した配色パターンを共有することができます。
配色パターンの上にカーソルを置き、「EXPORT」をクリックするとカラーコード付きの配色パターン画像をPNGやPDFなどの形式でダウンロードできます。
4.iOS 8 colors
iOS8に馴染むようなグラデーションが多数掲載されています。
色の上にカーソルを置くとグラデーションに使用されているカラーコードが表示されます。
iPhone向けアプリのアイコン作成時に参考にすると良いでしょう。
自分でカスタマイズできるカラーパレット
自社サービスのカラーが明確に決まっており、オリジナル性を打ち出したいときには、配色の法則を守りつつ自分である程度アレンジできるツールを利用しましょう。
5.Material Design Color Palette Generator - Material Palette
Material Design Color Palette Generator - Material Palette
マテリアルデザインに最適化された色を揃えており、この中から2色選択すると自動的に配色パターンを提示してくれます。
2色をクリックしたら右側にサイトイメージが表示されます。
6.[ HUE / 360 ] The Color Scheme Application
[ HUE / 360 ] The Color Scheme Application
先に明度を選択し、好きな色を1色クリックすると、その色と組み合わせてもおかしくない色のみが表示されます。
まず「Bright（明るさ）」を選択します。
次に好きな色をクリックすると、その色と相性の良い色だけが表示されます。
各色をクリックすると画面下側に選択した色が配置されていきます。
7.colourcode - find your colour scheme
colourcode - find your colour scheme
こちらは、直感的なマウス操作で配色を決めることができます。
画面左端に表示されているマークをクリックし、好みの配色パターンを選びます。
配色パターンを選択後、マウスを上に動かすと色が暗くなり、下に動かすと明度が上がります。左右に動かすと色が変更され、マウスのホイールなどでスクロールすると彩度を変更できます。
配色が決まったらクリックしましょう。色が固定されたことを表すロックマークと、各色のカラーコードも表示されます。
8.Adobe Color CC
Adobe Color CC
Adobe社が提供する配色ツールです。
こちらも簡単な操作で複数色の配色を決めることができます。
先に「カラールール」を選択します。
画面中央の円の中にある「◯」をクリックし、そのままドラッグすると、様々な配色パターンが表示されます。
各色をクリックすると、1色を基準に微調整ができる仕様になっています。
（1色を変更すると、それに合わせて他の色も変化します。）
下部にカラーコードが表示されています。
まとめ
複数色の配色バランスを考えることは、デザイナー職でない方にとってはかなり難しい作業になります。
配色は感覚的に見えて、実はシステマチックに構築できるため、一般的なホームページであればカラーコードを元に機械的に判別された配色を利用する方が効率的です。
自分が不得意と感じる分野は、積極的にテンプレや既存のサービスを利用し、自分が本来時間をかけるべき部分に注力できるよにしましょう。
このニュースを読んだあなたにおすすめ
Photoshop初心者必見！Photoshopを使いこなすために知っておくべき情報まとめ
【2015年版】商用無料の人気フリーフォント35選
【必須スキル】2015年は入力速度を上げる！見ないで打てる簡単タイピング術
