開示：”この記事は、ほぼ20年の私の経験に基づいた研究の個人的な意見です。 このページには第三者の広告やいかなる種類の収益化されたリンクもありません。 第三者のサイトへの外部リンクは私によって司会されています。 免責事項。 “ショーン-アンダーソン、ホーボー

設計するのに最適な画面サイズは誰もありません。 Webサイトは変換応答速度高速で画面解像度の異なるブラウザやプラットフォーム., アクセス可能。 モバイルフレンドリー。 あなたの聴衆のための設計、最初に。 360×640から1920×1080までのデザイン。

  • 1024×768から1920×1080までのデスクトップディスプレイ用のデザイン
  • 360×640から414×896までのモバイルディスプレイ用のデザイン
  • 601×962から1280×800までのタブレットディスプレイ用のデザイン
  • Googleアナリティクスをチェックし、ターゲットオーディエンスの最も一般的な解像度サイズに合わせて最適化
  • 一つのモニタサイズや画面解像度に合わせて設計しないでください。 画面サイズやブラウザウィンドウ状態によって異なります。
  • デザインは応答性があり、高速でなければなりません。, 現在のユーザーのウィンドウサイズに変換する液体または応答レイアウトを使用します。
  • Google Search Consoleのモバイルフレンドリーで使いやすいアラートを監視する

それはまだよく見え、すべてのサイズでうまく動作するはずです。 現在のサンプルデータによる対応サイトのテンプレートを作成します。,

特定の画面サイズのページレイアウトを最適化するための三つの主な基準は次のとおりです。

  • Webページ初期表示：すべての重要な情報が折り目の上に表示されるので、ユーザーはスクロールせずにそれを見ることができますか？ これは、表示されるアイテムの数と各アイテムの詳細が表示される量の間のトレードオフです。
  • Webページの読みやすさ：割り当てられた幅を考えると、さまざまな列のテキストを読み取るのはどれくらい簡単ですか？
  • Webページの美学：要素がこの画面サイズの適切なサイズと場所にあるとき、あなたのページはどのように見えますか？, すべての要素が正しく並んでいるか、つまり、写真のすぐ隣にキャプションがあるかなどです。?

360×640から1920×1080の画面解像度のブラウザウィンドウを確認してください。

あなたのページは、解像度範囲全体ですべての基準で高いスコアを付ける必要があります。

このページも作りもはるかに小さな大きなサイズのもののような極端な低重要です。,

そのようなユーザーは確かにあなたのサイトにアクセスできるはずですが、優れていないデザインを与えることは、時には許容できる妥協です。,

トップテン最も一般的な画面解像度

最初の6ヶ月でほぼ半分万人の訪問者の訪問者分析2020:

応答性の高いウェブサイトテンプレートは良い賭けです

引用:”レスポンシブウェブデザイン:ユーザーのデバイス(例えば、デスクトップ、タブレット、モバイル、非視覚ブラウザ)に関係なく、同じURLで同じHTMLコードを提供しますが、画面サイズに基づいて異なる表示をレンダリングすることができます。 Googleは、レスポンシブなWebデザインを推奨しています。,”Google Developer Guides,2020

今日の世界では、多くの人々がウェブを閲覧するためにハンドヘルドデバイス（タブレットやスマートフォン）を使用しており、レスポンシブウェブサイトデザイン（RWD）は、画面サイズの課題に非常に可能性の高いソリューションとして浮上している（それはまだ愛好家によって議論されている）。

この方法は、固定幅のwebサイトを使用することから離れ、代わりにCSSスタイルシートのメディアクエリを使用して、ハンドヘルドデバイスのさまざまなビューポートと人々が使用する小さな画面に対応するwebサイズを作成します。,

おう装置者を使用しているビューのサイトでは思いっきりの体験が可能です。

目次

Googleはモバイルフレンドリーなサイトを好む

Googleはオンラインコマースの減退と流れを指示し、彼らはちょうどあなたがGoogleで競争力のあるキーワードのために高いランク付けすることを期待したい場合は、複数のデバイス間で満足のいくユーザーエクスペリエンスのために設計する必要があると指示しました。

引用:”Googleはウェブサイトのクロールにモバイルクローラとデスクトップクローラの二つの異なるクローラを使用しています。, 各クローラー型のシミュレーションを訪問されたユーザーページ装置パターンを示すことが分かった。 Google用クローラータイプ（モバイルまたはデスクトップ)のクローラー用するものとします。 すべてのページのサイトを這グーグルに代表される這用のクローラー. 第一クローラーすべての新しいウェブサイトのモバイルクローラー. また、Google recrawls数ページのサイトのその他のクローラータイプ（モバイルまたはデスクトップ） これはセカンダリクロールと呼ばれ、サイトが他のデバイスタイプとどれだけうまく機能するかを確認するために,”Google Webmaster Guidelines,2020

