マルチデバイス対応に適した「可変グリッドレイアウト」

Webサイトにおいて、来訪者に与える印象を大きく左右する要素といえば、何を思い浮かべますか。画像や色使い、フォントなどとともに、大きく影響する要素として「レイアウト」もあげられると思います。
「レイアウト」、すなわち「コンテンツの配置」は、ユーザエクスペリエンスとユーザビリティに直接関わるのは言うまでもありません。この「レイアウト」の作成に役立つツールの一つとして、「グリッド」があります。そしてこの「グリッド」を利用して作成したレイアウトを「グリッドレイアウト」と呼びます。今回はアイデア次第で様々な可能性を生み出せる「グリッドレイアウト」について考察します。

「グリッドレイアウト」とは

グリッドレイアウト（grid layout）は、グリッドシステム（grid system）、グリッドデザイン（grid design）とも呼ばれ、Webページなどを設計する際の手法の一つです。「グリッド（grid）」とは格子(状のもの)、方眼(状のもの)という意味で、グリッドレイアウトは画面やページを縦横に分断する直線で格子状に分割し、ブロックを組み合わせて各要素の大きさや配置、余白などの画面構成を決定していく手法です。

もともとは新聞や雑誌などの印刷物のレイアウトでよく使われてきた手法ですが、Webサイトのデザインにも応用ができます。文章や画像といった構成要素の境界線がグリッド線に合うように配置することで、マージンや余白の取り方などが統一され、大きさの異なるパーツがたくさんあっても整理された印象を与えられます。

グリッドレイアウトを使う場合、Webページのレイアウトをコンテンツに合わせて最適なグリッドに分割する、というオリジナルのグリッドを作成することはもちろん可能です。一方、グリッドレイアウト用のテンプレートも数多く存在していますので、直接ダウンロードして利用することもできます。その中でも有名なのは「960 GRID SYSTEM」という、ページの幅960px（ピクセル）を基準にするグリッドシステムサービスがあります。

960pxを基準にする代表的な理由として、①最近のモニターは1024×768以上の解像度が標準となり、960pxは良い表示サイズとなる、②960という数字は多くの数字で区切ることができ、柔軟にグリッドレイアウトの需要に応えられる、があります。

グリッドレイアウトの展開 ― カード型グリッドデザイン

グリッドレイアウトの考え方を基本に、グリッドを使用して多様なレイアウト・デザインに展開することが可能になります。近年、各コンテンツがカード型に整列される「カード型グリッドデザイン」が多く見られるようになっています。その背景には、レスポンシブWebデザインやフラットデザインの流行の一因にもなっているスマートデバイスの普及があると言われています。しかしこのデザイン手法もメリットとデメリットがあり、採用する際には注意が必要です。

• メリット

  ・ 一度に多くの情報が見られ、コンテンツの一覧性が高い
  ・ 興味を引くポイントが多くなり、第二階層やリンク先へ誘導しやすい
  ・ コンテンツが多くても、形が揃っているため全体の統一性が保たれる
  ・ コンテンツの追加や更新が効率的に行える

• デメリット

  ・ コンテンツの量とデザインによって、来訪者は何をどこから見るべきか戸惑う可能性がある
  ・ 情報の更新頻度によって再度閲覧したい内容の所在を見つけにくい可能性がある
  ・ 同じカード型で情報提示しているため、明確な順位や区別をつけるのが難しい

商品紹介や事例紹介、ギャラリーなどのような情報の順位差が少ないサイトは、カード型グリッドデザインとの相性が良いかもしれません。情報の重要度の差を表したい場合はコンテンツのサイズ調整でメリハリを付けたり、カテゴリー別の情報の所在をわかりやすくしたい場合は枠や背景の色で区別を付けたりするような工夫が必要です。

カード型グリッドデザインのサイトにおいて、更に画面サイズの変化によってレイアウトが変わるかどうかで、「固定グリッドレイアウト」と「可変グリッドレイアウト」の2種類に分けられます。ここからは、「可変グリッドレイアウト」についてもう少し詳しくご紹介します。

可変グリッドレイアウト（Fluid Grid Layout）

可変グリッドレイアウトを説明する前に、同じくWebサイト制作における手法である「リキッドレイアウト（Liquid Layout）」、「レスポンシブWebデザイン（Responsive Web Design）」について少し触れておきます。この2つの手法は、ブラウザの幅によってページが可変するという意味で、可変グリッドレイアウトにとても近い関係にあります。

