グリッドでデザインが魅力的になる15の理由

grid-design

グラフィックデザイナーのツールボックスの必需品の1つとして、グリッド(画像等を配置する際の目安になる格子状の線)が挙げられます。

しかし、それはなぜなのでしょうか? なぜキャンバス上のデザインにグリッドラインを引くことがそれほど重要なのでしょうか?それは、どのデザイナーもデザイン作業を進めていく上で、グリッドが重要な理由を自分自身の答えとして持っているからです。手短に言うと、グリッドがデザインを構築するサポートをしてくれるためです。グリッドを使わないでデザインを進めようとすると、構図がなかなか決まらずに頭を抱えたり、膨大な時間を費やしたり、面倒な思いをしてしまいます。

グリッドを使用したデザインの世界を掘り下げようという気持ちが少しでもあれば、グリッドの効果的な使用法について学び、あなたのデザインツールにグリッドを足してみると良いでしょう。それでは、グリッドで飛躍的にレイアウトを改善できる15の理由についてみていきましょう。

01.   グリッドはコンテンツを整理する

グリッドの主な用途の1つは、デザイン要素をきれいに配列させ整理した状態を維持し、ページの見た目を整然とした素敵なものにすることです。

これは、グリッドがデザイン要素を1直線に配置させることをサポートしてくれるためです。これこそが、デザインにおけるグリッドの役割の大部分を占めます。 そのため、グリッドシステムを確立することで、デザイン要素を1列に並べるための仕組みを作ることができるのです。これを行うことにより、バランスよく調整の取れたレイアウトを自分自身で作成することができます。

たとえば、Twist Creative(アメリカの広告会社)のChristine Wisnieskiが手がけたグリッドベースのレイアウトを参照し、グリッドを使用し各デザイン要素を1直線に配置させることで、どれほどきれいな作品を作り上げることができるのかを学んでいきましょう。

 

Christine Wisnieski

グリッドを使用することで、それぞれの要素を1直線に配置できることを容易に見てとれるでしょう。 文字、イメージ、グラフィックや他のデザイン要素にも同じ効果を与えることができるのです。あなたが作り出したいと思っている大まかなアイデアを作り、そのアイデアに最適なグリッドを作成することから始めてみましょう。

02.   作業を速く進められる

私たちがより早くより良い結果や結論を導き出せるように色々と思いを巡らせている世の中では、「効率の向上」という言葉は耳に心地よく響くものです。そのため、グリッドを使用することで作業をより早く進め、より良いデザインを作成できるという点では、“グリッドの使用”は様々な音色が混ざり合い調和しているシンフォニーにように聞こえるはずです。

グリッドがデザイン要素の最適な配置場所や位置、縮小や拡大の必要性等のガイド(基準)として機能してくれることで、作業がスムーズに進み、デザインに要する時間を大幅に短縮してくれます。 それなりに良い構図を見つけるまで感覚的にデザイン要素を配置し続ける代わりに、グリッドは要素が自然な配置になるように手助けをしてくれるのです。

デザイナーのTroy Templemanは、「グリッドは、デザイナーが“どこにコンテンツを配置したら良いのか”というよりも、“どこに配置すべきか”を決めるサポートをしてくれるのです。ですので、デザインの作業プロセスをスムーズにしてくれます」とグリッドについて語っています。

グリッドを家の基礎や土台のように考えてみると良いでしょう。まず、家の基礎を作り、その上に床、壁や屋根といった家の全体構造を作っていくのです。

03.   文字をより生き生きとさせる

他のデザイン要素がない場合、グリッドと文字はうまく連携し合える2つのデザイン要素になります。ストロンググリッド(強調されたグリッド)は、太文字のレイアウトをよりこざっぱりと整理された印象にしてくれ、またボディーコピー(広告等の文章の本文のこと)をより読みやすくするサポートをしてくれます。

「ベースライングリッド」と呼ばれる方法を使用することで、グリッドがデザインの中の文字をより読みやすくしてくれます。これは、デザインを横断する細い横線を文章の下に表示させることで、簡単に表現するとノートの罫線のようなものです。このグリッドラインは、それぞれの文字を同じ高さに1直線に配置するときに役立ちます。

文字が一直線に配置されていなくても、ほとんどの人がそれに気付くこともないでしょう。しかし、無意識のうちにそのデザイン全体になんとなく散らかった印象を感じてしまうのです。手短に言ってしまうと、小さな変化や手間を加えることで、より大きな結果を得られるということです。

