ホーム » ウェブの配色

カテゴリー:ウェブの配色の記事

配色ツールの使いどころ

ウェブ配色ツール Ver2.0が好評のようで、はてなブックマークでも1600人以上の方にブックマークしていただいているようです。Adobe kulerのブックマーク数を超えることも出来て、高評価いただいたのだなぁとうれしく思います。本当にありがとうございます。

このツールを作りながら考えていたのは、それなりに見える色の組み合わせは、比較的簡単な計算式で出来てしまうということです。多少なりともプログラミングの知識がある方なら、ソースコードを読んでもらえればすぐに理解出来るかと思います。もちろん最初に用意したレイアウトに限定した配色であり、柔軟性では人間の頭脳には到底及びません。(私ががんばればもっと精度を上げることも出来ますが、その必要を感じていません)

色彩決定の流れここで色が最終決定するまでの流れを見てみます。私がウェブの色彩を決定する場合の例なので、一般的には違う部分もあるかもしれませんが、概ね左の図のような感じでしょうか。

まず1番目のカラーマーケティングですが、競合サイトの色(あるいは実店舗)の色を調査する段階においては、ツールで決められるようなことは何もありません。

1の結果を踏まえて、このような色を中心に色彩設計すれば、よい効果を生むことが出来るだろうという提案をするわけです。1の結果を踏まえれば、1色から配色展開出来るこのようなツールは使えますし、プレゼンテーションにも使えるでしょう。

次にワイヤーフレームの作成です。これはデザイナーさんなりディレクターさんの仕事かと思いますが、ワイヤーフレームが先に出来ていれば、2と同時にワイヤフレームに簡単に彩色を行うこともあります。その方がクライアントには伝わりやすいですからね。

配色の方針もワイヤーフレームも出来上がれば、デザイナーさんにがんばっていただくことになります。Webクリエイターボックスさんの記事にもありますように、実際にはツールだけで完結するわけではないので、細部を決めていってもらわなければなりません。

そして最後に出来上がったデザインの色彩をチェックして修正します。私の場合は読みやすさやウェブコンテンツJISやWCAG2.0(ウェブコンテンツ・アクセシビリティ・ガイドライン)といった諸規格の基準を満たしているかや、配色のバランス・伝えたい情報に見合った色が使われているかなどを確認します。

最後の調整の部分の読みやすさについては、配色ツールにもいくらかは取り入れましたが、どうしても数値だけではカバーしきれない部分があります。可読性の条件を満たしていれば無条件に読みやすいというわけではないので。

と、このような流れを見渡した時に、配色というものをきちんと捉えるならば、ツールが使える部分というのは、かなり限られてくるのだなと思います。個人サイトや社内で使われるシステムなどの配色を決める場合には、ツールに依存してもそれほど大きな問題は生じないかもしれませんが、企業や店舗などのサイトでは、これだけを信頼するのは危険ですね。

あーだこーだと書いてきましたが、平たく言えば、先に「赤を使って配色をする」と決めてから、その色をどうしようかと考えるための道具がこの配色ツールではないかと考えています。

色彩戦略的には1のカラーマーケティングが、戦術的には5の最終調整が重要で、繰り返しますがこの辺りはツールではどうしようもない部分です。「ツールでポン!」みたいな感じではなく、その前後のプロセスをぜひ重視してもらいたいなと思います。

言いかえれば、マーケティングが必要でないバックエンドで使われるシステムなどの画面設計には使いやすいかもしれませんし、ツールを組み込むのもありかもしれません。

もっともツールはあくまでもツールで使う人次第で、気楽にお使いいただければと思います。読みにくいサイトや、ごちゃごちゃして使いにくい配色のサイトが少しでも減ると増えるとうれしいですね。

1 / 11

▲このページの先頭に戻る