レスポンシブデザイン：ベストプラクティスと考慮事項

公開: 2022-03-11

レスポンシブウェブサイトは、デスクトップだけでなく、モバイル、タブレット、場合によってはテレビでも、すべての画面サイズと解像度に適応するウェブサイトです。

Statistaによると、2017年の全世界のトラフィックの52.64％はモバイルトラフィックでした。つまり、モバイルデバイス向けに最適化されていないウェブサイトはトラフィックの約半分を失っています。 2018年末までに、モバイルデバイスの世界のトラフィックシェアは79％に増加すると予想されており、これは例外的な増加です。

モバイルWebサイトを持たない企業は、驚くべき速度で遅れをとっています。これは、訪問者の10人に8人が、デバイスにうまく表示されないWebサイトへのアクセスを停止するためです。 ユーザーが戻るボタンを押して代わりにライバルビジネスを試すのは簡単すぎます。Googleは、応答性の低いWebサイトを検索で下位にランク付けします。

ここでGoogleのモバイルフレンドリーテストを受けることができます。

これは、モバイルがデスクトップよりも重要であることを意味しますか？ いいえ。モバイルユーザーの83％が、必要に応じてデスクトップでのエクスペリエンスを継続できるようにする必要があると述べています。

このモバイル向けに最適化されたバージョンのeBayと、モバイル向けに最適化されていない場合の外観を見てみましょう。 最適化されていないバージョンも検討しますか？

eBay：レスポンシブウェブデザインの例
eBay：モバイル向けではないvs.モバイル向けのレスポンシブウェブサイト。

今日のインターネットで競争できるWebサイトを設計するには、WebデザイナーはレスポンシブWebデザイン（RWD）の専門家である必要があります。 彼らはどこから始めるべきですか？

レスポンシブWebデザインへのモバイルファーストアプローチ

モバイルファーストのウェブデザインとは、モバイルウェブサイトを最初にデザインし、デスクトップバージョンに移行することを意味します。 このアプローチがうまく機能する理由はいくつかあります。

  1. モバイルWebサイトは使いやすさの懸念が大きいため（これは主に画面のスペースが不足しているためです）、モバイルデザインに主な焦点を当てることは実用的で効率的です。
  2. デスクトップバージョンをスケールダウンするよりもモバイルバージョンをスケールアップする方が簡単です（これも、モバイルWebサイトのスペースが不足しているためです）。
  3. モバイルファーストのWebデザインは、視覚的および機能的に必要なものを再評価するのに役立ちます。

モバイルからタブレット、ラップトップ、デスクトップまでのレスポンシブWebデザイン
デザイナーは、レスポンシブWebデザインにモバイルファーストのアプローチを取ることを検討する必要があります。 （出典：うさびら）

モバイルファーストのレスポンシブサイトとしてWebサイトを設計すると、使用する画面のスペースが少なくなるため、設計者は多くの重要な質問をする必要があります。 尋ねる必要のある質問は次のとおりです。

  • この機能は本当に必要ですか？
  • 最初にモバイル向けのミニマリストを設計し、後でデスクトップ向けに拡張できるようにするにはどうすればよいでしょうか。
  • この視覚効果は、モバイルにロードするのにかかる時間の価値がありますか？
  • 主な目的は何ですか？また、ユーザーがそれを達成するのに役立つ視覚的要素は何ですか？

レスポンシブウェブデザインの例をすぐに見ていきます。 今のところ、どのデバイス、画面サイズ、およびWebブラウザが今日関連しているかについて話しましょう。

レスポンシブWebデザインに関連する画面解像度は何ですか？

これは、世界中のモバイル、タブレット、デスクトップユーザーの間で最も一般的な画面解像度です。 ご覧のとおり、解像度にはさまざまなものがあるため、現在、モバイル、タブレット、デスクトップのいずれも市場シェアを独占していません。これは、レスポンシブWebデザインを検討する際に、設計者がそれらすべてを考慮する必要があることを示しています。

  • 360x640（小型モバイル）：22.64％
  • 1366x768（平均的なラップトップ）：11.98％
  • 1920x1080（大型デスクトップ）：7.35％
  • 375x667（平均的なモバイル）：5％
  • 1440x900（平均的なデスクトップ）：3.17％
  • 720x1280（大型モバイル）：2.74％

rwdの2017年の画面解像度の統計的内訳