April21,2015以降、グローバルでは、モバイルフレンドリーなサイトがさまざまなデバイスのウェブサイトのランキングパフォーマンスにどのように影響

引用：”私はプロのSEOを実践している20年の経験を持っています。 このSEOチュートリアルで私のコレクションのヒントおよびSEO最良の実践を使っているランクのウェブサイトです。,”Shaun Anderson,Hobo2020

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

引用：”モバイル検索がデスクトップ検索を超えるようになったため、サイトがモバイルフレンドリーであることが重要です。 Googlebotは、webサイトの既定のクローラーとしてモバイルクローラーを使用します。”Google Webmaster Guidelines,2020

現時点では、本質的には応答性の高いウェブサイトデザインとモバイルフレンドリー、特にGoogleでは”インデックスをモバイルファーストにする”ことを意味します。,

デスクトップ画面解像度統計Worldwide May2019–May2020

参考までに、最近記録された世界の現在のトップ画面解像度（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–月2020

最も一般的なモバイル画面解像度サイズワールドワイド

  • 360×640–17.91%
  • 375×667–7.61%
  • 414×896–6.52%
  • 360×780–5.56%
  • 360×760–5.06%
  • 414×736–3.74%

タブレット画面解像度統計ワールドワイドmay2019–may2020

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

  • 768×1024–51.98%
  • 1280×800–7.11%李>800×1280–5.,34%
  • 601×962–4.47%
  • 600×1024–2.85%
  • 1024×1366–1.96%

米国におけるデスクトップ画面解像度統計May2019–May2020

