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


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

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

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

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

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

1.原色大辞典

原色大辞典

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

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

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

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

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

さまざまな色を探したい

3.NIPPON COLORS

日本の伝統色

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

4.paletton

paletton

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

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

5.Colores

Colores

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

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

6.0 to 255

0to255

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

7.uiGradients

uiGradients - 美しい色のグラデーション

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

配色パターンを考えたい

8.HUE/360

HUE:360

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

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

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

ウェブ配色ツール

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

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

10.Color of Book

ColorofBook

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

11.Stylify Me

Stylify Me

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

12.Web Color Data

WebColorData

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

+α(すごく分かりやすい配色講座)

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

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


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

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


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

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


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

まとめ

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

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

ではでは、失礼します。

 

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

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

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

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

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

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

この記事を書いた人

まゆこ
まゆこ エディター 2013年入社
記事の編集しています、まゆこです。喋るのが得意ではありません。シャキン、シャキンという音を聞きたくて、週末に前髪をよく切ります。目上の方にドッキリをしかけるのが好きです。あと寿司も好きです。

こちらもおすすめ

配色デザイン見本帳 配色の基礎と考え方が学べるガイドブック

配色デザイン見本帳 配色の基礎と考え方が学べるガイドブック

  • 著者伊達千代
  • 価格¥ 2,700(2015/11/06 17:36時点)
  • 出版日2014/09/24
  • 商品ランキング85,455位
  • 単行本160ページ
  • ISBN-104844364529
  • ISBN-139784844364528
  • 出版社エムディエヌコーポレーション