Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressサイトのモバイル版をデスクトップから表示する方法

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressサイトのモバイル版をプレビューしたいですか?

モバイルレイアウトのプレビューは、モバイル端末でサイトがどのように見えるかを確認するのに役立ちます。開発中のサイトや本番のサイトでは、多くの場合、デスクトップコンピューターでモバイル版を表示する方が簡単です。そうすれば、素早く変更を加え、その効果を確認することができます。

この投稿では、WordPressサイトのモバイル版をデスクトップから表示する方法を紹介する。

How to view the mobile version of WordPress sites from desktop

モバイルレイアウトをプレビューすべき理由

サイト訪問者の50%以上が携帯電話でアクセスしています。約3%はタブレットを使用しています。

つまり、モバイルで見栄えのするサイトを持つことが非常に重要なのだ。

実際、モバイルは非常に重要であり、Googleは現在、サイトのランキングアルゴリズムにモバイルファーストインデックスを採用しています。これは、Googleがあなたのサイトのモバイル版をインデックスに使用することを意味します。さらに詳しく知りたい方は、WordPress SEOの究極ガイドをご覧ください。

レスポンシブWordPressテーマを使用している場合でも、サイトがモバイルでどのように見えるかをチェックする必要があります。モバイルユーザーのニーズに最適化された、主要なランディングページの異なるバージョンを作成するとよいでしょう。

モバイルの画面サイズやブラウザーは千差万別であるため、ほとんどのモバイルプレビューが完全に完璧なものではないことを念頭に置いておくことが重要です。最終的なテストは、常に実際のモバイル端末でサイトを見ることです。

とはいえ、WordPressサイトのモバイル版をデスクトップで表示する方法を見てみましょう。

ここでは、デスクトップのブラウザーでモバイルサイトをテストするための2つの異なる方法を説明します。下のリンクをクリックすると、各セクションにジャンプできます:

動画チュートリアル

Subscribe to WPBeginner

もし、文書での説明がお望みなら、このまま読み進めていただきたい。

方法1:WordPressのテーマ・カスタマイザーを使う

WordPressテーマカスタマイザーを使って、WordPressサイトのモバイル版をプレビューすることができます。

WordPressダッシュボードにログインし、外観 ” カスタマイズ画面に移動するだけです。

Go to theme customizer from WordPress dashboard

WordPressテーマのカスタマイザーが開きます。このチュートリアルでは、Astraテーマを使用します。

お使いのテーマによっては、左側のメニューに若干異なるオプションが表示される場合があります。

View options in theme customizer

画面下のモバイルアイコンをクリック。

すると、モバイル端末でのサイトの見え方のプレビューが表示されます。

View mobile screen preview

モバイル版をプレビューするこの方法は、ブログの作成が終わっていない時やメンテナンス・モードの時に特に便利です。

サイトに変更を加え、本番稼動前に見た目をチェックすることができます。

端末2:Google ChromeのDevToolsデバイスモードを使う

次に、Google Chromeブラウザを使ってモバイル版サイトを表示する方法です。

Google Chromeブラウザーには開発者向けツールがあり、モバイル端末での見え方のプレビューを含め、あらゆるサイトでさまざまなチェックを行うことができる。

デスクトップでGoogle Chromeブラウザーを開き、チェックしたいページにアクセスするだけです。あなたのサイトのページのプレビューかもしれないし、競合のサイトかもしれない。

次に、ページを右クリックして「Inspect」オプションを選択する必要がある。

Right click to open the inspect option

画面の右側か下に新しいパネルが開きます。

こんな感じになるだろう:

View the inspect tool

開発者表示では、サイトのHTMLソースコード、CSS、その他の詳細を見ることができます。

次に、「端末ツールバーの切り替え」ボタンをクリックして、モバイル表示に切り替えます。

Click the toggle device toolbar

モバイル画面サイズに縮小されたサイトのプレビューが表示されます。

モバイル表示では、サイトの外観も変わります。例えば、メニューは折りたたまれ、追加のアイコンはメニューの右側ではなく左側に移動します。

View the mobile version in inspect tool window

マウスカーソルをサイトのモバイル表示にオーバーさせると、円が表示されます。この円はマウスで動かすことができ、モバイル端末のタッチスクリーンを模倣することができます。

また、「Shift」キーを押しながらマウスをクリックして動かすと、モバイル画面をピンチして拡大・縮小するシミュレーションができる。

サイトのモバイル表示の上に、いくつかの追加オプションが表示されます。

Change the dimensions for responsiveness

これらの設定により、さらにいくつかのことができるようになります。あなたのサイトがさまざまな種類のスマートフォンでどのように見えるかをチェックすることができます。

例えば、iPhoneなどのモバイル端末を選択し、その端末でサイトがどのように表示されるかを確認することができます。

また、高速または低速の3G接続でのサイトのパフォーマンスをシミュレートすることもできます。回転アイコンを使ってモバイル画面を回転させることもできます。

ボーナス:WordPressでモバイルに特化したコンテンツを作成する方法

