物足りなさの原因は整理ができていないから？デザイナーのためのグリッド活用術

ロゴやビジュアルのデザインをしているとき、なんとなく上手くできないと感じた経験はないでしょうか。
デザインが失敗する原因の一つとして、レイアウトが問題となっていることが多くあります。
その場合は、レイアウトに規則をつくるだけでしっかりとしたデザインになることも多いので、デザインをおこなう機会がある方は覚えておくと便利です。

今回は、レイアウトを行う際に使う手法である「グリッド」の活用に関する情報をまとめてご紹介します。参考実例として実際にグリッドを使ったロゴデザインもピックアップしています。
自分のデザインがいまいちだと感じている方、デザインを始めたばかりの方は特に必見です。

デザインのクオリティを高める！グリッドの活用まとめ

1.グリッドとは

引用：http://welovetypography.com/post/11817
グリッド・システムとは、スイス出身のデザイナー ヨゼフ・ミューラー・ブロックマン（1914〜1996年）が提唱したデザイン技法です。
著書『Grid Systems in Graphic Design』は、事例にグリッド・システムを取り入れたことでとても有名です。

この技法は、1950年代からデザインの基本の一つとして広まり、広告のような印刷物、Webデザイン、ロゴデザインをはじめ様々なグラフィックで活用されています。
最近では、Webデザインに関する情報でよく耳にする言葉ではないでしょうか。

具体的には、縦横に線を引いたガイドラインをベースに、図形や文字といった要素を配置することを指します。
このガイドラインは、あくまで仮のガイドですので、完成品では見えない状態です。

グリッド（格子）を基準に配置することで、秩序と安定感を保ったレイアウトになります。

2.グリッドの活用例

ここでは、実際にグリッドを使ってデザインした活用事例をご紹介します。
ご覧頂ければ、デザイナーがどのようにグリッドを作業に取り入れているかよく分かります。

どのデザインもバランスがよく、規則性のある配置となっていますので、ぜひ細部まで注目してみてください。

引用：http://www.creativebloq.com/logo-design/6-tips-using-grids-logo-design-11513984

有名なシェルグループのロゴは、1971年にパリ出身のデザイナー レイモンド・ローウィ（Raymond Loewy）がリニューアルしています。
彼はデザイン作業にグリッドをベースに取り入れており、人々にインパクトを与えるデザインを完成させました。

ガイドに完璧に沿ったデザインではありませんが、全体的にはガイドと線が合っていることが分かります。精密でなくても、ある程度のガイドとして利用するというのも一つの手です。

引用：http://www.creativebloq.com/logo-design/6-tips-using-grids-logo-design-11513984

デザイナーであるKaelgrafiが作成したロゴです。
グリッドを使うことで線を美しく配置し、対称性を表現することに成功しました。非常にシンプルながら、整った印象と上品さを持っています。
角には正円を使っており、細部までしっかりとデザインした作品であることがうかがえます。

このデザインは、デザインコンテストを開催しているサービス「99design」において見事に成果をあげており、グリッドと幾何学的形状を使うことで、説得力のあるデザインに仕上がった好事例です。

引用：https://www.behance.net/gallery/Linda-Corporative-Identity/498046

ブラジル出身のクリエイティブディレクターが制作した、LINDAというロゴのデザインです。
繊細でエレガントな雰囲気が印象的で、一目見れるだけで美しさが伝わってきます。
こちらの制作過程を見ると、やはりグリッドを使って細かな部分まで配慮して制作していることがよく分かります。

中央の"LINDA"のテキストから勲章のようなマークまで、すべて円形のグリッドを活用しています。

引用：https://dribbble.com/shots/1954438-A-logo

スイスのHelvetic Brandsという会社が、コミュニティサイト「dribbble」に掲載したロゴデザインです。円、三角形のグリッドに沿って規則正しくデザインしています。シンプルなデザインだからこそ、しっかりと整理されていることがよく分かります。

なお、画像を掲載している「dribbble」では、"grid"などのキーワードで検索するとグリッドを使ったデザインを数多く見ることができます。
色々な事例を見てみたいと思った方は、ぜひ「dribbble」やその他のサービスをチェックしてみてください。

3.グリッドを使うことで得られる効果

引用：https://dribbble.com/shots/325244-Sixbase-Logo

グリッド・システムをデザインに活用すると、以下のように様々な効果を得ることができます。

安定感のある、バランスのいいレイアウトができる

グリッドは、バラバラになった要素のバランスを保つ効果を持ちます。
デザイン作業に取り入れることで、美しく決まったデザインを作ることが可能です。

例えば、アイデアは良いはずなのに実際に作ったらイマイチ、という時に使ってみると仕上がりが良くなるケースがあります。

また、レイアウトはパッと見た時の印象だけでなく情報を上手く伝達するためにも重要です。
雑誌、ポスターなどの情報量が多い媒体の場合、デザインに秩序を持たせることで読み手が把握しやすく、流れを整理するデザインにもなります。

効率よくバランスを整えることができる

ガイドに沿ってレイアウトをおこなうため、作業時間を短縮してくれるというのも一つのメリットです。
グリッドは必須のものではありませんので、感覚に頼ってデザインする方や、あまり好まない方もいらっしゃいます。

しかし、素早く正確にバランスを取るために有効な手法であることは間違いないでしょう。

説得力の高いデザインができる

グリッドをデザインに取り入れることは、他者に説明をする際に納得してもらうための材料にもなります。
クライアントや社内の人間であっても、デザインを学んでいない相手に意味や意図を理解してもらうのは簡単なことではありません。

そのため、どのような構造を持っているか説明できれば、どういった意図をもってデザインしたかが明確になるでしょう。
自分では良いと思ったのに分かってもらえない、相手を納得させることができない、という場合には、説得力を高める方法としてグリッドを活用してみることをオススメします。

4.グリッドの使い方

デザインする面に均等な格子状のグリッドを作成し、線に従って配置するのが基本的なグリッドの使い方です。ドローソフトで簡単に表示することができます。
なお、グリッドは自分だけのオリジナルを作ったり、既存のテンプレートを使ったりすることもできます。
用途や好みに合わせて最も最適なものを選択してください。

ソフトでのグリッド表示方法は以下の通りです。

＜Illustratorの場合＞
基本の線を表示する「表示」→「グリッドを表示」
細かく設定する「編集」→「環境設定」→「ガイド・グリッド」

＜Photoshopの場合＞
基本の線を表示する「表示」→「表示・非表示」→「グリッド」
細かく設定する「環境設定」から「ガイド・グリッド・スライス」