デザイナーの仕事の構造と背景の根本的な考え方として、私たちは自分が作りたい要素のことばかり考えてしまい、グリッドの有効性を看過してしまいがちです。多くの伝統的なアーティストは今でも、まずは縦横に薄い線を引いてから作品を描いています。作業環境を最大限に活用し、より精確に制作するため、デザイナーにもこれに対応するツールがあります。それが、グリッドシステムです。
グリッドの由来
統制の取れたデザインを作るためのもっとも簡単な方法のひとつが、グリッドシステムです。元々は印刷レイアウトのために考えられたもので、実用性が証明されているテクニックです。テクノロジーに頼らずしかも安価であるということは、デザイナーにとって素晴らしいリソースとなります。あなたのオフィスでも指折りのツールとなるでしょう。インタラクティブデザインにおけるグリッドは、画面サイズの異なる複数のデバイスにおいて、一貫した体験を提供するのにも役立ちます。慣れ親しんだ機能が期待通りのレイアウトで並んでいれば、ユーザーは満足するでしょう。
グリッドシステムを使えば、連続した行と列に基づいて要素を配置しやすくなります。デザイン全体を通して、列を基準にした構造の中に、テキストや画像、さまざまな機能を一貫した方法で配置することができます。すべての要素は、すぐに見つけられ、他の箇所にも複製できます。地図に書いてあるグリッドを考えてみてください。島や町、湖などは、南北および東西の座標の組み合わせで決まる場所に描かれます。これらは、別の地図上でも同じ場所に現れます。GPSは私たちを誘導するためにこれらの座標を使っています。もしグリッドシステムがなかったら、私たちは現在地や進むべき方角も分からず、パニックに陥ってしまうでしょう。
グリッドシステムは、初めは紙に手書きする際に使われていましたが、その後に印刷物のレイアウトを整えるために使われるようになりました。印刷されたページとインターネットのページには共通点が多くありますから、これをWebやアプリのデザインにも使えることは当然です。インターネットのページは情報の扱い方が違いますし、画面のサイズも変化するので、グリッドシステムを作ることは物理的なページよりも少し複雑です。しかし、ありがたいことに、原則は同じです。
グリッドシステムを使うことに反対意見が無いわけではありません。デザイナーの中には、グリッドのせいでクリエイティビティが制限されると考える人もいます。それは確かにそうかもしれませんが、情報を整理するためにはグリッドシステムが非常に効果的なので、多くのデザイナーが日頃からこれを採用していることは認めなければなりません。
最高のレイアウトとは、コンテンツから注意を逸らすことの無いレイアウトです。グリッドシステムは数学的に正しい構成なので、そのようなレイアウトの代表例なのです。
デザインの原則としてのグリッド
13世紀フランスのアーティストであるVillard De Honnecourt氏は、固定比率に基づいたマージンを使って印刷レイアウトを制作するために、黄金比とグリッドシステムを融合させました。この手法は現代においても有効であり、多くの書籍や雑誌がこれを採用しています。出版者、編集者、そしてデザイナーがこの伝統を墨守するのに努力を費やしているのは、ただ単にこれが最善の方法であるからではなく、他にも大きな理由があります。
読者（ユーザー）は、あらゆるものが適切な場所にあることを期待します。人間の目は要素に引き付けられるものであるということを忘れないでください。混乱させられたり、予想もしていなかった問題に直面すると、すぐにパニックに陥ってしまいます。
著作権者: Jason Prini. 著作権番号: CC BY-NC-SA 2
グリッドがどれだけ効果的なのか、簡単な実験をしてみましょう。適当な白紙を２枚用意して、一方に４つか５つの形をランダムに描いてください。きちんと描くとか、きれいに並べるとかいうことは気にしないで、シンプルなイラストで結構です。描き終わったら、それを２枚目の紙に同じように写してください。紙を重ねて上からなぞるというズルはダメですよ。あなたがどんなに鋭い目と確かな腕を持っていたとしても、最初に描いた形すべてをまったく同じ場所に写すことは不可能だと気づくでしょう。
この実験の後半は必須ではありませんが、ポイントを理解するためには有効です。方眼紙やグラフ用紙を２枚使って、同じことをしてみましょう。ガイドがあることで、１枚目をコピーすることがずっと簡単になるはずです。この特別な紙を区切るグリッドのおかげで、実に正確なコピーを作ることができるようになるのです。行と列の数に目を慣れさせることができれば、ほとんどコピー機のように完璧に、フリーハンドで複製できるようになるでしょう。
この記事のトップにあるイメージは、ヘッダー、フッター、左右のマージンという、印刷されたページの構成要素を示しています。デザイナーはマージンの内側に同じ大きさのカラムを作り、この各カラムの間には「ガター」と呼ばれるスペースが存在します。ページは複数のカラム含むことができるので、デザイナーはほかのコンテンツとの位置関係を整えるために、イメージやテキストといった要素をそれらのカラムの中に配置します。イメージのエリアとパラグラフのエリアはカラムの中で重なることもあります。
垂直方向のグリッド線がこのような便利なカラムを作り出すのと同様に、水平方向のグリッド線はデザインにおける要素の高さのガイドとなります。この種のグリッドは「行」として知られています。私たちデザイナーは、各列の高さをカラムの幅の比率にしようとします。たとえば、カラム幅と行の高さの比率を３：２、４：３にするなどです。
ページレイアウト内でどのように行を等間隔に並べるのか、どのように各行の間にガターを入れるのかに注目してください。そうすれば、トップにある図に示したように、各行にページのコンテンツの要素を置くことができるのです。
インタラクティブデザインにおけるグリッド
デジタルの世界でも、印刷レイアウトの場合と同じように、ページ上の要素を整理する際にグリッドシステムが役立ちます。さらに、これはデザイナーがさまざまなサイズの画面にレスポンシブに対応する複数のレイアウトを制作するためのガイドとなります。
デザイナーはWebページのレイアウトを各カラム間の余白を使い、マージンで分割したカラムに分けます。カラムとマージンの幅は等しく、デザインのレイアウトに従ってコンテンツを１つ、もしくは複数のカラムに配置することができます。
グリッドを使うということは、デザイナーがコンテンツを整理するのに役立つような複数のカラムにデザインを分割することができるということです。たとえば、カラムは１つ、２つ、３つ、６つ、12、あるいはそれ以上作ることもできます。コンピューターの黎明期に比べると、今日の画面解像度は相当大きなサイズで閲覧できるようになっています。たとえそうであっても、960ピクセルの幅を使えば、多くのコンピューターの画面にデザインを正しく表示させることができます。また、デザイナーがモバイル端末のためにレイアウトを修正する際にも役立ちます。
上記の例は、http://960.gs にある960ピクセルの解像度に基づくグリッドシステムです。これは、自分だけのグリッドベースのWebレイアウトを作るための有用なガイドを提供しています。
ほかにもグリッドベースのレイアウトを作るための便利なツールが、オンライン上でも利用可能です。
- http://1200px.com/1200px：960ピクセルよりも幅が広いWebサイトのデザインをするためのグリッドシステムを構築するのに役立ちます。
- Golden Grid System：グリッドシステムを構築し、それをモバイル用のレスポンシブ表示に最適化するために役立ちます。
このほかの目的のためのグリッドシステムをもっと知りたい場合は、次のような Webサイトが役に立ちます。
- Ceswizardry grids
- Responsive Grid System
- Semantic Grid System
- RWDGrid（レスポンシブグリッドシステム）
- CSS Smart Grid
結論
長い間、グリッドシステムはライターを含むあらゆるジャンルのアーティストの役に立ってきました。13世紀のアーティストによって黄金比と組み合わされて以来、グリッドシステムは何世紀にも渡って改良を繰り返し、その信頼性を高めてきました。はじめは、ライターが手書きの文章をきちんと書き写すために役立っていましたが、その後、出版業界の普遍的なスタンダードになったのです。あらゆる出版社がユーザーにとって見やすく、かつ見たいものに沿ったコピーを作る際には、グリッドシステムを厳格に守っています。
著作権者: Lauren Manning. 著作権番号: CC BY 2.0
要素を配置することに関しては、グリッドを使えば非常に正確な配置ができます。
座標を表すグリッドによって位置がピンポイントで示される様子に注目すると、この原則は地図においてもっとも顕著であると言えるでしょう。より精緻な地図の製作が進んだことによって、航海者たちはまだ見ぬ未踏の地を見つけることができました。今では、緯度と経度を特定するグリッド線を使ったGPSのおかげで、私たちはどこへでも行きたいところへ行くことができます。
しかしながら、地図の「デザイン」は長い年月を経てもほとんど変わっていません。地図製作とはある種の科学です。しかし、数学的な正確さを持つこのグリッドというのは、アーティストにとっても絶対に必要な、素晴らしいツールなのです。長い歴史の中で、アーティストたちはもっとも美しいバランスを持つイメージを構想し、描くためにグリッド線を活用してきました。
簡単に作ることができ、実質的に費用もかからないことから、私たちWebデザイナーまたはアプリデザイナーにとっても、グリッドは作品をきちんと正確にレイアウトするための手段となります。交差する線によって作られたボックスに要素を挿入することで、グリッドは複数の端末に渡って一貫したユーザー体験を作り出すことができます。たとえば、コンピューターとスマートフォンで画面の大きさやレイアウトは異なります。異なるプラットフォームで表示されるよう調整ができるように設計することで、デザインを維持し、ユーザーが期待するように表示することができるのです。
デザイナーはカラム幅と行の高さの比率（３：２や ４：３など）によって定義されたカラムと行、そしてガター（ボックスの間のスペース）を使い、デザインの要素を最善の方法で表現します。
高解像度のスクリーンのおかげで、ますます印象的でリアルなデザインを作ることが可能になっていますが、960ピクセルのグリッドを用いることで、デザインはさまざまなコンピュータースクリーンや、携帯電話のようなモバイル端末で正しく表示されるようになるでしょう。しかし私たちには、求めるデザインにぴったり合うようにグリッドシステムの選択を自由に調整できるリソースが豊富にあります。
グリッドシステムを使ってデザインしたとしても、たとえば黄金比のような他の原則を忘れてはいけません。一貫性のあるユーザー体験を作るということは、複数の端末に渡って変わることの無い、ユーザーを満足させるような体験を作るということでもあります。よく知られているユーザーの目線の動きの傾向を踏まえて選択すれば、コンピューター、タブレット、あるいは携帯電話の、どの画面から見ても整った、ユーザーの目を引くようなデザインを作ることができるでしょう。