Webサイトのレイアウトを考える際に、多くの場合は「カラム数」と「固定か可変」を組み合わせて決定していきます。リキッドレイアウトはその可変レイアウトの中で最もベーシックなもので、要素の単位を%で指定することにより、ブラウザの幅に合わせてコンテンツの幅・位置が相対的に変化するレイアウトです。マルチデバイスの対応に適しており、画面の幅が変わっても横スクロールバーが出ないなど、ユーザビリティが確保できるといったメリットがあります（例：「Wikipedia」）。

しかし無制限に可変する状態となると、解像度が極端に高いディスプレイ上では横幅が広がりすぎたり、幅を狭くしたらコンテンツが縦長になり過ぎたりする時、逆に文章が見づらくなってしまう欠点もあります。その場合、幅の上限と下限を指定することで見やすさをある程度維持することができます。このような可読性を改良したリキッドレイアウトは「フレキシブルレイアウト（Flexible Layout）」と呼ばれています。

最近話題のレスポンシブWebデザインも、ブラウザの幅に合わせてコンテンツの幅が相対的に変化する点ではリキッドレイアウトと同様ですが、大きな違いとしては、画面サイズによって一部のコンテンツが消えたり、なかったコンテンツが表示されたり、ナビゲーションのデザインパーツが差し替わったりするなど、各要素のサイズや位置だけでなく、要素そのものが変化するといった点があります。（レスポンシブWebデザインについて詳しく知りたい方はこちらのコラムをご覧ください。

上述の可変性を持つリキッドレイアウトやレスポンシブWebデザインなどの“可変仕様”に、グリッド線に沿ってブロッグごとに画像や文字を配置するグリッドレイアウトを合わせたのが、「可変グリッドレイアウト」です。一定のグリッドに沿ってカード型のコンテンツを並べ、画面の幅の変更に応じてコンテンツの再配置が行われます。再配置される際に動きなどの視覚効果を持たせることも可能です。

この可変グリッドレイアウトはリキッドレイアウトと同じ環境対応型レイアウトとして注目されていますが、再配置によってコンテンツの位置が変わってしまうのは、ユーザビリティに悪影響を及ぼすのではないかとの懸念もあります。

グリッドレイアウトの応用

今までの内容を踏まえて、グリッドレイアウトで構成されているWebサイトの例を2つご紹介します。

【We make apps | Etch】

こちらはイギリスのあるアプリ制作会社のホームページです。可変グリッドレイアウトが用いられ、全体的の色味は暗めですが、温もりを感じさせるモダンな雰囲気が漂います。訪問する度にほとんどのブロックの位置はランダムに変わりますが、会社説明のブロックはほぼ定位置にあるため、変化による新鮮さを楽しんでもらいつつ、何をする会社なのかをしっかり伝えています。ぜひブラウザのサイズを調整して動いていくレイアウトをご覧になってみてください。

【MORINAGA MILK】

こちらは森永乳業の英語版サイトです。日本語版サイトと統一感を持たせながら、カード型の可変グリッドレイアウトに構成されています。カード型と言っても、各ブロックは近楕円状になっており、よく見ると、サイズの小さいブロックの形が常に微妙に変化しています。スクロールで上下動かしますと、引っ張られた後の反動を受けているような動きもリアルに設計されています。情報のカテゴライズを明確にするため、左側のグローバルナビと連動し、同じアイコンと色で情報の分類をしています。違うブラウザのサイズに柔軟に対応していますので、レイアウト全体の変化はもちろん、ブロックの動きにもぜひ注目してください。

まとめ

Webページに引かれた見えないグリッド線に沿ってコンテンツを配置していくことで、レイアウトに秩序を生み出すことができます。グリッドは画面構築の手助けとなるツールであり、決してデザインの自由を束縛するものではありません。グリッドで規則性を持たせつつ、部分的に「崩し」や「遊び」の要素を取り入れるなど、アイデア次第でいくらでも多様な表情を見せてくれます。これからもグリッドレイアウトがもたらすデザインの可能性に引き続き注目していきたいです。

 

■本コラムの元記事はこちら
マルチデバイス対応に適した「可変グリッドレイアウト」

 

Webやアプリに関するコラムを配信しています！

■株式会社マイクロウェーブ

株式会社マイクロウェーブは、Webを活用した事業戦略立案、マーケティング、
Webサイト構築、Webシステム開発から、スマートフォン/タブレット用アプリ
ケーションの開発等を行っています。

HP： http://www.micro-wave.net/