Webサイト訪問者の90%は、デザインが不十分なためにバウンスしています。この主な理由は使いやすさに関連しており、モバイルの応答性などのさまざまな要素が含まれます。
スムーズなクロスデバイスのユーザーエクスペリエンスと、さまざまなデバイスを念頭に置いた設計の重要性を十分に強調することはできません。
このため、この記事では、レスポンシブWebサイトを設計する必要がある最も一般的な画面解像度について説明します。
続きを読んで、モバイルファーストとレスポンシブのどちらを選択するかを確認してください。デザイン。
ウェブデザインと開発においてウェブサイトの寸法が重要である理由
StatCounterによると、2020年5月のトラフィックシェアは次の方法で生成されました。
- モバイル(50.34%)
- デスクトップ(46.67%)
- タブレット(2.99%)
Webインタラクションの環境は多様です。また、すべてのデバイスで優れたユーザーエクスペリエンスを確保するために、企業はモバイルレスポンシブデザインに投資する必要があります。
ワイヤーフレーミングは、ウェブデザイナーがデスクトップとモバイルの両方のエクスペリエンスを作成し、両方のビューの要素を配布する段階です。
ほとんどのデザイナーは、1つの標準デスクトップと1つの標準モバイル解像度を使用して、デザインを拡大縮小し、デバイス間でスムーズなUXを確保します。
真に最先端のウェブサイトとユーザーエクスペリエンスを求めるブランドは、ワイヤーフレーミングの段階では、次のようなその他の側面を念頭に置いてください。
- デスクトップ、タブレット、モバイルビュー
- ポートレートビューとランドスケープビュー
- ブラウザ
ここをクリックしてください!
使用するウェブサイトのサイズを決定する方法、つまりウェブサイトを最適化するための画面解像度
焦点を当てるのに最適なウェブのサイズを決定するための最初のステップは、どのモバイルを見つけるかです。ターゲット市場が所有する画面サイズ。
オーディエンスの人口統計を確認することから始めます。
人口統計は、潜在的なクライアントがWebサイトにアクセスするために使用するデバイスを決定します。
注目すべき点は次のとおりです。
- 年齢:ターゲットとする年齢層の中で最も人気のあるデバイスのブランド/モデルを調査します。 YouGovは、これらの傾向とフィルターを追跡する優れた最新のリソースです
- 性別:YouGovのようなリソースを使用すると、性別の中で最も人気のあるデバイスをフィルター処理して、デバイスを相互に照合することもできます。年齢層別および対象の性別。
- 場所:より詳細で詳細な洞察を深め、地域のトレンドを追加することで、焦点を絞ることができます。
- 収入:ターゲットにしている場合高収入の視聴者にとって、あなたのウェブサイトは最新の最先端のデバイスで的確でスムーズに機能する必要があります。
ここで見つけてください!
レスポンシブvs.モバイルファーストWebデザイン:どちらを選択するか
モバイルデバイス(タブレットを除く)は、ワールドワイドウェブトラフィックの半分を占めています。実際、2020年5月、スマートフォンは世界レベルでウェブページビューの50.44%を生み出しました。
これらの数字により、企業はスマートフォンでうまく機能するウェブサイトに投資するようになります。
最大の懸念事項は、レスポンシブWebデザインとモバイルファーストWebデザインのどちらに投資すべきかということです。
デザイナーは、必要な最大解像度でデスクトップに合うようにレスポンシブWebデザインを作成し、それを小さな画面に合わせて調整します。 。
一方、モバイルファーストデザインを開発するプロセスは、ウェブデザイナーが後でデスクトップやタブレットでの使用に適応させるモバイルアプリのデザインと非常によく似ています。
Inこの場合、全体的なデザインはモバイルデバイスに完全に適合し、デスクトップビューを埋めるために(縮小ではなく)拡大します。
モバイルの使用が増えるにつれ、B2Bの購入者はそれほど変わらないことがわかります。 B2Cのものから。
これが、B2Bビジネスの65.8%が自社のWebサイトのモバイルエクスペリエンスを改善することを計画している理由です。
最高のWebサイトの薄暗いものは何ですか2021年に使用するテンション?
これは簡単な答えがある複雑な質問です。
万能のサイズはありません。
最適なものは何ですか。他のウェブサイトではうまくいかない場合があります。
そして、最適なウェブページのサイズに焦点を合わせてさまざまなデバイス用のウェブページを作成する代わりに、まずオーディエンス向けにデザインする必要があります。
今日それはすべてユーザーエクスペリエンスに関するものであり、見込み顧客を満足させるためにレスポンシブデザインを確実に取得する必要があります。
Webサイトがモバイルフレンドリーかどうかを確認する方法は?
Googleは無料のモバイルフレンドリーテストを提供しており、モバイルデバイスでウェブページが使いやすいかどうかを確認できます。
ウェブサイトのURLまたはコードを追加するだけで、ページのスコアを確認できます。
数秒で結果が得られ、デザイナーが約束したデザインを提供したかどうかがわかります。
5世界で最も一般的なデスクトップ画面の解像度
StatCounterによると、2019年3月から2020年3月までに最も使用されたデスクトップ画面の解像度は次のとおりです。
- 1366×768(22.98%)
- 1920×1080(20.7%)
- 1536×864(7.92%)
- 1440×900(7.23%)
- 1280×720(4.46%)
5世界で最も一般的なモバイル画面の解像度
スマートフォンの最も一般的な画面解像度に関しては、2019年3月から2020年3月の間に、世界中のデザイナーが次のものを使用することを好みました。サイズ:
- 360×640(18.7%)
- 375×667(7.34%)
- 414×896(6.76%)
- 360×780( 5.31%)
- 375×812(5.01%)
5世界で最も一般的なタブレット画面の解像度
2019年3月から2020年3月までの最も一般的な世界中のタブレットの画面解像度は次のとおりです。
- 768×1024(51.43%)
- 1280×800(7.28%)
- 800×1280(5.26%)
- 601×962(4.32%)
- 962×601(2.99%)
米国で最も一般的な画面解像度トップ15
2021年に選択する必要がある最も一般的な画面サイズは次のとおりです。
最も一般的なデスクトップ米国の画面解像度
StatCounterのデータに基づくと、2019年3月から2020年3月までの米国でのデスクトップの最も一般的な画面解像度は次のとおりです。
- 1920×1080( 19.57%)
- 1366×768(14.88%)
- 1440×900(9.18%)
- 1536×864(7.22%)
- 1024×768(4.73%) )
ほとんどのコモn米国のモバイル画面解像度
同じ期間に、米国の携帯電話で最も一般的な画面解像度は次のとおりです。
- 414×896(19.44%)
- 375×667(13.67%)
- 375×812(12.3%)
- 414×736(8.91%)
- 360×640(8.21%)
米国で最も一般的なタブレットの画面解像度
米国の設計者は、タブレットのさまざまな画面解像度を好み、次のサイズのWebページサイズを作成しました。
- 768×1024(55.64%)
- 1280×800(5.74%)
- 800×1280(5.31%)
- 601×962(5.14%)
- 962×601(3.2%)
ここで見つけてください!
ウェブサイトのサイズに関するポイント
ウェブサイトのサイズとウェブページのサイズは重要です。これは、1つの貧弱なオンサイトエクスペリエンスがユーザーを完全に撃退する可能性があるためです。
ユーザーがスマートフォンやタブレットなどのモバイルデバイスからもウェブにアクセスするという事実から、さまざまなデバイス向けにウェブサイトを最適化するために選択できるウェブデザインには2つのタイプがあります。
- モバイルレスポンシブ
- モバイルファースト
どのディメンションを選択する場合でも、オーディエンス向けにデザインし、次のことを考慮してください。
- 年齢
- 性別
- 場所
- 収益
これにより、ユーザーエクスペリエンスが向上し、滞留時間が長くなり、検索エンジンのランキングが上がります。