カラーピッカーを使ってホームページの色を決定しよう。


ホームページのデザインに配色はすごい大切ですよね。
自分で色を作れる人はいいですが、そうでない人は色選びになかなか苦労します。
色選びに迷ったらみなさんはどうしてますか。

ホームページをデザインするときに、まずは面となるカラーを決めますよね。
赤とか緑とか、会社やサービスにあった色を。
だいたいの色が決まったら、具体的に明度とか彩度とか決めていくことになりますが、
どこかのサイトを参考にすることも多いと思います。
お客さんからこのサイトみたいにって言われることもあるでしょ。

サイトのイメージって、言葉で表現するより既存のサイトからこんな感じって言われる方がよく伝わります。
だから、参考サイトとか示してもらうこと多いですが、
たいていはレベルの高いデザインが指定されるので、お客さんにイメージがついてしまいます。
うまく説明しておかないと、人によっては参考サイトと違うとか言われかねませんしハードル上がるので困りますがw。

ブラウザの拡張機能を使えば、サイトで使っている色は簡単にとることができるので、
Chromeを使っている人は、これを入れておきましょう。

ColorPick Eyedropper

このツールを使って、お気に入りのサイトから色を取ればいいのです。
カンタンカンタン。

ホームページから色を選ぶ

メインの色が決まったら、次にサブのカラーを決めましょう。
メインの色だけだと単調になっちゃうので、サブカラーを使ってメリハリをつけます。

その時にメインの色に対して何色を使おうって、また悩んじゃいます。
そんな時には色のチートシートとか使ってみましょう。

The Ultimate Color Combinations Cheat Sheet

どんな色を選べばいいか、それぞれの色の相関関係が示されています。
ここにある色の関係を使って、先ほどのカラーピッカーでサブカラーを選びましょう。

533405-colour4-650-a542d8629a-1476252429

色の選び方ってすごい大事です。
デザインは同じでも色が違うだけで見た目が全然変わります。
きれいな色の選び方はデザインの見栄えに直結するので、ぜひ身につけたいですね。

今回はあえてカラーピッカーに絞って紹介しましたが、
色を選ぶツールはたくさんあります。
そのうちまとめて紹介したいと思います。