Webデザインを行う際に気をつけなければいけないポイントの1つが配色です。どんな色を使うかによってページの雰囲気やイメージが大きく変わります

芸大や美大でしっかりと勉強をしたような人は知識が叩き込まれていると思いますが、色については本当に覚えることが多いため、初心者にはなかなか難しいものです。

今回は、そんな人におすすめの、Webデザインにおける配色を考える時に役立つサービスをまとめました。

これからご紹介するサービスを利用すれば、配色に関する知識が無くてもきれいな配色を実現することができますよ。

スポンサーリンク

Webデザインにおける配色の影響

配色はWebデザインにおいて重要な要素の1つです。配色を変えるだけで、同じデザインのページでもそのイメージがガラッと変わります。

モノクロで作ったページはクールでかっこいい印象を与えることができたり、暖色をメインに使うと温かみのあるページを作成することができます。また、メインカラーとともに使用するサブカラーをどのような色にするかによっても雰囲気が変わります。

あまり色々な色を使うとページに統一感が生まれません。何ページもあるようなWebサイトを作成する場合には、始めに色の組み合わせを決めておき、微妙な色合いは明るさや彩度などで調整するようにするときれいな配色のデザインを作成することができます。

そんな色の組み合わせを考える時に役立つのが、これからご紹介するカラーパレット系のサービスです。

カラーパレット系

では、早速サービスを紹介していきましょう。まずは、最適な色の組み合わせを教えてくれるカラーパレット系のサービスをご紹介します。

Adobe Color CC

adobe color cc

Adobeが提供しているカラーパレットツールです。基本となる色を選択すると、下記のカラールールの元に簡単にカラーパレットを作成することができます。

  • 類似色
  • モノクロマティック
  • トライアド
  • 補色
  • シェード
  • カスタム

真ん中に表示されている丸いカラーピッカーを操作すると、色相や明度を切り替えることができます。

色に関する知識がなくてもちょうどいい色合いの組み合わせを作成してくれるので、Webデザインのベースを考える時にとても役立ちます。

配色の見本帳

配色の見本帳

1つ色を選択すると、その色に関する情報をこれでもか!というほど教えてくれるとても親切なサービスです。単に配色を提案してくれるだけではなく、配色に関する根本的な知識も学ぶことができます。

色相環の角度による配色のページでは、下記の組み合わせで選択した色を教えてくれます。

  • アイデンティティ
  • アナロジー
  • インターミディエート
  • コンプリメンタリー・ダイアード
  • オポーネント
  • スプリットコンプリメンタリー
  • トライアド
  • テトラード
  • ペンタード
  • ヘクサード

これだけあればどんなWebサイトでも最適な色を見つけることができそうですね!自分の好きな色を見つけて、色々見てみると学べることがたくさんあるのではないでしょうか。

paletton

paletton

palettonはベースとなる色に対して同類色、トライアド、テトラードなど、使いやすい色を教えてくれるサービスです。

Adobe Colors CCのように初心者の人でも色を1つ選ぶだけで他の色を抽出することができるので、色に関する知識が浅くてもきれいな配色のページを作ることができます。

HUE/360

hue360

HUE/360は、色を1つ決めるとその色と相性のいい色を教えてくれるサービスです。選択した色はカラーコードにして出力することができるので、コピペで簡単に使用できます。シンプルなサービスですが、自分で色の組み合わせを作っていく感覚がとても楽しいですね。

グラデーション系

次に、色々なグラデーションのアイデアを見つけることができるサービスをご紹介します。

0to255

0to255

0to255はある1つの色について最も明るい白から最も暗い黒までのグラデーションを表示することができるサービスです。クリック一つで簡単にカラーコードをコピーできるので、微妙な色の明るさを調節したい時に役立ちます。

uiGradients

uiGradients

uiGradientsは美しいグラデーションのサンプルがたくさん掲載されているサービスで、色々な種類のものが用意されており、グラデーションだけでここまで色々な種類があるのかということに驚かされます。

Shiftキーを押すとグラデーション一覧を表示することができます。お気に入りの組み合わせを見つけてみてください。

WebGradients

webGradients

WebGradientsは色々な種類のグラデーションを探すことができるサービスです。CSSをコピーすることができるので、気に入ったグラデーションが見つかったら貼り付けるだけで再現することが可能です。

また、CSSだけではなくPNG形式の画像としてダウンロードすることができるので、色々な使い方ができそうですね。SketchやPhotoshopで利用できるファイルをダウンロードすることもできます。

shade

shade

shadeは自分で2色のグラデーションを作成できるサービスです。2つの色の色相、彩度、明度を組み合わせることで色々なグラデーションを作成することができます。

作成したグラデーションは右下に表示されているCSSをコピーすればそのまま貼り付けて使用することが可能です。

その他

NIPPON COLORS

NIPPON COLORS

NIPPON COLORSは日本での呼ばれ方を元に色を探すことができるサービスです。微妙な色の違いが名前で表現されていて、一つ一つ見ているだけで楽しくなってしまいますね。

和風のページを作る時にはぜひ参考にしたいサービスです。

Contrast-A

contrast A

Contrast-Aは、2色間のコントラストが適切かどうかを確認できるツールです。背景色とテキストの色のコントラストが弱いと読みにくいページになってしまいます。Contrast-Aを使って、ユーザビリティに優れた読みやすい色の組み合わせかどうかチェックしてみてください。

まとめ

カラーパレット系のサービスは、基本となる色を選択するだけで最適な組み合わせを提示してくれるので、Webデザインに役立つだけでなく、色々勉強になりますね。

Sketchのようなデザインツールと今回ご紹介したサービスを組み合わせて使うと、微妙な色合いを調整しながらデザインを進める時に効率良く進めることができます。

配色を上手く使いこなして、一段上のWebデザインを目指しましょう!

スポンサーリンク

おすすめの記事