スマートフォンサイトの設計

2012年1月10日 | 広報・PR・イベント運営担当

2012年01月10日

スマートフォンサイトの設計

奥井 夏子
インフォメーションアーキテクト

「スマートフォンへの対応」は、昨年急激に増えたご相談の1つです。
2009年度末時点で携帯電話の総出荷台数の6.8%だったスマートフォンの比率が、今年度以降は出荷の半数以上を占め、契約台数についても15年度末には50%を超えるという予想*が発表されています。*MM総研調べ(2011年7月)

今回は、普段スマートフォンサイトを設計する上で、私が気を付けているポイントについていくつかお話したいと思います。


リンクの分かりやすさ

スマートフォンサイトは、画面に直接手を触れて操作を行う(マウスポインタが表示されない)ことから、PCと同じリンク形状を使っても、リンクだと分かりにくくなることがあります。それらを回避するために、例えば「矢印アイコン」を付けて、「リンクがある」ということをわかりやすくなどの工夫を行いますが、意外と見落としてしまいがちなのが「ロゴ」に貼るリンクです。

ロゴにはサイトホームへのリンクを貼ることが多いと思います。ただスマートフォンデザインで小さくなったロゴは、PCと比べて視認性に欠けたり、またポインタ表示がないことから通常の画像(リンクのないもの)との区別が感覚的につきにくい場合があります。そんな時におすすめしたいのが「ホーム」というボタンを作ること。ロゴの横に並べておくことで、ホームへの導線がとても分かりやすくなります。


タップのしやすさ

スマートフォンでは、リンクをタップしやすくするために十分なスペースを取るというのも重要です。例えば「ログイン」と「新規登録」のボタン。PCサイトで近接させて配置することの多いこの2つのボタンですが、PCと同じ比率で配置してしまうと、2つのボタン間に十分な余白が取れず、正確に1つのボタンをタップすることが難しくなってしまいます。2つのボタンを並べて配置する場合には「ボタンそのものを大きくする」「ボタン同士の余白に気を付ける」など注意が必要です。また上下にボタンを配置すると、下のボタンが指で隠れてしまうことも考慮しなくてはなりません。

下線リンクが並ぶデザインでは特に「縦の余白」に注意が必要です。横幅は文字数の長さにより大きさが確保されていても、上下の余白が足りず、結局ピンチ操作で拡大しないと正確にリンクがタップできないことがあります。実際にリンクをタップしながら「間違えて別のリンクを押してしまうことはないか」「指で見たい要素が隠れてしまっていないか」検証することが重要です。


スマートフォンならでは操作体験を活かした設計

スマートフォンを使っていて楽しいと思うこと、それはスマートフォン特有の動作やインターフェイスを体験した時ではないでしょうか。例えば「縦スクロール」の動作。上下キーで少しずつスクロールするフィーチャーフォンに比べ、スマートフォンでは、指先で軽快なスクロール動作を体験することができます。その他「ピンチ」(2本の指で画面を拡大/縮小)「フリック」(画面を軽くはじく)なども、スマートフォン特有のダイナミックな操作です。スマートフォンを設計するときには、これらスマートフォンならではの操作体験を楽しめる設計を心がけています。

同時に「これら動作が快適に行えるか」を考えることも念頭に置かなければなりません。

ページやエリアの持つ情報量を考えて、アコーディオンで開くのか、カルーセルで横移動させるのか、またはページ遷移させるべきかなどを考え、「動作の楽しさ」と「快適な操作性」を同居させることが重要です。

PICK UP

ライター

おもてなしを科学するイー・エージェンシーでは、クロスデバイス分析によるユーザー単位の分析やオンラインオフラインを横断した分析など次世代の分析をサポート。また分析データを元にしたABテスト支援から、EC領域での購買、行動データを活用したレコメンドシステムなどを提供。 お問い合わせはこちらにどうぞ。

お問い合わせ

サービスに関するご相談は
こちらよりお気軽にお問い合わせください。

e-Agencyの様々な情報をFacebookでお届けします!