Webデザインを行う際に気をつけなければいけないポイントの1つが配色です。どんな色を使うかによってページの雰囲気やイメージが大きく変わります。芸大や美大でしっかりと勉強をしたような人は知識が叩き込まれていると思いますが、色については本当に覚えることが多いため、初心者にはなかなか難しいものです。

今回は、そんな人におすすめの、Webデザインにおける配色を考える時に役立つサービスをまとめました。これからご紹介するサービスを利用すれば、色に関する知識が無くても優れた配色のデザインが作れるようになります!

スポンサーリンク

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

配色はWebデザインにおいて重要な要素の1つです。配色を変えるだけで、同じデザインのページでもそのイメージがガラッと変わります。モノクロで作ったページはクールでかっこいい印象を与えることができたり、暖色をメインに使うと温かみのあるページを作成することができます。また、ベースカラーやメインカラーにどういった色を使うかによってそのサイトの印象を大きく左右します。

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

おすすめのカラーパレットツール・サービス

では、早速サービスを紹介していきましょう。まずは、色の組み合わせの参考になるカラーパレット系のサービスです。

Coolors.co

coolorsはユーザーが作成したカラーパレットを閲覧できるサービスです。50万以上のカラーパレットの中からお気に入りのものを探すことができます。また、ログインすることで自分だけのカラーパレッドを保存することができたり、iOSアプリとAndroidアプリ、さらにはPhotoshopやIllustratorと連携することができます。

Chromeの拡張機能をダウンロードすると、表示しているページの中から色を抽出することができ、気に入った配色のページがあればそのページ上でカラーパレットを作成することも可能です。

Adobe Color CC

adobe color cc

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

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

中央に表示されている丸いカラーピッカーを操作すると、色相や明度を切り替えることができます。色に関する知識がなくてもバランスの取れた色の組み合わせを作成してくれるので、Webデザインのベースを考える時にとても役立ちます。

配色の見本帳

配色の見本帳

好きな色を選択すると、その色に関する情報をこれでもか!というほど教えてくれるとても便利なサービスです。単に配色を提案してくれるだけではなく、色に関する根本的な知識も学ぶことができます。色相環の角度による配色のページでは、下記のルールに則ってバランスのいい配色を教えてくれます・

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

これだけあればどんなWebサイトでも最適な色を見つけることができそうですね!自分の好きな色を見つけて勉強しておくと、デザインに活かせるポイントがいくつか見つかるのではないでしょうか。

paletton

paletton

palettonはベースとなる色に対して同類色、トライアド、テトラードなど、相性のいい色を教えてくれるサービスです。Adobe Colors CCのように1つ色を選ぶだけで組み合わせやすい色を教えてくれるので、メインカラーが決まっていて他の色を決めたい場合に使ってみるのがいいでしょう。

HUE/360

hue360

HUE/360は、自分で好きな色を選びながらデザインの配色を作っていくサービスです。シンプルなサービスですが、自分で色の組み合わせを作っていく感覚がとても楽しいですね。選択した色はカラーコードにして出力することができるので、コピペで簡単に使用できます。

Colormind


こちらはディープラーニングを活用して、最適な色の組み合わせを提案してくれるツールです。写真や映画、アート作品などから配色のデータを学習しており、日ごとに異なる結果が表示されるとのこと。

ランダムに組み合わせを生成することも、自分で何色か指定して配色を生成することも可能で、配色に困ってインスピレーションが欲しい時に使ってみるといいアイデアが浮かぶかもしれません。

Khroma


Khromaは好みの色を50色選ぶことによって人工知能が配色の好みを学習し、その人におすすめの配色を提案してくれるカラーパレットツールです。その人の好みに合った配色を提案してくれるので、きっとお気に入りの配色が見つかりますよ。

テキストと背景、2色の組み合わせ、グラデーション、写真、カラーパレットのそれぞれで様々なアイデアを表示することができます。詳しい使い方はこちらの記事をご覧ください。

Color Hunt


4色の様々な種類のカラーパレットが紹介されているサイトです。お気に入りボタンが付いているので、人気順に並べ替えることも可能です。シンプルですが、種類がとても豊富なのでアイデアに困ったときに眺めてみると何か思いつくかもしれません。

NIPPON COLORS

NIPPON COLORS

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

Contrast-A

contrast A

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

Colordot


マウスカーソルを移動させることで好みの色を探すことができるツールです。左右に移動すると色相が、上下に移動すると彩度と明度が変化するようになっています。PCで表示すると大きな画面で表示することができ、微妙な色の違いにこだわる方にはとてもおすすめです。

まとめ

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

また、グラデーションのサンプルが掲載されているサイトや、オリジナルのグラデーションを作成できるツールやサービスも様々なものがあります。カラーパレットで見つけた配色からグラデーションを作ってみるのもいいかもしれませんね。

カラーパレットを上手く使いこなして、一段上のWebデザインを目指しましょう!

おすすめの記事