独学でWebデザイナーになる時に使うべき配色見本サービスまとめ

Webデザインを制作する中で、悩むことが多い配色。

色はデザインそのものの印象を大きく変えてしまうので、組み合わせが難しいですよね。

特に独学となると、頼れる人も少なく…。

今回は、そんな配色に悩んだときにぜひ使って欲しい、配色見本サービスをご紹介します!

配色見本サービスを使用すれば、独学でも失敗しない配色でデザインを制作することができます。

配色見本サービスも、それぞれ特徴があるので、用途に合わせて使ってみてくださいね。

配色の基礎知識

配色見本サービスの前に、みなさんは配色の基礎についてご存知ですか?

もし、「まだいまいち理解できていない…」という方は、以前解説した記事があるため、そちらをまずは読んでみてください。

デザイナーが知っておくべき配色の基礎知識

また、上記の記事でも記載していますが、配色はベテランのデザイナーでも難しいと感じる要素です。

そのため、Webデザインを初めてまだ間もない方は、配色見本サービスを使用して配色することをおすすめします!

特に、デザインにまだ慣れていない方は、最終的に感覚で決めてしまう傾向があります。例えば、「オレンジ色を使いたいし、この色なら合いそう!」といった具合です。

もし感覚で配色を決めてしまうと、自分1人ではなかなか違和感を感じ取れず、デザインの制作意図とは違う配色になってしまう可能性もあります。

こうした事態を防ぐため、配色に慣れるまではできるだけ配色見本サービスを使用するようにしましょう!

独学でも安心してWebデザインの配色ができる見本サービス

それでは、本題の配色見本サービスについて、6つのおすすめサイトをご紹介します!

1.3色の配色見本サービス

COLOR SUPPLYは、色相環から3色のパターンを探せるサービスです。Webデザインでは、ベースカラー、メインカラー、アクセントカラーとして3色の配色が多いため、とても便利なサイトです。

Color Picker - A handy design tool from Color Supply

Use the color wheel to select a style you like. Then pick a hex code.

2.4色の配色見本サービス

4色の配色パターンでおすすめなのが、Color Huntです。こちらでは、様々な配色を見れることはもちろん、人気パターンやトレンドの配色で探すことができる優れものです!

Color Hunt - Color Palettes for Designers and Artists

Color Hunt is a free and open platform for color inspiration with thousands of trendy hand-picked color palettes Get our Chrome extension for color inspiration in every new tab Add to Chrome

3.グラデーションの配色見本サービス

WebGradientsはグラデーションの配色を探せるサービスです。png形式で保存ができたり、CSSのコードをコピーすることができるので、Webデザインでとても有効活用できます。

Free Gradients Collection by itmeo.com

Free for commercial or personal use by Dima Braven. WebGradients is a free collection of 180 linear gradients that you can use ascontent backdrops in any part of your website. Easy copy CSS3 crossbrowser codeand use it in a moment! We've also prepared a .PNG version of each gradient.

4.和風デザインの配色見本サービス

和風デザインのサイトを制作する時は、NIPPONCOLORSが便利です。こちらは日本の伝統色の見本帳なんですが、実際にサイトの背景として色を確認することができます。

NIPPON COLORS - 日本の伝統色

The Traditional Colors of Nippon (Japan). This site is optimized to Webkit.

5.サルワカさんの配色見本サイト

Webデザインの図解説明サイトで有名な、サルワカさんの配色見本サイトです。シーンに合わせた配色を、プレビュー画面で確認しながら見ることができます。

https://saruwakakun.com/design/gallery/palette

6.サイト内の色が抽出できる拡張機能

配色見本サービスではないですが、Chromeの拡張機能であるColorZillaもおすすめです。サイト内の色を抽出できるため、参考サイトがある場合などはこちらの機能で色を調べて使用するのも良いでしょう。

ColorZilla

Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies

まとめ

今回は、配色見本サービスについて、おすすめのサービスを紹介しました。

最初にお伝えした通り、Webデザインを初めて間もない方にとって、配色はとても難しく、またデザインのクオリティを左右する大事な要素でもあります。

そのため、今回紹介したような配色見本サービスや、参考サイトの配色を参考にしながらデザイン制作を進めていってください!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA