エンジニア採用セミナー
エンジニア採用セミナー
2014.05.19

Webデザインの色の組み合わせで迷ったときに役立つツールまとめ

藤田

 

color hailpixel

img08

こちらも使い方はいたってシンプル!マウスを動かすだけで配色パターンが作れます。

使い方

最初は以下のような画面ですが、

img09

  • マウスを左右に動かすと、色相が変更されます。
  • マウスを上下に動かすと、明度が変更されます。
  • 上下にスクロールすると、彩度が変更されます。

画面をクリックしていくと相性の良い色を選んでいくことができます。

HUE/360

img10

上記で紹介した「color hailpixel」より更にシンプルです。メインカラーを決めると自動で相性の良い色を選んでくれます。
 

使い方

まず「Brightness」で明るさを選びます。次にメインカラーを1つ選ぶと、自動でメインカラーと合わない色を消してくれるので、残りの色はどれを選んでもサブカラーとして相性の良い色となります。

選んでいった色は画面下に表示されていき、「Print User Color」をクリックすると選んだ配色のカラーコードを確認することができます。

おまけ

ColorZilla

img11

Firefoxのアドオンで、ページ内の色をスポイトで選んでカラーピッカーから使用色の数値をコピーすることができます。

シンプルな機能ですが、ギャラリーサイトを閲覧している際にはかなり重宝します。

使用色ごとにソート機能を持ったギャラリーサイト

特にカラー別にソートすることを意識して作成されたギャラリーサイト

(改めて見ると、大体のギャラリーサイトは色別にソートできますね。)

「Webデザインの参考になるギャラリーサイトまとめ33選」には、上記の例以外にも多数のギャラリーサイトが載っております。

また、「WEB DESIGN COLOR TESTER」は、選んだ配色をWebデザインに反映すると、どのようなイメージになるかを簡単に再現できるサービスなのでこちらも便利です。

まとめ

いかがでしたか?どれも便利なツールばかりでしたね。今回紹介したツールを使用すれば、誰でも簡単に配色を作成できますが、やはり基本的な色の知識は身に付けておきたいものです。

私も支援ツールや感覚に頼らず、配色のロジカル的な部分の勉強が必要なので、近々そちらについての記事も執筆します。重ねてよろしくお願いいたします。

  • 1
  • 2