無料【Web画面解像度 シミュレータ】ツール

Web画面解像度 シミュレータ

URLを入力してください

■ Web画面解像度 シミュレータ

【Web画面解像度 シミュレータ】ツールは、さまざまな異なるWeb画面解像度で、Webサイトをブラウザで表示したときの見え方をチェックできます。チェックするシミュレート画面はブラウザの別ウィンドウに表示されます。

デスクトップパソコンやノートパソコン、スマートフォンやタブレットなどデバイスの画面サイズ（解像度）は異なります。

たとえば、Webサイトのデザイン時、デスクトップパソコン画面をベースにレイアウトしたWebサイトをスマートフォンで見ると、Webサイトの横幅が画面に入りきらないで横スクロールしないと表示できないということがあります。

以前は、デスクトップパソコン用サイト、モバイル用サイトの2種類（URLが異なる）を作成して、Webサイトにアクセスするデバイス別にサイトを切り替えて表示させたりする方法もありました。

しかし現在では、デスクトップパソコンやノートパソコン、スマートフォンやタブレットなどの異なるデバイスに対して、同じHTMLコードと、CSS（スタイルシート）を使用して各デバイスのページのレンダリングを変更する「レスポンシブデザイン」でWebサイトを構築する方法が一般的です。

Googleにおいても、レスポンシブデザインでのWebサイト構築を推奨しています。

◆ レスポンシブ デザインにする理由

• URLが1つなので、ユーザーによるコンテンツの共有やリンクが簡単になります。
• 対応するパソコン用ページまたはモバイル用ページが存在することを Googleのアルゴリズムに伝える必要がなく、インデックス登録プロパティが正確にページに割り当てられます。
• 同じコンテンツのページをいくつも維持管理する手間が省けます。
• モバイルサイトでよくある誤りに陥る可能性を抑えることができます。
• ユーザーをデバイスごとに最適化したページにリダイレクトする必要がないため、読み込み時間を短縮できます。また、ユーザー エージェントに基づくリダイレクトはエラーが発生しやすいため、サイトのユーザーエクスペリエンスを損なうおそれがあります。
• Googlebot がサイトをクロールするために必要なリソースを節約できます。レスポンシブ ウェブ デザインでは、1つのGooglebot ユーザーエージェントがページを一度クロールするだけで済みます。異なる Googlebot ユーザーエージェントが何度もクロールしてコンテンツのすべてのバージョンを取得する必要はありません。Google によるクロールの効率が上がることは、間接的には、サイトのコンテンツがより多くインデックスに登録され、適切な間隔で更新されることにつながります。

詳しくは下記を参照してください。
◆ 参考 - レスポンシブウェブデザイン | Google検索デベロッパーガイド

※注意
ChromeやFirefox、MS-Edge、Safariなどその他使用するブラウザソフトの種類やバージョンの違い、利用するディスプレイ（モニター）の解像度によって「Web画面解像度 シミュレータ」のチェック結果は必ずしも一致しません。チェック結果はあくまでも参考としてご利用ください。