軽量で簡単なWordPressテーマ「ライトワード」

自分のサイトをスマホで確認する方法

WordPressでウェブサイトを作ったけど、「スマートフォンでどう見えるんだろう？」と気になりますよね。パソコンではキレイに見えても、スマホでは表示が崩れていたり、文字が小さすぎたりすることがあります。

今は多くの人がスマホでウェブサイトを見る時代です。そのため、スマホでの見え方を確認し、訪問者にとって使いやすいサイトにすることは非常に大切です。

この記事では、WordPressで作ったサイトをスマホで確認する簡単な方法をいくつかご紹介します。初心者の方でも分かりやすいように、専門用語はできるだけ使わずに説明しますね。

なぜスマホでの確認が大切なの？

その理由は主に2つあります。

  1. 多くの人がスマホで見ているから: 通勤中、休憩中、寝る前など、ちょっとした時間にスマホで情報収集をする人が増えています。あなたのサイトもスマホで見られる機会が多いはずです。
  2. Googleもスマホ対応を重視しているから: 検索エンジンのGoogleは、スマホで見やすいサイトを高く評価する傾向にあります。つまり、スマホ対応はSEO（検索エンジン最適化）対策にも繋がるのです。

では、具体的にどうやって確認するのか見ていきましょう。

スマホでサイトを確認する主な方法

大きく分けて、以下の方法があります。

  1. 一番おすすめ！自分のスマートフォンで直接見る
  2. パソコンのブラウザ機能（デベロッパーツール）を使う
  3. WordPressの「カスタマイザー」機能を使う

それぞれ詳しく見ていきましょう。

1. 一番おすすめ！自分のスマートフォンで直接見る

これが一番確実で簡単な方法です。実際に使っているスマートフォンでサイトのURLにアクセスしてみましょう。

公開済みのサイトの場合

ウェブサイトのURL（例： https://あなたのサイト名.com）を、お使いのスマートフォンのブラウザ（SafariやGoogle Chromeなど）のアドレスバーに入力してアクセスするだけです。

まだ公開していない（ローカル環境などで作成中の）サイトの場合

これは少し設定が必要になる場合があります。

お使いのパソコンとスマートフォンが同じWi-Fiネットワークに接続されていれば、パソコンのIPアドレスを指定することで確認できることもあります。ただし、環境によってはうまくいかないこともあるため、最初は公開後に確認するのが手軽でおすすめです。

（※もしローカル環境での確認方法を詳しく知りたい場合は、別途「WordPress ローカル環境 スマホ 確認」などで検索してみてください。）

2. パソコンのブラウザ機能（デベロッパーツール）を使う

多くのパソコン用ウェブブラウザには、「デベロッパーツール（開発者ツール）」という機能が備わっています。これを使うと、パソコン上でスマホやタブレットなど、さまざまな画面サイズでの表示をシミュレーションできます。

ここでは、代表的なブラウザである Google Chrome での手順を説明します。

  1. WordPressで作成したサイトをGoogle Chromeで開きます。
  2. サイト上で右クリックし、表示されたメニューから「検証」または「Inspect」を選択します。 （もしくは、キーボードショートカット Ctrl + Shift + I (Windows) / Cmd + Option + I (Mac) でも開けます。）
  3. 画面の右側か下側に専門的な情報がたくさん表示されますが、慌てないでください。
  4. その中にある、スマートフォンのような形のアイコン（デバイスの切り替えアイコン） をクリックします。 (イメージ画像です。実際のアイコンと異なる場合があります)
  5. すると、サイトの表示がスマートフォンの画面サイズに切り替わります。
  6. 画面上部にある「Dimensions: Responsive」と書かれた部分をクリックすると、様々なスマートフォンの機種名（例: iPhone 12 Pro, Galaxy S20 Ultraなど）が表示されるので、確認したい機種を選べます。自分で幅や高さを指定することも可能です。

3. WordPressの「カスタマイザー」機能を使う

WordPressには「カスタマイザー」という機能があり、テーマの外観設定などをリアルタイムプレビューしながら変更できます。このカスタマイザーにも、スマホやタブレットでの表示を確認する機能が付いています。

  1. WordPressの管理画面にログインします。
  2. 左側のメニューから「外観」→「カスタマイズ」を選択します。
  3. カスタマイザーの画面が開きます。画面の左下に、パソコン、タブレット、スマートフォンのアイコンが並んでいるはずです。 (イメージ画像です。実際のアイコンと異なる場合があります)
  4. スマートフォンのアイコンをクリックすると、プレビュー画面がスマホ表示に切り替わります。

確認するときのチェックポイント

スマホでサイトを確認する際には、以下の点に注意して見てみましょう。

  • 表示崩れはないか？: パソコンではきれいに並んでいた要素が、スマホでは重なったり、画面からはみ出したりしていないか。
  • 文字の大きさは適切か？: 文字が小さすぎて読みにくくないか。逆に大きすぎて読みにくいことはないか。
  • ボタンやリンクはタップしやすいか？: ボタンが小さすぎたり、他の要素と近すぎたりして、間違えてタップしてしまわないか。
  • 画像は適切に表示されているか？: 画像が大きすぎたり小さすぎたりしていないか。画質は荒くないか。
  • メニューは正しく動作するか？: スマホ用のメニュー（ハンバーガーメニューなど）が正しく表示され、タップしたらきちんと開くか。
  • 横スクロールが発生していないか？: 基本的にウェブサイトは縦スクロールで見るものです。意図しない横スクロールが発生している場合は、何かが画面幅からはみ出している可能性があります。

まとめ

WordPressで作ったサイトをスマホで確認する方法を3つご紹介しました。

  1. 自分のスマートフォンで直接見る (一番おすすめ！)
  2. パソコンのブラウザ機能（デベロッパーツール）を使う
  3. WordPressの「カスタマイザー」機能を使う

どの方法にもメリット・デメリットがありますので、状況に合わせて使い分けてみてください。

特に、新しい記事を公開した後や、サイトのデザインを変更した後は、必ずスマホでどのように見えるかを確認する習慣をつけましょう。訪問者にとって使いやすいサイト作りを心がけることが、たくさんの人に見てもらえるサイトへの第一歩です。

この記事が、あなたのWordPressサイト運営のお役に立てれば幸いです。