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

リデザインを行う前に

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

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

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

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

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

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

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

色の印象をサンプリング

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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