レスポンシブWebデザインに最適な画面サイズはどれくらいですか？

QUOTE： “Googleは、ウェブサイトのクロールにモバイルクローラーとデスクトップクローラーの2つの異なるクローラーを使用しています。各クローラータイプは、そのタイプのデバイスを使用してページにアクセスするユーザーをシミュレートします。 Googleは、1つのクローラータイプ（モバイルまたはデスクトップ）をサイトのプライマリクローラーとして使用します。 Googleによってクロールされるサイト上のすべてのページは、プライマリクローラーを使用してクロールされます。すべての新しいWebサイトの主要なクローラーはモバイルクローラーです。さらに、Googleはサイトのいくつかのページを他のクローラータイプ（モバイルまたはデスクトップ）で再クロールします。これはセカンダリクロールと呼ばれ、サイトが他の種類のデバイスとどの程度連携しているかを確認するために行われます。」 Googleウェブマスターガイドライン、2020

2015年4月21日以降、世界中で、モバイルフレンドリーなサイトがさまざまなデバイスのウェブサイトのランキングパフォーマンスにどのように影響したか。

中小企業向けのウェブサイトを作成する場合（Googleのオーガニックリスティングで適切に機能するウェブサイトが必要であることがわかります）、検索エンジン最適化に関心があることがわかります。

QUOTE：「私はプロのSEOを実践して20年の経験があります。このSEOチュートリアルは、Googleでウェブサイトをランク付けするために使用するヒントとSEOのベストプラクティスのコレクションです。」 Shaun Anderson、Hobo 2020

SEOは、少なくともモバイルユーザー向けに、Googleが定量化しているように、一部は優れたウェブサイトUXに基づいています。

QUOTE：「モバイル検索がデスクトップ検索を上回っているため、サイトがモバイルフレンドリーであることが重要です。 Googlebotは、ウェブサイトのデフォルトのクローラーとしてモバイルクローラーを使用するようになりました。」 Googleウェブマスターガイドライン、2020

現時点では、これは本質的にレスポンシブウェブサイトのデザインとモバイルフレンドリーを意味します。特にGoogleでは「インデックスをモバイルファーストにする」 “。

2019年5月〜2020年5月の全世界のデスクトップ画面解像度の統計

参考までに、最近（2020年）に記録された現在の全世界のデスクトップ画面解像度のリストを次に示します。

世界中で最も一般的なデスクトップ画面の解像度サイズ

• 1366×768– 23.49％
• 1920×1080– 19.91％
• 1536×864– 8.65％
• 1440×900– 7.38％
• 1280×720– 4.89％
• 1600×900– 4.01％
• 1280×800– 3.33％

世界中のモバイル画面解像度統計2019年5月– 2020年5月

世界中で最も一般的なモバイル画面の解像度サイズ

• 360×640– 17.91％
• 375×667– 7.61％
• 414×896– 6.52％
• 360×780– 5.56％
• 360×760– 5.06％
• 414×7 36 – 3.74％

世界のタブレット画面解像度の統計2019年5月– 2020年5月

世界中で最も一般的なタブレット画面の解像度サイズ

• 768×1024– 51.98％
• 1280×800– 7.11％
• 800×1280– 5.34％
• 601×962– 4.47％
• 600×1024– 2.85％
• 1024×1366– 1.96％

米国のデスクトップ画面解像度の統計2019年5月– 2020年5月

米国のトップ画面解像度（2020）

アメリカ合衆国で最も一般的なデスクトップ画面の解像度サイズ

• 1920×1080– 19.15％
• 1366×768– 14.91％
• 1440×900– 9.59％
• 1536×864– 7.7％
• 1280×720– 4.89％
• 1600×900– 4.28％
• 1280×800– 3.92％

米国のモバイル画面解像度の統計2019年5月– 2020年5月

アメリカ合衆国で最も一般的なモバイル画面の解像度サイズ

• 414×816– 17.89％
• 375×667– 14.2％
• 375×812– 11.97％
• 360×640– 8.55％
• 414×736– 8.54％
• 412×846– 4.7％
• 360×740– 4.39％

