スマートフォンサイト制作の注意点

公開日:
カテゴリー:
これからホームページを発注する方向け

近年サイトをスマートフォンに対応させるニーズが高まっています。私もレスポンシブWebデザインという手法でスマートフォンに対応したサイトの制作をすることが増えました。

これまでの制作経験からユーザーに使ってもらえるスマートフォンサイトを制作するための基本的な注意点、気にするべきポイントをまとめてみます。

1、サイトを軽くする(パフォーマンス)

以前知人がFacebookで制作に携わったサイトを紹介していてそのサイトを見たいと思ったのですが、スマートフォンでアクセスしようとしていたのでずっと読み込まれず、結局サイトは見れませんでした。原因は重さです。
どんなに素晴らしいコンテンツやデザインを用意していたとしても、アクセスできなければ意味がありません。

ユーザーがサイトに訪れようとしたときに必ず最初に体験するのがサイトの応答時間です。
最初の体験で長く待たされるというのは気分が良いものではありません。サイトそのものの印象も悪くなってしまいます。

  • ユーザーのうち57%は、ページの読み込みが3秒を超えると離脱する
  • そのうち80%のユーザーは二度と戻ってこない
  • さらにそのうちの半分は、自分のネガティブな体験について他の人々に伝える

http://www.aberdeen.com/research/5136/ra-performance-web-application/content.aspx

ユーザーがページの表示に待てるのは2秒まで、3秒以上かかると40%以上のユーザーが離脱するとも言われています。(Search Marketing Expoより)

サイト制作の現場では、そのサイトがどのように見えるか(デザイン)は議論の中心になりやすいですが、Webページが表示されるまでどれくらいユーザーを待たせるのかには関心が注がれていません。
スマートフォンでリッチな技術を使って情報を見せる必要があるサイトはごく少数でしょう。
スマートフォン向けのサイトを制作する場合にはどれくらいの軽さで情報を提供できているかを常に気にかける必要があります。

2、押しやすさ・使いやすさ

スマートフォンは指で操作するためPC向けサイトとは注意するポイントが違います。

過去にスマートフォン対応のサイトを制作するために、既存のいくつかのサイトを実際に操作して使いやすさを検証してみました。

そのときに、javascriptで要素が表示されopenしたりcloseしたりする操作が想像以上に押しづらく使いづらく感じました。また動作もPCに比べるとスムーズではなく、ほんの少しの動作の遅さにイライラしたり、スライドショーのようなものも小さいボタンを操作してまでスライドさせたいと思わなかったり、全体的にjavascript関連の操作のしづらさが気になりました。

これに関して「スマートフォンサイトの情報表示方法に関するユーザビリティ調査」をご紹介しておきます。
これはインタラクティブUIに関してユーザーに調査したもので、性年代別に結果がまとめられています。
性年代別とありますが、どの性年代でもアクションが多いと負担がと感じるのは共通しています。

インタラクティブ UI を使用することは、情報量の多いページではスクロールの手間やレイアウトのムダを省くことができますが、「アコーディオンを開く」「タブを切り替える」などワンアクション多い操作が必要となりユーザーの負担増につながる可能性もあります。

スマートフォンサイトの情報表示方法に関するユーザビリティ調査
http://www.imjp.co.jp/report/research/20120330/res/obj/report20120330.pdf

ユーザーの操作の負担もあるということを念頭に置いて、上手にアクションを導入するとよいでしょう。

3、画像について

画像の中に文字が入っていると、スマートフォンでは表示領域が小さいため読みづらくなってしまいます。
行程などを表す図等、文字が入った画像を沢山使っているサイトはなるべくHTMLとCSSで表現するように変えるとよいでしょう。
画像でなければ表現できない場合は必ずピンチアウトで拡大できるようにしておきましょう。

画像をポップアップ画面で拡大表示するような場合も注意が必要です。
パソコンで画像拡大に使用されることが多いポップアップの表示ですが、スマートフォンでは、デバイス自体のサイズが小さいため、導入しても画像が大きく表示されないことがあります。
ポップアップ内でピンチアウトで画像拡大ができないようになっている場合もあり、画像拡大の方法としてポップアップ画面というのは最適ではないかもしれません。

4、情報の探しやすさ

スマートフォンではPCと比べるとはるかに小さい画面でサイトが表示されます。
1画面に表示されるコンテンツの量もはるかに少ないものです。

その小さい画面でユーザーが知りたい情報にたどり着きやすくしなければなりません。
サイトの階層の作り方やカテゴライズの方法など注意して取り組む必要があります。
またナビゲーションの形をどうするかということもしっかり検討しなければいけません。

あるサイトでは、ナビゲーションが折りたたまれて帯になっており、私はそれがナビゲーションだと気がつくことができませんでした。
そうなるとサイト内の情報を探すことができません。

ユーザーは一般的にはナビゲーションを軸にサイトを巡回するため、ナビゲーションは使いやすく、見つけやすく、そして目的のページを探しやすくしなければなりません。

記事を共有する

この記事を書いた人

プロフィール画像

山本美代子
フリーランスWebデザイナー。
美術系大学後、情報誌の会社の制作部、Web制作会社を経てフリーランスに。
ビジネスに貢献できるサイト制作のためにUXやマーケティングの勉強中です。 ペーパープロトタイプ作成後、デザイニングインザブラウザにてUIデザインを行う制作スタイルで制作しています。