デバイスの内訳と同様に、ターゲットオーディエンスのユーザー人口統計（または予想されるユーザー人口統計）に一致するように、場所ごとにデータをセグメント化する必要があります。 一部の画面サイズは現在それほど一般的ではありませんが、将来的には可能性があるため、人気が高まっている解像度に対応することも価値があります。 これは、レスポンシブデザイナーが、市場シェアが変化した場合でも機能する将来性のあるUXを作成するのに役立ちます。

たとえば、360x640の解像度（主にAndroidを使用するSamsungデバイスに対応）は、昨年、5.43％上昇しました。 設計者は、これらのような貴重な洞察を使用して、Webサイトの設計を開始する前に主要なレスポンシブブレークポイントを決定できます。

Toptalデザインブログを購読して、私たちの電子ブックを受け取ります

今日人気のあるWebブラウザは何ですか？

レスポンシブWebデザインとは、あらゆるデバイスでシームレスなエクスペリエンスを提供することです。さまざまなWebブラウザーがさまざまな方法でWebページをレンダリングするため、さまざまなモバイルおよびデスクトップWebブラウザーとの互換性を確認するためにWebサイトをテストする必要があります。

Webサイトを正しいレスポンシブブレークポイントにスケーリングするのは主にWeb開発者の責任ですが、最適なユーザーエクスペリエンスを作成するために、レスポンシブWebサイトがさまざまな画面サイズにどのように適応するかを正確に決定するのはWebデザイナーです。

これは、モバイルとデスクトップのWebブラウザ市場シェアの世界的な内訳です​​。

  • Chrome：55.04％
  • サファリ：14.86％
  • UCブラウザ：8.69％
  • Firefox：5.72％
  • オペラ：4.03％
  • Internet Explorer：3.35％

レスポンシブウェブデザインのための2017年のウェブブラウザ使用の統計的内訳

レスポンシブデザインは、「すべてを適合させる」だけでなく、デバイスのハードウェアとWebブラウザーの機能、およびデバイスの解像度に適応することでもあります。 この一例として、Google ChromeはCSSプロパティoverscroll-behavior:ユーザーがビューポートの端に向かって強くスクロールしすぎるとどうなるかを定義します）をサポートしていますが、他のWebブラウザーではサポートされていません。

レスポンシブデザインのベストプラクティス

摩擦をなくす

先に述べたように、レスポンシブWebデザインへのモバイルファーストのアプローチは、ユーザーが主な目的を達成するために本当に必要なものをデザイナーが評価するのに役立ちます。

タブレットバージョン（および後にデスクトップバージョン）を構築するにつれて、二次的な目的と、それらのユーザーの目的を達成可能にするマイクロインタラクション、ユーザーフロー、およびCTA（行動の呼びかけ）について考え始めることができます。 さらに重要なのは、最初にユーザーの主な目的に焦点を合わせ、主な目的にも副次的な目的にも役立たない不要な摩擦を排除することです。

主な目的は製品の購入である可能性がありますが、副次的な目的はニュースレターへの登録である可能性があります（これは後で購入につながる可能性があります）。

摩擦をなくす素晴らしい例を次に示します。モバイルユーザーインターフェースは通常、ナビゲートするのが難しいため、モバイルeコマースストアでは1ページのチェックアウトに切り替え、デスクトップeコマースストアではマルチステップチェックアウトのみを有効にするのが最適です。

親指のデザイン

レスポンシブウェブデザインは、ユーザーがクリックでデスクトップウェブサイトを操作するのに対し、モバイルバージョンはタップとスワイプで操作するという意味で注意が必要です。 物理的な違いもあります。 デスクトップユーザーは通常、コンピューターを表面に置いていますが、モバイルユーザーはデバイスを手に持っています。 これらの違いにより、モバイルUIデザイナーがタップターゲットやユーザーが操作するその他の重要なUI要素を設計する方法が大幅に変わります。

モバイル画面でアクセス可能な親指の領域を描いたイラスト
親指は、角よりもデバイス画面の中央に届きます。 （出典：A List Apart）

いくつかの例を見てみましょう。

  • 人々は通常、メインのデスクトップナビゲーションが一番上にあることを期待しています。 ただし、モバイルでは、下部に配置する必要があります。 親指が上に快適に届きません。
  • 他のインタラクティブな要素にも簡単にアクセスできる必要があります。 これは、親指がデバイス画面の側面や隅に届きにくいため、画面の中央に配置することを意味します。
  • 簡単にタップできるように、重要なリンクとCTAの高さは少なくとも44pxにする必要があります（タップターゲットが小さいと使い勝手が悪くなります）。

