レスポンシブWebデザインの意味と目的

レスポンシブWebデザイン：すべての画面に適応

Responsive Web Design（RWD）は、Webサイトがあらゆるサイズの画面に適応できるようにする設計方法であり、Webページを閲覧するためにますます多くのデバイスをサポートするために不可欠です。

RWDは、「繰り返し繰り返さない」（ドライ）という開発原則に従い、各デバイスに適合するためにコードのセットを使用することを目指しています。これは、HTML、CSS、およびJavaScriptコードのセットを作成し、各プラットフォームに適切に要素を表示することを意味します。

RWDメモリには、プログレッシブエンハンスメント、エレガントなダウングレード、モバイルの優先度など、さまざまなデザインコンセプトがあります。これらのアプローチは、すべてのユーザーにコンテンツを提供したり、Webサイトのフルバージョンから始めたり、それぞれ最小または最も強力なサポートされていないデバイスから始めたりするなど、さまざまな側面に焦点を当てています。

Webサイトが複数のデバイスと画面サイズにわたって優れたユーザーエクスペリエンスを提供し、Googleがコンテンツを理解し、インデックスを作成しやすくするため、レスポンシブデザインはSEOにとって重要です。これにより、ウェブサイトのアクセス時間が長くなり、コンバージョン率が高くなります。

単一の画面からマルチスクリーン時代へ

過去には、ウェブサイトのデザインは簡単でした。ブラウザ間の互換性の問題に加えて、15インチモニターのウェブサイトまたはアプリケーションの設計が行われました。

それから、Webブラウザを備えた携帯電話が表示され、リラックスした生活を中断しました。最悪なことに、人々は自分の携帯電話でウェブを閲覧するのが大好きです！ 2016年には、モバイルデバイスのWebビューが初めてデスクトップビューを超えました。

開発者とデザイナーが、モバイル組織、タブレット、時計、テレビ、メガネ、より大きなデスクトップ画面、高解像度の画面、さらには壁に組み込まれたWebブラウザのウェブサイトを構築することに慣れています。 （わかりました、私が最後に作り上げました。）これをサポートすることは、新しいデバイスの無限のストリームのように思われます。

では、この成長するデバイスの配列をどのようにサポートしますか？答えは、

Responsive Web Designです。これは、Webサイトがあらゆるサイズの画面に適応できるようにするテクノロジーを利用しています。

時間制限担当者によって維持されている多くの古いサイトまたはプロジェクトは反応しません。たとえば、VassalゲームエンジンのWebサイト：

レスポンシブWebデザイン（RWD）は、一般的な開発原則「繰り返し自分自身を繰り返さない」に従います（通常は「ドライ」と略されます）。各デバイスの複数のコードベースをサポートするのではなく、RWDは各デバイスに適合するためにコードのセットを使用するように設計されています。 RWDテクノロジーを使用して、各プラットフォームにHTML、CSS、およびJavaScriptコードのセットを適切に記述できます。これらのスタイルや要素の多くは、コード効率を最大化するために再利用または構築することもできます。

いいですね？まず、数年前に振り返りましょう。

レスポンシブデザインの歴史

「レスポンシブ」デザインは新しいものではなく、さまざまな人にとって異なる意味を持っているため、正確な履歴を追跡することは困難です。

理論的には、開発者は複数のブラウザーが存在するため、レスポンシブデザインを作成しています。ブラウザ間には常に微妙な（そして微妙ではない）レンダリングの違いがあり、開発者は何十年もこれらの問題に対処する方法を学んでいます。 Web開発を初めて使用する場合は、Internet Explorerの初期バージョンの支配に感謝します。彼らの問題に対処する日は暗いです。

2004年以来、Responsive Designはより具体的な意味を採用しています。つまり、ユーザーのデバイスの選択に合わせて設計を調整します。通常、画面サイズに基づいていますが、他の機能も含まれます。レスポンシブデザインの概念は2008年に統合されましたが、この用語は「柔軟な」、「液体」、「流体」、「弾性」デザインとも呼ばれます。

