Webサイトをスマホ対応（レスポンシブ）にする方法

Webサイトをスマホに対応させるには、viewportのmetaタグを追加し、固定ではない幅を使ってモバイルファーストでレイアウトを組み、CSSのブレークポイントで、大きな画面向けにレイアウトを変えてください。具体的には、列を縦に並べ、メニューを折りたたみ、画像を画面に合わせて縮小します。その後、すべてのページをスマホの幅で確認し、横スクロール、小さすぎる文字、タップしにくいボタンがないかを確かめましょう。AIで作ったサイトなら、明確な1つのプロンプトと、スマホサイズのプレビューでの確認で、ほとんどの問題は解決します。

レスポンシブデザインとは

レスポンシブなサイトは、1つのページとURLの集合が、画面に合わせて調整されます。「m.」で始まる別サイトを作るのではなく、特定の幅でブレークポイントと呼ばれるポイントに達するとCSSがレイアウトを変えます。その構成要素は次のとおりです。

• viewportのmetaタグ は、モバイルブラウザに、デバイスの実際の幅を使うよう指示します。
• 流動的なレイアウト は、固定のピクセル幅ではなく、パーセンテージ、フレックスボックス、グリッドを使います。
• メディアクエリ（またはTailwindの md: のようなフレームワークのクラス）は、指定した幅を超えるとレイアウトを変えます。
• 柔軟なメディア は、画像や動画をコンテナに合わせて縮小します。

スマートフォンからのアクセスが多い可能性が高く、Googleがページのモバイル版をインデックスするため、これは重要です。モバイルにはなくパソコンにだけあるコンテンツやリンクは、Googleからも見えない可能性があります。

選択肢とトレードオフ

モバイルファーストは通常シンプルです。1列は最も作りやすいレイアウトで、画面が広くなるにつれて列を追加するほうが、列を減らすより手間がかかりません。

よく壊れる箇所

viewportのタグ

ページがスマホで小さなデスクトップサイトのように見えるなら、viewportのタグがありません。

<meta name="viewport" content="width=device-width, initial-scale=1">

maximum-scale=1 や user-scalable=no は追加しないでください。ピンチズームを禁止すると、弱視の人にとって使いにくくなります。

固定幅と横スクロール

最も多いレスポンシブのバグは、画面より広いものがあることです。例えば、width: 1200px の固定幅のコンテナ、幅の広い表、長いURLやコードブロック、max-width: 100% がない画像などです。その結果、ページ全体が横にスクロールします。width ではなく max-width を使い、テキストを折り返し、幅の広いものには独自のスクロール領域を与えてください。

ナビゲーション

パソコンの5つのメニューリンクは、スマホにはなかなか収まりません。一般的な解決策は、メニューボタンを押すとパネルが開く形です。「予約」「カート」「ログイン」のように、最も重要な操作は見えるようにしておき、メニューはキーボードでも操作でき、簡単に閉じられるようにしてください。

文字とタップ領域

• スマホでは、本文の文字サイズは16px前後を最低限にしてください。小さい文字の入力欄では、iPhoneでタップしたときに画面が拡大されてしまいます。
• ボタンとリンクはタップしやすくしてください。WCAG 2.2 AAは、24×24 CSSピクセル（または十分な間隔）を下限としています。親指で押しやすいのは、約44pxです。
• 隣接するリンクの間には余白を取り、間違えてタップしないようにしましょう。

表とデータ

幅の広い表は、レスポンシブなアプリで最も難しい部分です。望ましい順に選択肢があります。スマホでは列を減らす、各行をカードに変える、または表を横スクロール可能なコンテナに入れて、最初の列を固定する。比較する必要がある内容に応じて選んでください。

画像とメディア

max-width: 100% と height: auto を使い、srcset で小さい画面に小さいファイルを配信し、幅と高さを指定してレイアウトのずれを防ぎましょう。埋め込みの動画や地図は、アスペクト比を保つレスポンシブなラッパーで囲んでください。画像を小さくすると、ページの読み込みも速くなります。サイトを速くする方法を参照してください。

フォーム

ラベルは入力欄の上に置き、入力欄は横幅いっぱいにしてください。type="email"、type="tel"、inputmode="numeric" などの適切な入力タイプを使うと、スマホに合ったキーボードが表示されます。送信ボタンは親指が届く位置に置き、キーボードが表示されても見えるようにしておきましょう。

ホバーだけで動く操作

