モバイルサイトに求められるデザイン力！

モバイルサイトにデザインが必要なのか？

　さて、Webデザイナーの方々は、携帯サイトのデザインと聞いて、どう感じられるでしょうか？

　「画面が小さく、表現に限界がある。デザインのやりがいがない」「端末ごとやキャリアごとに画面サイズ・仕様やコーディング方法が異なり、凝ったデザインをすると手間やコストがかかる」「どんどん新しくなる新機種への対応や実機確認が面倒」「フルブラウザ対応ならPC向けのサイトも見られるから、携帯向けのデザインサイトはいらないのでは」、こんな風に感じていらっしゃる方も多いのではないでしょうか。実際、本格的にモバイルサイトデザインに取り組んでいる、Webデザイナーはまだまだ少ないと言えるでしょう。

　しかし、「モバゲータウン（http://www.mbga.jp/）」や「グリー（http://gree.jp/）」など、携帯ユーザーに人気のあるサイトのほとんどが、画像やイラストをふんだんに使用し、デザインにも凝ったXHTMLベースのサイトです。携帯のECサイト等ではその傾向も顕著です。

　またフルブラウザの場合は、文字が小さくなってしまい、見づらかったり、別に料金がかかってしまう場合があったりと、携帯ユーザーにとって決して使いやすいものではありません。
やはり携帯で見るには、携帯向けにデザイン、最適化されたサイトが必要なのです。

　最近ではGoogleやYahooなど、モバイルの大手検索エンジンを使ったことのある人が、モバイルWebユーザー全体の8割にも達しています。TVのCM等で「続きはWebで」というフレーズがよく使われますが、こんなシーンでは、TVの前でパソコンではなく携帯から検索する人が非常に多いと言われています。この時、CMイメージとかけ離れたチープなサイトだったらどうでしょうか。もしかすると、ユーザーにはバッドブランディングとなっているかもしれません。

　また、ゴージャスな雑誌広告のページにつけられたQRコードから、サイトに訪れた場合も、テキストのみのサイトだったらがっかりするでしょう。

　モバイルサイトのデザインは、商品やブランド訴求のシーンでも無視できない存在になりつつあるのです。

リッチサイトと非リッチサイトとの比較

　図2はイタリアン・バールのサイトの比較シミュレーションです。全く同じ内容で、テキスト中心の場合（非リッチサイト）と、画像・Flashなどをふんだんに使用したリッチ表現の場合（リッチサイト）とで、2種類のサイトを作成してみました。

　制作例Aは、HTMLベースで最低限の共通サイズ画像を使用したサイトです。携帯サイトというとこういった印象のサイトが多いと思います。

　制作例Bは、XHTMLベースで、トップにはイメージが切り替わるインラインFlashを使用、コーナーごとに各機種に最適化されたサイズの画像と部分背景色を組み合わせて配置し、レイアウトが崩れないように作り込んでいます。

　さて、比較して見てどう感じられたでしょうか。伝わる情報量や印象が、全く違ってくると思いませんか。

　制作例Aのサイトでは、カフェなのかどうか、どんな特徴がある店なのか、うまく伝わってきません。制作例Bのサイトでは、イタリアンやカフェを楽しめる店で、こだわりのある店であることが直感的に感じられます。お店のコンセプトや業態、雰囲気もダイレクトに伝わってきます。

　どちらがよりお店の印象を、見る人に伝えやすいかは一目瞭然（りょうぜん）ですね。制作例Aのサイトでは、何より見ていて楽しくありません。他店の情報との差別化点を見いだすのに苦労してしまいそうです。制作例Bのサイトだと、下層のページやお店自体にも興味がわいてきて、イメージもより深く印象づけられると思います。