「携帯サイトデザインのルール」タイトル

2010年11月 通販新聞社 月刊「ネット販売」連載記事バックナンバー

携帯電話を「通販ツール」に進化させるプロフェッショナル育成講座 タイトル ビジネス感度を高めで受講のこと

連載◆69時間目
「携帯サイトデザインのルール」

皆さんこんにちは。飯野です。今回のテーマは、携帯サイトのデザインです。携帯サイトのデザインは、PCサイトのデザインとは大きく異なります。今回載せる内容は、弊社のWebデザイナー達の現場の声をもとにしています。実際に携帯サイトのデザインをしてみないと分からないことばかりで、マニュアルにも載っていないこともあります。これから携帯サイトを作る人なら必ず突き当たる課題ですので、一緒に勉強していきましょう。



携帯サイトをデザインする前に

携帯サイトのデザインを作る前に、まずしなければならないのは、サイトの目的やターゲットを明確にすることです。商品を売りたいのか、会員登録させたいのか、情報を提供したいのか。ターゲットはOLさんなのか主婦なのか、住んでいるのは都会なのか地方なのか。そのようなことから、作るべきデザインは大きく変わってきます。ユーザーの状態によって、携帯サイトの使われ方は180度変わるからです。そのことをよく覚えておいてください。

データサイズは100KB以内が基本だが…

現在、一般的に使われている携帯は何百機種もありますが、デザインもそれに合わせて何百種類も用意できる訳ではありませんので、デザインを一つに決め、それに合わせてシステムを作っていきます。そのデザインにどれだけ文字や画像を表示できるかは、表示させたい機種のデータサイズ制限によって変わってきます。古い機種も網羅するのか、ここ1、2年の端末にのみ対応していれば良いのか。どこまで対応させるか、それがデザインの基準となります。

携帯の機種には世代があり、大きく分けて2Gと3Gがあります。2Gは簡単に言うと昔の携帯です。白黒画面や、着うた非対応、カメラ無し、通信速度は遅く、画面は粗く小さい。データサイズは5KB程度に抑えなければなりません。5KBというと、画像を1個入れるのがやっとの容量です。3Gは新しい機種で、現在使われている機種の95%以上が3Gです。既にキャリア(ドコモ、au、ソフトバンク)の公式サイトでは既に2G向けの新規サイトは受け付けていません。3Gのデータサイズは100KB程度です。これから携帯サイトを作る場合には、一般的なショッピングサイトであれば100KB以内を基準に作り、大半の3G端末に対応させることをお勧めします。

ここで注意しなくてはならないのは、100KBまでは表示できますが、100KBぎりぎりに作ってはいけないということです。100KBぎりぎりまでページに文字や画像を入れ込むと、表示されるまでに非常に長い時間がかかります。最後まで表示されない端末も出てきます。表示待ちのストレスは即、サイト離脱に繋がりますので要注意です。

同じ70KBでも、画像が多ければ表示時間が長くなります。サイトにアクセスが集中しているときには、普段以上に表示時間が長くなります。また、auの一部の端末では、3Gでも100KBまで表示できないものもあります。それらを切り捨てるか対応するかは、サイトのユーザー層によって判断することになります。最新端末を使っているような流行に敏感な層が多ければ、切り捨てるのも一つの方法でしょう。そのような意味でも、最初にターゲットを明確にすることが大事なのです。

同じ色でも機種によって見え方が異なる

色はデザインを左右しますので、携帯サイトのデザインでも最も悩むところではないでしょうか。自社のサイトを見て、なんとなく寂しい、ごちゃごちゃしている、統一感がない、と思っている方は、他社大手の携帯サイトを一度じっくりと見てみることをお勧めします。若い女性向けのサイトなど、一見カラフルで煩雑に見えるサイトでも、よく見ると3~4色の基調色があるはずです。これ以上色数を増やすと、まとまりがないサイトに見えてしまいます。逆に色が少なすぎてもメリハリがなく、印象の薄いサイトになってしまいます。

シンプルでスタイリッシュに見せたいのであれば、絵文字の使用も控えるべきです。ドコモの絵文字はテキストと同じ色にできますが、auとソフトバンクの絵文字は画像固定の色となっており、絵文字を使うだけで画面が賑やかになります。賑やかさを出したいのか出したくないのか。そのようなこともサイトのユーザー層によって決めるべきです。若い女性向けのサイトならピンクや黄色などの暖色系が良いでしょう。幅広い層がターゲットになるのであれば、誰にでも分かりやすく背景色は白に、文字は小さくしすぎない、などと考慮することが必要です。

