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

グラデーション系

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

0to255

0to255

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

uiGradients

uiGradients

uiGradientsは美しいグラデーションのサンプルがたくさん掲載されているサービスです。様々な組み合わせのグラデーションが紹介されていて、どれもきれいなものばかりなので見ているだけであっという間に時間が過ぎてしまいます。Shiftキーを押すとグラデーション一覧を表示することができます。お気に入りの組み合わせを見つけてみてください。

WebGradients

webGradients

WebGradientsは様々な種類のグラデーションを探すことができるカタログのようなサービスです。ページ上でCSSをコピーすることができるので、気に入ったグラデーションが見つかったらコピペでデザインに適用することができます。また、CSSだけではなくPNG形式の画像としてダウンロードすることができるので、画像素材としてグラデーションを使用することもできます。。SketchやPhotoshopで利用できるファイルをダウンロードすることもできるので、UIデザインの際にもおすすめです。

shade

shade

shadeは自分でグラデーションを作成できるサービスです。2つの色の色相、彩度、明度を調整することで自由自在にグラデーションを作成することができます。プレビューを確認しながらグラデーションを作成できるので、微妙なチューニングを行うときなどには最適ですね。作成したグラデーションは右下に表示されているCSSをコピーすればそのまま貼り付けて使用することが可能です。

スポンサーリンク

その他

NIPPON COLORS

NIPPON COLORS

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

Contrast-A

contrast A

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

まとめ

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

Sketchのようなデザインツールでは、作成した色やグラデーションを保存しておくこともできるので、今回紹介したようなサービスで色の組み合わせを考えたら、自分だけのカラーパレッドを作っていくことができます。

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

おすすめの記事