デザインの知識がなくても参考になる配色パターン見本サイト12選＋α

皆さま、こんにちは。メディア事業部のまゆです。
先日、個人でやっているサイトをリニューアルしていたのですが、想像以上に配色について悩んでしまいました。

デザインの知識が皆無の私にはハードルが高すぎたようで、文字、リンク、バナー、背景などの色をベタベタ触っていたら、数時間後にはヘドロのような色彩美のサイトが誕生しました。絶望です。

そこで今回は、私のような素人でも参考になる配色見本サイトについて、用途別にまとめてみました。

ベースとなるカラーを設定したい

1．原色大辞典

http://www.colordic.org/

いつも参考にさせていただいている原色大辞典には、原色以外にも「和色大辞典」、「ビビットカラー」などが掲載されており、大変役立ちます。

「カラーピッカー」ではHEX・RGB・HSBに数値を入力し、ほしい色を探すこともできます。

2．配色の見本帳｜キーカラーで選ぶ配色パターン

http://ironodata.info/

クリックすると、その色に関する詳細な情報が確認できます。
HEX・RGB・CMYKだけではなく、すごい量の配色パターンをアドバイスしてくれるので、見ているだけでも勉強になります。
このちらのサイトにも「色検索」というカラーピッカーがついています。

さまざまな色を探したい

3．NIPPON COLORS

http://nipponcolors.com/

日本の伝統色をHEX・CMYK・RGBで表示してくれます。
和風のテイストにしたいときは大変重宝します。

4．paletton

http://paletton.com/

パレット上でWebサイトを作ったときの色サンプルを確認することができます。
指定した色の仮想ページの表示やHTML・CSS・LESS・XML・TEXTなどでの出力だけでなく、色覚障害の見え方、汚れたLEDディスプレイの見え方などを知ることもできます。

 
詳細は以下の記事をご参照ください。

• カラーパレットを直感的に作ってページの見え方を確認できPNG・HTML出力もできる「Paletton」 – Gigazine

http://gigazine.net/news/20140725-paletton/

5．Colores

http://colores.manugarri.com/

単語を入力すると自動で画像を検索し、そのカラーコードを表示してくれます。
直感的にサイトのイメージを入力して配色につなげることはもちろん、暇なときに適当に単語を入力して配色を見るのも楽しいです。

グラデーションを探したい

6．0 to 255

http://www.0to255.com/

指定した色のグラデーションを確認することができます。
「この色で、もうちょっと薄いのがほしい」というような場面でとても便利です。

7．uiGradients

http://uigradients.com/

通常の配色見本サイトではカラーコードだけの確認となりますが、こちらはCSSも表示してくれるので便利です。

配色パターンを考えたい

8．HUE/360

http://hue360.herokuapp.com/

選択した色と相性のいい色を自動で表示してくれます。配色で悩むことが多い方は、最初にこのサイトでチェックするといいかもしれません。

なお、詳しい使い方については過去の記事「Webデザインの配色で迷ったときに役立つツールとその使用方法まとめ」 で紹介しているので参考にしてください。

9．ウェブ配色ツール Ver2.0

http://www.color-fortuna.com/color_scheme_genelator2/

カラーピッカーで選択すると、その色に合った配色を仮想ページに自動で表示してくれます。サイドバーや見出しにも反映されるので、完成イメージが浮かびやすく、細かい部分の配色も決めやすくなります。

他のサイトや雑誌の配色パターンを参考にしたい

10．Color of Book

http://colorchart.jp/

本や雑誌の配色が確認できるサイトです。Amazonで取り扱ってる書籍からの検索も可能です。

11．Stylify Me

http://stylifyme.com/

URLを打ち込むと「そのサイトの配色＋タイポグラフィの情報」を表示してくれます。表示された内容はPDFでダウンロードすることもできます。

12．Web Color Data

http://webcolourdata.com/

URLを打ち込むと「そのサイトの配色＋類似の配色がされたサイト」を表示してくれます。

＋α（すごく分かりやすい配色講座）

最後に＋αとして、配色について学びたいときに参考になるスライドを3つ紹介させていただきます。

色彩センスのいらない配色講座

色彩センスのいらない配色講座 from Mariko Yamaguchi

ノンデザイナーのための配色理論

ノンデザイナーのための配色理論 from tsukasa obara

見やすいプレゼン資料の作り方 – リニューアル増量版

見やすいプレゼン資料の作り方 – リニューアル増量版 from TUAT / SKET
（配色についての説明はP.48からです。）

まとめ

いかがでしたでしょうか。
私は一度悩んでしまうとなかなか抜け出せないタイプの人間なので、こういうサイトの存在は助かります。
開発者の皆さま、本当にありがとうございます。

また、以下の記事も参考になるかと思われますので、ぜひご覧ください。

• WEBデザインの配色で迷ったときに役立つツールとその使用方法まとめ 
• 新米デザイナーは知っておきたい、“美しい”バナーを“効率的”に制作するための10のステップ

ではでは、失礼します。

【ノンデザイナーでもデザインがしたい！】

※ WEBデザインの配色で迷ったときに役立つツールとその使用方法まとめ

※ ノンデザイナーのための無料ビジュアルコンテンツ作成ツール9選

※ ノンデザイナーも必見！Twitter BootStrapの特徴と導入前に確認すべき事

※ デザイナーを目指す人必見！デザインのはじめかた〜8つの心構え〜

※ はじめてのschoo！「Webデザインの基礎と実習」を受けてみた！