素人でもプロ並みの配色ができるデザインパターン参考サイト22選

      2016/11/07

Code部

Webデザインで大変重要な要素の一つ、配色。ベテランデザイナーでさえ、一度配色に悩んでしまうと悪循環からなかなか抜け出せないときもあるほど、難しい世界です。その奥深さを象徴するかのように、Web上には配色に関するツール・サイトが数多く公開されています。覚えておくとイザというときに役に立つ、無料のオンラインツール・サイトをご紹介します。

こちらもあわせてどうぞ
センス不要!初心者でも今すぐ使えるWebデザインテクニック13選配色の基礎を学べるサイト

為になる鉄板「原色大辞典」

genshokudaijiten
公式サイト

「色の名前とカラーコードが一目でわかる」サイト。原色、和色、洋色の名前とカラーコードの一覧、背景色と文字色の組み合わせツールなど色に関する情報が豊富に掲載されています。他にも気分に合わせて色を選ぶツールや電車の色の一覧など、遊べて学べるサイトです。

シーン別配色見本32パターン

stylelink
公式サイト

株式会社スタイルリンクのブログより、シーン別の配色見本です。ポップで楽しいイメージ、品のある知的なイメージなど32パターンの色の組み合わせを提案しています。配色の基礎についてもわかりやすい解説があります。

イメージ別「配色パターン」

haishokupattern
公式サイト

シンプル、ダークといった印象別に配色パターンを掲載しているサイト。他にも色の組み合わせチェックツールや、色の基本情報などを掲載しています。

色の組み合わせに迷ったらここ!

写真から7色の色見本「Color Pallets」

Colorpallets
公式サイト

お菓子や動物、芸術といったカテゴリごとに7色の配色見本を表示するサイト。キムチや薔薇の花、城など具体的な画像を元にしています。

豊富な色情報「配色の見本帳」

haishokuno
公式サイト

ベースカラーを選ぶと、色の成分情報とカラーパターンを検索することができるサイト。配色技法に則った色の組み合わせを提案してくれます。

ランダムに色を生成「coolors」

Coolors
公式サイト

スペースキーを押すだけでランダムにカラーパレットが生成されるツール。表示された色の色相や彩度、明度などを直感的な操作で変更したり、メインとなる色を固定し、他の色をランダムに表示させて組み合わせを試すといった使い方ができます。

iOS, Android用アプリもありますが、こちらは有料です。

文字の色まで提案「ウェブ配色ツール Ver2.0」

fortuna
公式サイト

カラーピッカーを操作して色を作成し、すぐにプレビューでサイトイメージを確認できるツール。ロゴや文字などの色を自動的に選定してくれます。操作方法や配色のヒントが日本語で丁寧に説明されています。

鉄板の「Adobe color CC」

AdobeColorCC
公式サイト

指定したカラールールに基づき、カラーホイールを用いた直感的な操作で色の組み合わせを試せるツール。様々な色のパターンも用意されています。

同名のiPhone,iPad,Android向けのアプリもあります。こちらはカメラが検知した映像から色を抽出しカラーテーマを作成する機能、保存したカラーテーマを共有する機能を有しています。

アプリのダウンロードはこちらから:iOS, Android

シンプルに色を探せる「HUE/360」

hue360
公式サイト

色相、彩度、明度を直感的に操作することで色の組み合わせが試せるサービス。一つ色を選ぶと相性の良い色を提案してくれます。選択された色が下部に表示され、いくつかの色を比較することも可能。デザイナーでない人でも、色の三要素についての理解を深めることに役立ちます。

プレビューで確認「material palette」

materialpalette
公式サイト

用意された色の中から2色を選ぶとプレビューが表示されるサイト。選んだ色の情報が画面右下のYour Paletteという欄に記憶され、色をクリックするとカラーコードがコピーされた状態になったり、まとめてダウンロードすることができます。

多数のカラーパレット「Color Hunt」

ColorHunt

公式サイト

様々カラーパレットが毎日登録されているサイト。カラーパレットを選ぶとプレビューが表示され、色のイメージを確認できます。

色を探したいとき

色の検索に優れた「Color Hexa」

Colorhexa
公式サイト

検索欄に色名やカラーコードを入力すると、その色に関する様々な情報を表示するサイト。検索欄に入力した時点で候補の色がその色と共に表示されるのがユニークです。

本や雑誌を参考にしたいときは「Color of Books」

ColorofBook
公式サイト

ファッション誌やスポーツ紙などの書籍を検索し、配色を確認できるサイト。例えばファッション誌なら、男性/女性、10代向けや一般OL向け、雑誌名など、イメージに合ったものを検索できます。Photoshop用のカラーパレットもダウンロード可能。

UPした画像でカラーパレット「color hunter」

Colorhunter
公式サイト

画像をアップロードすると自動的に色を抽出し、カラーパレットを作ります。使う画像に合わせてベースカラーを決めるという方には便利なツールです。

あのサイトの配色は?「Web Colors Data」

WebColorsData
公式サイト

サイトのURLを入力すると、そのサイトに使われている色が表示されます。色の一覧の他、色相の分布図やカラーホイール、似た色を使った他サイトも表示してくれます。

その他配色で困ったときに見たいサイト

グラデーションなら「shade」

shade
公式サイト

グラデーションを作ることができるツール。カラーコードを入力してベースカラーを決め、色やグラデーションの各種値を調整して作成します。作成した色のCSSプロパティが表示されるのが便利です。

フラットデザインの参考に「Flat UI Colors」

FlatUIColors
公式サイト
流行のフラットデザインに使える色を選べるツール。色をクリックするとカラーコードがコピーされた状態になるので、そのままペーストできます。用意されている色は20種類です。

日本の伝統色「NIPPON COLORS」

NIPPONCOLORS
公式サイト

日本の伝統色を調べることができるサイト。桑染、撫子など日本古来からの色の名前をクリックすると、サイト全体に色が表示され、RGB、CMYKの各カラーモード、カラーコードがわかります。Webデザインだけでなく、伝統色の名前の勉強にもなります。

色を選んでサイトデザインを検索「design shack」

designshack

公式サイト
海外のギャラリーサイト。色を選ぶとその色を使ったサイトデザインやロゴなどを表示します。

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

リンク

おばらつかささんによる配色理論のスライド。色選びに失敗する理由と各配色理論を、デザイナーでない人向けにわかりやすく説明されています。

12色の色が与える印象について。

リンク

Handy Web Designより、12色の色が与える印象についての記事。色はなぜ見える?という基本知識から始まり、ベースカラー・メインカラー・アクセントカラーの割合まで丁寧に解説されています。

COLOUR lovers

COLOURlovers

公式サイト

配色に関するコミュニティサイト。カラーパレットを共有したり、トレンドのデジタル作品をチェックすることができます。

おわりに

以上簡単にご紹介しました。配色に時間がかかりそうだと感じたら、目的に合ったツール・サイトを上手く活用して、制作期間の短縮、より良いデザインを目指してみてはいかがでしょうか?

 

プログラミングを勉強している方によく読まれています!

 - デザイン, デザインツール, ホームページ作成・制作