スマホ対応をレスポンシブの基本から始める
個人開発のWebサービスは、作っている本人はパソコンの大きな画面で確認しがちですが、利用者の多くはスマホから訪れます。パソコンでは完璧なのにスマホでは文字が小さく、ボタンが押せず、横スクロールが発生する。これだけで利用者は静かに離れていきます。
この記事では、スマホ対応（レスポンシブデザイン）を、後付けの調整ではなく最初からの前提として組み込む基本を整理します。MDNのレスポンシブデザイン入門を土台に、個人開発で押さえるべき点に絞ります。
前提：画面幅は自分では選べない
レスポンシブデザインの考え方は、「利用者の画面幅は自分ではコントロールできない」という前提から始まります。スマホ、タブレット、パソコン、さらにはウィンドウを半分にした状態。どの幅でも、内容が読めて操作できることが目標です。
最初に確認すべきは、HTMLのhead内にあるviewportメタタグです。name="viewport" の meta 要素に content="width=device-width, initial-scale=1" を指定します。
これが無いと、スマホはページを縮小したパソコン画面として表示します。モダンなフレームワークのテンプレートには最初から入っていますが、自分で組んだページでは抜けがちです。
レイアウトは「1列が基本、広ければ並べる」
スマホ対応を「パソコン版を縮める作業」と考えると苦しくなります。逆に、狭い画面の1列レイアウトを基本形にして、画面が広いときだけ横に並べると考えると、設計は一気に単純になります。
幅を固定値（たとえば960pxなど）で決め打ちしない。最大幅だけ決めて、それ以下では画面に合わせて縮む
横並びは「幅に余裕があるときのボーナス」と考える。CSSのFlexboxやGridには、幅が足りなければ自動で折り返す仕組みがあります
画像には最大幅100パーセントを指定し、親要素からはみ出させない
WCAGにも「リフロー」という基準があり、320px相当の幅でも横スクロールなしで内容を利用できることが求められています。どの画面でも横スクロールが出ないことを、スマホ対応の合格ラインとして覚えておくと判断がぶれません。
指で操作できるサイズを確保する
スマホの操作はマウスカーソルではなく指です。カーソルなら押せる小さなリンクも、指では隣を押してしまいます。
ボタンやリンクの押せる領域は、最低でも24×24px、できれば44px前後を確保する。WCAG 2.2にもターゲットサイズの基準があります
リンクやボタン同士を密集させない。間に余白を入れる
文字サイズは本文16pxを下限にする。スマホで小さい文字は、読みにくいうえに誤操作も誘発します
余白と文字サイズの決め方は配色と文字の最小ルールで画面を整えるのルールがそのまま使えます。
実機とツールで確認する
スマホ対応の確認は、次の3段階で行います。
ブラウザの開発者ツール：デバイスモードで狭い幅を再現し、横スクロールが出ないか、折り返しが壊れないかを見る
自分のスマホ：開発中のページを実機で開き、親指だけで主要な一周を操作してみる。ツールでは分からない「押しにくさ」が見つかります
公開前の一周：初めて作ったアプリを自分で確認する方法の確認項目を、スマホでもう一周する
確認の観点は「読めるか、押せるか、はみ出さないか」の3つだけです。全部の幅を試す必要はなく、狭い幅（スマホ）と広い幅（パソコン）の2つで壊れていなければ、その間もほぼ問題ありません。
次に読む記事
画面の構成は小さなプロダクトの画面を迷わず設計する、見た目のルールは配色と文字の最小ルールで画面を整えるで決められます。スマホ対応と地続きの内容として、アクセシビリティを最初の一歩から始めるへ進むと、確認の観点がさらに揃います。