レスポンシブデザインが真に使いやすいコンセプトになる可能性を持つことを可能にするメディアクエリを含むのは、CSS3仕様です。メディアクエリは第2章で詳しく説明しますが、要するに、事前定義された画面のサイズまたはタイプに基づいてWebページに表示されるものを変更することができます。イーサン・マルコットは、2010年の記事で「レスポンシブウェブデザイン」という用語を正式に造りました。

これにより、メディアクエリや、柔軟な画像やグリッドなどの他のテクノロジーやテクノロジーの成長と統合につながり、この本で説明します。

私にとって、「レスポンシブデザイン」は、これらすべてのアイデアと原則の組み合わせです。デザインを画面サイズに適応させるだけでなく、色の深さ、メディアタイプ（ラップトップ画面や電子書籍リーダーなど）、場所などの他の要因にも適応します。

レスポンシブデザインのデザインコンセプト

あらゆる種類のデザインコンセプトが、レスポンシブデザインの使用方法について多くの説明と同じくらい存在します。一部は現れて姿を消したが、他の人は残っている。このマニュアルでは詳細については説明しませんが、実用的なアプリケーションに触れます。それでは、それらのいくつかをすばやく紹介しましょう。

プログレッシブエンハンスメント

プログレッシブエンハンスメントのより伝統的な原則に従うとき、あなたの主な焦点は、デバイスがどれほどシンプルであるか、または接続がどれほど遅いかに関係なく、すべてのユーザーがウェブサイトコンテンツを利用できるようにすることです。次に、より複雑なデザインや機能などの追加機能が、それらを活用できるデバイスに追加されます。

エレガントなダウングレード

モバイルブラウジングの急増により、ウェブサイトのデザインへのより伝統的なパスが崩壊しました。過去には、作業（通常はコンピューター）で作業したプラットフォームでの設計を開始し、スタイルと機能を削除して、特定の機能をより小さな画面またはサポートが少ないデバイスをサポートしました。

ブラウザが特定の機能をサポートしていない状況にはエレガントなダウングレードが適用されることがよくありますが、より一般的に考慮することもできます。原則は、ウェブサイトのフルバージョンから始めて、理想的なデバイスとブラウザで実行しながら、基本的な機能が、たとえ素晴らしい機能を逃したとしても、あらゆるデバイスの（サポートされている）ユーザーに適切に機能することを保証することです。

モバイルファースト

モバイルの優先度はプログレッシブエンハンスメントに似ていますが、より具体的には応答性のあるデザインを目的としています。最小または最も強力なサポートされていないデバイス（通常、原則を作成するときに電話）から始めて、デバイスのサイズが大きくなるにつれて機能とスタイルを追加することをお勧めします。

用語として、「モバイルファースト」は、特に非デザイナー/開発者のオーディエンスにとって混乱を招く可能性があります。プロジェクト内のモバイルデバイスの優先順位の偏った印象を作成できます。

理論的には、このプラクティスにより、小さなデバイスが最適ではないエクスペリエンスが得られないことが保証されます。すべてのデバイスは均等に評価されます。

何をサポートする必要がありますか？

Webベースのプロジェクトを開始または強化する前に、それが価値があるかどうかを必ず知り、すべての勤勉な（潜在的な）ユーザーベースを評価してください。

既存のWebサイトがある場合は、Webサイトのトラフィックを分析して、訪問者がWebサイトにアクセスするために使用するデバイスの種類を確認する価値があります。訪問者の90％が常にデスクトップで訪問している場合、モバイルエクスペリエンスが貧弱であるか、訪問者が大規模なモバイルデバイスユーザーではないことを意味します。正確な答えを見つけるために広範な調査を行うことも、単に応答性の高い設計手法を使用して、新しい訪問者を引き付ける可能性のあるモバイルに優しいWebサイトを構築することもできます。

新しいプロジェクトに取り組んでいる場合、潜在的なユーザーのニーズを分析することも同様に重要です。これは、従来の市場調査手法を使用したり、簡単なテストWebサイトを作成したり、競合他社を閲覧して顧客が誰であるかを理解したりすることで実行できます。

コンピュータ

販売が遅いにもかかわらず、これらのコンピューターで実行されている多くのウェブブラウザーだけでなく、まだ多くのデスクトップやラップトップがあります。これらのコンピューターは、低品質の（および低解像度の）11インチのネットブックから、割合と方向が変化する28インチの高解像度ディスプレイを備えた高性能デスクトップにまで及びます。これらはすべて、画面の領域に大きく影響する可能性があります。あなたは利用可能です。