では、ベースライングリッドを実際に使用したデザインを見てみましょう。 それぞれのグリッドラインがどのように完璧に配列されているか、またそのグリッドラインによってどれ程のきれいな印字効果が作り出されているのかに注目してみてください。

 

Web Design Stuff

04.他のデザイナーとの共同作業がより楽になる

他のデザイナーと一緒に仕事をする機会が今までにあったでしょうか?もし他のデザイナーと一緒の仕事をする機会があったのであれば、グリッドは共同作業にありがちなコミュニケーションの行き違いによるストレスや苛立ちを和らげてくれるかもしれません。

既に記載したように、グリッドは様々な方法でデザインの基盤になる構造を作り、デザイン要素を配置する最適な場所を示すサポートをしてくれます。そのため、あなたが作成しているデザインに確立されたグリッドの設定があれば、新しいデザイナーがその作業に途中から参加してきたとしても、彼らが(グリッドの設定を理解してくれれば、ですが)設定内容を把握し、またデザイン要素を配置した意図を理解してもらうこともできるのです。

仮に、あなたが下に表示されたデザインの作業をしていて、別のデザイナーがこの作業に途中から参加し、3列目の文章の配置をその人物に任せる必要性が起きてしまったとします。

ここではグリッドシステムが設定されているため、誤った場所に文章を配置させてしまうことは少なくなります。 加えて、「列(コラム)の幅はどれぐらいになりますか?前の列からどれくらい離して文字を配置したら良いですか?」といったメッセージのやりとりも減ることになります。なぜかというと、このような質問の答えは全てグリッドに設定されていますからね。

他のデザイナーと一緒に作業する場合、説明をせずともあなたが希望するレイアウトを他の人に理解してもらえ、また最終的に作り上げたいデザインに合う最適なグリッドシステムを設定してしまうことです。また、その必要のない場所にデザイン要素を配置しないためにも余分な設定をしないことです。もし3列のみ必要な時は、13列の設定しないことが大切です。グリッドを機能的な状態で保ち、使用しやすいように維持しましょう。

05.   デザインのバランシングが簡単になる

グリッドが美しい理由は、一貫性があり均等であるからです。そのため、1つのデザインをいくつかの列に分割していく場合、対照的なレイアウトを作ることから始めてみましょう。ここからデザインを作り込んでいくと、どの列のデザインが他のデザインの印象を弱めているか判断しやすくなります。

Maan Aliが手がけたウェブサイトのデザインを見てみましょう。完璧なまでに左右対称なグリッドと均等なサイズの情報と画像ブロックを使用し、アンバランスなレイアウトにならないようにしている手法が見てとれます。

 

Maan Ali

同様にBraulio Amado(ブラウリオ・アマド:ニューヨーク在住、ポルトガル出身)が手がけたデザインは、全体のデザインを左右対称にしつつ完璧なバランスを維持するために、中央に配置した画像と文字を含めた3つのコラムグリッドを使用しています。このデザインはかなり力強い印象があり、容易に見た人を圧倒すると捉えられやすいですが、きれいにデザイン要素を配置し完璧なバランスで作られたグリッドが見る人にクールな印象を与えています。そのため、まとまりのないイメージにはなっていません。

Rolling Stone

06.   複数ページのレイアウトの一体感を高められる

グリッドは、複数ページのレイアウトに起こりがちな欠点を補ってくれます。レイアウトにストロンググリッドを構築することで、そのグリッドを複数のページやレイアウト間に展開することが可能になり、レイアウト全体の一体感をより簡単に保つことができます。

Rolling Stoneのホームページを見ていきましょう。それぞれに複数のページがあり、ページ毎に異なるコンテンツの構造や構成があります。どのようにして、全体の一体感や一貫したレイアウトを維持しながら、各ページのデザインを最高な組み合わせで機能させているのでしょうか?

Rolling Stoneの音楽ページトップページを比較した下の画像を見てみましょう。 ウェブサイトのデザインに4つのコラムグリッド構造を使用することで、それぞれのページに一体感、きれいさ、親しみやすさが生じるのです。しかしよく見てみると、それぞれのページを最大限に機能させるために必要なスペースを設けているのです。

 

http://www.itsnicethat.com/articles/braulio-amado-bloomberg

複数ページのレイアウトにおける一般的なグリッドの使い道は、スタイルガイドといったマニュアル(使用の手引き)に用いることです。これらは教育目的に使用されているマニュアルのため、直線的なデザインを施す必要があります。そのため、グリッドシステムを使用する意味が生まれるのです!下に表示されているBosphorus のMike Collingeが手がけたスタイルガイドを見てみましょう。グリッドの使用に一貫性があることに注目してください。

 

