そもそもスマホ対応とは？
スマホ対応とは、画面が小さく・縦長・指で操作するスマートフォンでも、文字が読みやすく、ボタンが押しやすく、レイアウトが崩れない状態を指します。「レスポンシブデザイン」が技術的な手段で、その先のゴールが「モバイルフレンドリー」です。検索エンジンやSNSから見に来た人にも、最初の画面で読みやすいと伝わることが大切です。
スマホ対応の5つのチェックポイント
具体的な実装ポイント
viewport設定：HTMLのhead内に「<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">」を入れる。これがないとスマホでPC版を縮小表示してしまい、文字が読みにくくなります。
文字サイズ：本文は16px以上を基本に。これより小さいとスマホ画面で読むのに集中力が切れます。スマホはPCより目との距離が近いものの、画面が小さいぶん読み疲れが起きやすいです。
タップ領域：ボタン・リンクは少なくとも44×44ピクセル確保するのがApple・Googleの推奨。指で押し間違えないサイズです。
画像最適化：画像は必要以上に大きいサイズで載せないこと。WebPなどの軽い形式を使うと、スマホの通信量を減らせる場合があります。
縦スクロール：横スクロールが発生すると使いにくくなります。「max-width: 100%」を画像に指定し、固定幅の表やコードブロックはスマホ幅で確認します。
スマホで見たときの直し方
スマホ対応で多い崩れは、画像がはみ出す、表が横に伸びる、ボタン同士が近すぎる、見出しが大きすぎる、の4つです。画像には max-width:100% を指定し、表は横スクロールできる枠に入れます。ボタンは上下左右に余白を取り、押したい場所が指で隠れても分かる大きさにします。見出しはPCと同じ大きさにせず、スマホ用に少し小さくします。
確認方法（テストツール）
気をつけたい落とし穴
- F12デバイスモードだけで満足する。実機（家族のスマホ）で見ると意外な崩れが見つかる
- 「ハンバーガーメニュー」を採用したのに、タップしても開かない（JavaScriptミス）
- 固定ヘッダーがスマホで画面の半分を占領する。スクロール時の高さは控えめに
将来どう役立つ？
スマホファーストの設計ができる人は、Web制作の現場で求められます。「スマホで使いやすいか」は、読者の離脱や問い合わせ数にも関わります。中高生のうちから「スマホで自分のサイトを開いて違和感がないか」をチェックする習慣をつけておくと、デザイン感覚も鍛えられます。
今日からできること
- 自分のサイトをスマホで開いて、文字が読みやすいか・押しやすいかチェック
- F12のデバイスモードで「iPhone SE」「Pixel 5」など複数の機種を確認
- Google PageSpeed Insightsで自分のサイトを測定し、スコアを記録する