ウェブサイトをモバイルフレンドリーにする方法：実証済みの12ステップ

モバイルフレンドリーなウェブサイトとは、スマートフォンで読みやすく使いやすいサイトのことです。拡大しなくても文字が読め、ボタンが押しやすく、画面の横に何もはみ出さず、モバイル回線でもページがすばやく読み込まれます。その重要性はかつてないほど高まっています。ウェブトラフィックの大半はスマートフォンからであり、Google はモバイルファーストインデックスを採用しているため、サイトはモバイル版をもとに順位付けされるからです。

幸い、ウェブサイトをモバイルフレンドリーにする方法はすでに確立されています。以下では、ほぼすべての問題をカバーする12のステップを紹介し、続いて、実際のデバイスサイズでサイトを無料でテストする方法を説明します。

1. viewport メタタグを追加する

これがないと、スマートフォンはページをデスクトップの幅でレンダリングしてから縮小するため、すべてが極端に小さく表示されます。すべてのページの <head> に <meta name="viewport" content="width=device-width, initial-scale=1"> を記述してください。user-scalable=no で拡大を無効にしてはいけません。アクセシビリティ上の欠陥になります。

2. モバイルファーストのレスポンシブレイアウトを使う

まず最も小さい画面に合わせて設計し、CSS メディアクエリ（@media (min-width: 768px)）を使って、大きな画面向けに複雑さを加えていきます。固定幅のカラムではなく CSS の Flexbox と Grid を使い、スマートフォンでは複数カラムのレイアウトを1カラムに積み重ねます。

3. 固定ピクセルではなく可変幅を使う

width: 960px を max-width: 960px; width: 100% に置き換えます。コンテナには相対単位（%、rem、vw）を使い、画面より幅の広い要素は作らないようにしましょう。そうした要素は横スクロールを引き起こします。これはモバイルで最もよくあるレイアウトの不具合です。

4. 画像とメディアをレスポンシブにする

CSS に img, video { max-width: 100%; height: auto; } を追加します。srcset と sizes を使ってスマートフォンには小さな画像を配信し、新しい画像形式（WebP、AVIF）を使い、画像の読み込み中にレイアウトがずれないよう、width 属性と height 属性を必ず指定します。

5. 読みやすい文字サイズにする

モバイルでは、本文の文字サイズを 16px 以上、行の高さを1.5前後にします。1行の長さを読みやすい範囲に収め、文字が WCAG のコントラスト比を満たすようにしましょう。小さくてコントラストの低い文字は、屋外でスマートフォンを使うと読みにくくなります。

6. ボタンとリンクを押しやすくする

タップターゲットは 48×48px 以上にし、ターゲット同士の間隔を8pxほど空けます。フッターやメニューに小さなリンクが詰め込まれている状態は、モバイルユーザビリティで最も頻繁に見られる欠陥の一つです。

7. ナビゲーションをシンプルにする

長いメニューは、わかりやすいラベルを付けたメニューボタンに折りたたみます。最も重要な操作（検索、カート、問い合わせ）は常に見える位置に置き、ホバーでしか使えない操作は避けましょう。タッチスクリーンにホバーはありません。

8. 邪魔なポップアップを避ける

モバイルでコンテンツを覆い隠す全画面のインタースティシャルは、ユーザーをいら立たせ、検索順位を下げる可能性もあります。代わりに小さなバナーを使い、閉じるボタンは大きく押しやすくしてください。

9. フォームをモバイル向けに最適化する

スマートフォンで適切なキーボードが表示されるよう、正しい入力タイプ（type="email"、type="tel"、inputmode="numeric"）を使います。autocomplete で自動入力を有効にし、フォームは短くまとめ、ラベルは入力欄の横ではなく上に配置します。

10. モバイルでのパフォーマンスを高速化する

スマートフォンは CPU も回線も低速です。画像を圧縮して遅延読み込みし、JavaScript を圧縮（ミニファイ）して遅延実行し、使っていない CSS を削除し、CDN を使い、キャッシュを有効にしましょう。Core Web Vitals は「良好」の範囲を目指します。LCP は2.5秒未満、CLS は0.1未満、INP は200ミリ秒未満です。実際のユーザーのデータは、Google Search Console か PageSpeed Insights で確認してください。無料ウェブサイト監査は、サーバーの応答の遅さ、レンダリングをブロックするリソース、サイズ指定のない画像といった、よくある原因を指摘します。修正方法については、ウェブサイトが遅い理由をご覧ください。

11. モバイルとデスクトップでコンテンツを同じにする

モバイルファーストインデックスでは、モバイルで非表示にしたり削除したりしたコンテンツは、まったくインデックスされない可能性があります。見出し、本文、構造化データ、画像（代替テキスト付き）、メタタグは、どちらのバージョンでも同じにしてください。

12. 実際のデバイスサイズで定期的にテストする

デスクトップのブラウザのウィンドウ幅を変えるだけでは不十分です。実際のスマートフォンやタブレットのビューポートで、縦向きと横向きの両方をテストし、大きな変更のたびに再テストしましょう。「モバイルフレンドリー」なはずのサイトの多くが、ここで気づかないうちに崩れています。

ウェブサイトがモバイルフレンドリーかどうかをテストする方法

Rudra のレスポンシブレイアウト監査は、最大8種類のデバイスプロファイル（iPhone SE、iPhone 14、Pixel 7、iPad、iPad Pro と、3種類のデスクトップサイズ）でページをレンダリングし、はみ出したり重なったりしているコンテンツを、デバイスごとのスクリーンショット付きで指摘します。サイト全体のスキャンと組み合わせれば、モバイルでのパフォーマンスや SEO の問題も見つけられます。

1. トップページで無料ウェブサイト監査を実行し、サイト全体をクロールします。
2. レポートを開き、SEO、パフォーマンス、アクセシビリティの検出結果を確認します。
3. レスポンシブレイアウト監査を実行して各デバイスでの表示を確認します。1ページだけを手早く確認したいときは、無料のモバイルチェッカーを使います。
4. 指摘された問題を修正し、再スキャンして結果を比較します。