推奨読書：モバイルユーザビリティの基本ガイド。

モバイルデバイスのネイティブハードウェアを活用する

モバイルハードウェア（デバイスカメラやGPSサービスなど）は、ネイティブアプリ専用ではありません。前述のように、レスポンシブWebデザインは、「すべてを適合させる」だけではありません。 また、デバイスの機能に適応することも重要です。 モバイルWebデザインの場合、モバイルデバイスは使いやすいカメラを備えているため、Webサイトが利用可能なネイティブハードウェアを利用している限り、データ入力などの一部のマイクロインタラクションは実際には小さな画面で簡単になります。

いくつかの例を見てみましょう。

  • クレジット/トップアップカードスキャン（フォームはモバイルでは扱いにくいことが多いため）
  • メディアはすでにデバイス上にあるため、ソーシャルメディアでの写真共有
  • 二要素認証（すでにモバイルデバイスを使用しているため）
  • 株式/分析をすばやくチェックする（モバイルアプリは情報を簡素化するため）
  • 音声でウェブ検索を実行する（ハンズフリーは入力するよりも簡単だから）

デフォルトでレイアウトを流動的/適応的にする

すべてのユーザーがデスクトップブラウザを最大化できるわけではありません。 つまり、設計者は、ユーザーが現在使用しているデバイスのレスポンシブブレークポイントを考慮する必要がありますが、それらのブレークポイントの間に何が起こるかについても考慮する必要があります。

流動的なレイアウトと固定レイアウトのレスポンシブデザイン
レスポンシブウェブデザインのための流動的なウェブレイアウトと固定されたウェブレイアウト。

レスポンシブブレークポイントを使用して、レイアウトとコンテンツを新しいデバイスに「リフロー」する必要がありますが、その間のすべてのサイズを考慮に入れるために（万が一の場合に備えて）、レイアウトは流動的である必要があります（つまり、レイアウトは自然に適応/ストレッチされます。ブラウザのサイズが変更されます）。

流動的/適応型レイアウトを設計するときは、次のヒントに留意してください。

  • パーセンテージの単位により、要素を流動的にすることができます。
  • 最小幅と最大幅を設定すると、「ただし、これより小さく/大きくしない」シナリオを有効にできます。
  • SVG画像形式は、品質を損なうことなく拡大縮小でき、解像度に依存しません（JPGやPNGはそうではありません）。

景観の方向性を忘れないでください

特定のレスポンシブブレークポイントについては前に説明しましたが、これらのモバイルビューポートを横向きで表示することもできることを考慮する必要があります。 流動的なレイアウトを実装すると、技術的にコンテンツが適応可能になりますが、ポートレートビューポートのかなりの部分が失われると、使いやすさとアクセシビリティが妨げられる可能性があります。

ナビゲーションは通常安全ですが（ユーザーは通常、 2つの親指で横向きをナビゲートするため、実際にはより良い場合があります）、スクロールは非常に難しくなります。これは、ユーザーが横向きでさらにスクロールする必要があるため、最適とは言えません。

設計者は、ランドスケープブレークポイントの設計も検討することをお勧めします。 たとえば、モバイルで垂直に積み重ねられるタイル要素は、左右のナビゲーションボタンを備えたスライダーとして表示できます。つまり、ユーザーはスクロールする必要がありません。

タイポグラフィはレスポンシブすぎる可能性があることを忘れないでください

UXデザイナーは通常、ピクセル単位を使用してWebサイトを設計しますが、実際のWebでは、デバイスごとに解像度が異なるため、1つのポイントが必ずしもピクセルと等しくなるとは限りません。 たとえば、iPhoneXのPPI（Pixels Per Inch）は458であるため、ピクセルサイズが小さくなっている場合、同じ物理空間でより鮮明なグラフィックスを実現できます（Appleはこれを「Retina」テクノロジーと呼び、Androidはこれを呼びます）。 「hDPI」）。

これは、たとえば、16pxのフォントサイズは、解像度に応じて一部のデバイスで大きくなったり小さくなったりすることを意味します。 Web開発者は通常、em単位を使用してフォントサイズを定義します。これは、1emが1ポイントに等しいレスポンシブ単位の一種です。

