少し前まで、デザイナーは、本の表紙であれ、ポスターであれ、新聞であれ、作っている物の明確な寸法を把握していました。

しかし、スマートフォン、iPad、その他様々なアスペクト比や解像度を持つモニタの出現により、ビジュアルのコントロールが難しくなりました。

レスポンシブデザインが新しく話題になったことは当然でしょう。これはファッションなどのトレンドとは異なります。インターネット閲覧に様々なデバイスが使われるようになったために持ち上がった、ユーザビリティの問題を解決しようとする試みです。

この記事では、様々なデバイスに合わせた、デザインのアプローチ法を紹介します。スクリーンサイズや解像度を含め、レスポンシブデザインはどのように機能するのかをデザイナーの視点から見ていきましょう。

Photo: Brad Frost (via flickr)

レスポンシブデザインのアプローチ法

すべてのモニタスクリーンにフィットするウェブサイトを作る場合、最も一般的な方法は標準的なスクリーンの幅と高さの範囲内でデザインすることです。モニタスクリーンの標準サイズは1024 x 760ピクセルなので、Webのセーフエリアはそれ以下、989 x 548ピクセルということになります。

ウェブサイトがそれよりも大きなモニタで表示された場合は、ページレイアウトに占める背景が大きくなります。90%以上のウェブサイトはこの方法で作られていますが、モバイルデバイス向けにデザインする場合は適切ではありません。320 x 2000ピクセルのスクリーンで、同じレイアウトを使うことはできないのです。

複数のデバイスのためにデザインする別の方法をいくつか挙げます。

  • メディアクエリ:CSSを使って、サイトが表示されるデバイスの特徴によってページのスタイルを変えることができます(コンテンツを隠すことも含む)。
  • 可変グリッド:ページ要素を相対的な(%)ユニットとグリッドカラムの数でサイズ設定すれば、スクリーンの幅によって表示が変わります。

最もよく使われるテクニックは可変グリッドに基づいたものです。これはレスポンシブデザインの動きの原型であり、adobeもサポートしています。Dreamweaverの最新バージョンでは、可変テンプレートを使って自動的にレイアウトを作成、編集できます。

Website: Lancaster University

ランカスター大学のウェブサイトでは、コンテンツセクションの幅は960ピクセルより広がることはありませんが、400ピクセル以下まできちんと縮小されます。トップのコンテンツがどのように徐々に小さくなるか、スクローラの動きに注目してください。ページ幅は420ピクセル以下になります。

モバイルデバイススクリーンの解像度(それらをターゲットにする場合の問題点)

世間には多様な解像度のグラフィックディスプレイが出回っています。以下はウェブデザイナーにとって重要な、いくつかのデバイスの解像度一覧です。

見て分かるとおり、解像度(1インチ内のピクセル数)だけでなく寸法にも多くの種類があります。解像度(ppi)は、重要な要素です。例えば、iPhone 5のアイコンはデスクトップモニタで表示した場合、4倍のサイズになります。

コンテンツを小さなサイズに合わせる時に、いくつかの問題にぶつかるはずです。以下のことを覚えておきましょう。

  1. 可読性を保つ:2000ピクセル幅のスクリーン上の14ピクセルのフォントは、300ピクセル幅のスクリーンでは2ピクセルまで小さくなります。これでは読めません。逆に、10ピクセルのテキストを7倍にすると、常識を超えた大きさになってしまいます。閲覧しているスクリーンの幅に合わせてレイアウトを調整することで、どのデバイスにおいても、合理的で読みやすいフォント比を保たなければなりません。
  1. 閲覧のしやすさを保つ:閲覧者にたくさんスクロールさせるのは絶対に避けましょう。膨大な量のコンテンツを1カラムに押し込むと、ページが長くなり過ぎ、目的のコンテンツにたどり着きにくくなります。
  1. タップのしやすさを保つ: モバイルスクリーンはタッチで動かすことができ、それは大抵、人間の指で行われます。ですから、ボタンは小さ過ぎてはいけません。Appleが提示している、快適にタップできるUI要素の最小サイズは44 x 44ピクセルです。しかし、現実にはこの限りでないことが多く、実際の目安は約25ピクセルとなっています。

