レスポンシブデザインの現状と動向

2012 年から 2014 年にかけて、誰もが Web デザインのトレンド予測でレスポンシブ デザインについて言及しました。2015 年も、Web デザインのトレンド予測では引き続きレスポンシブ デザインが取り上げられました。このレスポンシブ スタイルは数年前から人気があり、ここ数年で急速にその地位を確立し、Web デザインの新しい標準の波を引き起こしました。ここではレスポンシブデザインの現状と動向について、いくつかの文献と私個人の見解をもとにお話しさせていただきます。

原点

2010 年 5 月、Ethan Marcotte は、「A List Apart」に画期的な記事 (「レスポンシブ Web デザイン」というタイトル) を書きました。彼は、流体グリッド、メディア クエリ、およびスケーラブルなイメージという 3 つの既存のツールを使用して Web サイトを作成しました。異なる解像度の画面でも美しく見えます。イーサン・マルコット氏はデザイナーに対し、Web の独自の機能を活用するよう勧めています。「デバイスごとにデザインを個別に調整するのではなく、インターネットに接続されたさまざまなデバイスでのさまざまなエクスペリエンスを、同じ Web サイトのエクスペリエンスの異なる側面として扱うことができます。私たちは最高の視覚体験をデザインすることができましたが、それを実現するには、デザインに柔軟性があるだけでなく、さまざまな媒体に適応できるようにする必要もあります。イーサン・マルコットは、複数のデバイスにわたって優れたエクスペリエンスを提供する方法と、デバイス間の違いを無視しない方法があることを実証します。デザイナーのコントロールを強調せず、自然に任せることを選択します。当然のことながら、Web の柔軟性を受け入れます。

ここで、上記の 3 つの概念を簡単に紹介します。流体グリッド、メディア クエリ、およびスケーラブル イメージは、もともといくつかの既存の技術的手段を指しますが、それに応じて、フォーミュラ デザインの研究の過程で、これらの概念は依然として広い意味を持ち、デザイナーは

フロー レイアウト: 元々は、測定単位としてパーセンテージを使用したレイアウト テクノロジの実装を指します。流体レイアウト、弾性レイアウト、流体グリッドなどのさまざまな概念については、ここでは個別に説明しません。著者はこれを 1 つの大きな概念に要約します。レスポンシブ デザインのレイアウトでは、ピクセル (px) が唯一の単位として使用されなくなり、パーセントまたはパーセントとピクセルの混合が、より柔軟なレイアウトを設計するための単位として使用されます。

メディア クエリ: メディア クエリを使用すると、デバイスの種類、解像度、画面の物理サイズや色など、特定の環境でクエリされたさまざまな属性値に基づいて適用するスタイルを決定できます。メディアクエリを使用することで、デバイスとその特性を取得し、相違点を残しながら共通点を探すソリューションを提供することで、これまでの単純なレイアウト設計で残された問題を解決できます。

柔軟な画像: レイアウトの柔軟性に伴い、重要な情報形式の 1 つである画像には、レイアウトの変更に適応するためのより柔軟な方法も必要です。個人的には、弾性写真はイーサン・マルコットが製品のデザインを提案したときに提案した概念であり、その後の研究では、写真をモデルとして使用して研究の範囲を広げることができ、写真に加えて、応答に関する研究も含めるべきだと思います。アイコン、チャート、ビデオなどの情報コンテンツの方法。

人気

レスポンシブ デザインの概念は、提案されて以来広がりを見せており、すべての関係者によって認識されています。主な理由は次のとおりです。

外部環境: インターネットに接続されたデバイスの急速な成長と多様化により、今日の環境が変化しました。標準の画面サイズでもあります。

独自の機能: 厳密に定義された応答性は、一般に応答性の高い Web デザインを指し、Web はその独特の柔軟性と可塑性により、さまざまなサイズや構成のデバイスに適応でき、どこでも使用できます。

内部ニーズ: レスポンシブ デザインの概念が提案されるとすぐに、主要な Web サイトやプラットフォームは、特に圧倒的なモバイル デバイスの時代に、より多くのデバイスにより柔軟に適応できるように、このワン フォー オール モデルを採用することを望んでいます。

もちろん、すべての状況でレスポンシブ デザインを採用する必要があるわけではありません。では、どのような状況でレスポンシブ デザインが適しているのでしょうか。

コスト効率よくより多くのシナリオに適応したい:> リソースは限られていますが、より大きな価値を得るために限られたリソースを使用したいと常に考えています。レスポンシブ サイトの構築に必要な人材と時間は、通常の Web サイトの開発と設計に比べて増加しますが、コストは、さまざまなデバイス向けに複数のバージョンを構築するよりもはるかに低く、メンテナンスの観点からもはるかに簡単です。

設計および開発したい新製品がどのシナリオに適しているかわからない場合:> 予測によってコア デバイスを選択し、それらを個別に設計するのではなく、Web サイトをより柔軟にすることに時間を費やす方がよいでしょう。さまざまなデバイスで使用できるため、すべてのデバイスで最高のエクスペリエンスが得られます。すべての側面が不明な場合、予測を行うとプロセスのリスクが増大し、結果が非​​常に困難になるためです。

将来的に Web サイトを新しいデバイスと互換性を持たせたい場合:> 新しいデバイスが次々と登場し、受動的に更新して保守するのではなく、変化に積極的に対応して応答性を高める方が良いでしょう。 もちろん、これは単にそれがより適切であると言っているだけです。実際、プロジェクトのリソースと時間が許す限り、基本的にほとんどの Web サイトはレスポンシブ デザインを実装できると考えています。初めては「簡単な閲覧ページ」から始めることもできます。

