【2026年最新版】WordPressをスマホ対応にさせる方法

WordPressのスマホ対応が必要な理由｜Googleのモバイルファーストインデックス

結論から言うと、Googleがモバイル版のページをインデックス作成とランキングの判断に使っているため、WordPressサイトのスマホ対応は欠かせません。対応方法は、レスポンシブ対応のテーマを使う方法とスマホ表示用のプラグインを使う方法の2つです。方法の詳細は、次の章で解説します。

Googleは、検索のインデックス作成と順位の判断に、ページのモバイル版を使っています。この仕組みをモバイルファーストインデックスと呼びます。

Googleは2023年10月に、モバイルファーストインデックスへの移行が完了したと発表しました。（出典：Google 検索セントラルブログ）

つまり、Googleはページのモバイル版をインデックス作成とランキング順位の判断に使います（出典：Google 検索セントラル）。同じブログでGoogleは、モバイル版のページはパソコン版と同じくらい内容がそろっている必要があると説明しています。

スマホでの表示が整っているかを確認する方法は、「WordPressサイトのスマホ対応状況の確認方法」の章で解説します。

WordPressをスマホ対応にさせる2つの方法

WordPressサイトは、次の2つの方法でスマホに対応させることができます。

1. WordPressをスマホ対応のプラグインを利用する方法
2. WordPress用のレスポンシブ・ウェブデザインに対応したテーマを使う方法

スマホ対応にするWordPressのプラグイン

スマホ向けの表示に切り替えるプラグインとして、ここではWPtouchを紹介します。WPtouchは、スマホからのアクセスに対してスマホ向けのテーマを表示するプラグインで、パソコン向けのテーマはそのまま使えます。

WPtouch

WPtouchは、WordPressサイトをスマホなどの画面に合わせて表示するプラグインです。配布ページはWPtouch（wordpress.org）です。

プラグインは、導入前に配布ページで最終更新日と対応するWordPressのバージョンを確認してください。

スマホ対応のレスポンシブ・ウェブデザインのテーマ

WordPressをスマホ対応にするもう1つの方法は、レスポンシブ・ウェブデザインに対応したテーマを使うことです。

ここでは、レスポンシブ・ウェブデザインに対応したテーマを、無料と有料に分けて紹介します。テーマの対応状況や価格は変わることがあるため、導入前に各公式サイトで最新の情報を確認してください。

■無料テーマ3選

無料で使えるテーマとして、次の3つを紹介します。

(1) Twenty Thirteen：WordPressの2013年版のテーマです。画面の大きさに合わせて表示が変わるレイアウトを備えています。

(2) Cocoon

(3) Lightning

■有料のテーマ3選

複数のサイトで使えるテーマとして知られる、以下の3つを紹介します。

(1) SWELL

(2) SANGO

(3) AFFINGER6

※AFFINGER6の後継として「AFFINGER7」が2026年6月に登場したとされています。購入前に公式サイトで最新版を確認してください。

WordPressサイトのスマホ対応状況の確認方法

スマホでの表示の確認方法（モバイルフレンドリーテストの終了）

ここまでの対策が終わったら、サイトがスマホで見やすい状態になっているかを確認しましょう。

この記事の旧版では、Googleの「モバイルフレンドリーテスト」で確認する方法を紹介していました。Googleは2023年12月1日に、このテストとSearch Consoleの「モバイルユーザビリティ」レポートを終了しています（出典：Google 検索セントラルブログ）。そのため、2026年11月時点では次の方法で確認します。

1. ChromeのDevToolsにある「デバイスモード」で、パソコンの画面からスマホの表示を確認する
2. 実際のスマホで、自分のサイトを開いて確認する
3. PageSpeed Insightsで、モバイルでの表示速度を確認する（次の項で解説します）

Chromeのデバイスモードで確認する

デバイスモードは、パソコンのChromeでスマホの画面サイズや表示を再現する機能です。DevToolsを開いて、上部にある「Toggle device toolbar（デバイスツールバーの切り替え）」をクリックすると、スマホの画面で表示を確認できます。機種の一覧から端末を選ぶか、画面の幅を自分で変えて確認します（出典：Chrome for Developers）。

表示が崩れている場合は、画面の幅を変えながら、どの幅で崩れるかを確認すると原因を探しやすくなります。

デバイスモードは、実際のスマホでの見え方を近似して再現するものです。Chromeの公式ドキュメントも、迷ったときは実際のスマホでページを確認するのが確実だと説明しています。大事なページは、実機でも確認しておきましょう。

PageSpeed Insightsでモバイルの表示速度を確認する方法

次に、Googleが提供している「PageSpeed Insights」で、ページの読み込み速度を確認してみましょう。このツールで、自分のサイトの読み込み速度と改善のヒントを確認できます。

ページの読み込みが遅いと、スマホで見る人の使いやすさが下がります。PageSpeed Insightsで、自分のサイトの状態を確認しておきましょう。ページを開くと、以下の画面が表示されます。

上のページで自身のサイトのURLを登録します。その後分析ボタンを押します。

「携帯電話」を選択した後、携帯電話でのサイトパフォーマンスが診断されます。赤字のようにパフォーマンスコアが悪い場合には、画面の指示にしたがってサイトの改善方法の検討をします。

サーバー側のスペック改善はすぐには難しいため、まずはサイト上の画像の配信方法を見直すことをおすすめします。以前は「次世代フォーマットでの画像配信」として表示されていた項目は、Lighthouse 13以降、画像に関する指摘をまとめた「Improve image delivery（画像配信の改善）」に統合されています（2026年11月時点）。

表示速度の改善方法は、以下の記事を参照してください。

「携帯電話」のパフォーマンスは、「デスクトップ」のパフォーマンスより厳しめに出ます。スマートフォンを保有する世帯が9割を超えているため、モバイルでの表示速度の改善にも継続して取り組みましょう。

まとめ

関連リンク