【2021年版】Webデザインの配色に悩んだときの参考サイトと書籍

Webデザインの配色参考サイト8選

1.Adobe Color CC　

Adobeユーザーならまず使いたい

➡️ Adobe Color CC　

カラーホイールを直感的に操作して配色パレットを作成するのはもちろん、アップした写真から配色を抽出できます。

配色はPhotoshopやIllustratorなどのAdobeサービスと同期して利用でき、すぐにデザインに活用しやすいのがポイント。

世界中のAdobeユーザーが投稿した配色パレットが閲覧・利用できるため、デザイナーはまずチェックしたい便利なツールです。

◇おすすめポイント

iPhoneやiPadでは『Adobe Capture』という名前のアプリで利用できます。　 外出先で撮影したものから配色を作って同期できるからとても効率的。

2.Happy Hues

選んだ配色でサイト全体のプレビューがサクサクできる　

➡️ Happy Hues

画面左に並んだ配色パレットをクリックすると、その配色をフラットデザインに反映させたサイト全体のサンプルがレビューできるサービスです。

ヘッダーからフッターまでサイトコンテンツ全体に配色を反映させたサンプルが魅力的。

具体的な色の使い方のイメージをつかみやすく、イラストやWebデザインを制作する上でとても便利です。

◇おすすめポイント

背景やマウスホバーなど、実際にサイトコンテンツ内に反映させた場合のサンプルがさっとチェックできる。

3.ColorDrop

これひとつで配色に悩まない機能が充実

➡️ ColorDrop

豊富な4色の配色パレットを集めた、シンプルで使いやすいツールです。

表示された色はクリックでカラーコードをコピーしてすぐに使えます。

また、アップした写真から色を抽出するツールや、グラデーションを作るツールも備えていてとても便利。

◇おすすめポイント

配色パレット・写真からの抽出・グラデーションツール・ソートやフィルタリングなど機能が充実。

4.Pigment

Pigment（顔料）とLighting（光量）で調整できる

➡️ Pigment

2色の組み合わせを、Pigment（顔料）とLighting（光量）で調整できるツールです。　

膨大な配色の中から気に入った組み合わせをクリックすると、画面が切り替わり好みの配色に調整できます。

右上の検索バーをクリックすると、写真をベースにした配色提案がずらっと表示される機能付きです。 見ているだけでもインスピレーションがわいてきそうですね。

◇おすすめポイント　

2色の配色をさらに調整できるため、こだわりたい人におすすめ。

5.Color Supply　

グラデーションやアイコンで配色をチェック 　 　

➡️ Color Supply

補色や類似色、3色または4色の配色を探せるツールです。　

選んだ配色をグラデーションやアイコンで実際に確認できるのがポイント。　

配色のルールにそって提案してくれるので、色を考えるのが苦手な人にも多くのヒントを与えてくれるサイトです。

◇おすすめポイント　

補色や類似色など、色の勉強にもなるデザイン初心者にもおすすめ。

6.Nippon Colors　

和の配色なら、これ！ 　　

➡️ Nippon Colors

日本の伝統的な色を探せるサイトです。　

色の名前をクリックすると背景色がその色に切り替わり、カラーコードをワンクリックでコピーして使用できます。　

アニメーションも美しく、日本独自の色の勉強にもなりますね。

◇おすすめポイント　

和風のデザインを制作するときに、見ているだけでもインスピレーションを与えてくれるサイト。

7.Colorable　

背景色と文字色のコントラストのチェックに

➡️ Colorable

背景と文字色のコントラストを、アクセシビリティとして適切かどうかの判断ができるツールです。　

WCAG（ウェブアクセシビリティ基盤委員会）を評価基準にした評価を表示してくれます。　

『AAA』なら問題なし。　

『Fail』は問題ありなので、配色を見直しましょう。　

つまみをスライドさせて色を調整し、すぐに見直しができます。

◇おすすめポイント　

2色のコントラストを簡単に診断できるので、配色の最終チェックにおすすめ。

8.Color Leap　

紀元前の美術品から有名絵画まで 　　　

➡️ Color Leap

誰もがいちどは見たことがあるような歴史的な美術品や有名絵画など、レトロな作品を年代別に見られるサービスです。　 　 それぞれの作品に使われている色を5色のパレットで表示します。　

タイムラインに沿って作品を見られるため、美術館を眺めているような気分にさせてくれるサイトです。

◇おすすめポイント　

歴史的な作品を眺めながら配色をチェックできる。

Webデザインの配色参考サイト：グラデーション編2選

1.WebGradients

Photoshop・Sketchですぐ使える

➡️ WebGradients

美しいグラデーションの配色パターンが揃ったサービスです。　