モバイル

今、携帯電話でウェブサイトを閲覧する人の数はデスクトップビューと同じであるため、モバイルブラウザーユーザーにサービスを提供することは（そしておそらくますます）重要です。モバイルWebビューの成長の詳細については、モバイルマーケティング統計に関するSmart Insightsのレポートと、StatCounterのデスクトップとモバイル使用の比較をご覧ください。

iOSでは、通常、モバイルブラウジングは1つのブラウザを介してのみ行われ、デバイスのサイズはより一貫しています。

Androidは、さまざまなブラウザと画面サイズを提供しています。モバイルオペレーティングシステムを実行するデバイスの数も増加しており、さまざまな解像度で高密度画面もあります。

また、

ユーザーは、動作に大きな影響を与えるデバイスをクリックする代わりに、主にタッチデバイスを使用することを考慮する必要があります。

タブレットPC

タブレットの販売は減少している可能性がありますが、予見可能な将来のユーザーベースが大規模であるため、タブレットを大きな携帯電話や小さなデスクトップと考えてはいけません。さらに、ユーザーはタッチスクリーンまたはマウスを使用してWebサイトと対話する場合があります。

混合機器

コンピューターとタブレットを処理していない場合、コンピューターとタブレットを切り替えることができるMicrosoftのSurface Proなど、ハイブリッドデバイスがあります。各モードは個別に処理できますが、Webサイトを使用するときにユーザーがコンテキストを切り替えることができることは注目に値します。

ウェアラブルデバイス

ほとんどのウェアラブルデバイスはまだWebブラウザーを取得していませんが、これが発生する可能性があります。一方、一部のコンテンツはウェアラブルデバイスで再利用することができ、これらのコンテンツは簡単なフォローアップで簡単なバーストで提供する必要があります。

TV

スマートテレビやApple TVなどの関連デバイスには、ユーザーが通常特定のWebサイトを閲覧するために使用する単純化されたWebブラウザーが付属していますが、人気が高まる可能性があります。テレビには非常に大きな画面があり、通常は解像度が少ないため、テレビで表示するウェブサイトは十分に明確である必要があり、長距離を使用できます。

car

本当に？本当に？はい、本当に。これは新しいフィールドですが、ますます多くの車に何らかの形のインターネットに接続されたダッシュボードが装備されています。現在、車両のダッシュボードに提示されているウェブサイトは、小さな画面に情報を明確に表示する必要があり、ドライバーの注意をそらしたり圧倒したりするように設計されていないため、事故が発生します。ただし、現在、多くの車には乗客向けのスクリーンがあり、ネットワークとコンテンツにより多くのアクセスを提供しています。

ゲームコンソール

ほとんどの最新のゲームコンソールは、インターネットに接続するのに少し時間を費やしています。その一部はWebブラウザーを使用しています。これは、メディア消費やソーシャルネットワークでよく使用されます。これらのデバイスのブラウザは制限されている場合があり、物理キーボードを使用できない場合があります。ホームゲームコンソールの場合、テレビの設計原則が適用され、ハンドヘルドデバイスの場合、限られたモバイルエクスペリエンスが適用されます。

全体として、誰もがあなたのウェブサイトをどこでどのように見るかを予測することはできないので、それを順応性があり、柔軟で、反応が良いものとして構築します。

印刷

印刷？これはウェブデザインの本ではありませんか？はい。ただし、実際の物理的な印刷であろうと、InstapaperやPocketなどのオフラインリーダーでコンテンツをレンダリングするかどうかにかかわらず、Webページの印刷バージョンに頻繁にアクセスされます。一部のコンテンツでは、「印刷」は依然として関連しています。

（記事が長すぎてレスポンシブWebデザインのコアコンテンツとの相関が弱いため、次のコンテンツは省略されています。一部のコンテンツは、必要に応じて選択的に保持または翻訳できます） この応答は、元の意味を維持し、このコンテンツを使用する場合は常に元のソースを引用することを忘れないでください。

以上がレスポンシブWebデザインの意味と目的の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。