ホームページをスマホ対応にする方法：効果の大きい10の改善

Webサイトをスマホ対応にするには、正しいviewportのmetaタグを追加し、ピクセル固定の幅をやめて画面幅に合わせて伸縮するレイアウトにし、メディアクエリで小さい画面向けにコンテンツを並べ替え、文字を読みやすくボタンを押しやすくし、スマホに合ったサイズの画像を配信します。そのうえで実際のスマホ表示で確認しましょう。以下の10項目は、スマホ対応できていないサイトのほとんどに当てはまる問題を、取り組むべき順に並べたものです。

1. viewportのmetaタグを追加する

これがないと、スマホはPC向けのページだと判断し、幅約980pxで描画してから縮小します。文字が極端に小さくなり、ユーザーは指で拡大しなければなりません。すべてのページの<head>に次を入れてください。

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

user-scalable=noやmaximum-scale=1は付けないでください。拡大を禁止すると、大きな文字が必要な人が困ります。詳しくはviewportのmetaタグ解説をご覧ください。

2. 固定幅を可変幅に置き換える

width: 960pxのコンテナは、幅390pxの画面には収まりません。パーセント、max-width、モダンなレイアウト手法を使いましょう。

.container {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

flex-wrap: wrapを指定したFlexboxや、repeat(auto-fit, minmax(16rem, 1fr))を使ったCSS Gridなら、多くの場合メディアクエリなしでカラムが自動的に折り返されます。

3. 画像や埋め込みコンテンツを縮むようにする

img, video, iframe {
  max-width: 100%;
  height: auto;
}

埋め込み動画や地図にはaspect-ratio: 16 / 9; width: 100%を指定すると、レイアウトを崩さずに拡大縮小します。このルールだけで、横スクロールの多くが解消します。

4. メディアクエリでコンテンツを並べ替える

縮めるだけでなく、構成を変える必要があるレイアウトもあります。サイドバーを本文の下に移したり、4列のフッターを1列にしたりする場合です。まずスマホ向けのレイアウトを書き、広い画面向けに要素を足していきます。

.layout { display: grid; gap: 2rem; }

@media (min-width: 64rem) {
  .layout { grid-template-columns: 3fr 1fr; }
}

幅の決め方はレスポンシブのブレイクポイント解説、書き方はCSSメディアクエリの解説、考え方そのものはモバイルファーストデザインで説明しています。

5. 読みやすい文字にする

本文は16px以上（多くのブラウザで1rem）、行の高さは1.5前後にします。rem単位を使えば、ユーザーがブラウザで設定した文字サイズが反映されます。大きな画面では、本文のブロックにmax-width: 65chを指定して1行の長さを読みやすく保ちましょう。見出しはclamp()で画面に合わせて伸縮させられます。

h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }

6. タップ領域を大きく、間隔をあける

指はマウスポインターほど正確ではありません。WCAG 2.2ではターゲットの最小サイズを24 × 24 CSSピクセルと定めており、AppleとGoogleのデザインガイドラインは快適にタップできるサイズとして44〜48px程度を推奨しています。文中のリンクやアイコンボタンには十分な余白を取り、隣の要素との間隔もあけましょう。

7. ホバーなしで使えるナビゲーションにする

タッチ画面にはホバーがありません。小さい画面では、タップで一覧が開くメニューボタンを使い、第1階層の項目数を絞り、下層の項目がタップでもキーボードでも開けるようにします。リンクを選んだらメニューが閉じることも確認しましょう。

8. フォームをスマホ向けに整える

• 適切な入力タイプ（email、tel、url、number）とinputmodeを使い、スマホに合ったキーボードが表示されるようにする。
• autocomplete属性（name、email、street-address、cc-number）を付けて自動入力を使えるようにする。
• 入力欄の文字は16px以上にする。iOSのSafariは、それより小さい入力欄にフォーカスすると画面を拡大してしまいます。
• 狭い画面ではラベルを入力欄の上に置き、送信ボタンを全幅にする。

9. スマホに合ったサイズの画像を配信する

幅2400pxのメイン画像は、スマホにとって重いダウンロードです。レスポンシブ画像を使い、ブラウザに適切なファイルを選ばせましょう。

<img src="hero-800.jpg"
     srcset="hero-480.jpg 480w, hero-800.jpg 800w, hero-1600.jpg 1600w"
     sizes="(min-width: 64rem) 50vw, 100vw"
     alt="スマホに表示された製品のダッシュボード">

WebPやAVIFなどの新しい形式を使えば、ファイルサイズをさらに減らせます。ファーストビューより下の画像にはloading="lazy"を付けましょう。ページの高速化はモバイルの表示速度テストのガイドで解説しています。

10. スマホで邪魔になる要素をなくす

訪問直後の全画面ポップアップ、「購入」ボタンに重なるチャットの吹き出し、画面の4分の1を占める固定バーは、スマホでのサイトの印象を大きく損ないます。ポップアップは表示を遅らせて閉じやすくし、固定要素は小さくまとめましょう。

仕上がりを確認する方法

変更のたびに、スマホサイズの画面でページを確認しましょう。手早いのは、PCのChromeでスマホ表示にする方法です。DevToolsのデバイスモードのほか、Mobile View Extensionのようなワンクリックの拡張機能なら、本物のモバイルのユーザーエージェントでタブを再読み込みし、端末サイズを比べられます。続いてLighthouseのモバイル監査を実行し、公開前にはスマホサイトのテストチェックリストで確認します。Googleの旧ワンクリックテストに代わるツールはモバイルフレンドリーテストの代替ツールにまとめています。

WordPressを使っている場合も原則は同じですが、ほとんどの修正はテーマ側で行います。WordPressサイトをスマホ対応にする方法をご覧ください。

よくある質問

古いサイトを最短でスマホ対応にするには？

viewportのmetaタグを追加し、画像と埋め込みコンテンツにmax-width: 100%を指定し、主要なコンテナの固定幅を外し、メディアクエリ1つでカラムを縦に並べます。これで横スクロールや小さすぎる文字の大半は半日ほどで解消できます。

スマホ専用サイトを別に作る必要はありますか？

ありません。画面に合わせて変化するレスポンシブなサイト1つのほうが管理しやすく、Googleもこの方式を推奨しています。m.で始まる別サイトは古い手法です。

自分のサイトがスマホ対応できているか確認するには？

スマホサイズの画面で表示し、Lighthouseをモバイルモードで実行し、Google Search ConsoleのURL検査でスクリーンショットを確認します。この3つで、終了したGoogleのモバイルフレンドリーテストの代わりになります。