web戦略等の情報や、WEB構築に役立つ情報を発信

ホームページの配色を決めるのに役立つWebサービス

Webデザインを行ううえで重要な要素の一つが配色です。

Webサイトを彩る色の組み合わせは、閲覧者の心理やページの見やすさなどに
直接的な影響を与える、デザイナーの腕の見せ所とも言えるでしょう。
しかしそれだけに、デザイナーには深い知識と繊細な心配りが求められます。

色に対する知識は、歴史や心理学などを含んだとても奥深い話題であることは
その知識を問う「カラーコーディネーター検定試験」「色彩検定」が存在し、
人気を博していることからもそれが伺えるかと思います。

今回は、その配色を決めるために役立つWebサービスをいくつか
ご紹介していきたいと思います。

①Adobe Color CC

https://color.adobe.com/

「Adobe Color CC」は、画面中央にある円を操作することで
直感的に配色を提示してもらえるWebサービスです。

「類似色」や「モノクロマティック」など、あらかじめ決めておいた
配色の法則(ハーモニー)に従い、ある一色を選ぶと他の色も連動して変わります。

作った配色のパターンは、Adobe CCのアカウントがあれば連動して保存でき
手元のPhotoshopでその配色を再現することが可能です。

こんなときに使いたい
・ある特定の色を使いたいが、それにマッチングする色が思いつかないとき

②Colormind

http://colormind.io/

「Colormind」は、色の組み合わせをAIが判断し、提案してくれるサービスです。

「Adobe Color」よりもさらに直感に基づいた色選びが可能です。
使い方もとにかく簡単で、左中央の「Generate」ボタンを押すだけ。
気に入らないときは繰り返しクリックすると配色が変わります。

もう少し精度を詰めたいときは、気に入った色の横にある鍵マークをクリックしてみてください。
するとその色がロックできます。(複数の色がロックできます)
この状態で「Generate」ボタンを押すと、ロックした色を基準に配色をしてくれます。

こんなときに使いたい
・色の組み合わせをとりあえずゼロから考えてみたいとき

③Palette Creator

https://chrome.google.com/webstore/detail/palette-creator/oolpphfmdmjbojolagcbgdemojhcnlod?hl=ja

「Palette Creator」は、画像からカラーコードを生成できる
Google Chromeの拡張機能です。

この拡張機能をインストールすると、Google Chromeで画像を右クリックした際に
「Palette Creator」という右クリックメニューが出てきます。
そこで「Create 8-color Pallete」のように色の数が指定でき、それを指定すると
瞬時に上の画像のように解析結果が出力されます。

こんなときに使いたい
・ある画像を参考にサイトを作りたいとき

④Multicolr

http://labs.tineye.com/multicolr/

上記「Palette Creator」とは正反対の発想で、任意の色を指定することでその配色に合った
画像が提示されるサービスです。

最大5色まで指定でき、その比率も変えることができます。

提示される画像は「Flickr」上に存在するパブリックドメインもしくは
クリエイティブ・コモンズの画像のみとなっているので、規約を確認・遵守することで
用途次第では自分のサイトに利用することもできます。

こんなときに使いたい
・配色に合った画像を見つけたいとき

最後に

その他にも色にまつわるWebサービスは多数ありますが、今回はそのうちの4つを紹介しました。
配色の楽しさ、奥深さを感じていただければ幸いです。

by
スポーツ観戦、ゲームや音楽、クイズなど多趣味に活動しています。 昨今の将棋ブームに乗って20年ぶりに将棋を遊び始めました。