モード

現在、ほとんどの Web サイトでレスポンシブになるように選択されている主なデザイン モードは 2 つあります:

デバイスに基づく: 主流のデバイスの種類とサイズを通じてレイアウト ブレーク ポイント (ブレーク ポイント) を決定し、複数のセットをデザインします。スタイルを分割してから、応答するデバイスにキャストします。

コンテンツファースト: コンテンツの可読性と可読性がブレークポイントを決定する基準として使用されます。つまり、コンテンツをレイアウトするときにデバイスは無視でき、コンテンツがいつ必要になるかを決定します。

私は今でもコンテンツファーストのアプローチを好みます。これはレスポンシブデザインの中核戦略に忠実に準拠しており、将来性にも配慮したモデルです。 以前は、基本的にいくつかの PC サイズに基づいて、最適な標準サイズを選択してページをデザインしていましたが、今ではモバイル デバイスが眩しくなり、テレビやウェアラブル デバイスでも徐々に使用され始めており、固定されたサイズはなくなりました。サイズ; 将来的にはさらに予測不可能な機器環境になるでしょう。どのようなアプローチが適切でしょうか? ——内容そのものですね！ 変化は常に急速かつ困難に起こります。私たちがしなければならないのは、状況全体を結びつける糸を把握することだけです。

コンテンツファースト戦略では、レスポンシブデザインプロセス全体を通して実行できる 3 つの思考モードがあります:

デバイスのことは忘れる: ユーザーが Web サイトにアクセスするためにどのような種類のデバイスを使用するかわからないからです。したがって、すべて (レイアウト、コンポーネントなど) がさまざまな種類のデバイスやプラットフォームと互換性があるように、可能な限りすべてをカバーするように最善を尽くす必要があります。

エレガントな劣化: このコンセプトは元々、古いブラウザでは新しい機能をうまく実装できなかった場合の技術的な実装における妥協でしたが、ここで表現したいのは、レイアウトを柔軟に設計する際に、コンテンツが全体から変更されるということだけです。コア コンテンツ ブロックを保持するには、慎重にスクリーニングする必要があります。このモードは、既存の PC ページ製品のレスポンシブ デザイン変革に非常に適しています。

プログレッシブエンハンスメント: このコンセプトは、2003 年の SXSW イベントで Steven によって提案されました。本質的には、これはグレースフル デグラデーションの逆です。まず、コンテンツを簡潔に表示することに重点を置いて基本的なエクスペリエンスを作成し、次に、基本的なエクスペリエンスを確保しながら、表示のレイアウトとインタラクションの作業を開始します。ここでは、レスポンシブ デザインのコンテンツ戦略を説明するためにも使用されます。コンテンツは狭いものから広いものに変化し、それに応じてコンテンツの豊かさが増します。このパターンはモバイルファースト戦略と一致しています。

もちろん、現在レスポンシブ性についてはさまざまな議論がありますが、レスポンシブ Web デザインを使用しない理由があるのではないでしょうか。しかし、実際には、ますます多くの Web サイトがレスポンシブ化を選択しているにもかかわらず、「レスポンシブ デザインを廃止しましょう」と言っている人はいないと思います。これは 2014 年にも当てはまり、2015 年も引き続き当てはまります。これはもはやトレンドではありませんが、喜びが標準であるためです。

今後の道のり

レスポンシブ デザインの利点と傾向は一般に認識されていますが、現在のレスポンシブ デザイン モデルの普及にはまだ克服する必要がある多くの問題があります:

レスポンシブ イメージ: 現在のエラスティックの実践画像の主な特徴: スケーリング、トリミング、条件付き読み込みなどの実装方法は、本質的には単なるテクニックであり、局所的な領域ではなく症状に対処し、問題を隠すだけであり、画像の柔軟性を完全に実現するものではありません。

クロスエンド インタラクション: レスポンシブ デザインでは、デスクトップ ユーザーの使用習慣を考慮するだけでなく、さまざまなサイズのハンドヘルド デバイスも考慮する必要があります。たとえば、デスクトップでは限りなくエレガントな Hover ですが、モバイル端末ではエクスペリエンスが非常に劣ります。すべての端末でエクスペリエンスを最適化するために「相違点を確保しながら共通点を探す」方法については、さらに検討する必要があります。

パフォーマンス: パフォーマンスの見積もりは、レスポンシブ開発において最大の問題です。条件に基づいてコンテンツをロード、非表示、または表示することは、単一の条件によって判断されるコード構造よりも煩雑であり、エクスペリエンスとメンテナンスに影響します。特にモバイルのパフォーマンスに関しては、使用環境がより複雑になるデバイスが増えており、デバイスをどのように識別し、さまざまな環境でも快適なエクスペリエンスを実現できるかが課題となっています。

コラボレーション プロセス: レスポンシブ デザインは、Web プロジェクトに新しい完全なメソッド セットをもたらすだけではなく、このワンモード ワークフローをより効果的に活用できる新しいアプローチも含める必要があります。

最後に、応答性は適応性の高いデザイン思考モデルを体現していると言いたいと思います。レスポンシブ デザインを探求する過程において、レスポンシブ性自体が唯一の目的ではありません。あらゆるデバイスに基づいてページ コンテンツを完璧に計画するためのデザイン戦略とワークフローが、私たちのより大きなトピックであるはずです~

。