こんにちは。ケータイlivedoorを担当してます多留です。

今回は、私がモバイルサイト作りでいつも意識して取り組んでいる "配色の仕方"、"メリハリの重要性" についてお話させていただきます。

モバイルサイトと配色

モバイルサイトは、PCのようにガンガン画像を使うとか、JavaScriptを使って動きをつけるとか、まだまだできないこと、制限のあるところが多々あり、線や細かい背景色・文字色・絵文字の使い分けなどでページを構成する必要があります。

配色や見せ方に関してはセンスが問われるところで、特にモバイルサイトのように凝縮されたスペースでの表現は難しく、苦手な人はホントに「いつまでたっても苦手」という方も多いと思います。

私個人としては、PCよりもモバイルサイトで全てを済ませようとしていて (つまりは携帯依存症……) いろんなジャンルのモバイルサイトデザインを見ているおかげで、配色や見せ方に苦労をすることは少ないですが、こういったところで苦労する方にはAdobeの「kuler」をおすすめします。



英語ですが視覚的にわかるので使いにくくはないはずです。「ポップな感じ」「シックな感じ」「キレイな感じ」などなど簡単に自分の中で大きく色のイメージを決めたら、kulerが配色パターンを教えてくれます。もちろん微調整も可能です。イメージがなくてもすでにある「テーマ」を選べば配色パターンを提示してくれます。

このようなソフトに沿って色を決めれば、まず無難なページは作れます。もともと配色センスのいい人が使えば、さらなる時間の短縮になるでしょう。

配色とメリハリ〜「ユーザーに何をさせたいか」

デザインや配色センスというのは非常に重要なのですが、さらに重要なことは、ユーザーに何をさせたいか、もっといえば、どのリンクを押させたいか、どこに誘導したいかは、ユーザーの行動意欲を刺激することを意識する、ということです。

きれいにまとまったページを作ると、得てして平坦になりがちでどこを読めばいいのか、どこを使えばいいのか、ユーザーの頭に視覚的に入ってこない危険性があります。



こちらは私が携わってるプロ野球のコンテンツですが、左画像のページは「プロ野球速報」を目立たせています。メリハリをつけるのに一番ラクで、効果的なのは目立たせたいところの背景色と文字色をガラッと変えることです。このページはさらに、速報感を出そうと燃える画像をつけています。

右側のページは各試合の詳細ページですが、ユーザーに一番押してもらいたいのは「テキスト中継」ページへのリンクです。黄色い一番目立つ画像とスコアボードの下にテキストリンクを設けてとにかく強調しています。

こういった形で私は、ページ自体を整理した上で、さらに「一番みてもらいたいところ」を必ず目立たせます。メリハリをつけます。

"メリハリ" は当り前のようですが、デザインにこだわりすぎると、ページ全体のイメージや色味ばかりを気にして、メリハリをつけることを忘れてしまうことがあります。

PCサイトとは違い、表示領域の限られたモバイルサイトのUIは、特にファーストビューで、何を見せたいかを、"ボンヤリ見に来たユーザー" にも伝える、立ち止まってもらうためにメリハリをつけなければなりません。

ウェブサイトを運営する上では、「ユーザーに何をさせたいか」を元に、メリハリをつけることは常に意識しなくてはならないことでしょう。

番外編 (おもしろい見せ方)

先日行われたワールドカップでは、「運営者の実況」と「ユーザーのつぶやき実況」を融合した実況ページを設けました。

運営者の実況は濃い文字色で静止、ユーザーの書き込みはニコ動風に流れるようになってます。ただmarqueeにしているだけですが、画面スクロールによって1行1行marqueeの出方が違うので、見た目はかなりおもしろいです。

私は、ケータイlivedoorのUIがモバイルサイトのスタンダードとなるような、他のモバイルサイト制作者の参考になれるよう、日々細かくこだわって、モバイルサイト作りをしています。



ライブドアでは、モバイルサイトUIに熱いこだわりを持つディレクターを募集しています。