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

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

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

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

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

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

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

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

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

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

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

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

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

いいですね？まず、數(shù)年前に振り返りましょう。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

モバイルファースト

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

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

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

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

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

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

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

コンピュータ

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

モバイル

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

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

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

また、

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

タブレットPC

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

混合機(jī)器

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

ウェアラブルデバイス

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

TV

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

car

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

ゲームコンソール

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

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

印刷

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

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

以上がレスポンシブWebデザインの意味と目的の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。