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

レスポンシブWebデザインは、デスクトップやスマホやタブレットなどさまざまなサイズのスクリーンの問題に対する素晴らしい解決方法です。

レスポンシブWebデザインをより深く理解するための基本原則を紹介します。

サイトのキャプチャ

9 basic principles of responsive web design

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

レスポンシブWebデザインのツールもリリースされているので、ぜひ!

サイトのキャプチャ

FROONT -Responsive Web Design Tool

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

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

レスポンシブが分かるアニメーション

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

フロー

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

レスポンシブが分かるアニメーション

相対的なユニット

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

レスポンシブが分かるアニメーション

ブレイクポイント

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

レスポンシブが分かるアニメーション

最大限と最小限の値

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

レスポンシブが分かるアニメーション

オブジェクトのネスト

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

レスポンシブが分かるアニメーション

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

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

レスポンシブが分かるアニメーション

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

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

レスポンシブが分かるアニメーション

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

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

レスポンシブが分かるアニメーション

top of page

©2018 coliss