Mike Collinge
Mike Collinge

 

もしあなたが複数のページにわたるデザインが必要なプロジェクトに取り組んでいるのであれば、このページに目を通すことを忘れないようにすると良いでしょう。

07.   グリッドは視覚的な階層を強化する

グリッドベースのデザインについての一般的な考えは、グリッドを使用するということは、デザインの各要素を同じサイズのブロックに分割し、それをほぼ完全にオーバーライド(上書き)することを意味します。

私たちは誰でもデザインにおける階層の重要性というものを理解しているものです。またグリッドを使用することで、階層のプロセスにかかる時間を短縮し、より簡単にもしてくれます。

それではまず、下に表示されているNASAのホームページのデザインを見ていきましょう。 NASAはウェブデザインにしっかりと構築した4列のグリッドを使用し、ウェブの中でも重要な画像を複数の縦横の列を使用した上で、下の階層と情報を伝え合うようにしています。トップ記事の「Halloween Skies to Include Dead Comet Flyby(死んだ彗星も地球に接近するハロウィンの空)」では、縦横2列を使用しており、このウェブデザインの中で最も見る人の注意をひいています。その他の重要な記事も同様に複数の列にわたっており、それらも見る人の注目を集めています。

 

NASA

活字も同様な働きをします。 デザインの基礎にグリッドを使用し、複数の列にわたってスケーリング(画像等を縮小拡大すること)をすることで、特定のデザイン要素に見る人の注意を向けたり、反対に逸らしたりすることができます。下に表示されているDavid Tang(デビッド・タン)が手がけた参考デザインでは、数字の23や30のようにスケール(ここでは拡大)とグリッドアライメントを用いることで、見る人の注目を集めています。

 

David Tang

08.   ごちゃごちゃしたレイアウトとはさようなら

グリッドは、ひどくごちゃごちゃとした見た目のエフェクトをデザインから取り除いてくれる画期的なツールです。これは、あなたが追い求めているエフェクトでなかった場合に特に役立ちます。また、余白の使用をすることですばらしい効果を実感できるでしょう。

基本中の基本的の定義で、余白とはデザインの周りのスペースのことを指します。 一般的なことを言えば、より狭い余白にすることで、デザインはより堅苦しく散らかったような見た目になり、反対に、余白を広く取ることでデザインはより整理されたきれいな見た目になるのです。

下に表示されたイメージを見てください。余白が濃いグレーで縁取られています。

 

Medium

 

そのため、グリッドを使用すると頻繁に余白も使用する機会が増えます。余白を取り入れることで、より開放感のあるきれいなデザインを保つことに役立つのです。

グリッドを使用する別の方法では、ガターを用いることで散らかった印象があるデザインになることを防いでくれます。ガターとは、グリッドの列の間のスペースのことです。ガターを調整することはできますが、グリッドをしっかりと機能させ続けるためには、それぞれのガターを一定のサイズに留めておく必要があります。

 

Medium

効果的な出来栄えを作り出すために、グリッドとガターをうまく使用したデザインを参考に見てみましょう。AisleOneの壁紙は、どれほど効果的にガターと余白が使用できるかに焦点を当て、さらにそれらを強調しています。

 

Aisle One

09.   より楽しいデザインを取り入れてみる

多くのデザイナー(アーティストや写真家等も)が、作業や作品の基礎にグリッドを使用する主な理由の1つとして、グリッドが数学的により見る人を喜ばせることができるデザインを作るために役立つと捉えていることが挙げられます。 少しその説明をしてみましょう。

グリッドを使用することで、よりすてきなデザインを作り出すいくつかの方法がありますが、最も一般的に(そして最も簡単に)使用されるのは「3分割法」です。写真と関連性が高いこの方法を聞いたことがあるかもしれませんね。ですが、念のために少し説明をさせてください。この理論の基礎は、デザインを均等な縦と横の線で分割することです。分割した際に、この縦と横の線が交差する(下のイメージで円が置かれている場所)個所はデザインの焦点、またデザイン要素を配置する最適な場所と見なされます。

上記で記したように、この3分割法の理論は写真でよく使用されています。写真の重要なポイントが上のイメージで円を置いた部分に位置するように、写真家が撮影の際に意識的にこの理論を使用しているのです。

 

Shutterstock

