海外サイト UXColective で公開された Responsive grids and how to actually use them: common UI layouts by Christie Tang より許可をもらい、意訳転載しています。
この記事は、デザインの要望やニーズに合わせたグリッドレイアウトの使い方を、実際にレスポンシ・グリッドを利用した参考サンプル例と一緒に学ぶ基本ガイドです。
Webレスポンシブデザインにおけるグリッドの基本的な使い方がわからないひとは、まずパート1でグリッドの使用方法を確認しておくと良いでしょう。
デスクトップ向けのウェブサイトが、スマートフォン向けモバイルサイズまでどのように変化、スケールダウンするべきか自然とテクニックが身につきます。
1カラム・レイアウト
別名フルページ・レイアウトとも呼ばれ、もっともシンプルなレイアウトで、ランディングページに使用されます。
ブランドや製品プロダクトのメッセージを強調するために、大きな画像を配置したスペースが特長。1カラムレイアウトに並べられたコンテンツは、個別のモジュールとして機能し、表示したい順番に並んでいるため、モバイル向けのレイアウト、スケーリングも容易です。
ユーザーの感情に伝わりやすいレイアウトであるため、ホームページや使い方ガイド、新製品の紹介などが一般的な使い方と言えるでしょう。
コンテンツによっては、レイアウト全体のグリッドとマッチしないものもあるかもしれませんが、メインコンテンツとして全体のレイアウトに12カラムを使用します。
WeWorkのホームページ（左）、12カラムのグリッドを重ねた状態（左）
カラムを表示し、コンテンツ要素ごとに整理した状態
グリッドの使い方
上記サンプル例では、ウェブデザインにグリッドを使用しているのがはっきりと分かります。各コンテンツごとに分割されていますが、すべてが揃っています。
注目したいテクニックとしては、要素間のパディングの幅を統一し、外側のエッジも同じ幅にすることで見やすくすることができます。また、横に広がる「行」をベースとしたレイアウトを保ったまま、ユニークな方法でページを分割できるメリットも。
参考サンプル例
ここでは、1カラムレイアウトを採用した具体的な参考サンプル例をいくつかまとめています。
親要素の中にある文字テキストや画像、ボタンなどの子要素が、どのように整列されているか確認してみましょう。全体の親要素は、ひとつのメインコンテナに並べられているのがわかります。
Abstract（左）、OneMedical（中）、Apple（右）
2カラム・レイアウト
Redditsの8-4で分割された2カラムレイアウト
おそらく、もっとも一般的なレイアウトのひとつで、文字テキスト列をあまり長く表示しないメリットがあります。また、スクロールしなくても閲覧できる領域、「アバーブ・ザ・フォールド（Above the Fold）」よりも上に要素を配置することができ、このサイドバーにはナビゲーションメニューや広告、Call to Actionボタンなどが利用されます。
メインコンテンツには8カラム、サイドバーに4カラムを使用するのが一般的で、どちらも偶数のため、必要に応じてメインコンテンツを並び替えやすい点もポイント。
「8カラムにすると、デザインするスペースが大幅に減りそう。」と疑問に思うかもしれませんが、文字テキストを横幅いっぱいとなる12カラムすべてに並べることは避けましょう。
これはタイポグラフィーの基本原則であり、快適に読み取ることができる文字列の幅は、16pxで約60〜80字（日本語の全角で30〜40字）で、デスクトップ画面では、8カラム以下となります。
1カラムレイアウトでも、コンテンツは中央揃えで配置され、余白スペースを含んだ最大幅を保っています。「スペースが少ない」ことは問題ではなく、デザインをより良くしてくれるでしょう。
このレイアウトには非常に用途が広く、長文で多くの文字テキストを読む場合にも便利。ブログや説明、FAQ、使い方ガイドなど、ユーザーが便利と感じるページづくりに最適です。
参考サンプル例
左カラムを各チャプター、レッスンへのナビゲーションメニューとして活用
よくある質問を左側にまとめ、現在閲覧している項目を右カラムに表示しています。
Merriam-Websterの辞書では、右カラムに興味のありそうな項目、ポイントをリソースとして表示しています。
右サイドバーにはスポンサー広告や関連記事などを表示しています。
レシピサイト Food&Windでは、ウェブサイトの滞在時間を伸ばすために、右カラムには他のレシピをサムネイル付きで表示しています。
モバイル
モバイル表示では、階層がとてもシンプルになります。サイドバーに表示されている内容に応じて、どのようにコンテンツを並べるか検討しましょう。
サイドバーがナビゲーションメニューやFAQなど、ユーザーの悩みに答える項目がある場合、メインコンテンツがはじまる前に、まず配置するべきでしょう。
サイドバーが、関連記事や他のコンテンツの提案などである場合は、メインコンテンツの下に配置しましょう。
デスクトップでサイドバーに表示されていたナビメニューはメインコンテンツの上に（左、中）、他の関連レシピはメインコンテンツの下に配置されています。（右）
3カラム・レイアウト
3つの異なるカラム列を扱うため、どのように配分するのかいくつかの選択肢があります。まずは、もっともシンプルな4-4-4のグリッドレイアウトを見てみましょう。
4-4-4 配分
多くの画像を投稿する必要があるときに適したレイアウト。幅いっぱいまで画像を表示するかはあなた次第。以下では、両方のサンプル例を確認できます。
グリッド横幅いっぱいで画像をタイル状に並べたUnsplash（左）、画面幅いっぱいをつかってサムネイルを端から端まで表示したDribbble（右）。
3-6-3 配分
コンテンツ量が多く、何度もスクロールする必要がある場合のレイアウトで、ユーザーができる「他のこと」を強調したいときに便利。特に、メインコンテンツに横幅があまり必要ないときに最適。
以下のサンプル例では、3-6-3のカラム配分が行われています。むらさき色のラインは、コンテンツが配置されているグリッドを示し、塗りつぶした部分がコンテンツに追加されたパディングとなります。
ここでは、見出しタイトルと大きなCTAボタンが、3カラムレイアウトの前にヘッダーとして機能します。よく見ると、6カラムの中央揃えで配置されているのが分かります。
モバイル
2カラムレイアウトと同様に、コンテンツをどの順番で表示したいか決定する必要があり、これは情報の重要度に応じて異なります。
以下サンプル例では、タブレット表示のときに左側のサイドパネルが非表示となります。モバイル表示では、右側のパネルが絞り込みフィルタボタンとして組み込まれています。ボタンをクリックするとセクションが展開され、コンテンツが下へと移動します。
もし左側がナビメニューの場合、メインコンテンツの上に重ねるか、ボタンクリックによるスライド表示、またはナビメニュー用にフッターを固定させてみるのも試してみましょう。
親コンテナが6カラムで配置されたプロフィールカード（左）、ハイライトなし（中央）、グリッドなし（右）
2-5-3 配分
FacebookやTwitterが使用されているレイアウトで、メインコンテンツはフィード閲覧に長いスクロールが必要となります。左右でカラム数が異なっている点もポイントで、左側のパネルはナビメニューとして、右側には誕生日やハイライト、リマインダー、トレンドなどさまざまなアイテムを表示しています。
実はTwitterでは10カラムレイアウトが採用されており、2-5-3にレイアウトが配分されています。
Twitterのホームページで採用されている2-5-3配分
12カラムはもっとも標準的なグリッドレイアウトですが、それを必ずしも利用する必要はありません。製品によって、ページごとに異なるグリッド設定が必要な場合もあるでしょう。
基本的に、グリッドは好きなように分けることができます。サイトの目的をはっきりとさせ、どの情報の優先順位が高いのかじっくり考えてみましょう。
たとえば長文テキストの多いブログなどの場合、3カラムレイアウトはあまり適切とは言えないでしょう。その代わりに、ナビメニューをページ上部に配置し、2カラムレイアウトを利用します。
固定パネル
右側のパネルが固定表示され、ユーザーが予約しやすいよう工夫されています。
固定パネル（Sticky Panel）とは、名前の通り固定された領域がある場合、またはユーザーがページをスクロールしたときに追従するパネルを指します。
固定パネルに配置する内容としては、ユーザーに行動を促すメッセージなどの静的なものから、情報を変更すると更新される動的なものがあります。
レイアウト自体は2カラムレイアウトと同じですが、固定されるコンテンツはごくわずか。統一感のあるデザインは、ユーザーの次の手順、ステップを認識させ、コンバージョンを増加させるのに重要です。
通常の2カラムレイアウトと比較して、固定パネルはユーザーができる操作が限られている場合に最適と言え、固定しないカラムは複数の操作を選択できるときに向いています。
グリッドシステムを使用してデザインする場合、パネルはグリッドの内側に配置する必要があります。デスクトップでは、パネルは外側の3カラムまたは4カラムとなります。残りは、左右の表示に関係なく、8または9カラムでスクロール可能としましょう。
8-4 の配分でカラムが分けられており、右の4カラムが固定パネルとなります。
重要ポイント: 固定パネルをデザインするときは、すべてのデスクトップ画面で表示できるように、パネルをできるだけ短くする必要があります。クリックで展開するなど、動的な場合はコンテンツが途中で切り取られていないか確認しましょう。
モバイル
デスクトップでは、2カラムレイアウトと同じでしたが、サイドパネルが短くなっていることに気付くでしょうか。モバイルでの違いは、パネルはフッターに固定、移動されます。別のオプションとしては、コンテンツの中央に別のコンテンツとして組み込むことも可能です。
デスクトップでの固定パネルは、モバイルでは固定フッターとして活用されています。
上記サンプル例では、デスクトップで使われている固定パネルは、モバイルでは固定フッターへと変化します。ユーザーが「予約」ボタンをクリックすると、予約の詳細がモーダルパネルで表示されます。
固定フッターはごくシンプルに整理されており、ユーザーがボタンをクリックすると、モーダルが表示または、スライドメニューが表示されます。
ウェブアプリ
一部のサイトでは、画面の端（通常は上と左）に固定されたナビゲーションメニューがある場合があります。これらの固定ナビメニューは、ユーザーがアプリを使用していると感じるのに役立ち、ユーザーが異なる目的を行き来する必要がある、アクションベースでのUIデザインに重宝します。
上記サイトでは、左と下に固定パネルを使用して、ウェブアプリのようなUIデザインを実現しています。
実際のウェブアプリの設計では、固定ナビゲーションメニューはグリッドに属しません。固定ナビゲーションメニューのサイズも固定されており、ウィンドウ幅に応じてグリッド内のコンテンツのみが動的にサイズ変更します。
Googleカレンダーのウェブアプリには、上部固定のヘッダーとカレンダーを制御する左ナビメニューが実装されています。
参考サンプル例
Slack
Google Keep
YouTube
モバイル
通常、ウェブアプリにはモバイル用のアプリが別に用意されているケースが多いでしょう。モバイルアプリを使用することで、Webに比べてはるかに多くのことが可能となります。
モバイル端末では、メニュー項目がたくさんあるため、ハンバーガー型アイコンをつかって項目をまとめる傾向があります。デスクトップでサイト全体へのナビメニューがページ上部にある場合でも、モバイルでは上部または下部に固定されている可能性があります。
ページの下部に固定することで、手の位置に近くなり、よりアクセスしやすくなります。そのため、上部固定ナビメニューを廃止するサイトも増えています。
モバイル向けに最適化されたSlack（左）、Google Keep（中）、YouTube(右）
上記サンプル例のひとつSlackでは、左上のアイコンにナビメニューを非表示にし、Google Keepではハンバーガーメニューを使ってナビメニューを非表示、新しいメモを追加できるボタンを導入。YouTubeでは、固定フッターとしてナビメニューを実装しています。
さいごに、。
これですべてというわけではありません。グリッドを活用した素晴らしいデザインの作成方法は、この他にもたくさんあります。
カラムの溝にあたるガターをなくしたり、Twitterのデスクトップ版のように、12カラムを使用しなくても構いません。3カラムレイアウトを、ページ先頭から導入する必要もありません。
今回ご紹介したサンプル例は、グリッドを利用したデザインのほんのはじまりで、階層について考えるのにきっと役立つでしょう。
この記事では、レスポンシブグリッドの技術的なテクニックを中心にご紹介しました。より重要なことは、デザインについてじっくり考え、Webページの目的に合った視覚的なアイデア、解決法を提供することです。
優れたユーザビリティとは、見た目が良いだけでなく、どのように機能し、スケーリングや変換できるかが鍵となります。
参照元リンク : Responsive grids and how to actually use them: common UI layouts by Christie Tang – UX Collective