米国のタブレット画面解像度の統計2019年5月– 2020年5月

アメリカ合衆国で最も一般的なタブレット画面の解像度サイズ

• 768×1024– 54.68％
• 800×1280– 5.75％
• 1280×800– 5.73％
• 601×962– 5.41％
• 1024× 1366 – 3.06％
• 600×1024-2.57％

英国のデスクトップ画面解像度の統計2019年5月– 2020年5月

トップ画面解像度英国（2020）

英国で最も一般的なデスクトップ画面の解像度サイズ

• 1920×1080– 20.62％
• 1366×768– 17.32％
• 1440×900– 11.65％
• 1536×864– 8.38％
• 1280×720– 5.2％
• 1280×800– 4.73％

英国のモバイル画面解像度の統計2019年5月– 2020年5月

英国で最も一般的なモバイル画面の解像度サイズ

• 375×667– 16.66％
• 414×816– 14.11％
• 360×640– 9.95％
• 375×812– 8.55％
• 360×740– 5.67％
• 360×780– 5.39％
• 414×736– 4.75％

英国のタブレット画面解像度の統計2019年5月– 2020年5月

英国で最も一般的なタブレット画面の解像度サイズ

• 768×1024– 58.31％
• 1280×800 – 6.92％
• 800×1280– 6.02％
• 601×962– 3.68％
• 600×1024– 3.26％
• 1024 ×1366– 1.71％

デスクトップvsモバイルvsタブレットの世界的な市場シェア

デスクトップvsモバイルvsタブレットの世界的な市場シェア

1. モバイル– 50.48％
2. デスクトップ– 46.51％
3. タブレット–3。0％

*注–上記の統計は1つの（信頼できるとはいえ）ソースからのものであるため、私たちが知らない方法で歪められている可能性があります。 http://statcounter.com/によって提供されるグラフ。

すべてのブラウザで同じように見えるサイトを設計するにはどうすればよいですか&解像度？

できません。

すべてのブラウザ、プラットフォーム、画面解像度で同じように見えるWebサイトを設計することは不可能なので、試してはいけません。

デザインにテーブルのない流動的なレイアウトを選択し、訪問者のブラウザ設定に合わせて拡大および縮小する幅を％にするか、ほぼ同じことを実現するレスポンシブデザインソリューションを検討することを検討できます。

Googleはレスポンシブデザインを支持しています。これは、レスポンシブデザインを採用している人にとっては朗報です：

QUOTE： “レスポンシブウェブデザインを利用し、正しく実装するサイト動的配信（すべてのデスクトップコンテンツとマークアップを含む）は、通常、何もする必要はありません。」 Google NOV 2017

モバイルが急増しているため、新しいウェブサイトを開発する場合は、ウェブサイトが実際にどれだけモバイルフレンドリーであるかを最初から考えなければなりません。

実際にコーディングするときは、物事をシンプルに保つことを目指しています。

誰もが喜ぶことはできません。できません。どのウェブサイトのサイズが最適かという質問は、依然としてホットなトピックです。私よりも使いやすさとUXの専門知識を持つデザイナーによる議論。

経験から私が知っていることは、オーディエンスと彼らが使用するデバイスを特定し、ウェブサイトを構築することが非常に重要であるということです。

そのオーディエンスにはGOOGLEBOTが含まれます。

モバイルサイトは別のURLにリダイレクトされますか&バージョンのあなたのサイトは？

それは理想的ではありません。実際、これまでにないことです。

昔は、テキストのみのバージョンのWebサイトを使用してコンテンツを作成していました。ウェブの要素をサポートしていなかったユーザー/ブラウザ向けサイト–（通常は無駄な）コンテンツをよりアクセスしやすくしようとします。

W3Cは、他のすべてが失敗した場合にそれを推奨することさえ使用していました：

他の方法で準拠できない場合は、同等の情報または機能を備えたテキストのみのページを提供して、Webサイトをこのパートの規定に準拠させる必要があります。テキストのみのページのコンテンツは、プライマリページが変更されるたびに更新されます。セクション508

