Webサイトの閲覧は、業種にもよりますがスマートフォンからが半分以上を占めることが珍しくありません。BtoCなら7〜8割になることもあります。
にもかかわらず、デザインの確認はPCの大きな画面で行われがちです。会議室のモニタに映して「いいですね」と決まったデザインが、スマホで見ると別物になっている。これは非常によく起きます。
なぜ崩れるのか
- 横幅が3分の1以下になる：PCが1,400px前後、スマホは375〜430px程度
- 横に並べられなくなる：3列のカードは、縦に3つ積まれる
- 一度に見える面積が減る：PCで1画面に収まっていた情報が、スマホでは4〜5画面分になる
つまり、PCでは「同時に見える」ものが、スマホでは「順番に見る」ものに変わります。この変換で情報の優先順位が問われます。
よくある失敗
失敗1：ファーストビューに何も入らなくなる
PCでは、大きな写真の上にキャッチコピーとボタンが乗って美しく収まっている。これをスマホにすると、写真だけで画面が埋まり、コピーもボタンも下に押し出されます。
対策は、スマホ用にファーストビューを別構成にすることです。写真の高さを抑える、コピーを短くする、ボタンを写真の上ではなく下に置く。PCと同じ見た目を保とうとすると、たいてい破綻します。
失敗2：横に並んだものが、意図しない順番で縦になる
PCで「左に画像、右に説明文」と並んでいるブロックは、スマホでは縦に積まれます。このとき、画像が上か、文が上かで印象が変わります。さらに、こうしたブロックが交互配置になっている場合、スマホにすると並び順が不規則になることがあります。読みにくさの原因になるので、確認が必要です。
失敗3：表が画面からはみ出す
料金表や比較表は、PCでは問題なく収まります。スマホでは横幅が足りず、切れるか、極端に小さくなるか、横スクロールになります。対策は3つ。
- 列数を減らす（スマホでは主要な2〜3列に絞る）
- 表をやめて、項目ごとのカードに変換する
- 横スクロールを許容し、スクロールできることが分かる見せ方にする
最も避けたいのは、文字が小さくなって読めなくなることです。表は縮小せず、形を変えてください。
失敗4：ボタンが小さすぎる、近すぎる
- ボタンの高さは44px以上が目安
- ボタン同士を近づけすぎない（誤タップの原因）
- 画面の端ぎりぎりに置かない（持ち方によって押しにくい）
失敗5：電話番号がリンクになっていない
スマホで電話番号を見た人は、タップして発信しようとします。画像で作られた電話番号や、リンクになっていないテキストはタップできません。問い合わせの多くが電話で来る業種では、これだけで機会損失になります。
失敗6：文字が小さい、行間が詰まっている
PCで見て「ちょうどいい」と感じる文字サイズは、スマホでは小さすぎることがあります。本文は16px以上が目安です。また、スマホは1行の文字数が少ないため、PCと同じ行間だと窮屈に見えます。行間はスマホのほうを広めにするのが読みやすい。
失敗7：固定ヘッダーが画面を圧迫する
スクロールしても上部に残るヘッダーは便利ですが、スマホでは画面の1割以上を占めることがあります。さらに固定フッター（予約ボタンなど）も加わると、実際に読める面積がかなり減ります。固定要素は、上下どちらか一方に絞るのが安全です。
確認するときのチェックリスト
| # | 確認項目 |
|---|---|
| 1 | ファーストビューに、何をする会社かとボタンが入っているか |
| 2 | スクロールすると続きがあることが分かるか |
| 3 | 表が読めるか（横スクロールなら、それが分かるか） |
| 4 | ボタンが指で押せる大きさか、間隔があるか |
| 5 | 電話番号がタップで発信できるか |
| 6 | 本文が読める大きさか |
| 7 | 画像の読み込みが遅くないか |
| 8 | フォームの入力欄が押しやすいか、キーボードが適切に出るか |
確認は必ず実機で行ってください。PCのブラウザで画面幅を狭めて見る方法もありますが、実際の指の操作感、通信速度、フォントの見え方までは再現できません。
制作会社に確認すべきこと
- デザイン案はスマホ版も出るか：PCのデザインだけ提示し、スマホは実装時に対応、という進め方だと、スマホの見え方を事前に確認できません
- 確認用のURLはいつもらえるか：実機で触れる状態を、早い段階でもらえるかどうか
- どの機種・ブラウザまで動作確認するか：見積もりに含まれる範囲を確認
「スマホ対応込み」という言葉は、単に画面幅に合わせて縮むことを指している場合と、スマホ用に構成を組み直すことを指している場合があります。どちらなのかは確認する価値があります。
TEHON での見方
TEHON では、掲載サイトのPC表示とスマートフォン表示を並べて掲載しています。比較して見ると、スマホで何が削られ、何が残っているかが分かります。残っているものが、そのサイトの本当の優先順位です。参考デザインギャラリーからご覧ください。
まとめ
- PCでは「同時に見える」ものが、スマホでは「順番に見る」ものに変わる
- ファーストビュー、表、ボタンの大きさ、文字サイズが崩れやすい四大ポイント
- 電話番号はタップできる形に。業種によっては直接売上に響く
- 固定ヘッダーと固定フッターは、どちらか一方に絞る
- 確認は必ず実機で。画面幅を狭めたPCでは分からないことがある
スマホ表示は「PCの縮小版」ではなく、別の設計です。ここを分けて考えられるかどうかで、成果がかなり変わります。
マザーハンズでは、広島・東京を拠点にWebサイトの制作と改善を行っています。お問い合わせよりご相談ください。