優しいグラデーションから、補色を使ったメリハリのあるグラデーションまでさまざまな種類が揃っています。　

ワンクリックでcssコードをコピー可能。　

2500x2500pxのPNGファイルでグラデーション画像をダウンロードできます。　

また、PhotoshopとSketch用にすべてのグラデーションをダウンロードすることもできます

◇おすすめポイント　

Photoshop・Sketchのファイルをダウンロードしてデザインにすぐ反映できる。

2.Grabient　

グラデーションに色を追加して自在に編集　

➡️ Grabient

元々の掲載数は少ないものの、自分の好きな色を追加してグラデーションを編集できる便利なツールです。　

ワンクリックでグラデーションのcssがコピーできます。

サムネイルのページから動かずに編集できるのも手軽で便利。　

色の並び順や色数、角度を好きに変更できます。　

好みのグラデーションをベースに、自分のオリジナルが簡単に作れます。

◇おすすめポイント　

オリジナルのグラデーションを手軽にカスタマイズできる。

Webデザインの配色参考書籍3選

1.配色アイデア手帖　

デザイナーからの支持が高い一冊

➡️ Amazonで見る　配色アイデア手帖

いろいろなテーマに沿った配色パターンが3175種類紹介されている、デザイナーならまずは手にしてほしい本です。　

各テイストの中でもさらにテーマが分けられ、写真とともに色に関するエッセイや豆知識も詰まっています。　

言葉の連想からイメージを膨らませられ、デザインにすぐ使える配色見本が並びます。　

色の勉強や配色に悩んだときにおすすめの一冊です。

2.日本の美しい色と言葉　

和の配色を美しい言葉とともに

➡️ Amazonで見る　日本の美しい色と言葉

日本独自の文化や季節、風景などをイメージした配色見本が紹介されている本です。　

配色テーマ別の2597種類の豊富な配色見本を掲載。

日本独自の色の名前や由来などの色に関する知識や豆知識とともに、和の配色を楽しめます。　

和のデザインをするときには、ぜひ参考にしてほしい一冊です。

3.配色アイデア手帳　世界を彩る色と文化　

思わず世界に飛び出したくなる美しい見本帳

➡️ Amazonで見る　配色アイデア手帖 世界を彩る色と文化

世界各国の美しい写真から配色のイメージをまとめた本。　

各国の風景・民族衣装・お菓子・絵画など、さまざまな文化をまとめた一冊です。　

各地域で独自の配色や文化があり、眺めているだけでも楽しめます。

配色を決めるときの基本と注意点　

Webデザインの配色は、まず3つのテーマカラーを決めましょう。

そしてそれぞれの使用比率を以下のようにすると、バランスのとれたデザインになります。　

• ベースカラー：70%
• メインカラー：25%
• アクセントカラー：5%　

この基本をふまえて、サイトの目的に合った配色を考えていきましょう！　

また、配色で注意したい点が3つありますのでご説明していきます。

1.背景と文字の配色

Webデザインにおいて、背景色と文字色のコントラストはとても重要です。

背景色と文字色の明度差が少ない=同じような明度の場合、文字が読みにくくユーザーにストレスを与えてしまいます。　

読みづらいサイトは、それだけで離脱されてしまう可能性が上がるため要注意です。

背景色と文字色の明度差を大きくし、はっきりと文字が読める配色にしましょう。

また、ぼんやりした配色はどこが重要か判断しづらく、見せたいコンテンツに視線誘導ができません。　

注意を向けたいところには、ぱっと目を引く色を使う工夫が必要です。

2.色の見え方は人それぞれ

同じ色を見ていても、人によって見え方が違っていることを知っていますか？　

日本人の中で男性では20人に１人、女性では500人に１人程度は色の認識がしづらい色覚を持つと言われています。

デザインのセオリーともいえる危険を伝える赤でさえ、認識しづらい人がいるのです。

Webデザインを作るときにはターゲットをよく考え、色に頼りすぎないデザインを心がけましょう。 　

3.色を使いすぎない　

色の印象は視覚的にとても強く、色そのものが効果や意味合いを持ちます。　

あまりたくさんの色を使ってしまうと、Webサイト全体がごちゃごちゃして統一性のないイメージを与えてしまうのです。

まずは基本のベースカラー・メインカラー・アクセントカラーの3色を決定し、色数を増やす場合はそこから似た色相の色を使いましょう。

最適な配色でWebデザインを　

見やすい画面、わかりやすいボタン、読みやすい文字。　

配色はWebサイトの印象だけでなく、機能面でも効果を発揮します。

自分に合ったツールを使って、あなたのWebデザインの目的に最適な配色を見つけてください！