デスクトッププレビューでWordPressサイトのモバイル版を確認することは、簡単ですが不可欠な作業です。
これにより、サイトが小さい画面でどのように表示されるかを確認でき、それ以外では見逃してしまう可能性のあるレイアウトの問題やデザイン上の欠陥を発見するのに役立ちます。
長年にわたり、私たちは多くのウェブサイト所有者と協力し、モバイルデバイスでサイトが素晴らしく見え、うまく機能するようにしてきました。また、WPBeginnerサイトで新しいページや投稿を作成する際には、常にモバイルフレンドリーなデザインを優先しています。
私たちが気づいた課題の1つは、適切なツールなしでデスクトップでモバイルバージョンを確認するのが難しいことです。
幸いなことに、WordPressのテーマカスタマイザーとGoogle Chromeの開発者ツールデバイスモードを使用すると、すばやくプレビューして調整を行うことができます。
このガイドでは、デスクトップからWordPressサイトのモバイルバージョンを表示する両方の方法を説明します。
モバイルレイアウトをプレビューすべき理由
ウェブサイト訪問者の50%以上がモバイルフォンでサイトにアクセスし、約3%がタブレットを使用します。
これは、モバイルで素晴らしい見た目のサイトを持つことが非常に重要であることを意味します。
実際、モバイルは非常に重要であるため、Googleは現在、ウェブサイトのランキングアルゴリズムにモバイルファーストインデックスを使用しています。これは、Googleがサイトのモバイルバージョンをインデックス作成に使用することを意味します。詳細については、WordPress SEOの完全ガイドをお読みください。
レスポンシブWordPressテーマを使用している場合でも、サイトがモバイルでどのように表示されるかを確認する必要があります。モバイルユーザーのニーズに合わせて最適化された、主要なランディングページの異なるバージョンを作成したい場合があります。
ほとんどのモバイルプレビューは、非常に多くの異なるモバイル画面サイズやブラウザがあるため、完全に完璧ではないことを覚えておくことが重要です。最終的なテストは、常にモバイルデバイスでサイトを確認することであるべきです。
次のセクションでは、デスクトップでWordPressウェブサイトのモバイルバージョンを表示する方法を見ていきます。
デスクトップブラウザを使用してサイトがモバイルでどのように表示されるかをテストするための2つの異なる方法を説明します。以下のリンクをクリックすると、任意のセクションにジャンプできます。
- 方法1：WordPressのテーマカスタマイザーを使用する
- 方法2：Google ChromeのDevToolsデバイスモードを使用する
- ボーナスヒント：WordPressでモバイル専用コンテンツを作成する
- 動画チュートリアル
- よくある質問
さあ、始めましょう！
方法1：WordPressのテーマカスタマイザーを使用する
WordPressテーマカスタマイザーを使用して、WordPressサイトのモバイルバージョンをプレビューできます。
WordPressダッシュボードにログインし、外観 » カスタマイズ画面に移動するだけです。
これにより、WordPressテーマカスタマイザーが開きます。
使用しているテーマによって、左側のメニューに表示されるオプションが若干異なる場合があります。
画面下部にあるモバイルアイコンをクリックするだけです。
その後、サイトがモバイルデバイスでどのように表示されるかのプレビューが表示されます。
このモバイル版をプレビューする方法は、ブログの作成が完了していない場合や、メンテナンスモードになっている場合に特に役立ちます。
これで、ウェブサイトに変更を加え、公開する前にどのように見えるかを確認できます。
方法2：Google ChromeのDevToolsデバイスモードを使用する
ウェブサイトのモバイルバージョンを表示する方法の次のメソッドは、Google Chromeブラウザを使用することです。
Google Chromeブラウザには、ウェブサイトのモバイルでの表示方法のプレビューを含む、さまざまなチェックを実行できる開発者ツールが用意されています。
デスクトップでGoogle Chromeブラウザを開き、確認したいページにアクセスするだけです。サイトのページのプレビューや、競合他社のウェブサイトでも構いません。
次に、ページを右クリックして「検証」オプションを選択する必要があります。
新しいパネルが画面の右側または下部に開きます。
このようになります:
開発者ビューでは、サイトのHTMLソースコード、CSS、その他の詳細を確認できます。
次に、「デバイスツールバーの切り替え」ボタンをクリックして、モバイルビューに変更する必要があります。
ウェブサイトのプレビューがモバイル画面サイズに縮小されるのがわかります。
モバイル表示では、ウェブサイトの一般的な外観も変わります。たとえば、メニューが折りたたまれ、追加のアイコンがメニューの右側ではなく左側に移動します。
サイトのモバイル表示にマウスカーソルを合わせると、円になります。この円をマウスで移動させることで、モバイルデバイスのタッチスクリーンを模倣できます。
「Shift」キーを押しながらマウスをクリックしてドラッグすると、モバイル画面をピンチしてズームインまたはズームアウトをシミュレートすることもできます。
サイトのモバイルビューの上に、追加のオプションが表示されます。
これらの設定により、いくつかの追加機能を行うことができます。さまざまな種類のスマートフォンでサイトがどのように表示されるかを確認できます。
例えば、iPhoneのようなモバイルデバイスを選択して、サイトがどのように表示されるかを確認できます。
高速または低速の3G接続でのサイトのパフォーマンスをシミュレートすることもできます。回転アイコンを使用して、モバイル画面を回転させることができます。
ボーナスヒント：WordPressでモバイル専用コンテンツを作成する
ウェブサイトがレスポンシブデザインであることは、モバイル訪問者がウェブサイトを簡単に操作できるようにするために重要です。
ただし、レスポンシブなサイトがあるだけでは十分ではない場合があります。モバイルデバイスのユーザーは、デスクトップユーザーとは異なるものを探していることがよくあります。
多くのプレミアムテーマやプラグインでは、デスクトップとモバイルで表示が異なる要素を作成できます。また、ページビルダープラグイン（SeedProdなど）を使用して、モバイル表示でランディングページを編集することもできます。
リード獲得フォームには、モバイル専用のコンテンツを作成することを検討してください。モバイルデバイスでは、これらのフォームは最小限の情報、理想的にはメールアドレスのみを尋ねるようにする必要があります。また、見た目が良く、閉じやすいことも重要です。
詳細については、WordPressでランディングページを作成する方法に関するガイドを参照してください。
モバイル専用のポップアップやリード獲得フォームを作成するもう一つの素晴らしい方法は、OptinMonsterを使用することです。これは、市場で最も強力なWordPressポップアッププラグインおよびリード獲得ツールです。
OptinMonsterには、モバイルユーザーとデスクトップユーザーに異なるキャンペーンを表示できる、特定のデバイスターゲティング表示ルールがあります。これをOptinMonsterのジオターゲティング機能やその他の高度なパーソナライズ機能と組み合わせることで、最高のコンバージョンを得ることができます。
詳細については、コンバージョンするモバイルポップアップの作成方法に関するガイドをご覧ください。
動画チュートリアル
おわりに、デスクトップからWordPressサイトのモバイルバージョンを表示する方法に関するビデオチュートリアルをチェックすることをお勧めします。
よくある質問
ここでは、サイトのモバイルレイアウトのプレビューに関して、読者からよく寄せられる質問をいくつか紹介します。
これらのデスクトッププレビューは、実際のモバイルデバイスと正確に一致しますか？
必ずしもそうではありません。明白なレイアウトの問題を検出するのに役立ちますが、これらのデスクトップベースのツールは、画面の寸法、ブラウザの動作、およびネットワーク条件をエミュレートすることしかできません。
パフォーマンスの癖やタッチジェスチャーのようなハードウェア固有のインタラクションを捉えられない場合があります。
そのため、公開前に実際の使いやすさを確認するために、常にスマートフォンやタブレットなどの実際のデバイスでテストすることをお勧めします。
デスクトップからモバイルビューでサイトを編集できますか？
はい、WordPressでは、カスタマイザーでモバイルモードをプレビューしながらコンテンツを編集したり、Elementor、SeedProd、Beaver Builderなどのページビルダーを使用したりしてコンテンツを編集できます。
モバイルプレビューに切り替えると、次のことができます。
- 小さな画面に合わせて、パディング、マージン、フォントサイズを調整します。
- 特定の要素をモバイルでのみ表示または非表示にする（大きな画像やデスクトップ専用バナーなど）。
- タッチ操作用に設計されたメニューとウィジェットをテストします。
ほとんどのビルダーはデバイス固有の設定を提供しているため、デスクトップ版やタブレット版に影響を与えることなくレイアウトをカスタマイズできます。
ログインせずにWordPressのモバイルビューを確認するにはどうすればよいですか？
訪問者にとってライブサイトがどのように表示されるかを確認したい場合は、これらの方法を試してください。
- シークレットブラウザウィンドウでサイトを開き、開発者ツールのデバイスモードを使用します。
- Responsive Design Checkerのようなオンラインレスポンシブデザインチェッカーを使用します。
これらのツールを使用すると、ログイン資格情報を必要とせずに、さまざまな解像度でサイトを表示できます。
この記事が、サイトのモバイルレイアウトをプレビューする方法を学ぶのに役立ったことを願っています。また、WordPressサイトをモバイルアプリに変換するための最良のプラグインの専門家による選択肢や、モバイルフレンドリーなウェブサイトを作成する方法についても確認したいかもしれません。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
Dayo Olobayo
これは私にとって非常にタイムリーな記事です。ウェブサイトの再設計プロセスにあり、モバイルとデスクトップの両方でうまく表示されるようにしたいと考えています。この記事で説明されている方法を必ず試してみます。
デニス・ムトミ
この投稿は、これ以上ないほど良いタイミングで来ました！
WordPressサイトを、たくさんの異なるスマートフォンやタブレットで手動で確認することなく、さまざまなモバイルデバイスでプレビューする方法を探していました。Google Chrome DevToolsに組み込みのデバイスモードがあるなんて知りませんでした – これからは間違いなくそれを使います。
WPBeginnerサポート
Glad we could show the easy way to test this
管理者
デニス・ムトミ
Chrome DevToolsでさまざまなデバイスビューのスクリーンショットを撮れることも発見しました。テストに役立つツールがたくさんあります。
Mrteesurez
それは良いですね、私はそれを知りませんでした。共有してくれてありがとう。現在、ユーザーの大部分がモバイルでウェブサイトを訪問・閲覧していることを考えると、モバイル向けにウェブサイトを最適化し、さまざまな画面でプレビューする方法を知っておくことは、サイトの要素を調整する上で重要です。
Mrteesurez
これには通常ページビルダーを使用していましたが、テーマカスタマイザーが使えることを発見しました。異なるデバイスの画面を切り替えるために3つの画面サイズが表示されることさえあります。ありがとうございます。
ラルフ
私のウェブサイトでは、毎月75〜77％ものモバイルトラフィックがあります。私のテーマはレスポンシブですが、WordPress自体の記事プレビュー（モバイル）は、私の携帯電話では投稿のように見えません。妻の携帯電話でも同様です。
ゼロから作り直す新しいウェブサイトでは、モバイルユーザーのために100％構築することを考えています。
SeedProdで大丈夫ですか？それとも特定のビルダーを探すべきですか？
WPBeginnerサポート
SeedProd will allow you to create a responsive theme for your site
管理者
モイヌディン・ワヒード
これは非常に重要な側面です。なぜなら、トラフィックのほとんどはモバイル自体から来ており、優れたユーザーインターフェースがあれば、間違いなく良好な視覚体験に役立つからです。
GenerateBlocks ProとGeneratePressを使用しましたが、それらにもウェブサイトのモバイル版の外観を調整する同様の機能があります。
最近では、ほぼすべてのテーマとページビルダーにこの機能が含まれています。
WPBeginnerサポート
It is definitely a good feature to have
管理者
イジー・ヴァネック
このビルダーを使用してウェブサイトを構築しているユーザー向けに、Elementorも同様の機能を提供しています。左側のメニューの下部には、レイアウトを表示するためのトグル機能があります。ここで、デスクトップ、タブレット、モバイルビューを切り替えることができます。テスト目的で独自のブレークポイントを追加し、カスタム解像度を作成することもできます。個人的には、レスポンシブテンプレートのため、特にElementorを使用した場合、記事のレイアウトが劇的に異なることがあるため、複数のデバイスでのウェブサイトの外観を確認することは非常に役立つと感じています。
WPBeginnerサポート
Thank you for sharing, page builders have started adding this view toggle for their users
管理者
モイヌディン・ワヒード
今ではほとんどすべてのページビルダーが、デスクトップ版と同じくらいモバイル版の見栄えや外観を良くするためのオプションを提供していると思います。
SeedProdを使用していて、モバイル版のテストが非常にスムーズだと感じました。
SeedProdの最も良い点は、良いモバイルの外観を得るために多くの変更をする必要がなく、ほとんどの場合、わずかな調整で済むことです。
Mrteesurez
Seedprodを使い始めてからあまり時間が経っていません。ウェブサイトをさまざまな画面サイズでプレビューするためにElementorを使用しており、それは私にとって問題ありません。しかし、Seedprodで発見したことがあり、切り替えたいと考えているため、このようなテスト機能は私にとって追加のメリットです。
ilham ilmam aufar
hello wpbeginner,
what if i want make mobilw view permanent on desktop view?
thanks
Sakirah
こんにちは、モバイルでサイトを読み込む際に問題があります。モバイルサイトビュー、クラシックバージョン（テーマなし）として表示されます。レスポンシブテーマを表示するには、下部にある「フルサイトを表示」をクリックする必要があります。レスポンシブテーマが自動的に表示されるように、「フルサイトを表示」を強制したいです。
WPBeginnerサポート
モバイル表示を有効にしているプラグインがないか、サイトを確認することをお勧めします。これはWordPressのデフォルトの動作ではないはずです。
管理者
daniel
スマートフォンアイコンが付いた左上のボタンをクリックして、インスペクトツールを有効にし、モバイルモードを有効にするだけで、はるかに簡単な方法があります。
WPBeginnerサポート
これはこの記事のメソッド2です。
管理者
ラリッサ・モコム
こんにちは。ここに共有されているすべての情報に感謝します。あなたのガイドにステップバイステップで従うことで、私のブログを作成することができました。私の質問は、私のウィジェット（ホーム、アバウト、お問い合わせ）がモバイルデバイスでウェブサイトが表示されたときに表示されない問題をどのように修正できるかということです。コンピューターではすべて順調に見えます。
WPBeginnerサポート
これはテーマのスタイリングに基づいた選択ではないことを確認するために、テーマのサポートに連絡することをお勧めします。
管理者
Samson Onuegbu
すごい！
WPbeginnerは、誰も知らなかったような最高のハックを常に提供してくれます。
もうすぐサイトを公開します。おかげで、レスポンシブサイト構築の仕事が楽になりました。
本当にありがとうございます！
WPBeginnerサポート
You’re welcome, glad you found our recommendations helpful
管理者