レスポンシブウェブデザインの原則

今日では、ブラウザやデバイスに応じてユーザーインターフェイスを調整するウェブサイトやアプリを作成するのが一般的です。この目標を達成するには、2つのアプローチがあります。 1つ目は、デバイスごとに異なるバージョンのWebサイトまたはアプリを作成することです。しかし、それは非効率的であり、予測できないエラーにつながる可能性があります。

信頼性が高く、将来を見据えたアプローチを模索する中で、レスポンシブ(またはアダプティブ)デザインが考案されました。さまざまなブラウザやデバイスに自動的に適応する単一バージョンのレイアウトを構築することに重点を置いています。

この記事では、レスポンシブWebデザインと、すばらしいWebサイトの作成に役立つ基本原則について学習します。

レスポンシブウェブデザインの成分

レスポンシブウェブデザインは、思ったほど複雑ではありません。これは、CSSを作成するときに使用できる一連のプラクティスであり、最初から学習する必要のある個別のテクノロジーではありません。あなたはすでにこれらの原則のいくつかに気づかずに従っているかもしれません。レスポンシブウェブデザインは、流動的なレイアウト、レスポンシブユニット、柔軟な画像、メディアクエリの4つの要素を調べることで理解できます。

流体レイアウト

流動的なレイアウトを使用すると、現在のビューポートの幅と高さに適応するWebページを作成できます。一般的な方法には、要素に固定幅を与える代わりにmax-widthプロパティを使用することが含まれます。また、パーセンテージ( )、ビューポートの高さ( vh )、またはビューポートの幅( vw )を使用すると、ピクセル( px )では不可能な適応性を向上させることができます。したがって、次にレイアウトを作成するときは、これらの小さな変更を導入して、レスポンシブデザイン手法の恩恵を受け始めるようにしてください。

レスポンシブユニット

より高度なCSSに移行すると、長さにはpx単位ではなくrem単位とem単位が使用されることがよくあります。これは、レムユニットを使用すると、レイアウト全体を非常に簡単に拡大縮小できるためです。デフォルトでは、1remは<html>要素のフォントサイズ(通常は16px)に比例するため、16pxに等しくなります。ただし、最上位のフォントサイズを調整することで、計算を容易にするために1remを10px(またはその他の値)に設定できます。

柔軟な画像

最も基本的なレイアウトでさえ設計する際の最大の関心事は画像です。デザインに合うように、常に適切なサイズに注意する必要があります。また、デフォルトでは、ビューポートの変更に応じて拡大縮小されません。したがって、 max-widthプロパティとともに、画像のサイズにを使用する必要があります。

メディアクエリ

メディアクエリを使用して、レスポンシブサイトに命を吹き込むことができます。流動的なグリッドから始めるのは良いことですが、レイアウトが崩れ始めるポイントがいくつかあることがわかります。これらのビューポート幅にブレークポイントを追加すると、さまざまなデバイスのレイアウトが調整されます。メディアクエリは、メディア機能テストの結果に基づいてCSSを選択的に適用するのに役立ちます。新しいCSS機能を調べて、レスポンシブWebサイトを短時間で作成できます。

レスポンシブウェブデザインの原則

レスポンシブウェブデザインはマルチスクリーンの問題に関しては救世主ですが、参照する固定の物理的制約がない場合があります。したがって、レスポンシブレイアウトを設計する際に開始する、6つの基本的なレスポンシブWebデザインの原則があります。

コンテンツベースのブレークポイントを使用する

基本的なデザイン原則の1つは、Webサイトのデザインはコンテンツをサポートする必要があり、その逆ではないことを示しています。ビデオ、写真などのメディアコンテンツ、および長いWebコピーや短いWebコピーなどのテキストコンテンツは、すべての画面で最適にレンダリングする必要があります。レスポンシブウェブデザインの鍵は、デバイスベースのブレークポイントではなく、コンテンツベースのブレークポイントを使用することです。

Webフォントとシステムフォントを賢く選択する

Webフォントは見事に見えます!見栄えの良いWebフォントを使用してデザインを変更するためのオプションは多数あります。ただし、ブラウザは各Webフォントをダウンロードする必要があることを知っておく必要があります。より多くのWebフォント、より多くのダウンロード時間。対照的に、システムフォントは非常に高速です。ユーザーがローカルデバイスに名前付きシステムフォントを持っていない場合、フォントファミリスタック次のフォントにフォールバックします。したがって、フォントを選択するときは、ロード時間とデザインの需要を考慮してください。

ビットマップ画像とベクトルを最適化する

コンテンツをサポートするさまざまなアイコンがWebサイトにありますか?アイコンの詳細が多い場合は、ビットマップ形式を使用することをお勧めします。一方、ベクター形式は、スケールアップとスケールダウンをうまく行うアイコンを探す方法です。多くの場合、ベクターは小さいですが、欠点は、一部の古いブラウザーがベクターをサポートしていない可能性があることです。また、画像が非常に詳細な場合など、ベクトルがビットマップよりも重い場合があります。したがって、ビットマップ画像とベクターをオンラインにする前に、それらを最適化していることを常に確認してください。

レスポンシブファーストフォールドのテストを実施する

Webサイトの最初の折り目は、スクロールする前に、訪問者が最初にロードしたときに表示されるビューです。多くの場合、レスポンシブナビゲーションバー、紹介用のコピーとメディア、CTAを備えたヒーローセクションが含まれています。応答性は、モバイルデバイスだけに限定されません。タブレット、ゲーム機、その他の画面も検討する必要があります。したがって、重要なのは、少なくともWebサイトの最初の折り返しビューに対して頻繁にテストを実行することです。 Chrome DevTools( Lighthouse )を使用して、ウェブページの品質をテストできます。

小さい画面でコンテンツを非表示にしないでください

多くの人々は、モバイルユーザーは常に一口サイズの情報を探して急いでいると思っていましたが、デスクトップユーザーはより長い形式のコンテンツに興味があります。私たちは今、これが今日の世界では真実ではないことを認識しています。人々はどこでもモバイルデバイスを使用しており、完全なコンテンツとすべてのサービスへのフルアクセスを求めています。コンテンツを非表示にするのではなく、レイアウトとブレークポイントを管理して、コンテンツをできるだけ簡単かつ簡単に表示できるようにする必要があります。

ネストされたオブジェクトを使用してレイアウトを管理する

サイトのレイアウトと配置要素を正しく構築するには、かなりの労力が必要です。また、相互に依存している多くの要素を管理するのが難しい場合もあります。したがって、関連する要素をコンテナまたは<section>でラップすることを検討する必要があります。これにより、複数の要素をレイアウトするタスクを、1つの要素だけをレイアウトするタスクに減らすことができます。

レスポンシブデザイン:デスクトップファーストとモバイルファーストのどちらを選ぶべきですか?

デスクトップファーストのアプローチでは、大画面用のCSSを作成してから、メディアクエリを適用して、小画面用のデザインを縮小します。対照的に、モバイルファーストのアプローチでは、画面が小さいモバイルデバイス用のCSSを作成し、メディアクエリを適用して画面を大きくするためのデザインを拡張します。主な焦点は、ウェブサイトとアプリを絶対に必要なものに減らすことです。

レスポンシブWeb開発を始めたばかりの場合は、1日の終わりにデスクトップファーストのアプローチを採用する必要があります。モバイルデバイス上でコンテナを積み重ねる必要があります。これは完全に個人的な決定ですが、モバイルファーストのアプローチはHTMLをより適切に構造化するのに役立ち、デスクトップファーストのアプローチはレイアウトと間隔のテクニックに役立ちます。