マルチデバイスレイアウトパターン―Luke Wroblewski記事翻訳
Posted by 角谷 仁
”モバイルファースト”の第一人者、Luke Wroblewskiのブログから記事を翻訳してご紹介します。今回はマルチデバイスに対応するレイアウトパターンについてです。元記事：Multi-Device Layout Patterns, May 14, 2012
フルードグリッドとメディアクエリによって、レスポンシブデザインはウェブページのレイアウトを様々なスクリーンに対応させることを可能にしました。たくさんのデザイナーがこの技術を喜んで使うに従い、たくさんの革新的方法が生み出され、明確なパターンが出現してきました。今回は、マルチデバイスにうまく対応する有名なレイアウトパターンを一覧にしてみました。
レスポンシブデザインの最新レイアウトパターン傾向をつかむために、Media Querieのサイト上で取り上げられているすべての例を何度も綿密にチェックしました。その際、パターンとして最も頻繁に表れるものを見つけるようにし、わずかな差異しかないパターンを別々に定義することは避けました。
Most Fluid（ほぼ可変）
最も人気のあったパターンは、おそらく驚いてしまうほどシンプルなものでした: マルチカラム・レイアウトで、大きな画面ではマージンが大きくなります。また、大画面から小画面へのサイズ変更にフルードグリッドやフルードイメージを活用し、最も画面幅が狭いバージョンになるとコラムを縦に積み重ねる、というものです(下図参照)。
このパターンを「Mostly Fluid (ほぼ可変)」と呼ぶのは、核となるレイアウト構成が最も幅の狭い画面サイズになるまで一定だからです。その代わり、デザインは主にフルードグリッドによって各種画面サイズに対応しています。このパターンが実際に利用されている例をいくつか挙げてみましょう:
- Five Simple Steps
- Princess Elisabeth Antarctica.チームより: 「”ページレイアウト（という概念）”から様々なページの構成要素となる”コンテンツモジュール（という概念）”への対応のシフトを、このPEAサイトで実現しようとしました。このサイトの全てのページを10のレスポンシブコンテンツモジュールの1つのセットで作るようにしました。」
上記の例には、もちろん多少の違いはあります: 構成要素の配置や「小さなスクリーン」の捉え方は異なっているが、このパターンに合致する例は基本的に多い。
Column Drop（カラムが落ちる）
もう一つの人気パターン。マルチカラム・レイアウトで始まりシングルカラム・レイアウトで終わるものです。このパターンでは、画面幅が狭くなるにつれてカラムをドロップ(下に置く)していきます。「Mostly Fluid」パターンとは違い、このレイアウトでは構成要素の全体的なサイズは一定となる傾向がある。その代わりに、カラムを積み重ねることでさまざまな画面サイズに対応しています(下図参照)。
異なるブレークポイントにおいて、各カラムがいつどのように積み重ねられるかはデザインによって異なります。しかし一般的には狭い画面の場合、一番上にはナビゲーションかコンテンツが置かれます。このパターンが利用されている例をいくつか挙げてみましょう:
Layout Shifter（レイアウトが変わる）
最もさまざまな画面サイズに対応しているパターン。というのは、大・中・小の画面で異なるレイアウトが用いられているからです。これには、より多くの作業が本質的に必要になるため、上記に述べた2パターンよりも人気がないように見えます。
最も頻繁に目にした実例をもとに、このパターンを簡潔な図（上記）で一般化したのですが、実際のところは、このパターンでは革新的なデザインが多く発生しているため、このパターンとなるすべての例を包含するような”公式”ではありません。いくつかの例を見て、感じをつかんで見てください:
- Food Sense
- Performance Marketing Awards
- Forefathers Group
- The Boston Globe
- Andersson-Wise Architects
Tiny Tweaks （マイナーチェンジ）
最もシンプルな対応法だが、このパターンは最も人気がありませんでした。おそらく、シングルコラム・レイアウト内でほんの少しの構成要素からなるシンプルなWebページを持てるような企業がほとんどないからでしょう。こうしたシンプルなWebページを幸いにも持っている場合には、マルチデバイスへの対応はフォントサイズやイメージレイアウトにマイナーチェンジを数点加えるだけ済む可能性があります。
このパターンを描いた図(上)ではうまく説明ができないので、代わりに下に挙げた実例を見てみてください:
Off Canvas (オフキャンバス)
レスポンシブデザインのレイアウトパターンには上述したように多くの種類があるが、共通した特徴もいくつかあります。まず、小さな画面の時はすべてを縦に積み重ねる傾向があり、その結果、さまざまな構成要素が満載の長いページになりやすい。また上記ほどは顕著ではないものの、これらのパターンはすべて、利用できる画面スペースだけをもとにレイアウト調整しています。
しかし、それが複数の画面サイズに対応してレイアウトすることなのではないのでしょうか？それは、自分たちの選択肢を現在把握しているものに限定する場合に限られます。事実、レイアウト調整用のスペースは、表示画面上よりも、画面の外に常にもっと多くある、という意見もあるかもしれません。
上の図のように、マルチデバイス・レイアウト用のオフキャンバス・パターンでは画面の外のスペースを活用し、もっと大きな画面で表示できるようになるか、ユーザーがそれを表示させるようなアクションを起こすまで、画面外にコンテンツやナビゲーションを隠しておきます。このパターンは、各種のモバイルWebサイトのデザインやネイティブ・モバイルアプリケーションにいくつか見受けられます。
FacebookのモバイルWeb版では、表示ウインドウの左にあるスペースを使ってナビゲーションオプションを隠してあり、リンクをクリックして表示させます。そうすると、画面の外にあるコンテンツが横から滑り込んできて表示される仕組みです。同様のアプローチ(下記の例)を取っているレスポンシブデザインはいくつかあります。しかし、利用デバイスによってはアクセス面で難があるものもあります。
Pathのネイティブ・モバイルアプリケーションでは、レイヤー技術を用いてオフキャンバス効果を出しています。同社のアプリでは、ナビゲーションオプションをリクエストによって表示するために、画面の左右両側を用いています。
Torkil Johnsenは、Pathに似たデザインで、non-touch機器・javascript非対応機器向けの代替システムを備えたWeb用のPOC(proof-of-concept)を開発しています。
Googleのモバイル版では、見えている画面の上にあるスペースを使ってナビゲーションオプションを画面外に置いています。「More（もっと見る）」の部分をクリックすると、こうしたオプションがページの上から滑り込んできて表示されます。
オフキャンバス・パターンの根底にある基本的な考えは、小さな画面では追加機能は1回クリックしてから利用するようになっており、画面サイズが大きくなるにつれて、こうした要素が表示されるようになります。そして最終的にはこうした機能は画面に表示され、アクセスするのにクリックする必要はなくなります。このアプローチの完全な例を、レスポンシブWebデザイン技術を使って作成してみたいという人がいれば、ぜひ教えて頂きたいです。
このオフキャンバス・パターンは興味深いです。なぜなら、小さな画面で利用するときでも、コンテンツやナビゲーションが並ぶ長いページをスクロールしなくて済むからです(注1)。その代わり、セクションは分離・分類でき、必要なときにアクセスできます。
今回と関連したトピックとして、最近、Brad Frostがレスポンシブデザイン・ナビゲーションのソリューションを分類したものがあります。
(注1) Yahoo!ホームページのデザイン変更(2008年)に使われたこのパターンの変化形に私が深い愛着を持っていた、という理由もあります
本日7/27, 7/29, 7/31, Luke Wroblewskiが来日セミナー開催予定です！7/29(日)はTAMコワーキングスペースです。