編集用およびWeb用レイアウトのためのグリッドデザイン
優れたレイアウトは、すべて目に見えない何かに支えられている。グリッドデザインとは、目に見えない足場のようなものだ。それは無言の意思決定者であり、視線がどこへ向かい、どのくらいの速さで動き、そして何を記憶に残すかを支配する。これはあなたも既に知っていることだろう。しかし、グリッドが存在することを知ることと、意図的にそれを使うことは、まったく別物だ。
編集デザイナーとUI/UXの実務家は、それぞれ異なる視点からレイアウトグリッドに取り組み、異なる制約と異なる自由度を抱えている。とはいえ、その根底にある論理は同じだ。雑誌のスプレッドを制作する場合でも、デザインシステムを構築する場合でも、あるいは十数ものブレークポイントにわたって一貫性を保つレスポンシブなレイアウトグリッドを作成する場合でも、適切に選ばれたグリッドは単にコンテンツを整理してくれるだけではない。それはリズムを生み出し、階層関係を明確にする。そしてレイアウトにゆとりを与える必要がある時には、意図的に崩すことができるような構造も与えてくれる。
この記事は、1年次に学んだ基礎知識ではなく、現役のデザイナーが実際にグリッドについてどう考えているかについて書かれたものだ。
列数の決定は戦略的な判断である
12列グリッドがウェブデザインで主流となっている理由はただ一つ、分割しやすいからだ。12は、余りが出ないよう、半分、3分の1、4分の1、6分の1に分割できる。その柔軟性のおかげで、1つのレイアウトグリッドで、1つのデザインシステム全体にわたって、まったく異なる種類のコンテンツに対応できる。
編集関連の印刷物では、歴史的に異なる論理が重視されてきた。雑誌のスプレッドは、多くの場合5、7、あるいは9列となっており、余白はページ全体の幅ではなく、本文の列幅に合わせて決められている。この非対称性が特徴だ。狭い外側の列がマージンによる注釈領域となる。2つの広い列と1つの狭い列を組み合わせることで、追加のレイアウト作業を一切行わなくても、自然なサイドバーが形成される。
判断の分かれ目は常にこうだ。どのようなコンテンツを整理しようとしているのか、そしてそのコンテンツがどのような関係性を伝える必要があるのか、ということだ。慣例に従うのではなく、ここから始めよう。
単なる列ではなく、モジュールだ
多くのデザイナーは列単位で作業するため、横軸にはあまり注意を払わないかもしれない。規模が大きくなると、多くのレイアウトがそこで破綻してしまうのだ。モジュール式のレイアウトグリッドは、列構造に行バンドを追加し、水平方向と垂直方向の両方の配置を同時に制御するセルのマトリックスを形成する。
これは、テキスト、画像、キャプションが同じ基本論理を共有する必要がある編集場面において、極めて重要だ。画像モジュールの高さがちょうど2行で、キャプションが3行目にぴったり収まっている場合、手動で位置を調整する必要はない。それで十分正しい。グリッドがその役割を果たした。
Webインターフェースにおいて、モジュール的な考え方は、一貫性のある空間体系にすんなりと組み込まれるコンポーネントライブラリへと結びつく。カード、メディアブロック、データ表はすべて、同じ根本的なリズムを受け継いでいる。その結果、ただ寄せ集めたような印象ではなく、よく考え抜かれたレイアウトが生まれる。
ベースライングリッド、および多くのデザイナーがそれを十分に活用していない理由
列グリッドは、あって当たり前の機能だ。ベースライングリッドこそが、タイポグラフィの精度が実際に宿る場所であるにもかかわらず、多くのデザイナーはそれを後回しにしがちだ。
ベースライングリッドは、すべてのテキストを共通の縦リズムに統一する。本文、キャプション、引用文、見出しはすべて、同じ基本のリズムに乗っている。うまくいっているときは、目立たないものだ。そうでない場合、レイアウトはどこか落ち着きのなさを感じさせるが、その理由を正確に説明できる人は誰もいない。
一般的なアプローチは、本文の行送りをベースラインとして設定し、そこから他のすべての要素を調整していくことだ。本文のフォントサイズを16px、行送りを24pxに設定すると、ベースラインは24pxになる。見出しは、最も近い倍数に切り下げられる。各セクション間の間隔は、同じ値の倍数になる。機械的な響きだが、目には調和として映る。
Affinityのレイアウトスタジオが、これを具体化している。[表示] > [ベースライングリッド] でベースライングリッドを有効にし、 [グリッド間隔] を本文の行送りに合わせて設定する。リンクされたフレームや独立したフレーム内のテキストは、その共通のリズムに自動的に合わせられる。本文がかなりの量あるプロジェクトでは、これを活用してみてほしい。そうすれば、決断がどれほど素早く下せるようになるか、すぐにわかるはずだ。行送りの値がどのように機能するかについてさらに詳しく知りたい場合は、トラッキング、カーニング、行送りに関するガイドを参照してほしい。
意図的にグリッドを打ち破るべき時
優れたデザイナーと傑出したデザイナーを分けるのは、グリッドに従う方法を知っているかどうかだけでなく、創造的な判断としてグリッドを無視するべき時期を知っているかどうかだ。
グリッドデザインを崩すことは、その根底にある構造がしっかりしている場合にのみ、意図的なものとして受け止められる。列の枠を越えてマージンに「裁ち落とし」された見出しは、そのマージンが意図的に設けられたものであるため、意外に感じられる。3つの列にまたがる画像は、他のすべての要素が2つの列に従うため、エネルギーを生み出す。ルール違反は、鑑賞者がその違反を察知したときに初めて成立する。
編集のコンテキストでは、逸脱は通常、主要な画像、際立った引用文、あるいは見開き単位のタイポグラフィ的な演出のために用いられる。UIデザインにおいて、これらはヒーローセクション、機能の強調表示、オンボーディングフローなどで用いられる。こうした場面では、インターフェース全体でその視覚的な重みを繰り返すことなく、最大限の視覚的な重みを演出したくなる。
「節度」がキーワードだ。一度使えば、その存在感を際立たせる。4回使えば、ただの雑音だ。
レスポンシブなレイアウトグリッドの実践
レスポンシブなレイアウトグリッドは、単に折りたたみ可能なデスクトップ用グリッドではない。それは、うまく作られていないレスポンシブなレイアウトグリッドだ。
これをブレークポイントではなく、列スパンで考える
真の課題は、単に画面サイズに合わせて圧縮するのではなく、ブレークポイントを超えて一貫性を持って表現される空間的論理を設計することだ。12列のデスクトップ用グリッドは、通常、タブレットでは8列に、モバイルでは4列に変わるが、どの状態でもコンテンツのグループ分けが読みやすいままでなければならない。デスクトップでは12列のうち4列にまたがる要素が、モバイルでは4列のうち4列すべてにまたがる必要がある場合がある。つまり、幅の比率は同じでも、コンテキストによってはまったく異なる印象を与えることになる。
メンタルモデルの転換とは、ピクセル幅で考えることから、比例関係で考えることへの移行である。コンテンツグループには、固有の空間的論理がある。まずその論理を特定し、それを維持できるブレークポイントを定義する。ブレークポイント優先ではなく、列スパン優先で作業すると、より一貫性のあるレスポンシなブレイアウトグリッドが得られる傾向がある。
制約が最も多いビューポートを最初に設計する
まずはモバイルから始めよう。4列のグリッドという制約は、容赦なく優先順位をつけることを強いる。画面に映し出されるすべての要素が、そこに存在するにふさわしいものだ。だからこそ、複雑なデスクトップレイアウトを無理に圧縮しようとするのではなく、むしろ拡大しようとする気持ちになる。
流動グリッドと固定グリッドの比較
固定グリッドでは、絶対単位で指定された静的な列幅が使用される。流動グリッドでは、列をパーセンテージで表現するため、ビューポートのサイズに応じてレイアウトが比例して伸縮する。どちらも普遍的に正しいわけではない。
固定グリッドは、データ量の多いインターフェースや金融ダッシュボード、あるいはピクセルの位置合わせが極めて重要なデザインなど、正確な空間制御が求められる場面で効果を発揮する。流動グリッドは、テキストの再配置が想定され、読みやすさがコンテナに合わせて調整されるべき「コンテンツファースト」のレイアウトにおいて、より効果を発揮する。
ハイブリッド型のアプローチがますます一般的になっている。固定された余白と最大コンテナ幅を備えた流動的な外枠構造は、固定グリッドの可読性の限界を維持しつつ、流動グリッドならではの比例的な柔軟性を提供してくれる。これはレスポンシブなレイアウトグリッドにとって最も実用的な基礎となる。コンテナに最大幅を定義し、残りはパーセンテージ単位の列に任せるのだ。
編集デザインにおけるグリッド：印刷からデジタルへの移行
印刷物の編集グリッドのデザインには、画面に転用する際に必ずしもそのまま適用するわけにはいかないルールがある。印刷物では、物理的なページがコンテナを定義する。基材が固定されているため、列、マージン、および余白も固定されている。ビューポートがない。スクロールがない。印刷用の資料を作成する場合は、当社の印刷デザインガイドにセットアップの全手順が記載されている。
デジタル編集業務には、別の交渉が必要だ。コンテナが不安定だ。読者は、27インチのモニターでも5インチのスマートフォンでも、同じコンテンツを目にする。グリッドは、出版物の雰囲気を保ちつつ、その両方に対応する必要がある。
最も成功している編集デザインシステムがたどり着く答えは、確固たるタイポグラフィのスケールを、比較的シンプルな列構造と組み合わせたものだ。それは、通常、デスクトップ版では6～8列で構成され、すっきりとした形で折りたたまれる。タイポグラフィの階層構造は、印刷物における複雑なグリッド分割が果たす役割を担っている。空白は、物理的なページめくりではなく、セクションの区切りを作るために、より積極的に用いられている。
また、デジタル編集では、印刷物では不可能な相互作用も可能になる。例えば、スティッキー要素、パララックス画像、スクロールによって表示されるコンテンツなどだ。これらは、純粋に空間的な意味合いというよりは、時間的な意味合いでのグリッド設計上の決定になる。意図的に使えば、これらは全面的な「裁ち落とし」スプレッドのデジタル版に相当する。
Affinityのグリッドツール
Affinityを使えば、列グリッド、ベースライングリッド、および文書全体のガイドを完全に制御できる。[表示] > [マージンとガイド] からレイアウトグリッドを設定する。ここでは、余白幅、列数、間隔、およびカラーを個別に定義できる。設定を一切失うことなく、ガイド表示とすっきりとした作業モードを切り替えることができる。
ベースライングリッドを設定するには、[表示] > [ベースライングリッド] を選択し、[グリッド間隔] を本文の行送りに合わせて設定する。リンクされた列や独立した列内のフレームテキストは、同じリズムに合わせて整列する。個々のテキストフレームごとに独立したベースライングリッドを設定することも利用可能で、キャプションや引用文が本文とは異なるサイズで表示される場合に役立つ。
ガイドは [表示] > [スナップ] 機能を使ってスナップさせることができ、手動で微調整することなく、要素をグリッドデザインに合わせて整列させることができる。空間的な一貫性が極めて重要なプロジェクトにおいては、これらのツールが余分な手間を省いてくれる。また、ピクセル単位の微調整ではなく、実際のデザイン上の判断に集中できるようになる。
グリッドデザインに関するよくある質問
レスポンシブなレイアウトグリッドとは何か？レスポンシブなレイアウトグリッドとは、ビューポートのサイズに応じて適応する、列ベースの構造のことだ。固定のピクセル幅を使うのではなく、コンテンツ間の関係を列スパンで定義するため、レイアウトは空間的な論理性を損なうことなく、デスクトップからタブレット、そしてモバイルへと論理的に再配置される。
流動グリッドと固定グリッドの違いは何か？固定グリッドでは、ビューポートのサイズが変わっても変わらない絶対的な列幅が使用される。流動グリッドでは、列がパーセンテージで表現され、コンテナのサイズが拡大・縮小するにつれて比例して伸縮する。ハイブリッドなアプローチでは、流動的な構造を、最大幅が固定されたコンテナと組み合わせることで、両方の長所を活かせる。
いつグリッドを破るべきか？それは、レイアウトが、意図的な視覚的中断、支配的な画像、際立つ引用文、あるいはタイポグラフィのハイライトを要求する時だ。ルールは一度破ってしまえば、それは意図的なものとみなされる。ルールを繰り返し破ると、一貫性がないように見えてしまう。
グリッドデザインは檻ではない。それは責任だ。優れたレイアウトは、レイアウトグリッドを十分に理解しているデザイナーによって作り上げられる。彼らはレイアウトグリッドを単なる回避すべき制約ではなく、意思決定のツールとして活用する。
長編雑誌のスプレッドをデザインする場合でも、コンポーネントライブラリを設計する場合でも、あるいは何十ものブレークポイントにわたって一貫性を保たなければならないレスポンシブなレイアウトグリッドを作成する場合でも、その基本となる原則は同じだ。何かを配置する前に、空間的な関係を明確にしておくことだ。それらの関係をグリッドに表現させよう。そして、その枠組みの中で、デザインにとってより良い結果が得られるのであれば、自信を持ってそれを打ち破ることに取り組めばいい。
Affinityは、レイアウトスタジオ、ベクタースタジオ、あるいはその両方で作業する場合のいずれでも、これらすべてを実現するためのツールを1か所で提供してくれる。Affinityのページレイアウトツールは直感的で、無料で利用できる。グリッドの準備が整った。何を作るかを決めるだけでいい。
