サイトのモバイル版：改善前・改善後で見る 10 のルール
ネットショップの訪問者の多くはスマートフォンから訪れ、そこで購入を決めます。モバイル版サイトの 10 のルールを改善前・改善後の例とともに紹介し、Apple、Google、WCAG に基づくボタンや文字の具体的なサイズも示します。
モバイル版が「縮小版」ではない理由
スマートフォンでは指でタップし、小さな画面で読み、片手で操作することも多くあります。パソコンで快適なものも、スマートフォンでは小さく、窮屈で、分かりにくくなります。さらに Google はモバイル版でサイトをインデックスするため、検索も売上もモバイル版次第です。
実例付き 10 のルール
1. ボタンは大きく
操作は指で、カーソルではありません。Apple はタップ領域を 44 × 44 pt 以上、Android は 48 × 48 dp を推奨し、アクセシビリティ基準 WCAG 2.2 は最小 24 × 24 px と定めています。
2. 文字を大きく
パソコンで問題ない文字もスマートフォンでは読めません。本文は拡大しなくて済むよう 16 px 以上が一般的です。Google の Lighthouse は、テキストの 40% 超が 12 px 未満のページを指摘していました。
3. 余白に気を配る
ブロックが詰まっていると、画面は窮屈で安っぽく見えます。余白は思っているより多めに。
4. ボタンは縦に並べる
横に 2 つ並べるとスマートフォンでは細くなります。横幅いっぱいのボタンを縦に並べれば押しやすく、誤タップも減ります。
5. スワイプできることを示す
カードがスワイプできるなら、それが分かるように。次のカードの端やドット、矢印が続きを示します。
6. メニューをコンパクトに
ヘッダーが画面の半分を占めてはいけません。ロゴとメニューボタンだけのコンパクトなヘッダーで、主役に場所を空けます。
7. 二次的な情報は隠す
スマートフォンで全部を一度に見せる必要はありません。アコーディオンやタブ、「もっと見る」でページがすっきりします。隠しても削除はしないこと——Google はモバイル版をインデックスするので、内容はパソコン版と同じにします。
8. 連絡先はタップで開けるように
電話番号やメールは 1 回のタップで開けるように。そのための tel: と mailto: リンクがあります。「電話する」ボタンならさらに簡単です。
9. 最初の画面を詰め込みすぎない
ファーストビューは狭いので、見出し 1 つ、短い説明、主要な操作 1 つに。バナーや割引、登録は下へ。
10. パソコン版をそのまま写さない
モバイル版は小さくしたサイトではありません。ブロックを並べ替え、3 列を 1 列にし、余計なものを省きます。
Metriverra では、スマートフォンとパソコンの訪問者がどう成約しているかが分かるため、モバイル版の改善が売上につながったかを簡単に確かめられます。
まとめ
- ボタンは 44 × 44 pt（Apple）または 48 × 48 dp（Android）以上、WCAG の最小は 24 × 24 px。
- 本文は 16 px 以上、ブロック間に余白を。
- ボタンは横幅いっぱいで縦並び、連絡先はタップで開けるように。
- ファーストビューは主要な操作 1 つ、二次情報はアコーディオンに。
- モバイル版は作り直しであって縮小版ではない。内容はパソコン版と同じ。
出典: Apple — Human Interface Guidelines: Accessibility · Android Developers — Make apps more accessible · W3C — WCAG 2.2: Target Size (Minimum) · Chrome for Developers — Lighthouse: legible font sizes · MDN — The Anchor element · Google Search Central — Mobile-first indexing
