レスポンシブデザインとは何ですか？

公開: 2020-02-10

デザイナーが携帯電話やタブレットでウェブサイトがどのように見えるかを本当に心配する必要がなかったのはそれほど昔のことではありません。電話はまだWeb表示には実用的ではなく、iPadが登場する前は、タブレットは不可欠というよりも目新しいものでした。

明らかに、すべてが変わっており、ほとんどの技術専門家は、今後数年間で、おそらく遅かれ早かれ、モバイルブラウジングがWebを表示する主要な方法としてデスクトップブラウジングを追い抜くと予測しています。

ビデオゲームコンソールやインターネットTVなど、画面サイズとデバイスの範囲は進化し続けているため、Webデザインの古い方法はもはや課題になりません。また、モバイルユーザー向けにオンラインエクスペリエンスを最適化する必要性を認識している企業では、適応しないデザイナーは取り残されます。

編集者注：以下は、経験豊富なWebデザイナーを対象としていないレスポンシブデザインの初心者向けの紹介です。

レスポンシブデザインの主なコンポーネント

そこで登場するのがレスポンシブウェブデザインです。コンテンツやレイアウトは、表示される画面のサイズに自動的に適応します。最も基本的なレスポンシブデザインの3つの主要な要素は、柔軟なグリッド、柔軟な画像、およびメディアクエリです。後者はCSS3の一部として導入されています。それらについてはすぐに詳しく説明します。

柔軟なグリッド

フレキシブルグリッドは基本的にテーマとテンプレートであり、デザイン要素はピクセルではなくパーセンテージで設定されます。測定単位としてパーセンテージを使用すると、50％で設計された要素は、画面の大小に関係なく、常に画面の半分を占めることを意味します。

柔軟な画像

最も基本的で柔軟な画像は、次のような単純なルールを作成することで簡単に作成できます。

 img { max-width: 100%; }

基本的に、これは、要素がそのコンテナよりも大きい場合、ルールがその要素をそのコンテナの幅に一致させることを意味します。また、最新のブラウザは画像のサイズを比例的に変更するため、画像のアスペクト比も維持されます。さらに、100％ルールは、埋め込みビデオなど、他のほとんどすべての要素にも使用できます。

メディアクエリ

CSS 2.1でメディアタイプが導入されて以来、スタイルシートにはモバイルデバイスやその他のデバイスがはるかに含まれるようになりました。メディアタイプを使用すると、基本的に、ハンドヘルド、画面、テレビなどの特定のクラスのWebデバイスをスタイリングでターゲットにすることができます。しかし、デバイス間の標準化がほとんどなく、デバイスメーカーからのサポートもほとんどないため、メディアタイプはその潜在能力を発揮できませんでした。

メディアクエリは、その可能性に応え、次にいくつかの可能性を発揮します。ただし、メディアクエリは、メディアタイプのようにデバイスのタイプに関係するのではなく、代わりにデバイスの機能を調べます。

単純なメディアクエリは次のようになります。

クエリの2つのコンポーネントは、画面として設定されたメディアタイプと、実際のクエリ(max-device-width: 480px)です。これは、基本的に、デバイスの幅が480px以下かどうかを尋ねます。その場合、デバイスはgeneric.cssをロードします。そうでない場合、正しい解像度が識別され、適切なスタイルシートがロードされるまで、他のリンクと同様にリンクは無視されます。

単なる解決以上のもの

ただし、メディアクエリを使用して制御できる設計要素は、解像度だけではありません。ブラウザウィンドウの幅と高さ、横向きと縦向き、さらにはレイアウトも、設定できる他のパラメータの一部です。

たとえば、メディアクエリがデバイスがスマートフォンであることを検出した場合、テキスト領域のある3つの列とコンピューター画面上の2つの垂直サイドバーを表示して読み込まれる可能性のあるデザインが、スマートフォンの画面に全幅のテキスト領域として読み込まれる可能性があります。下の水平要素としての2つのサイドバー。

柔軟な考え方

もちろん、柔軟な設計の重要な要件は、柔軟な設計の考え方を持つ設計者です。残念ながら、ほとんどのWebページはまだモバイルデバイスでそれほど使いやすいわけではありません。これは主に、ほとんどの設計者が、後から考えてスマートフォンやタブレットを使用してデスクトップ専用に設計するためです。複数のプラットフォームを念頭に置いて設計に取り組む設計者はほとんどいません。

メディアクエリをスタイルシートに組み込むことには学習曲線がありますが、それはピクセルを使用したデザインからパーセンテージを使用したデザインへの移行であり、一部のWebデザイナーを止めています。ただし、実際には、パーセンテージを使用した設計にはそれほど違いはなく、簡単です。

たとえば、2つの同一の要素に100％と100ピクセルの幅を割り当てることの違いを考えてみてください。 1つは、デスクトップ、ラップトップ、iPhoneのいずれの画面であっても、要素が画面全体に表示されることを保証できます。ただし、幅100ピクセルの要素は、480ピクセルのiPhone画面では大きくなりますが、解像度が1600×900のデスクトップ画面では比較的小さくなります。

レスポンシブデザインはビジネスを意味します

企業にとって、レスポンシブデザインを実装する主な理由は明らかです。潜在的な顧客が探しているものをナビゲートして見つけるのが簡単であるほど、コンバージョン率は高くなります。しかし、多くのデザイナーにとって、ビジネスWebサイトのレスポンシブデザインとは、通常、コンテンツのサイズを縮小して小さな画面に収めることを意味します。探している情報を見つけるためにスクロールしたり、ズームインおよびズームアウトしたりすることに時間を費やした人は誰でも、ウェブサイトのミニチュアバージョンが答えではないことを知っています。

企業や設計者がモバイルデバイスの設計の問題に対処するもう1つの方法は、デバイスに応じた自動リダイレクトを使用して、さまざまなデバイス用に個別のサイトを作成することでした。これにより、最高のインターフェースを提供できるだけでなく、JavaScriptや大きな画像によって引き起こされる読み込みの遅延を回避できます。

しかし、このアプローチにはいくつかの欠点があります。確かに、そのうちの1つは、複数のサイトを作成および維持し、それらのサイト間でコンテンツを調整するための費用です。そしてもちろん、新しいデバイスが出たときに構築されるさらに別の新しいサイトがあります。幸い、レスポンシブデザインを正しく実行すれば、モバイルデバイスのデザインにおけるほぼすべての問題に対処できます。