Vol.1では、Webのギャラリーサイトを紹介した。このギャラリーを観覧することで、作りたいサイトのイメージが湧いてきたのではないかと思う。

デザインイメージの次に必要になってくるのは、サイトのテーマカラーである。最近ではモノトーンのサイトを良く見かける。白黒はスタイリッシュでシンプルにまとまり、写真などの素材が良く引き立つという効果もあるのだ。世の中に存在する無数の色、一色一色にそれぞれ意味があるということを理解してほしい。

色はDTPの世界でもそうだが、基本的にはメインとなるテーマカラー1色をまず選ぶ。この色がサイト全体のイメージを決めるので、非常に重要になってくるのだ。次にサブカラー1色を選定。このサブカラーは、メインカラーに合う色を選んでほしい。そして、状況に応じてポイントとして使用するカラー1色の計3色を軸に考えるといいだろう。当サイト「トリアイナ」では、黒をメインカラーに、サブカラーとして赤を使用。グレーをポイントとして使用している。

使用するカラーによって、サイトの印象は全く違ったものになる。それだけ慎重に選ばないといけないものであり、センスが必要となってくるのだ。と言っても、何も難しく考える必要はない。今から紹介する、こんな便利なツールがあるのだから。

Adobe Kuler

Adobeが提供しているカラーパレット投稿サイト。メインのテーマカラー1色から、それにマッチする5色のバリエーションを配色してくれる、何とも便利なサイトだ。

上の円形の部分は使用しなくてオッケー。まずは、正方形の5色が並んでいる、真ん中の部分にメインのテーマカラーを作る。後はその左右の正方形のどちらかでサブカラーを作っていく。残りはポイントとなるカラーに使用可能だ。これで配色は完璧である。

またユーザーが投稿したパレットも見ることができるので、参考にしてもらいたい。

先述したように、一番大切なのはメインの一色を決めること。そのためには、様々なハイクオリティーなサイトを参考にするといいのではないだろうか。Vol.1で紹介した、Webギャラリーサイトを活用するのも一つの手だ。

そして自分のイメージ通りの色のサイトが見つかったのであれば、そのサイトのカラーコードがすぐに分かれば便利である。そんな時、役に立つのがこれ！

Chrome 拡張機能「ColorZilla」

このChromeの拡張機能「ColorZilla」を使えば、マウスを乗せた場所の色のカラーコードを教えてくれるという優れもの。しかも画像であっても色を確認してくれる上に、ワンクリックでカラーコードをコピーすることもできる便利なツールとなっている。

これさえあれば、もうカラーなんて恐くないのだ。あなただけのカラーパターンを手に入れて、Webサイトのイメージ構築の一助にしてほしい。

Tweet