米国におけるトップ画面解像度(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%

米国のモバイル画面解像度の統計May2019–May2020

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

  • 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%

米国のタブレット画面解像度の統計may2019–may2020

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

68×1024–54,68%

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

    • 英国のデスクトップ画面解像度統計May2019–May2020

    英国のトップ画面解像度(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%

    英国のモバイル画面解像度の統計May2019–May2020

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

    • 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%

    英国のタブレット画面解像度の統計may2019–may2020

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

    • 768×1024–58,31%
    • 1280×800–6.92%
    • 800×1280–6.02%
    • 601×962–3.68%
    • 600×1024–3.26%
    • 1024×1366–1.71%

    デスクトップ対モバイル対タブレット市場シェア

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

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

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

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

    できません。

    すべてのブラウザ、プラットフォーム、および画面の解像度で同じように見えるようにウェブサイトを設計することは不可能です。

    訪問者のブラウザ設定に合わせて拡大および縮小する％幅を使用して、デザインのテーブルなしの流動的なレイアウトを選択することもできます。,

    Googleはレスポンシブデザインを支持しています。

    引用：”レスポンシブウェブデザインを利用し、動的なサービスを正しく実装しているサイト（デスクトップコンテンツとマークアップのすべてを含む）は、一般的に何もする必要はありません。”Google NOV2017

    モバイルが増加している–ので、新しいウェブサイトを開発する場合–あなたはあなたのウェブサイトが本当に最初からモバイル

    私は実際に物事をコーディングしているときに物事を簡単に保つことを目指しています。,

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

    そして、その聴衆にはGOOGLEBOTが含まれています。

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

    まあ、それは理想的ではありません。 それは実際には、行ったことがありません。,

    当時–一部の人々は、ウェブサイトの要素をサポートしていないユーザー/ブラウザー向けのコンテンツを作成するために、ウェブサイトのテキストのみのバージョンを使用していました（通常は無駄です）。

    W3Cも、他のすべてが失敗した場合、私は思うそれをお勧めするために使用されます：

    同等の情報または機能を持つテキストのみのページは、コンプライアンスが他の方法で達成することができない場合、webサイトがこの部分の規定に準拠するように提供されなければなりません。, テキストのみのページの内容は、プライマリページが変更されるたびに更新されます。 SECTION508

    アクセシビリティのために訪問者に一つのURLを提供することは常に理想的であり、サイトの”モバイル”バージョンを作成することを考えている場合、モバイルコンテンツやスマートフォンコンテンツを配信するときに違いはありません。 もちろん、GoogleがMOBILE FIRST INDEXに移行している場合、これはさらに重要になるかもしれません。,

    Googleは非常によく、近い将来にあなたのモバイル体験に主にあなたを評価することができる–ので、私たちはすべて本当に我々はGoogleのSerpで非常にすぐに見るかもしれない大きな変化を認識する必要があります。

    Googleが”訪問者”である場合、検索エンジンにとって標準的なURLの課題のために、ただ一つのURLを提供することは通常さらに重要です。

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

    “スマートフォン”コンテンツがある場合（通常は通常のHTMLページであり、小さなディスプレイのレイアウトを微調整しているため、通常のwebコンテンツとして見られます）、rel=canonicalを使用してデスクトップバージョンを指すことができます。 これは、web検索のためのデスクトップ版に焦点を当てるのに役立ちます。 ユーザーが訪れるデスクトップ版スマートフォンできるリダイレクトにモバイル版です。 これはURL構造に関係なく機能するため、スマートフォン-モバイルサイトにはサブドメイン/サブディレクトリを使用する必要はありません。, John Mueller,Google

    Googleの推奨を無視することは、しばしばスマートな動きではありません

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

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

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

    • 構造化データは、ユーザーが愛するインデックス作成および検索機能にとって重要です。 確保のたUrlの構造データを更新しましたのモバイル版のモバイルページ。

    • メタデータは、サイトの両方のバージョンに存在する必要があります。 このヒントのコンテンツページを割り出しといただけます。, たとえば、タイトルとメタ説明がサイト上のすべてのページの両方のバージョンで同等であることを確認します。

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

    • 別のモバイルUrlでhreflangリンクをチェックしてください。, 国際化のためにlink rel=hreflang要素を使用する場合は、モバイルUrlとデスクトップUrlを別々にリンクします。 モバイルUrlのhreflangは、他のモバイルUrlの他の言語/地域バージョンを指し、同様にhreflangリンク要素を使用してデスクトップを他のデスクトップUrlとリンクす

    • サイトをホストするサーバーに、増加する可能性のあるクロール率を処理するのに十分な容量があることを確認します。, これは、レスポンシブwebデザインと動的配信を使用するサイトには影響せず、モバイル版が別のホスト上にあるサイトのみに影響します。m.example.com.

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

    最初の基準が示すように、スクロールは常に重要な考慮事項です。 ユーザーは一般的に、必要がない場合にスクロールするのが好きではありませんでした。だから、あなたが設計するとき、あなたは彼らが唯一のフルまたは二つの画面をスクロールするかどうかをユーザーが見ることができるどのくらい, 長い五つ以上の画面は、ページ上にあまりにも多くのコピーがあるかもしれないことをあなたに指示することができ もちろん、これは一部の記事が詳細な情報であることを意図しており、ユーザーはいくつかのページコンテンツとコンテンツタイプを表示するのに少し長

    スクロールと初期の可視性の両方は明らかに画面サイズに依存します。

    応答性の高いモバイルサイトへの変更は、Googleからのトラフィックが多くなりますか？

    必ずしもそうではありませんが、多分。,

    Googleの最適化を行うには、多くのものとして–モバイルフレンドリーなウェブサイトを持つことは、あなたがすでに得ているトラフィックを維持するため

    あなたはまだモバイル訪問者からのトラフィックの多くを取得していない場合–Googleからのこのアップデートは、最初に（少なくとも分析で）あなたのトラフ,

    品質バーは、googleとそのユーザーによって再び引き上げられており、競争力のある有機Serpで競争したい場合は、中小企業が乗り越えるためのさらに別のハードル

    長期的には–このモバイルコンバージョンは、あなたのユーザーのために良いことをすることができます–しかし、短期的には–それは中小企業のコンバージョン,

    Googleは、このモバイルフレンドリーなアルゴリズムは、Google PenguinとGoogle Pandaの両方のアルゴリズムよりもSerpに大きな影響を与えると述べています。

    あなたのサイト上の重要なモバイルユーザビリティの問題を確認する方法

    Google Search Console

    Google Search Console（別名Google Webmaster Tools）でモバイルエラーを追跡し、サイトが正しく設定されている場合、エラーが時間の経過とともに消えることを確認できるはずです。,”>

    パート1–PageSpeedインサイト、モバイルフレンドリーなテスト、モバイルユーザビリティ

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

    パート3-ターゲット、余白、フォントサイズをタップします

    パート4–リダイレクト

    web開発者は、サイトの速度がgoogleのランキング要因であることを今、私の他の最近の投稿を便利に見つける必要があります：

    引用：”ウェブサイトのモバイル版は、理想的には3秒以内に読み込まれ、より速くより良い必要があります。, 非常に遅い場所は否定的なランキングの要因である場合もある(Googleによって確認される)。 ただ、できるだけ速くあなたのページを作るために、満たすために設定されたしきい値や速度スコアはあ”Shaun Anderson,Hobo2020

    免責事項

    免責事項：”私が提供した情報が正しいことを確認するためにあらゆる努力をしてきましたが、それはア;私はいかなる誤りまたは省略についても責任または責任を負いかねます。 著者は、第三者のサイトまたは第三者のサービスを保証するものではありません。 あなた自身の責任で第三者の場所を訪問しなさい。, 私はGoogleまたはその他の第三者と直接提携していません。 このサイトはクッキーを使用してのみ解析と基本的にウェブサイトの機能. この記事は法的助言を構成しない。 著者の一切の義務を負わないことが生じた形でのアクセスデータはこのサイトです。 リンク内部のページの推進、自分のコンテンツやサービス”ショーン*アンダーソン、ホーボー