モバイルサイトのベストプラクティス10 part.1

2011年11月24日に行われた、Google主催スマートフォン向けサイト最適化勉強会で解説された、モバイルユーザーにとって最適なサイトを作成するために重要な点をまとめたものです。

当たり前のことかもしれませんが非常に重要な点なので、（抜粋した）ポイントをシェアしたいと思います。

モバイルユーザーが時間に追われているのはよくあることです。サイトの読み込み時間を短縮し、テキストは目を通しやすいものにして、多忙なユーザーをサポートしましょう。

＞＞モバイルユーザーがもっとも必要とするコンテンツや機能を優先
＞＞サイトの解析データを基に、モバイルユーザーの行動特性を調べる
＞＞長文のテキストは避け、箇条書き等で読みやすく構成する
＞＞画像を圧縮し小さいサイズに抑え、サイトの読み込みを早くする

明快なナビゲーションを用意することでユーザーが目的のものを見つけやすくなります。大規模なサイトや複雑なサイトでは検索機能を備えると便利です。

＞＞スクロールは最小限に抑え、縦方向に限定する
＞＞メニューの階層構造を明確にし、ロールオーバーの使用は避ける
＞＞「戻る」ボタンや「ホーム」ボタンをわかりやすく設置する
＞＞ナビゲーション用のリンクは1ページに7つ以内に抑える
＞＞複雑なサイトでは目立つ場所に検索ボックスを配置する

携帯端末の操作には特に親指が多く使われます。手の大きいユーザーでも簡単に操作できるようにサイトを設計しましょう。

＞＞ボタンは大きめのサイズにして中央に配置、ボタン同士の間には十分なスペースを確保する
＞＞小さいボタンはパディング設定等でクリック可能面積を増やす
＞＞チェックボックスはテキストの部分もクリックできるようにして操作性を上げる

ユーザーの目を疲れさせにくいデザインや構成にしましょう。ユーザーは暗い場所にいるかもしれません。読みやすさを意識しましょう。

＞＞背景とテキストとのコントラストを確保
＞＞コンテンツは画面にきちんと収まるようにレイアウトし、ピンチやズームを使わなくても読めるように配慮する
＞＞コンテンツを詰め込みすぎず、空白スペースも残す
＞＞リンクやボタンの重要度がわかりやすいようにサイズや色を工夫する

モバイルサイトは、すべての携帯端末で動作し、画面の向きを問わないのが理想的です。Flashは一部の端末では動作しませんので代替策を探しましょう。

＞＞インタラクティブ性やアニメーションはHTML5を使って実現
＞＞画面が縦長でも横長でも対応できるようにサイトを作成
＞＞ユーザーが画面の向きを変えても表示箇所がずれないようにする

記事が長くなってきたので6～10の項目についてはpart.2で掲載します。

【追記】AdSense 日本語版公式ブログにも掲載されました。
モバイル向けサイト作成のための 10 のヒント

カテゴリ