スマートフォンサイトの設計│株式会社イー・エージェンシー

2012年01月10日

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

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

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

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

リンクの分かりやすさ

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

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

タップのしやすさ

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

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

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

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

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

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