レスポンシブデザインからゴムへ

最新のウェブサイトのデザインはどうあるべきですか？ もちろん、適応的です。 では、なぜ「ゴム」に戻るように勧めるのですか？ 第一に、常にどこでもではなく、必要な場所だけであり、第二に、適応設計は特定のアイデアの単なる複合体であり、すべてが正しいわけではありません。



「ゴム」と将来的に「適応」デザインが登場する理由は、Webページを表示するためのさまざまな技術ツールです。



まず、ゴム設計の考え方は何ですか。 理想的なケースは、すべての画面が同じ幾何学的サイズであるが、インチあたりのピクセル数が異なる場合です。 同じ画像は、画面の解像度に応じて異なる幾何学的寸法を持ちます。 解像度が高いほど、画像は小さくなります。 画像の表示を画面幅の％で指定すると、すべての画面の画像サイズは同じになります。



しかし、画面の幾何学的な寸法は同じではありません。 したがって、ピクセルの幾何学的寸法が同じで、画面の解像度が大きいほど幾何学的サイズが大きい場合、次の理想的なケースを考慮します。 この場合、自然なピクセルサイズで表示するように画像を安全に設定でき、同時にすべての画面で同じ幾何学的サイズになります。 実際には、解像度と画面サイズの間にそのような明確な関係はありませんが、この状況はデスクトップモニターに関連する可能性が高いです。



「ゴム」が課す主な制限に戻りましょう。 すべての画面は同じ幾何学的サイズでなければなりません。 または同じ角度サイズ。 パソコンのモニターは視野のどの部分を占めていますか？ もちろん、これはモニターまでの距離に依存します。 一般に、角度寸法は非常に大きくなります。



ワイドスクリーンモニターでゴム製のデザインのWebページを表示するのがどれほど不便かお気づきでしょうか？ 画面は通常のほぼ2倍の広さで、写真は非常に大きくなります。 同時に、ユーザーが1920x1080pixモードでフルHDモニターを使用しているのは、このモニターのみが通常のサイズよりもはるかに大きい場合です。 したがって、このルールはデスクトップコンピューターで機能します。シャープネスが高いほど、画面の幾何学的寸法が大きくなります。 この場合、写真の自然なサイズを適用する方が合理的です。 側面のフルHDモニターの側面の空きスペースを防ぐために、適応設計の助けを借りて、さまざまなスタイルを割り当てることができます。 たとえば、テキストを表示する2つの列の代わりに、3つまたは4つの列表示を指定できます。



デスクトップコンピューターの場合、すべてが明確です。画面の角度寸法が大きく、視野のすべてまたはほぼ全体を占めています。 しかし、モバイル版のサイトはどうですか？ まず、どのデバイスを対象としているのかを理解しましょう。 携帯電話用。 これらは、手のひらに収まる小さなデバイスです。 スクリーンの角度寸法は小さく、視野のごく一部しか占めていません。 スマートフォンの画面の解像度は大きく異なり、サイズもそれほど変わりません。 もちろん、それらは異なるが、 同じくらい小さいという意味で。 同じ幾何学的（または角度の）スクリーンサイズの場合は、ゴム製のデザインを適用するのに理想的なケースです。 したがって、ここで適用する必要があります。



Teleport-1M Webサイトのモバイルバージョンでラバーデザインがどのように実装されているかを確認できます。 すべてのスマートフォンで同じように見えます。



サイトの2つの異なるバージョンがあるべきだと言いたい-大きな角サイズのスクリーンと小さな角サイズのスクリーン、そしてどちらをメインと見なすべきか-はウェブサイトが解決する目標と目的に依存する。 クライアントが携帯電話から商品やサービスを探している可能性が高い場合、サイトのメインバージョンはおそらくモバイルバージョンです。 同時に、クライアントに選択の機会を残し、どのバージョンを表示するか（モバイル、高速、簡潔、またはデスクトップ）を決定できるようにする必要があります。



もちろん、モバイル版のサイトのラバーデザインは、最初はそう簡単ではありません。 スマートフォンユーザーが画面を垂直から水平に反転するとどうなりますか？ 文字のサイズは変わらず、テキストの行だけが2倍長くなります。 しかし、写真は明らかに大きくなります。 画面が「小さい画面よりも小さい」ミニスマートフォンの場合、これはそれほど目立ちませんが、5インチの画面を備えた最新のスマートフォンの場合、これはすでに顕著です。 そのため、ここでは適応性を適用し、画面の縦向きと横向きに2つの異なるスタイルを設定する必要がありました。



私は適応型デザインのサポーターでもあり、何らかのレトログラードではありません。携帯電話と固定デバイスの2つの根本的に異なる角度の画面サイズの違いを考慮することをお勧めします。 サイトのモバイル版がメインになりつつあり、すべての携帯電話でラバーレイアウトの2つのバリエーション（ポートレートとランドスケープ）だけで十分であるという事実を考えると、「適応型」から「ゴム」に戻ります。