スマホ対応できていないWordPressサイトの原因は、たいてい次の3つのどれかです。最初からレスポンシブではない古いテーマ、スマホを考慮していないブロックやページビルダーの設定、そして固定幅を指定した独自CSSです。この順に対処しましょう。まずテーマがレスポンシブか確認し、エディターやビルダーでスマホ向けの設定を調整し、最後に独自コードとプラグインを整理します。各ステップのあとに、スマホサイズの表示で確認してから次に進みます。
ステップ1：テーマがレスポンシブか確認する
スマホ表示でサイトを開き（PCでWebサイトのスマホ版を表示する方法を参照）、プライバシーポリシーなど特別なレイアウトのないシンプルなページを見ます。そのページでさえ縮小表示になったり横にスクロールしたりするなら、原因はテーマです。
すぐにできる確認は2つです。
- ページのソースを表示して
name="viewport"を検索します。レスポンシブなテーマなら<head>にviewportのmetaタグが出力されています。なければ、スマホ時代より前のテーマです。 - 外観 > テーマで、テーマの古さと更新状況を確認します。何年も更新されていないテーマは、スマホ表示以外の面でもリスクがあります。
テーマがレスポンシブでない場合、修正するよりテーマを変えるほうが安く済むのが普通です。Twenty Twenty-Fiveなど現在の標準ブロックテーマや、継続的にメンテナンスされている多くのテーマは、最初からレスポンシブです。有効化する前にライブプレビューで新しいテーマを試しましょう。
ステップ2：エディターのモバイルプレビューを使う
WordPressには端末別のプレビュー機能があります。
- ブロックエディターとサイトエディターでは、上部ツールバーのプレビューでデスクトップ、タブレット、モバイルを切り替えられます。
- クラシックテーマのカスタマイザーでは、サイドバー下部の端末ボタンで同じことができます。
これらのプレビューはキャンバスのサイズを変えるだけなので、編集中にレイアウトの問題を見つけるのに向いています。モバイルのユーザーエージェントは送らないため、あとで公開中のページを本来のスマホ表示で確認してください。
ステップ3：小さい画面向けにブロックのレイアウトを直す
ブロックエディターでよくある問題と対処法です。
- カラムが縦に並ばず押しつぶされる。 カラムブロックを選び、モバイルで縦に並べる設定がオンになっているか確認します。
- 幅や高さが固定されている。 画像、カバー、グループの各ブロックにはピクセル単位の固定サイズが設定されていることがあります。狭い画面で文字が切れないよう、幅はパーセント、高さは固定ではなく最小の高さで指定しましょう。
- 文字サイズが大きすぎる。 PCで見栄えのよい72pxの見出しは、スマホでははみ出します。テーマに流動的なタイポグラフィのプリセットがあれば使いましょう。画面に合わせて拡大縮小します。
- 幅の広い表。 列の多い表はスマホではみ出します。表を短くするか、表の枠内で横スクロールできるようにしましょう。
ステップ4：ページビルダーのモバイル設定を確認する
Elementor、Divi、Beaver Builderなどのページビルダーを使っている場合、スマホの問題の多くはPCサイズにしか適用されていない設定が原因です。ビルダーにはレスポンシブモードがあり、余白、文字サイズ、カラム幅、表示・非表示をスマホとタブレットで別々に設定できます。
- ビルダーをモバイル表示に切り替えます。
- ピクセルで指定した大きな余白（パディングとマージン）を小さくします。
- スマホ向けに見出しのサイズを調整します。
- カラムが縦に並んだときの順序を確認し、画像が説明対象の見出しより先に来るなら逆にします。
- スマホで重要なコンテンツを非表示にしないようにします。Googleはモバイル版をインデックスするので、隠したテキストはないのと同じです。
ビルダーは独自のブレイクポイントも持っています（Elementorの初期値はモバイル767px、タブレット1024pxで、追加も可能です）。独自CSSでも同じ幅を使うようにしましょう。幅の決め方はレスポンシブのブレイクポイント解説で説明しています。
ステップ5：メニューを直す
スマホでは、ナビゲーションはメニューボタンに折りたたまれるべきです。ブロックテーマでは、ナビゲーションブロックのオーバーレイ設定を「モバイル」か「常に」にします。クラシックテーマではテーマ側が処理しますが、対応していなければテーマを変えるべきサインです。スマホのメニューは短くし、サブメニューがタップで開くか確認しましょう。
ステップ6：画像と表示速度
WordPressはこの点ですでに多くのことをしています。アップロードした画像を複数のサイズで生成し、スマホが小さいファイルを受け取れるようsrcsetを追加し、標準で画像を遅延読み込みします。さらに次のことを行うと効果的です。
- 表示される最大サイズより大きな画像をアップロードしない
- WebPやAVIFに変換する（最近のWordPressは標準で対応、または画像プラグインを使う）
- キャッシュプラグインやサーバー側のキャッシュを使う
- 使っていないプラグインを削除する。プラグインはそれぞれ全ページにスクリプトを追加することがあります
結果はモバイルの表示速度テストのガイドの方法で計測しましょう。
ステップ7：独自CSSとプラグインの競合を探す
それでも横にスクロールする場合は、幅が広すぎる要素を探します。Chrome DevToolsのConsoleで次を実行すると、画面より広い要素の一覧が得られます。
[...document.querySelectorAll('*')].filter(el => el.scrollWidth > document.documentElement.clientWidth)よくある原因は、外観 > カスタマイズ > 追加CSSにあるwidth: 1200pxのようなルール、固定サイズの埋め込みウィジェット（古いSNSのフィード、地図、フォーム）、インラインで幅を指定するスライダーです。
ステップ8：公開中のサイトをきちんと確認する
エディターのプレビューは出発点にすぎません。作業完了とする前に、次を行いましょう。
- Chromeのスマホ表示で主要なページを開きます。Mobile View Extensionならワンクリックで、モバイルのユーザーエージェントを使って公開中のページを読み込めるので、キャッシュやスマホ向けプラグインが返す内容も含め、スマホが実際に受け取るページを確認できます。
- 実機のスマホでフォームと購入手続きを試します。
- Lighthouseのモバイル監査を実行します（手順）。
プレビューとスマホで見た目が違う場合は、スマホで表示が崩れる原因でよくある理由をまとめています。
よくある質問
WordPressのエディターでは問題ないのに、スマホでは崩れるのはなぜですか？
エディターのプレビューはキャンバスのサイズを変えるだけです。キャッシュプラグイン、スマホ向けプラグイン、CDNの設定、スマホのブラウザ自体によって、実際に返されるページが変わることがあります。公開中のページを本来のスマホ表示で確認し、変更後はキャッシュをクリアしましょう。
WordPressをスマホ対応にするにはプラグインが必要ですか？
通常は不要です。レスポンシブなテーマがほとんどの作業を担います。スマホ専用テーマを作るプラグインは何年も前には一般的でしたが、今ではほとんど必要ありません。
スマホ向けのWordPressサイトに、今もAMPは必要ですか？
不要です。AMPは任意で、高速なレスポンシブページなら別の形式を使わなくても同じ目的を達成できます。