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

政治家によると 、2017年の全グローバルトラフィックの52.64％はモバイルトラフィックでした。つまり、ウェブサイトは ない モバイルデバイス向けに最適化されている トラフィックの約半分を失う 。 2018年末までに、モバイルデバイスの世界的なトラフィックシェアが見込まれます 79％に成長します 、これは例外的な増加です。

モバイルサイトを持たない企業は、驚くべき速度で遅れをとっています。 10人に8人の訪問者がエンゲージメントを停止します デバイスにうまく表示されないウェブサイトで。ユーザーが戻るボタンを押して代わりにライバルビジネスを試すのは簡単すぎます。 グーグルは彼らの検索でより低く応答しないウェブサイトさえランク付けします 。

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

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

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

今日のインターネットで競争できるウェブサイトを設計するために、 ウェブデザイナー しなければならない の専門家になる レスポンシブウェブデザイン （RWD）。彼らはどこから始めるべきですか？

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

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

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

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

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

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

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

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

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

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

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

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

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

Javaのブートストラップとは何ですか

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

これが世界的な内訳です ウェブブラウザの市場シェア モバイルおよびデスクトップ用。

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

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

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

摩擦をなくす

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

タブレットバージョン（および後にデスクトップバージョン）を構築するにつれて、二次的な目的と マイクロインタラクション 、 ユーザーフロー 、およびこれらのユーザーの目的を達成可能にするCTA（行動を促すフレーズ）。さらに重要なのは、 最初にユーザーの主な目的に焦点を合わせる そして 不要な摩擦を排除します それは一次目的も二次目的も助けません。

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

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

親指のデザイン

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

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

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

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

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

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

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

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

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

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

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

androidは開発者にクラッシュレポートを送信します

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

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

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

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

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

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

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

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

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

次のようなハンドオフツールを設計する Zeplin 、 シンプリ 、 マーベル 、および InVision 共同責任である問題について、設計者が開発者と協力するのを助けることができます。設計者が設計を実行し、開発者がコードを実行する一方で、全体として、製品設計ワークフローはチームの努力であり、しっかりとしたコミュニケーションが必要です。

c / c ++を学ぶ

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

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

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

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

条件付き読み込み

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

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

レスポンシブ画像

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

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

結論

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

のようなモダンなデザインツール Adobe XD 、 マーベル 、および InVision チームが実際のデバイスでプロトタイプをテストし、コンテキストでフィードバックについて話し合い、レイアウトがすべてのシナリオで機能するまで、通常はチームとして共同作業できるようにします。

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

•••

ApeeScapeデザインブログの詳細：

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

基本を理解する

レスポンシブデザインのブレークポイントとは何ですか？

ブレークポイントは、デザインが新しい画面サイズに適応する重要な瞬間です。たとえば、ブレークポイントは、ほとんどのモバイルデバイスビューポートの水平サイズである320pxで定義できます。

レスポンシブウェブデザインとは何ですか？

レスポンシブウェブデザインは、フォームと機能の両方の観点から、すべてのデバイス、プラットフォーム、および画面サイズに適応するウェブサイトをデザインするプロセスを伴います。

モバイルフレンドリーとはどういう意味ですか？

モバイルフレンドリーなウェブサイトを設計するということは、ウェブサイトをモバイルデバイスに適応させることを意味します。 Googleは、タップターゲットが少なくとも44x44pxであるという最小要件を満たしているかどうか、フォントが読むのに十分な大きさであるかどうか、コンテンツがビューポートによって切り取られているかどうかなどによって、モバイルフレンドリーを定義しています。