アクセシビリティの目的で訪問者に1つのURLを配信することは常に理想的であり、モバイルまたはスマートフォンのコンテンツを配信する場合でも違いはありません。サイトの「モバイル」バージョンの作成を検討しています。もちろん、Googleがモバイルファーストインデックスに移行する場合、これはさらに重要になる可能性があります。

Googleはモバイルでの主な評価を高く評価する可能性があります。近い将来の経験–したがって、GoogleのSERPですぐに見られる可能性のある大きな変化を私たち全員が本当に認識する必要があります。

Googleが「訪問者」である場合、通常は、検索エンジンの正規URLの課題のために1つのURL–これは、しばらく前に正規リンク要素が実装される前のケースでした。

したがって、理想的な状況は、常に1つのURLを配信することです。

「スマートフォン」コンテンツ（通常は標準であるため、通常のWebコンテンツと見なされます）がある場合l HTMLページ、小さいディスプレイ用にレイアウトを微調整）rel = canonicalを使用してデスクトップバージョンを指すことができます。これは、Web検索用のデスクトップバージョンに集中するのに役立ちます。ユーザーがスマートフォンでそのデスクトップバージョンにアクセスすると、モバイルバージョンにリダイレクトできます。これはURL構造に関係なく機能するため、スマートフォンモバイルサイトにサブドメイン/サブディレクトリを使用する必要はありません。ただし、同じURLを使用し、リダイレクトせずにコンテンツの適切なバージョンを表示することをお勧めします。JohnMueller、Google

Googleの推奨事項を無視することは賢明な方法ではないことがよくあります

QUOTE：要約すると、現在、クロール、インデックス作成、ランキングシステムは通常デスクトップを調べていますページのコンテンツのバージョン。そのバージョンがモバイルバージョンと大幅に異なる場合、モバイル検索者に問題が発生する可能性があります。モバイルファーストのインデックス作成とは、コンテンツのモバイルバージョンをインデックス作成とランキングに使用して、主にモバイルユーザーが探しているものを見つけやすくすることを意味します。ウェブマスターはスマートフォンGooglebotによるクロールが大幅に増加し、結果のスニペットとGoogleキャッシュページのコンテンツはモバイル版のページからのものになります。Google 2017年11月

Googleは、サイトがモバイルファーストインデックス用に準備されていることを確認するための次のヒントを提供していますが、基本的に、レスポンシブウェブデザインを使用している場合サイトのテンプレートでは、この変更で最小限の問題が発生するはずです。

• サイトのモバイルバージョンにも重要なものがあることを確認してください、高品質のコンテンツ。これには、テキスト、画像（alt属性付き）、動画が含まれます–通常のクロール可能およびインデックス可能な形式です。

• 構造化データは、ユーザーが好むインデックス作成機能と検索機能にとって重要です。モバイル版とデスクトップ版の両方のサイトに存在する必要があります。構造化データ内のURLがモバイルページのモバイルバージョンに更新されていることを確認します。

• メタデータはサイトの両方のバージョンに存在する必要があります。インデックスを作成して提供するためのページのコンテンツに関するヒントを提供します。たとえば、タイトルとメタ説明がサイトのすべてのページの両方のバージョンで同等であることを確認してください。

• 個別のモバイルURL（m.-dotサイト）との相互リンクに変更は必要ありません。個別のモバイルURLを使用するサイトの場合、これらのバージョン間で既存のリンクrel = canonical要素とlinkrel = alternate要素を保持します。

• 個別のモバイルURLのhreflangリンクを確認してください。国際化のためにlinkrel = hreflang要素を使用する場合は、モバイルURLとデスクトップURLを別々にリンクします。モバイルURLのhreflangは、他のモバイルURLの他の言語/地域バージョンを指し、同様に、そこでhreflangリンク要素を使用してデスクトップを他のデスクトップURLにリンクする必要があります。

• サイトをホストしているサーバーに、潜在的に増加するクロール速度を処理するのに十分な容量があることを確認します。これは、レスポンシブWebデザインと動的配信を使用するサイトには影響せず、モバイルバージョンがm.example.comなどの別のホスト上にあるサイトにのみ影響します。

ユーザーはページを下にスクロールすることを期待します

