この記事の監修者
Webデザインを制作する中で、悩むことが多い配色。
色はデザインそのものの印象を大きく変えてしまうので、組み合わせが難しいですよね。
特に独学となると、頼れる人も少なく…。
今回は、そんな配色に悩んだときにぜひ使って欲しい、配色見本サービスをご紹介します！
配色見本サービスを使用すれば、独学でも失敗しない配色でデザインを制作することができます。
配色見本サービスも、それぞれ特徴があるので、用途に合わせて使ってみてくださいね。
配色の基礎知識
配色見本サービスの前に、みなさんは配色の基礎についてご存知ですか？
もし、「まだいまいち理解できていない…」という方は、以前解説した記事があるため、そちらをまずは読んでみてください。
また、上記の記事でも記載していますが、配色はベテランのデザイナーでも難しいと感じる要素です。
そのため、Webデザインを初めてまだ間もない方は、配色見本サービスを使用して配色することをおすすめします！
特に、デザインにまだ慣れていない方は、最終的に感覚で決めてしまう傾向があります。例えば、「オレンジ色を使いたいし、この色なら合いそう！」といった具合です。
もし感覚で配色を決めてしまうと、自分1人ではなかなか違和感を感じ取れず、デザインの制作意図とは違う配色になってしまう可能性もあります。
こうした事態を防ぐため、配色に慣れるまではできるだけ配色見本サービスを使用するようにしましょう！
独学でも安心してWebデザインの配色ができる見本サービス
それでは、本題の配色見本サービスについて、6つのおすすめサイトをご紹介します！
1.3色の配色見本サービス
COLOR SUPPLYは、色相環から3色のパターンを探せるサービスです。Webデザインでは、ベースカラー、メインカラー、アクセントカラーとして3色の配色が多いため、とても便利なサイトです。
2.4色の配色見本サービス
4色の配色パターンでおすすめなのが、Color Huntです。こちらでは、様々な配色を見れることはもちろん、人気パターンやトレンドの配色で探すことができる優れものです！
3.グラデーションの配色見本サービス
WebGradientsはグラデーションの配色を探せるサービスです。png形式で保存ができたり、CSSのコードをコピーすることができるので、Webデザインでとても有効活用できます。
4.和風デザインの配色見本サービス
和風デザインのサイトを制作する時は、NIPPONCOLORSが便利です。こちらは日本の伝統色の見本帳なんですが、実際にサイトの背景として色を確認することができます。
5.サルワカさんの配色見本サイト
Webデザインの図解説明サイトで有名な、サルワカさんの配色見本サイトです。シーンに合わせた配色を、プレビュー画面で確認しながら見ることができます。
6.サイト内の色が抽出できる拡張機能
配色見本サービスではないですが、Chromeの拡張機能であるColorZillaもおすすめです。サイト内の色を抽出できるため、参考サイトがある場合などはこちらの機能で色を調べて使用するのも良いでしょう。
まとめ
今回は、配色見本サービスについて、おすすめのサービスを紹介しました。
最初にお伝えした通り、Webデザインを初めて間もない方にとって、配色はとても難しく、またデザインのクオリティを左右する大事な要素でもあります。
そのため、今回紹介したような配色見本サービスや、参考サイトの配色を参考にしながらデザイン制作を進めていってください！
基礎的な知識を身につけるなら書籍も有効ですので、こちらも参考にしてみてください！