スマホにはホバーがありません。ホバーでだけ表示されるツールチップ、ドロップダウン、プレビューは、タッチで操作するユーザーには見えません。タップでも動くようにしてください。

効果のあるプロンプト

新しく作る場合は、最初に伝えてください。

スマートフォンを最優先に作ってください。スマホでは1列、タブレットの幅から2列、デスクトップでは全体のレイアウトにしてください。幅320pxで横スクロールが起きないこと、本文は16px以上、タップ領域は44px以上、小さい画面ではメニューボタンを表示すること、スマホでは表がカードに変わることを守ってください。

既存のページの場合は、見えている状態を伝えます。

スマホで /pricing ページを見ると、横にスクロールし、3つのプランのカードが横に並んで潰れています。768px未満では、カードを縦に並べてください。比較表は、機能の列を固定した状態で、その表のコンテナ内で横スクロールできるようにしてください。デスクトップのレイアウトは変えないでください。

各ページを幅375pxで確認してください。はみ出し、重なり、16px未満の文字、44px未満のタップ領域、ホバーだけで動く操作を一覧にして、それぞれを修正してください。

手順

1. viewportのタグがheadにあるか確認する。
2. 幅320〜375pxでテストする。 ブラウザの端末モード、またはスマホサイズのプレビューを使い、すべてのページを上から下までスクロールしてください。
3. 横スクロールを最初に解消する。 幅を超えている要素を見つけてください。それが消えるまで、他の部分の判断は難しいままです。
4. ナビゲーションを整える。 メニューボタン、そして重要な操作は見えるように。
5. 主要な流れごとに、文字、タップ領域、フォームを確認する。 サインアップ、検索、チェックアウト、お問い合わせなどです。
6. 表とメディアを扱う。 カードにするか、スクロールするコンテナに入れる。画像と埋め込みはレスポンシブにする。
7. 中間の幅も確認する。 スマホからパソコンの幅までゆっくりとドラッグし、タブレットの幅付近でレイアウトが崩れることが多いので確かめてください。
8. 実機のスマートフォンで確認する。 エミュレーターでは、画面キーボードがボタンを隠すこと、ノッチ、モバイル回線での表示速度などは見落としがちです。

よくあるミス

• 1つのスマホの画面サイズだけで確認する。 小さいスマホ、大きいスマホ、タブレットを確認しましょう。
• 収めるためにスマホでは内容を隠す。 Googleはモバイル版をインデックスし、スマホのユーザーは同じ情報を求めています。
• ピンチズームを禁止する。
• デスクトップ用の大きな画像をスマホで使う。 読み込みに時間がかかり、データ通信量も増えます。
• 固定位置の要素が重なる。 固定ヘッダー、Cookieバナー、チャットの吹き出しが合わさると、スマホの画面の半分を覆うことがあります。
• 小さい画面で閉じられないポップアップ。 閉じるボタンが画面の外にあるケースです。

モバイル対応のチェックリスト

• viewportのmetaタグがあり、ズームは禁止していない
• すべてのページで、幅320pxでも横スクロールが起きない
• 本文は約16px。入力欄をタップしても画面が拡大されない
• タップ領域は十分に大きく、間隔も空いている
• メニューがスマホとキーボードの両方で動く
• 表がスマホでも読める（カード、列の削減、またはスクロールするコンテナ）
• 画像と埋め込みは拡大縮小され、適切なサイズのファイルが配信される
• フォームは適切な入力タイプを使い、送信ボタンに手が届く
• 重要なものがホバーに依存していない
• 少なくとも1台の実機のスマートフォンで確認した

レスポンシブなレイアウトはアクセシビリティの一部でもあります。WCAGは、コンテンツが幅320pxと200%の拡大表示で機能することを求めています。毎日スマホで使われるアプリを作るなら、モバイル対応のWebアプリの作り方が、インストール可能なPWAを含めてさらに詳しく扱っています。

Mythexでのレスポンシブ対応

Mythexは、レスポンシブなWebアプリを作ります。Proプランでは、それをAndroidやiPhoneのアプリとしてパッケージ化することもできます。ワークスペースでは、プレビューの上にあるスマホのアイコン（モバイルに切り替え）をクリックすると、アプリをスマホサイズの枠で表示できます。枠の端をドラッグすると、他の幅も試せます（プレビューとコード）。小さい画面のレイアウトを直すための短いスターター用のプロンプトは、モバイル対応のプロンプトにあります。実機でも確認してください。公開されたURLを開くか、プレビューのリンクを共有して、スマホで開いてみてください。

よくある質問