しっかりと理解しておきたい！レスポンシブWebデザインを使いこなすための9つの基本原則

Post on:2014年11月18日

レスポンシブとアダプティブ Webデザイン

レスポンシブとアダプティブは同じように見えるかもしれませんが、そうではありません。レスポンシブでは異なる解像度ごとにレイアウトを定義し、アダプティブでも異なる解像度ごとでも定義しますが、ユーザーのコンテクスト（環境・状況・目的など）に応じて表示するコンテンツ（レイアウト）を定義します。

レスポンシブ、アダプティブなど、Webデザインの代表的なレイアウトについては下記ページを参考にどうぞ。

Webデザインの代表的な4つのレイアウト、その特徴と相違点

フロー

スクリーンのサイズが小さくなると、コンテンツは垂直方向にスペースをとり、その下が押し下げられます。このことをフローと言います。レイアウトを考える時には十分、考慮する必要があります。

相対的なユニット

ページを表示するデバイスは、デスクトップやスマホなど表示サイズはさまざまです。ページ上のユニットのサイズを指定する時はどのデバイスでも最適に表示されるように相対的な単位、パーセントが役立ちます。

ブレイクポイント

ブレイクポイントはレイアウトが変化するポイントのことで、例えばデスクトップでは2カラム、スマホでは1カラムに変化することを可能にします。これは通常、コンテンツに依存します。もし読みにくくなるようであれば、ブレイクポイントを加える必要があるでしょう。

最大限と最小限の値

スマホでの表示を考えた場合、ページ幅を100%にすることがあります。しかしこれはデスクトップのようにスクリーンの幅が広いと非常に読みにくくなります。そういった時は最大限と最小限を設定します。
例えば、コンテンツに100%の幅と1,000pxの最大幅をします。1,000pxは超えないようにしておきましょう。

オブジェクトのネスト

相対的なポジションを覚えていますか？多くの要素を相互にコントロールすることは難しいです。そんな時はそれらの要素を内包するラッパーを使ってください。ラッパーの存在はロゴやボタンなど、大きさを調整することを望まないコンテンツに役立ちます。

モバイルファースト or デスクトップファースト

Webサイトを制作する時、小さいスクリーンから始め大きいスクリーンへとするモバイルファーストでも、その逆のデスクトップファーストでも技術的にはあまり多くの違いはありません。どちらかと言えば、制約がある分モバイルから始めた方が楽かもしれません。
多くの場合、モバイルとデスクトップの両方の最終形から始めてしまう人がいますが、何がもっとよく機能するか見て確かめてください。

Webフォントとシステムフォント

あなたのWebサイトで使用しているフォントはかっこよく見ていますか？美しいフォントをWebページで使いたい時は、Webフォントを使ってみてください！
Webフォントを使った場合、そのフォントファイルのダウンロードで表示スピードが遅くなるかもしれません。ユーザーのデバイスにあるシステムフォントを利用する場合は非常に速く表示されます。ただし特殊なフォントを指定してしまうと、結局はデフォルトのフォントで表示されてしまいます。

ビットマップ画像とベクター

あなたが使用しているアイコンには繊細なエフェクトが適用されていますか？もしそうであればビットマップを使ってください。そうでなければ、ベクターを使うことを考えてみてください。ビットマップは.jpg, .png, .gifなどで、ベクターだとSVGやアイコンフォントがよいでしょう。それぞれに利点と欠点があります。