Zeplin、Sympli、Marvel、InVisionなどの設計ハンドオフツールは、共同責任である問題について設計者が開発者と協力するのに役立ちます。 設計者が設計を実行し、開発者がコードを実行する一方で、全体として、製品設計ワークフローはチームの努力であり、しっかりとしたコミュニケーションが必要です。

レスポンシブデザインのパフォーマンス最適化のヒントとベストプラクティス

レスポンシブウェブデザインは、見た目だけでなく、動作や感触も重要です。 目的のデバイスでより速くロードされるようにWebサイトを適応させることも同様に重要です。

遅延読み込みの重要でない画像と動画

画像と動画は、ウェブサイトの総ダウンロードサイズの大部分を占めるものですが、一度にすべてを読み込む必要はありません。 メディアのレンダリングが遅れる可能性があるシナリオは2つあります。ユーザーがスクロールしなければ見えない位置にあるコンテンツを読み込むことができます。レンダリングをブロックするメディアは、レイアウトとコンテンツがダウンロードされた後にのみダウンロードする必要があります。 この方法は遅延読み込みと呼ばれ、ページのパフォーマンスを向上させるために、重要ではない重い要素の読み込みを遅らせます。

条件付き読み込み

一部のWebサイト要素は、モバイルユーザーを対象としていないか、少なくとも追加の認知的負荷の価値がありません。 モバイルウェブサイトはシンプルにしたいので、特定のシナリオでは要素を非表示にするのが理にかなっています。 そうは言っても、これらの要素が非表示になっている場合でも、これらの要素をロードすることで、ブラウザーのリソースと帯域幅を無駄にしないようにする必要があります。 したがって、これらの要素を特定の条件にのみ含めることをお勧めします。

繰り返しになりますが、開発者はコードでこれを実現できます。 ただし、設計者は、特定の要素が存在する必要がある場合と存在しない場合の条件を伝達することにより、ページのパフォーマンスを向上させることができます。

レスポンシブ画像

前述のように、一部のデバイスは1インチあたりのピクセル数が多いため、正しい解像度でエクスポートしないと画像がぼやける可能性があります。 デバイスの解像度に応じて、2倍（@ 2x）、3倍（@ 3x）、さらには4倍（@ 4x）のサイズの画像が必要になる場合があります。 Webブラウザーは、デバイスに応じて正しい画像解像度を選択する<picture>要素をサポートするようになりました。

レスポンシブウェブサイトを作成するデザイナーは、今日のデバイスで使用されているすべての解像度でエクスポートすることを確認することで、画像を正しいデバイスに合わせることができます（不明な場合は、開発者に問い合わせてください。レスポンシブウェブデザインに関してはコミュニケーションが重要です）。

レスポンシブデザイン用のスケッチエクスポートツール
レスポンシブウェブデザインのためにSketch@2xから画像アセットをエクスポートします。

結論

ワイヤーフレーミングは、デザインプロセスの早い段階でしわを取り除くのに役立ちます。これは、レスポンシブWebデザインにモバイルファーストのアプローチを採用する場合にうまく機能します。 おそらく、特別な注意が必要なレスポンシブブレークポイントがあるか、モバイルの応答性の点で効果的ではない概念があるかもしれません。 道路の凹凸を後で見つけるよりも早く（つまり、視覚的な美学を追加する前に）見つける方がよいでしょう。

Adobe XD、Marvel、InVisionなどの最新の設計ツールを使用すると、チームは実際のデバイスでプロトタイプをテストし、コンテキストでフィードバックについて話し合い、すべてのシナリオでレイアウトが機能するまでチームとして共同作業を行うことができます。

レスポンシブデザインが内部テストとフィードバックによって推進される無駄のないUXワークフローを採​​用することで、ユーザーエクスペリエンスが、実際のユーザーに初めて提示される前に、すべてのプラットフォームと画面解像度でシームレスに機能することが保証されます。

•••

Toptal Designブログでさらに読む：

  • eコマースUX–ベストプラクティスの概要（インフォグラフィック付き）
  • 製品設計における人間中心の設計の重要性
  • 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例
  • モバイルインターフェースのヒューリスティック原則
  • 予測的デザイン：魔法のユーザーエクスペリエンスを作成する方法