最初の基準が示すように、スクロールは常に重要な考慮事項です。ユーザーは通常、スクロールする必要がない場合はスクロールすることを好みませんでしたが、年月を経て変更されました。

したがって、設計するときは、スクロールするだけでユーザーが表示できる量を考慮する必要があります。画面が1つか2ついっぱいになります。 5画面を超える長さは、ページにコピーが多すぎる可能性があることを示している可能性があります。もちろん、これは、一部の記事は詳細な情報であることが意図されており、ユーザーは一部のページコンテンツとコンテンツタイプを表示するのにもう少し待つことを期待するという見方とバランスが取れています。

スクロールと初期の両方視認性は明らかに画面サイズに依存します。画面が大きいほど、折り目の上に表示されるコンテンツが多くなり、スクロールが少なくて済みます。

応答性の高いモバイルサイトに変更すると、Googleからのトラフィックが増えますか？

必ずしもそうとは限りませんが、多分。

Googleの最適化に関係することはたくさんあります。モバイル対応のウェブサイトを持つことは、多かれ少なかれ、すでに獲得しているトラフィックを維持するためであり、必ずしも無料で提供されるとは限りません。 Googleからのトラフィック。

モバイルビジターからのトラフィックがまだ多くない場合– Googleからのこの更新が、トラフィックレベルに顕著な影響を与えるかどうかはわかりません（少なくとも分析では） ）最初は、しかし時間の経過とともに、ナビゲートすることはおそらく非常に重要な課題になるでしょう。

ity barは、Googleとそのユーザーによって再び引き上げられています。これまで以上に競争力のあるオーガニックSERPで競争したいのであれば、これは中小企業が乗り越えるためのもう1つのハードルです。

長期的には–このモバイルコンバージョンはユーザーにとってのみ良いことですが、短期的には、モバイル経由のコンバージョン率はデスクトップよりも低いことが多いため、中小企業のコンバージョン率にどのような影響があるかを確認するのは興味深いことです。

Googleは、このモバイルフレンドリーなアルゴリズムはGooglePenguinとGooglePandaの両方のアルゴリズムよりもSERPに大きな影響を与えると述べています。そして、時間が経つにつれて詳細がわかります。

方法サイトのモバイルでの重要な使いやすさの問題を確認するには

Google Search Console

Google Search Console（別名Google Webmaster Tools）でモバイルエラーを追跡し、エラーが消えることを確認できるはずです。サイトが正しく設定されているかどうか。

サイトのモバイル対応をテストするツール

• SearchConsoleのURL検査ツール
• Pagespeed Insights
• Think With Google
• モバイルフレンドリーテスト

ウェブサイトをモバイルフレンドリーにする方法

パート1– PageSpeed Insights、モバイルフレンドリーテスト、モバイル使いやすさ

パート2–ビューポート、ズーム、プラグイン

パート3–タップターゲット、マージン、フォントサイズ

パート4–リダイレクト

Web開発者は他の最近の情報を見つける必要がありますサイトの速度がGoogleのランキング要素であるため、便利な投稿：

QUOTE：「モバイル版のウェブサイトは理想的には3秒以内に読み込まれ、非常に遅いサイトは、負のランキング要素になる可能性があります（Googleによって確認されています）。満たすためのしきい値や速度スコアは設定されていません。あなたのページをできるだけ速くするためにst。」ショーンアンダーソン、ホーボー2020

免責事項

免責事項：「私が提供した情報が正しいことを確認するためにあらゆる努力をしました。それはアドバイスではありません。私は、誤りや脱落について一切の責任を負いません。著者は、サードパーティのサイトまたはサードパーティのサービスを保証しません。ご自身の責任でサードパーティのサイトにアクセスしてください。私はGoogleやその他のサードパーティと直接提携していません。このウェブサイトは、分析と基本的なウェブサイト機能のためにのみクッキーを使用しています。この記事は法律上の助言を構成するものではありません。著者は、このサイトに表示されているデータにアクセスすることから生じる可能性のあるいかなる責任も負いません。内部ページへのリンクは、私自身のコンテンツとサービスを宣伝しています。」ショーンアンダーソン、ホーボー