スマホ向けデザインは、PC画面を小さくする作業ではありません。狭い幅、指での操作、移動中の閲覧、通信環境、文字拡大を前提に情報を積み直します。

最初に実機の幅で確認する

デザインツールの一つの端末枠だけでなく、小さい幅、大きい幅、縦横、文字拡大で確認します。固定幅や固定高があると、端末や言語の違いで欠けます。

文字を小さくして収めない

本文は16px前後を出発点に、書体、対象者、コントラストで調整します。大見出しは画面幅に応じて縮めますが、本文まで小さくしません。

長いタイトル、英数字、URLが枠外へ出ないか確認します。

タップ領域を確保する

WCAG 2.2のTarget Size (Minimum)は、例外を除きターゲットが少なくとも24×24 CSS pxであることを求めます。これは最低基準なので、主要操作は44px前後など余裕ある領域を検討します。

小さなアイコンだけを押させず、ラベルも同じタップ領域に含めます。

ナビゲーションを隠しすぎない

メニュー内に全項目を入れる場合も、現在地、閉じ方、主要ページへの入口を明確にします。ロゴだけにトップページリンクを任せる場合は、操作が予測できるか確認します。

表は用途で変える

方法向く場面注意点
横スクロール列の比較が必要スクロール可能と分かる表示
カード化製品ごとに読む項目順を統一
要約＋詳細重要項目が少ない詳細への入口
行列入替項目が少ない比較しやすさを実機確認

表内文字を10pxにして全列を表示する方法は避けます。

フォームを短くする

入力項目を必要最小限にし、ラベルを入力欄の外へ残します。キーボード種別、自動入力、エラーメッセージ、入力内容の保持を確認します。

ボタンを押した後は、読み込み、完了、失敗を表示します。

画像と動画

画像の縦横比を保ち、重要部分を切らないよう焦点位置を確認します。動画の自動再生は音を出さず、停止方法、通信量、動きを減らす設定への配慮を検討します。

固定要素

固定ヘッダーやCTAは便利ですが、本文、ページ内リンク先、Cookie通知、キーボードを隠すことがあります。画面高さが小さい端末でも操作できるか確認します。

実機チェックリスト

  • 横スクロールが意図せず発生しない
  • タイトルが一文字ずつ改行されない
  • ボタン同士を押し間違えない
  • フォームがキーボードに隠れない
  • 固定CTAが本文を隠さない
  • 表を読める
  • 文字拡大でカード高が伸びる
  • 低速回線でも主要内容が先に見える

まとめ

スマホ向けWebデザインは、重要順への積み直し、読みやすい文字、十分なタップ領域、短いフォーム、適切な表、固定要素の占有確認が中心です。複数幅と文字拡大で実際に操作しましょう。