あなたが次に作成するデザインに3分割法を取り入れてみて、そのデザインが視覚的に素晴らしい出来栄えになっているかを見てみると良いでしょう。3分割法を取り入れる際は、デザインを縦横に均等な3つのセクション(合計9セクション)に区切り、それを基にしてデザインを作り込んでいけば良いのです。

10.   さらなるインパクトのためにグリッドを壊してみる

新しく構成したグリッドに従ってデザインを進めていけば、きれいで整然とし、また美しく要素が配置されたデザインを確実に作り出すことができます。しかしたまには趣向を変えて、見る人の視線をくぎ付けにするために、きれいに構築したグリッドをわざと壊してみることも良いでしょう。

下の99Uのスプレッドデザイン(ここでは2ページにわたるデザイン)を見てみましょう。元になっているデザイン自体はシンプルな3列のグリッドを使用しており、グリッドに沿って文字がきれいに配置され整然とした印象を受けます。しかし、2ページにわたって斜めに大きくはしらせた黄色の文字で、その整然とした印象を打ち消しています。構築したグリッドをあえて無視することで、[Think Differently(違った視点を持て)]というメッセージを引き立てるような印象に残る効果的なデザインを作り上げています。

 

99U

グリッドを壊してみることで、特定のデザイン要素に焦点を当てることができます。いくつかの例外を除き、グリッドに従ってデザイン要素がきちんと配置されているBig Cartelのウェブサイトのデザインを見てみましょう。いくつかの要素をグリッドからはみ出させることで、しっかりと構築された縦の線をあえて壊し、見る人の視線はデザインの一貫性を崩しながらも強調されている要素に惹きつけられるのです。

 

Big Cartel

11.   グリッドはどのようなデザインにも適応できる

グリッドがあなたのデザインには合わないかもしれない、と心配になりましたか? 大丈夫です。そのようなことはありません。全てのグリッドは、かなり機能的で順応性も備えているので、あなたがデザインに変化を加えたとしてもそれに適応してくれます。

グリッドを作成する時は、必要な列の数を選択できます。列の数を自由に選択できることがグリッドを順応性が豊かな機能にしているのです。1列のグリッドと2-3列のグリッドを使用した際の見栄えがどれほど違うものかを示した下の画像を見てみましょう。

 

Designers Insights

デザイナーとデザインのニーズに応じて、グリッドは一般的に最大13列まで作成できます。 例えば、下の見開きのデザインでは1ページを写真に使用し、また非常にシンプルな文字を使用しているため、1列のグリッドシステムを見事なまでに活かしきっています。

 

Acne Paper

 

Design Surgeryが手がけたこのレイアウトデザインは、記事が少し長く、要所に差し込んだ方が効果的な画像があったため、各ページに13列のグリッドを用いています。

 

The Design Surgery

デザインの際、使用するグリッドの列の数はあなた次第にはなりますが、それでも列の数を多くするほどデザインは柔軟性を持ち、逆に列の数を少なくするほど、よりシンプルな見た目になり、デザインの柔軟性も低くなることを覚えておくと良いでしょう。

12.   デザインが斜めにならないようにグリッドがサポートしてくれる

別の角度から(数学的な角度ではなく、文字どおりの意味で)デザインにアプローチする方法を模索しているのであれば、グリッドはその点においても役立ちます。 グリッドは、水平軸や垂直軸と同様に、対角軸でも効果的に機能してくれます。

斜めのグリッドに沿って文字やグラフィックを配置し、モダンでスタイリッシュな効果を作り出すことで、見る人の視線をくぎ付けにすることができます。Andrew Ackroydが手がけた下のポスターデザインを見てみましょう。

 

Andrew Ackroyd

斜めのグリッドは、イメージに重たさを感じるレイアウトにも上手く機能してくれます。Karen Hoffstetterが手がけた、斜めに構築したフレームを使用して画像をモザイク状のパターンにした下のデザインを見ていきましょう。

 

Achados

それぞれのデザイン要素をきれいに配置し、さらに整然としたデザインを構成にするために、縦と横のグリッドと対角線のグリッドを使用しています。このグリッドの用い方は、メモに書き留めておくだけの価値があります。

13.   どこにでも使える

グリッドは雑誌や編集等でのレイアウトが最も一般的な使用例とはされていますが、雑誌等がグリッドを適用できる唯一のメディア(媒体)ではありません。 実際には、どのようなデザインに対しても使用できるのです。