可読性があり、閲覧しやすく、快適にタップできるインターフェースを達成する方法が分かりました。次は、レスポンシブデザインの作成に必要なことを見ていきましょう。

レスポンシブデザインを作る秘策

レスポンシブデザインを作る際、いくつか気を配るべきことがあります。特に重要なのは次の点です。

Webデザインは、複数のブラウザ幅に合わせた3つのバージョンを用意する:320-480ピクセル、480-768ピクセル、768ピクセル以上。これらの幅の間でコンテンツが自由に拡大縮小されるようにする、あるいはレイアウトが固定されるようにします。3つ(またはそれ以上)の固定レイアウトに必要に応じてマージンを加える方法は、大抵の場合、可変スケーリングと比べて、デザインと実装が簡単です。しかし、可変スケーリングの方が多くのデバイスでより良いエクスペリエンスを提供できます。

解像度によって、どのコンテンツを表示するかを決める:例えばある記事のリード部分を隠したり、ボックス全体を1つのボタンにまとめたり、コンテンツを完全に隠してしまう、などです。

CSSの制約に注意する:多くのページ要素が純正なCSSの制御下にあるようにデザインしましょう。そうすることで、ページ要素をリサイズする際に柔軟に対応ができ、読み込み時間を減らすことができます。CSSに慣れていない多くのデザイナーにとっては簡単なことではないかもしれませんが、これはつまり「標準」以外のオーバーレイモードの使用を避け(レイヤーを統合できる場合は除く)、単純にシャドウとグラデーションを使うことです。

すべての解像度に、同じコンテンツと全く同じHTMLを使う:同じグラフィック要素をすべてのページバージョンに使い回すべきだということです。多くの場合、最大のスクリーン用のデザインを最初に作り、その後に必要ならば小さい解像度のために要素を減らすことが多いでしょう。

優れたレスポンシブデザインを作るには、これらの秘策とあなたの想像力、そしてコーダーのスキルが必要です。以下の例でレスポンシブデザインを作る様々な方法を紹介します。

レスポンシブデザインの例

Website: Fork

Forkは、固定レイアウトに可変スケーリングを組み合わせた驚くべきサンプルです。固定レイアウトは4つ(ピクセル数は、ブロック要素のサイズです)。波のイメージの背景は可変スケーリングで、ページを770ピクセル以上にすると見ることができます。コンテンツが適宜隠れることに注目してください。

Website: Daniel Vane

Daniel Vaneの個人サイトは可変の四角モジュラーグリッドをうまく活用しています。これはどんなサイズのスクリーンにも対応します。768ピクセルほどの小さめのスクリーンでは、レイアウトは5カラムから3カラムになります。480ピクセル以下では、1カラムです。

Website: The Boston Globe

ボストン・グローブ紙のウェブサイトは、巨大なニュースサイトとしては、レスポンシブでデザインされた数少ない例です。相対的な%寸法を元にした可変グリッドのHTML5 Boilerplate フレームワークを使っています。可変グリッドは無限に拡大縮小するわけではないことに注意しましょう。このウェブサイトでは、最大ページは1232ピクセルであり、最小は422ピクセルです。

620ピクセルと800ピクセルにおいてカラム数は変化しますが、ボストン・グローブ紙のスタイルシートは2つ以上の条件(メディアクエリ)を定義しています。さらに詳細に解析すると、このページ(初見ではシンプル)には次の解像度に合わせて調整された約30のバリエーションがあります。
1400、1300、 1220、1210、1200、1150、1100、1050、1024、980、960、950、931、900、860、809、810、800、788、768、760、640、639、620、600、540、500、481、480、380(単位はすべてピクセル)。

レスポンシブデザインを始めるための参考資料

最後に大事なことを1つ。下の画像をクリックすれば、複数のデバイススクリーンの透過PNGをダウンロードできます。あなたのデザインのテストやプレゼンテーションに利用してください。

まとめ

レスポンシブデザインは複雑ですが、多様なユーザに提供可能なウェブサイトを作ることができます。今後、ウェブデザイナーにとっては必須の知識となるはずです。さらに、モバイル以外のデバイス(スマートテレビを知っていますか?)にも展開されていくことでしょう。これからも、常に最新の情報を知っておくことが大切です。

レスポンシブデザインについて質問があれば、ぜひシェアしてください!