kulerで気軽にカラーコーディネイト

第4回 Webデザインに活用してみよう

この記事を読むのに必要な時間:およそ 2 分

ワイヤーフレームにあてはめていく

仕様などが徐々に決まっていくと,画面設計に入ります。この段階で,情報を整理したワイヤーフレームを作成します。この段階は,配色というよりも「機能」「情報」がもれなく表現されているか,またそのボリューム感を確認するために用いるものです。なので,配色が決まる前に進めている段階でもあります。

この段階で承認が取れたら,このワイヤーフレームを元に,どこにカラーを配置するか決定します。配色生成の段階では見えなかった,色のボリュームが見えて来ます。これを誤ると,当初の狙った印象から外れてしまいます。

図3 琉球新報社リニューアルワイヤーフレーム

図3 琉球新報社リニューアルワイヤーフレーム

細かい色を決定していく

グローバルな配色は決まって来ました。あとは,細かい色の設定です。webサイトは見せるものではなく,使うものです。リンクの色など,マウスオーバーしたとき,クリックしたとき,様々な細かい色を決めて行きます。これもkulerで決めてしまい, Exchange Fileをダウンロードしておきます。

図4 琉球新報社webサイト配色ガイド

図4 琉球新報社webサイト配色ガイド

ディテールを作り込んで行く

クライアントから,様々な承認をいただけてから,ディテールの作り込みに入ります。ダウンロードしたExchange Fileはこのときに活用します。

この段階では,⁠印象」⁠機能」⁠情報」⁠配置」⁠配色」が既に決まっていますので,デザインに大きな変更が起こることはほとんどありません。

図5 琉球新報社webサイトデザイン

図5 琉球新報社webサイトデザイン

著者プロフィール

吉田コマキ(よしだこまき)

ブロッコ・デリ・アーキテクツ有限会社 取締役 デザイナー/アートディレクター。販促企画を経て,1996年にweb業界へ足を踏み入れてしまい,そのまま現在に至る。主にWebデザイン,インタラクションデザイン,グラフィックデザインに関わる。毎日情報設計ばかりしているので,たまの休みに絵を描くことで文字情報から離れている。

日本グラフィックデザイナー協会(JAGDA)正会員/沖縄大学マルチメディア教育研究センター研究員。

URL:http://www.blocco-deli.co.jp/