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

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

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

こんにちは,吉田コマキです。Webサイトのリニューアルには,必ずと言っていいほどビジュアル面でのリデザインが行われます。その際に頭を悩ますのは,様々。情報の整理であったり,機能であったり,そしてカラーリングであったり。今回は,そのwebデザインの現場でkulerを活用する方法にフォーカスをあてて,ご紹介します。

リデザインを行う前に

今回は,今年3月にリニューアルした琉球新報社のWebサイトのリニューアルについてお話します。

琉球新報社のWebサイトは,約2年ぶりのWebサイトリニューアルにあたり,次の事柄を機能要件として洗い出しました。

  • 現行のXOOPS活用をそのままに,機能拡張
  • コンテンツの基本指針の改革
  • そして,使いやすさとイメージアップ

ここでは,技術的なことは割愛させていただいて,ビジュアル面でのリデザインを中心にお話していきましょう。

まずは,リニューアル前の配色を検証

いきなりデザインをはじめるのではなく,まずは現行のサイトイメージがどのようなものかを検証します。それを客観的に,かつ資料にしてまとめておくことで,よりクライアントとのやりとりをスムーズにさせていきます。

リニューアル前のサイトのキャプチャをとり,kulerの[Create]の[From an Image]をひらいてみます。ここで,注意してもらいたいのは,ブラウザの枠はのぞいてトリミングし,広告バナーもマスクしておきます。現状の多い色を取り出せたら,その配色からExchange Fileをダウンロードしておきます。

図1 色だけで見るとよりサイトのイメージが分かります。

図1 色だけで見るとよりサイトのイメージが分かります。

図1-2

色の印象をサンプリング

サイトのデザインだけではない,色のイメージだけを抽出します。 今回はこの調査に時間をかけられなかったのですが,友人知人の約20名の方にこの配色で連想するイメージや形容詞をあげてもらいました。 すると,こんな回答が寄せられました。

  • あいまい
  • さみしい
  • うすい
  • はっきりしない
  • つかめない
  • わからない
  • 弱そう
  • 曇り空

どうやら,ネガティブな印象を持つ言葉が多くでてきています。それを意識して先導したつもりはないのですが,同じような形容がされることに気づきます。

今回は配色が取りやすかったサイトデザインでしたが,難しいようでしたら,ヘッダー部分などのグローバルメニューだけの配色や,ボックス毎に配色を抽出するのも手です。

イメージアップにどう配色で伝えるか

さて,先述でネガティブな印象が多く聞かれました。地方紙として与えたい印象としては,「情報の信頼性」「使う情報」。 確実な情報を多く,そして迅速にきっちり伝えていきたい,そしてそれらを活用してもらいたい。そう形容させるためには,

  • はっきりしている
  • にぎやか
  • つかめる
  • 強そう
  • わかる

といった,言葉でしょうか。

この段階で,こちらから形容を提案するのではなく,クライアントがどう思ってリニューアルをしたいのか気持ちを聞き出すことも大切です。具体的にデザインの話が出来る人は多くは有りません。しかし,形容詞などの単語を出していただくと,意外と簡単にそれらが出て来ます。

カラーイメージのポリシーは守りつつ配色

今回の話では,スムーズに進めることができましたが,中には,多くの言葉が出過ぎてしまって,それぞれで相容れない言葉や、理念から外れてしまった言葉も出て来ます。そこは,ファシリテーションの手法をもちいながら,時間をかけてクライアントの言葉に耳をかたむけます。

その中で,本当に伝えたいことへの軌道修正だけを行い,合意するまで整理します。

そこで,作った配色がこれです。クライアント(今回は琉球新報社様)から,企業カラーなどの指定の色は決まっています。それをベースに考えていきます。

図2 新サイトの配色。

図2 新サイトの配色。

実は,当初は,アクセントカラーとして位置づけた真ん中のオレンジは決まっていませんでした。基本となる「青」のカラーを決めたのちは,アクセントカラーの一色だけはデザイナーと様々な配色を試していきます。

琉球新報社様のように大型サイトにもなると,カテゴリ別でこのアクセントカラーを変えていく方法も取られます。実際に,イベント情報などの事業系の情報は別のアクセントカラーで表現することに決めていました。

著者プロフィール

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

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

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

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

コメント

  • Kulerとはまたちがうのですが

    私でもすぐに活用できそうな解説で楽しく拝読させていただいています。
    ところで、文中にあるexchange fileの解説をもう少しく詳しくして頂けないでしょうか。
    どの解説本にも取り上げているのが見あたらなく、こちらで解説して頂けたら嬉しいです。

    Commented : #1  ももん (2008/10/18, 11:21)

コメントの記入