Webデザイン配色パターン:便利サービス8選

Web制作の配色パターンで悩んだ時、Webデザインのクオリティを高めてくれるサービス8選

「Web制作を依頼する際、配色パターンを指示したい。」
「Webデザインのレイアウトは決まったが、配色が満足できない。」

Web制作を行う際、重要なポイントとなるWebサイトのデザイン。そのデザインにおいて、重要な要素となる「配色パターン」は、Web制作に携わる企業担当者やデザイナーにとって、大切な検討事項の1つです。

Webデザインで重要な「配色パターン」で迷った時に使いたい、便利なサービス・サイトまとめ

Webデザインで重要な「配色パターン」で迷った時に使いたい、便利なサービス・サイト8選まとめ

そこで今回は、Web制作に携わる企業担当者やデザイナーが、共通認識を持ってWebデザインを検討するための「配色パターン」に関する便利なサービス・サイトを8個まとめてご紹介します。

□段階的にカラーバリエーションを検討:0to255
□色についての様々な情報を取得:Color Hexa
□PhotoshopやIllustratorと連携:Adobe Kuler
□配色パターンを手軽に作れる:カラログ
□本や雑誌の表紙から色を調べる:Color of Book
□フラットデザインの配色に便利:Flat UI Colors
□基本となるWEB色見本から配色を考える:原色大辞典
□日本の伝統色を利用したい時に:NIPPON COLORS

それでは、個々のサービス・サイトについてご紹介します。

段階的にカラーバリエーションを検討:0to255

0to255

0to255
配色を考える際、1つ色を基本に色のバリエーションを増やす方法が考えられます。例えば、1つの色をメインカラーとして決め、ボタンのマウスオーバーは少し明るい色、小見出しの文字は少し暗い色、グラデーションは、メインカラーより少し明るい色から暗い色にするなど、1つの色を軸として持つことで、配色が安定し、デザインのクオリティを高めることができます。

色についての様々な情報を取得:Color Hexa

Color Hexa

Color Hexa
配色を考える際、色についての理解を深める必要があります。このサービスは、1つの色を指定すると、その色に関する様々な情報を表示してくれます。色の配合、配色パターン例、同系色、文字・背景・ラインで表示した場合のプレビュー、明暗それぞれに変化した場合のバリエーション、色覚異常者に配慮した色の扱いについてまで、非常に豊富な情報を教えてくれます。

PhotoshopやIllustratorと連携:Adobe Kuler

Adobe Kuler

Adobe Kuler
Adobe製品の利用者やデザイナーの方々にはご存知の方も多いと思いますが、非常に便利なツールですのでご紹介します。マウスで好きな色を選ぶか、RGBの数値を入力した後に、配色テーマ(カラールール)の種類を選択するだけで、自動的に配色パターンを生成してくれます。PhotoshopやIllustratorと連携して、生成した配色パターンをそのまま利用できるのが非常に便利です。

配色パターンを手軽に作れる:カラログ

カラログ

カラログ
こちらも簡単に配色パターンを作成できるWebサービスです。1つの特徴として、Webサイトのデザインパーツごとの色を指定することで、デザインイメージをより明確にシミュレートすることが可能です。また、「Adobe Kuler」にも共通して言えることですが、自分が作成した配色パターンを保存・共有したり、他のユーザーが作成した配色パターンを見たりすることができます。

本や雑誌の表紙から色を調べる:Color of Book

Color of Book

Color of Book
ターゲットのペルソナイメージが明確に決まっていれば、ターゲットがよく読む本や雑誌の配色パターンを参考にするという方法が考えられます。このサービスは、まさにそれを実現できるサービスです。本のタイトルでAmazonから検索したり、雑誌のジャンルを選択したりして、本・雑誌を選定するだけで、その表紙のデザインを基に、配色パターンを自動抽出してくれます。

フラットデザインの配色に便利:Flat UI Colors

Flat UI Colors

Flat UI Colors
人気のフラットデザインに使える配色をキレイにまとめてくれています。サイト上で、色をクリックするだけで、クリップボードにカラーコードがコピーされます。ここで表示されている色をベースに、配色パターンを生成すると、キレイでまとまりのある仕上がりになるでしょう。また、これらのカラーをメインカラーとして使用し、配色パターンを生成する方法もあります。

基本となるWEB色見本から配色を考える:原色大辞典

原色大辞典

原色大辞典
迷った時は、基本に戻って考えることも時には必要です。このサイトでは、色の名前とHTMLタグが一目で分かる、WEB色見本を表示してくれます。まずは、基本となるメインカラーに最も近い色を選択し、これまでご紹介したサービスを活用して、理想の配色パターンを生成する方法が考えられます。WEB色見本以外にもいくつか機能がありますので、是非チェックしてみて下さい。

日本の伝統色を利用したい時に:NIPPON COLORS

NIPPON COLORS

NIPPON COLORS
日本文化に深い影響を与えてきた自然と四季。その中で日本人は、豊かな色彩感覚を育んできました。このサイトでは、日本の伝統色を紹介し、その色のCMYK及びRGBの配合比率を表示してくれます。日本や伝統に関するWebサイトだけでなく、様々なWebサイトのデザインにも応用できると思います。デザインに関わる人なら、見ているだけでも楽しめるかもしれません。

Webデザインに関するオススメの過去記事

□WordPressで作るWebサイト デザインの参考に↓↓
【保存版】目的別Web制作!WordPress無料テーマ50選:2014年前期まとめ

□デザイナーのPhotoshop作業を効率化する方法↓↓
WebデザインからPSD納品まで、Photoshop作業を劇的に高速化する無料プラグイン7選まとめ

便利な配色サービスをシェアしよう!

Twitterでつぶやく facebookでシェアする

最後に:ターゲットに適した配色でWebデザインを行う

企業のWebサイトは、何のために制作されるべきでしょうか?

ターゲットと企業・ブランド、あるいは、ターゲットと商品・サービスを結びつけるために、関係を深めるために、制作されるべきです。そのためには、企業やブランドが持つイメージを最低限守った上で、ターゲットの視点で、Webサイトをデザインする必要があります。

最も注意すべき点は、企業側が一方的に理想とするものを目指して、Webデザインを行っていないかということです。企業がどんなに仕上がりに満足しても、どんなにクールなWebサイトを制作しても、その企業のターゲットの心に突き刺さらなければ、作って終わりになってしまいます。

本気で成果を出したいと考えるのであれば、最優先で考えるべきは、ユーザー・ターゲット・お客様です。この方々が、あなたのWebサイトを見た時、次のアクションは何になるでしょうか?「これは私のためのサイトだ。」と感じて貰えれば、次のページに遷移してくれます。何も感じなければ、多くの場合、Webサイトを離脱してしまうでしょう。

ターゲットのための配色を考えて下さい。それによってのみ、成果に繫がるWebデザインを実現できます。