モバイルの訪問者がウェブサイトを簡単にナビゲートできるように、ウェブサイトがレスポンシブデザインであることが重要です。

しかし、単にレスポンシブサイトを持つだけでは十分とは言えないかもしれません。モバイル端末のユーザーは、デスクトップユーザーとは異なるものを求めていることが多いのです。

多くのプレミアムテーマやプラグインでは、デスクトップとモバイルで異なる表示をする要素を作成することができる。また、SeedProdのようなページビルダープラグインを使って、モバイル表示でランディングページを編集することもできます。

Previewing a custom page on mobile

リードジェネレータのフォームには、モバイル専用のコンテンツを作成することを検討すべきです。モバイル端末では、これらのフォームでは最小限の情報、理想的にはメール・アドレスのみを入力する必要があります。また、見栄えがよく、簡単に閉じることができるものでなければなりません。

詳しくは、WordPressでランディングページを作成する方法をご覧ください。

モバイル専用のポップアップとリードジェネレータフォームを作成するもう一つの素晴らしい方法は、OptinMonsterを使用することです。これは、市場で最も強力なWordPressポップアッププラグインであり、リードジェネレーションツールです。

Edit campaign design on mobile

OptinMonsterには特定の端末をターゲットにした表示ルールがあり、モバイルユーザーとデスクトップユーザーで異なるキャンペーンを表示することができます。OptinMonsterのジオターゲティング機能やその他の高度なパーソナライズ機能と組み合わせることで、最高のコンバージョンを獲得することも可能です。

詳しくは、コンバージョンにつながるモバイルポップアップの作成方法をご覧ください。

この投稿が、サイトのモバイルレイアウトをプレビューする方法を学ぶのにお役に立てば幸いです。また、WordPressサイトをモバイルアプリに変換するのに最適なプラグインやモバイルフレンドリーなサイトを作成する方法についてもご紹介します。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

20件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Dennis Muthomi says

    This post couldn’t have come at a better time!
    I’ve been looking for ways to preview my WordPress site on various mobile devices without having to manually check on a bunch of different phones and tablets. I had no idea that the Google Chrome DevTools had a built-in device mode – definitely going to be using that from now on.

  3. Mrteesurez says

    I normally used page builder for this, now I just discovered we can use theme customizer, it’s even shows the three screens size to switch between different devices screen. Thanks.

  4. Ralph says

    On my website I have even 75-77% mobile traffic every single month. My theme is responsive but article preview (mobile) in wordpress itself never looks like a post on my phone. Nor on my wifes phone.
    With my new website I’m making from scratch I even think about building it 100% for mobile users.
    Is SeedProd ok for that? Or I should look up for specific builder?

  5. Moinuddin waheed says

    This is very important aspect as most of the traffic comes from the mobile itself and having a good user interface will definitely help in good visual experience.
    I have used generateblocks pro and generatepress and it has also the same feature to tweak the mobile version appearance of the website.
    Almost all the themes and page builders now a days include this feature.

  6. Jiří Vaněk says

    Elementor also offers a similar function for those building websites using this builder. At the bottom of the left-hand menu, there’s a toggle feature to display the layout. Here, you can switch between desktop, tablet, and mobile views. You can also add your own breakpoints and create custom resolutions for testing purposes. Personally, I’ve found it very useful to check the website’s appearance across multiple devices because, surprisingly, due to the responsive template, the article layout, especially with Elementor, can look dramatically different.

    • WPBeginner Support says

      Thank you for sharing, page builders have started adding this view toggle for their users :)

      管理者

      • Moinuddin Waheed says

        I think almost all the page builders are now making this option to make the mobile version look and appearance to be as good as the desktop version.
        I have been using seedprod and found it to be very smooth in testing mobile version.
        the best thing about seedprod is that we don’t need to make much changes to have good mobile appearance rather a small tweak does the job in most of the cases.

  7. Sakirah says

    Hello, I have a problem with loading my site on mobile. It displays as Mobile Site view, classic version without theme. I have to click View Full Site at the bottom to display the responsive theme. I want to force View Full Site so that the responsive theme is auto display to any mobile.

    • WPBeginner Support says

      You would want to check your site to see if you have a plugin that would be enabling that mobile view as that should not be default WordPress behavior.

      管理者

  8. daniel says

    there’s a much easier way to do this just by clicking the inspect tool and enable mobile mode ( button on the yop left with a phone icon ).

  9. Larissa mokom says

    Hello, Thank you for all the information you are sharing on here i am able to follow your guides step by step to be able to come up with my blog my question is how would i be able to fix the problem of my widgets ( home,about, contact us) not displaying when my website is pulled on a mobile device but on a computer everything is looking good.

    • WPBeginner Support says

      You would want to reach out to your theme’s support to ensure this isn’t a choice based on the theme’s styling.

      管理者

  10. Samson Onuegbu says

    Whoa!

    WPbeginner always give the best hacks that many never know existed.

    We will be launching our site soon and you have just made my responsive site building job easier.

    Thanks a lot!

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。