下に表示されているBraunのロゴタイプのように、多くの有名なロゴがグリッドシステムを用いて構築されています。この下の画像を見て分かるように、ロゴを構築するためにグリッドを使用することで、それぞれの文字に一貫性が生まれ、清潔感のある力強い雰囲気が作り上げられています。その結果、象徴的なロゴが生まれたのです。

 

Wolfgang Schmittel

グリッドは、イラストにも使用することもできます。 Dean Gorissenによる魅力的な文学の都市を描いたイラストを見て、それぞれの角度がどれほどきれいでシャープなデザインになっているかに注目してみてください。このイラストは斜めのグリッドを使用して作成されていることが見て取れます。

 

Dean Gorissen

ですので、あなたのメディアが何であれ、グリッドは非常に便利なツールなのです。全てのスタイルに機能しないことやデザイナーがうまく活かしきれない可能性ももちろんありますが、グリッドは多くの場面で非常に役立つので、あなたの次のデザインやプロジェクトを進める際に使用してみることをお勧めします。

14.   グリッドはホワイトスペースに働きかける

ホワイトスペース(プロホワイトスペース(空白や余白のこと)を多く取り入れたデザインの世界を掘り下げてみましょう。グリッドはホワイトスペースのサポートもしてくれるのです。

デザインを必要な数の列に分割し、その後で要素を配置してみましょう。ここで忘れてはいけないのは、いくつかの列になにも要素を配置せず、単純にホワイトスペースで塗りつぶしてしまうのです。

João Oliveiraが手がけたレイアウトを見てみましょう。このレイアウトでは、グリッドの特定の範囲に多くのホワイトスペースを使用しています。その結果、スタイリッシュで開放感があり、洗練されたデザインになっているだけでなく、雑然とした雰囲気や不必要な要素が一切ない、要点だけをしっかりと把握できる機能的に最小限のレイアウトを作り出しています。

 

João Oliveira

下に表示されているMehmet Gozetlikが手がけたポスターデザインでも同様の機能がうまく活かされています。文字と画像を中央の列に沿って配置し、他の列は空白のままにすることで、きれいにバランスを取りつつ中心にデザイン要素を配置した視覚的にも効果的なデザインを作り上げています。

Mehmet Gozetlik

 

15.   見る人の視覚が喜ぶ

もしデザインが十分に満足いくものでなかったとしても、グリッドがさらに読みやすい文字のレイアウトを作り出してくれることで、あなたが手がけるデザインをよりすてきな作品にしてくれます。

なぜかいうと、私たち人間の目というものは好ましい文字の長さをえり好みをしますからね。もし文章が長過ぎると読む人に意味を伝えにくくなり、反対に短すぎるとぎくしゃくして中途半端な印象になってしまいます。一般的なことを言えば、最も読みやすい文章の長さは、1行に最低6ワード(英文の場合)で、アルファベットでいうと(同じく英文。スペースを含む)おおよそ50-65文字を用いると良いと言われています。

 

Studio8 Design

文字の多いレイアウトでグリッドを使用することにより、均等な幅の文字列の作成もより簡単、素早くできるようになります。また、文字列を使用することで、レイアウト上の行の長さをさらにしっかりと保持することも可能になります。

新聞等がグリッドベースのレイアウトを信用しきっている理由の1つです。グリッドベースは、より早くより簡単に文字列を構築することに大いに役立ち、その結果、新聞のコンテンツをこなれた感じにし、読みやすくしているのです。

 

編集に関する様々なことをもっと学んでみたいですか?もっと学びたいのであればこちらを参照してみてください。

 

さぁ、次はあなたがグリッドを実践してみましょう

あなたがグリッドを使用することが好きであろうとなかろうと、それがどれほど使いやすく様々なデザインに役立つのかは疑う余地がありません。より良いデザインを作るために、私たち人類がグリッドを使い始めたのが13世紀だとしても大して驚くほどのことでもないでしょう。

グリッドは、デザインの配置とバランスを調整することや、斜めの文字デザインのようなクールな効果を作り出すサポートをするといった様々な用途に使用できます。ページ上に引く線の役割を果たすだけではないのです。あなたが“このような作品を作りたい”とイメージしたデザインの最良の出来栄えを実現するサポートをするために、グリッドはデザインを構築し、ガイドし、デザインを実際に形作ってくれるのです。

この記事を読んでデザインにグリッドを使用してみましたか?もし既にグリッドを使用してみたのであれば、駆け出しデザイナーにシェアするヒントになりましたでしょうか?グリッドを活用してください!