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

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

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

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

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

単一の畫(huà)面からマルチスクリーン時(shí)代へ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

モバイルファースト

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

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

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

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

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

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

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

コンピュータ

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

モバイル

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

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

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

また、

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

タブレットPC

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

混合機(jī)器

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

ウェアラブルデバイス

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

TV

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

car

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

ゲームコンソール

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

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

印刷

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

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

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