同じ色の指定でも、機種によって薄く見えたり濃く見えたりするので、複数の機種で検証しながらデザインしていってください。例えば、薄いパステル系の色を背景色にした場合などは、ほとんど白にしか見えないことがあります。また、グラデーションをつけたと思っても、機種によっては微妙な色指定の違いは全て同じ色に表示されてしまい、グラデーションになっていないこともあります。携帯でも色として比較的再現しやすいのは、Webセーフカラーの256色と言われています。

携帯の文字表示は、なかなか思い通りにならない

携帯サイトの文字には大きく分けて大中小の3種類があります。一般的には「中」のフォントが多く使われていますが、最近は1画面に表示される情報量が増えてきたり、ユーザーが携帯サイトを使い慣れて小さい文字を見慣れてきたりしたことで、「小」を中心に使うサイトも増えてきました。この使い分けもターゲットによって判断してください。いわゆる「ケータイ世代」の若者がターゲットのサイトなら、「小」でもOKです。ただし注意しなければならないのは、同じ大きさを指定しても、キャリアや機種によって表示の仕方が異なることです。設定上は同じ大きさでも、ある機種では「大」に表示され、ある機種では「中」のままだったりします。中には大小の指定自体が無効とされ、全て一律で「中」で表示される機種もあります。文字の大小が変わると改行される箇所が変わってきますので、文字を中央揃えにした場合などは特に注意が必要です。

改行で注意しなければならないのは、連続するアルファベットやカタカナ、桁の多い数字を使う場合です。図を見てください。機種によってこのように、改行される箇所が異なります。

文字は基本的にどんな色でも指定できますが、意外と避けたほうが良い色は、「青」です。なぜかというと、青は基本的にテキストリンクに使われる色なので、通常のテキストでも青を使うと、リンクに見間違えることが多いからです。多くのユーザーには「青=テキストリンク」という無意識に思ってしまうため、青は避けたほうが無難です。

端末によって改行の位置が異なる。

絵文字の使い方にはサイトごとに一定のルールを設けた方が、デザインにまとまりが出ます。絵文字はワンポイント的に文章の頭に使う場合や、文中に使う場合がありますが、どちらかに決めたほうが綺麗に見えます。絵文字を入れたほうが親しみは出ますが、高級ブランドサイトなどでは、一切絵文字を使わないところもあります。

文字を目立たせたい場合や、1行に表示できない文字を1行に表示させたい場合に使うのがマーキー(marquee)です。文字をテロップのように画面上に流し、流す動きを繰り返させることです。このマーキーの使い方にも注意があります。キャリアによっては流れる文字数や回数に制限があります。また、マーキーを多用し過ぎると、見ているユーザーの目が疲れてしまいますので、本当に強調したいところだけに使うようにしましょう。

文字をひと通り入力したら、必ず携帯の画面上でバランスをチェックしてみましょう。読みにくさは感じませんか?PCサイトをそのまま携帯サイトに変換すると、文字をびっしり並べたページになってしまうことがあります。改行のない文章はユーザーに圧迫感を与えてしまうので、携帯では3~4行ごとに段落を作り、行間を空けるのがベストです。ひと通り実機でチェックをして、ページが長すぎる、ページの上に戻るのが億劫だ、と少しでも思ったら、適当な場所へ「上へ戻る」というリンクを付けるようにしましょう。ページの一番下にこのリンクがあるサイトは多いですが、ページの途中で戻りたくなったときに一番下まで行くのは不便ですので、できればページの中間にもあると良いでしょう。ただし、「上に戻る」が多すぎると鬱陶しいのでバランスが大切です。

デザインを調整したら、必ず実機で確認すること。それも一台だけではなく必ず複数台で。こっちを直したと思ったらあっちがおかしくなっていたり…携帯のデザインはこのような修正作業の繰り返しなのです。



他の記事を見る


矢印 アイコンバックナンバー目次へ


飯野勝弘プロフィール

飯野勝弘プロフィール

日本IBM㈱にて法人営業後、大手通販会社の通販部門責任者を経て、 ㈱MTI(ジャスダック上場企業)執行役員モバイルコンテンツ事業部長として、公式コンテンツ300サイト以上の立ち上げを経験。現在㈱モバイルコマース代表取締役として、全国の通販企業の携帯サイトコンサルティング業務を行う。
主業務に携帯サイトの設計企画、3キャリアへの公式承認代行(完全成功報酬制)、サイト開発、運営、売上UPコンサルティング、セミナー等 幅広く活動中。毎月4キャリア(ドコモ・KDDI・ソフトバンク・ウイルコム)へ通販企業様の公式サイト提案を行っている。数社のIT企業役員も兼務。


連絡先:東京都世田谷区用賀2-38-14 青木ビル 4階
電話03-3700-5259



トップへ戻る アイコントップへ戻る

» モバイルコマース トップページ » 通販新聞社 月刊「ネット販売」連載記事バックナンバー » 「携帯サイトデザインのルール」