メニュー
このは屋
スモールビジネス特化の学び舎
スモールビジネス特化の学び舎。商売と生活と文化を結び付ける生涯学習カルチャーセンター。初心者のスモールビジネスオーナーに向けて、パソコン教室、各種ワークショップ等、カルチャーセンターを運営。ネットから集客する方法、オンラインで商売する方法、労働集約型から知識集約型へ移行する方法、サブスクリプションで収益を安定させる方法…etc。鼻歌まじりの商売と生涯を、ワンストップで、トータルにサポートしている。

【初心者向け】パソコンから自社サイトのスマホ表示を確認する方法

このは屋
このは屋
スモールビジネス特化の学び舎 このは屋です。

自分のサイトがスマホからどのような表示されているのか、気になりますよね。

近年スマホでウェブを閲覧するユーザー層が増えてきている為、スマホ表示が重要視されています。

そんなスマホ表示の確認方法ですが、実はとても簡単にできるんです。

今回は、「パソコンから自社サイトのスマホ表示を確認する方法」をご紹介します。

目次

【広告】このは屋の「おすすめ」

参考にしてみてください♪
このは屋
このは屋

2015年から「モバイル フレンドリーアップデート」の開始

その前に、なぜスマホ表示にも気をつける必要があるのか、についてです。(もはや説明不要かと思いますが、念の為)

Google側も2015年4月に「モバイル フレンドリーアップデート」を開始しました。

Google ウェブマスター向け公式ブ...
モバイル フレンドリー アップデートを開始します Google フレンドリーなサイト制作・運営に関するウェブマスター向け公式情報

Googleがこのような評価基準を設けた為、ウェブで集客を行っていく我々もこれに従わない訳にはいきません。

郷に入っては郷に従えです。

そういった理由で、スマホからの表示にも気をつけないといけません。

Chrome拡張機能「Window Resizer」を使用

一番お手軽で簡単なのが、Chromeの拡張機能を使用する方法です。

「Window Resizer」という拡張機能を導入すると簡単にスマホ表示の確認が可能です。

あわせて読みたい
Window Resizer Resize the browser window to emulate various screen resolutions.

この拡張機能を使うことで、各デバイスのサイズごとに画面サイズが変化させることができます。

導入後は、ツールバーにアイコンが表示されるので、そちらをクリックするだけです。

直感的に使用することが出来ますが、もしも迷った場合は「Window Resizer 使い方」で検索してください。

「デベロッパーツール」を使用

GoogleChromeには、デベロッパーツールという開発者向けのツールが搭載されています。

ウェブサイトを開いた状態で「右クリック」 > 検証をクリックで、デベロッパーツールを起動できます。

起動した状態で、

  • Windowsの場合「Ctrl+Shift+M」、
  • Macの場合「command+Shift+M」

をクリックするとスマホ表示にすることが可能です。

デベロッパーツールはツールは、テキストだけで解説するのが難しいので、

  • 「デベロッパーツール 使い方」、
  • 「デベロッパーツール スマホ表示」

で検索してみてください。

編集後記

今回は、「パソコンから自社サイトのスマホ表示を確認する方法」をご紹介しました。

これでスマホ表示を簡単に確認することができますね。

表示を確認できても、調整できなければ意味がないので、そういった意味でも自分で管理や操作ができる必要があります。

ですので、WordPressで自分で管理しましょう。

WordPressについては、以下の記事で解説されています。

あわせて読みたい
なぜWordPressを導入するべきなのか?5つのメリットをご紹介 【WordPressとは】導入をオススメする5つのメリットをご紹介【アメブロとも比較】

また以下のような書籍で解説されています。

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる