デザインの基礎テクニックのひとつである「グリッドレイアウト」(グリッドデザイン)。
「illustrator」などのデザイン編集ソフトでは、方眼紙のようなマス目になっている背景に沿って青い線を引きますが、何気なく使っていたりしませんか。
実はこのグリッド、デザインを進める時に、商品の写真をどこにどうやって置くか、商品の説明文やキャッチコピーをどのように並べたらきれいに見えるかをガイドする役割です。
今回はグリッドとは何か、そしてグリッドツールの使い方や使う場面などについてご紹介してきます。
目次
グリッドとは
「グリッド」とは英単語としての「grid」の意味で、水平線と垂直線で分断し、格子状の線を組み合わせたもの、という意味を持ちます。
方眼紙状の線、ブロックラインを組み合わせた背景に、文章のブロックや画像、フォントなどを配置、表示要素の移動の位置決めを正確に行うためのサポートをする役割があります。
グリッドツールを使う現場はグラフィックデザイン、Webデザイン、プロダクトデザインの現場などでもよく利用されています。
デザインの現場でグリッドを使う理由
グリッドツールは、デザイン要素をきれいに配列、整理した状態を維持するために使います。
それぞれの要素を垂直、水平線上に配置することによってすっきりとまとまったデザインができることから、デザインコンテンツを整え、制作をより正確にサポートしてくれます。
配置場所や位置、拡大縮小するためのガイドとしての機能があるので、作業がよりスムーズに進みます。デザインのバランスを整えることにより、上下左右にできる余白もきれいに整えることができます。
また、余白を作らない場合でも均等なサイズの画像ブロックや背景色を交互に見せることで1つのデザインとして表現することもできます。
効率よく作業が捗り、共同作業が楽になる
会社内のプロジェクトを進めるために、複数のデザイナーと共同制作をする機会がある場合、グリッド設定を理解していたら作業がより楽になり、コミュニケーションの行き違いも防ぐことができます。
例えば、文字の配列方法や写真の配置を変える際、他のデザイナーにお願いするときもあります。新人デザイナーや新メンバーが加わることもありますよね。
設定内容を把握し、デザイン要素を配置した意図などの細かい説明が省けることで共同作業が楽になり、作業効率化が上がります。
グリッドレイアウト(グリッドデザイン)を使う場面
デザインの現場でグリッドを使う要素は以下の3つです。
・グリッドでデザインを整える
・グリッドで余白の位置を整える
・グリッドレイアウトを利用したデザインを作成する
グリッドレイアウトとは
グリッドの仕組みを組み合わせて、画像や要素と余白をレイアウト構成したデザインです。
観光地やご当地グルメなどのポスターや、大手企業のWebサイトの採用ページで社員の写真をたくさん並べたりすることで、１つのデザイン要素を作ることができます。
グリッドレイアウトを使うことで、さまざまなデザインパターンも作成できます。
「ごちゃごちゃ」を解決するためのツール
集客や宣伝のためなど、目的があって初めてデザインが作成されます。
あらゆる要望を叶えるためにたくさん用意された写真や文章などのパーツを整えようとすると、次第に画面がごちゃごちゃになってしまいます。
グリッドを使用し、すべて揃えて配置すれば、すっきりと見やすく整理されたデザインレイアウトになります。
また、余白を取り入れ、調整することで開放感のあるデザインを表現することもできます。
斜めのグリッドでおしゃれを演出
グリッドは縦と横に要素を並べるだけでなく、斜めに文字を入れることでスタイリッシュでおしゃれなデザイン演出ができます。海外のファッションブランドのポスターやWebサイトのデザインによく見られるレイアウトです。
斜めのグリッドを引くことで、ひし形が並ぶデザインレイアウトができます。
1つのひし形に構築したフレームを並べることで、モザイク状のデザインパターンも作ることができます。
「並べる」「整える」だけではないグリッド
1つのデザインに「ストーリー」を作り出すためには、デザインの勉強をしてセンスを磨く方法以外にも、たくさんのデザインを参考にします。
名刺やポスターデザインをよく見てみると、見えない線が引かれたかのように要素がしっかりと垂直、平行に並べられ、縦と横の幅が均等の余白が作られています。
しかし、並べるだけでデザインは成り立つのかというとそうではなく、グリッドを使うことで、素敵なデザインを作る方法があります。
その中で一般的によく使われている方法は「3分割法」です。
デザインの「焦点」をグリッドで取り入れてみる
グリッドラインを上下で3分割します。線が重なった場所に被写体を入れることで、視覚的に美しく見える手段です。
この方法は写真やイラスト制作のときに行う「トリミング」で活用されています。
スマートフォンで撮った写真をトリミングする際に、格子状の線が引かれた画面になります。その時に見せたい動物や建物、料理などの被写体を揃えることで美しい構図を作ることができます。
この方法はグリッドレイアウトにも活用できます。
ときには、グリッドを壊してみる
美しく並べることができるグリッドレイアウトですが、その一部を「壊す」ことで特定のデザイン要素に注目してもらえます。
グリッドレイアウトは多くのデザインに活用されていますが、統一感がありすっきりと整理され、どれも同じで真面目な印象を持たれることが多く、ユニークで面白いデザインではない印象もあります。
雑誌の表紙やコンテンツ内容が変わるページにインパクトが加わると、本当に伝えたい言葉や写真などに焦点があたり多くの方に見てもらえます。それには、グリッドというデザイン上での「ルールからはみ出す」方法があります。
例えば、以下のような方法です。
・画像を重ねてレイアウトする
・グリッドから要素をはみ出させる
・画像の中にすべて置く
・円など、直線ではないものを置く
整列されたグリッドからはみ出し、少し要素をひねることで大胆なインパクトを与えることができます。
グリッドレイアウトのメリット
グリッドレイアウトは「グリッド」の要素を利用してデザインすることで、以下のメリットが挙げられます。
・デザインのバランスが整う
・作業効率が上がる
・さまざまな要素の「最適な位置」が決まる
・焦点を合わすことで美しいデザインができる
・デザインに「一体感」が生まれる
そして、整ったグリッドレイアウトを壊すことで「インパクト」を与えるデザインができることもあり、基礎的なことから大胆な手段を作ることで、ごちゃごちゃになりそうなデザイン要素のバランスを調整することもできます。
また、斜めに文字を入れてクールなイメージを与えたり、ときにグリッドを壊してメッセージ性を出したり、さまざまなデザインパターンを生み出すことにより人々の感性を生み出すことが可能です。
まとめ
グリッドは「基礎」であり「デザイン」の方法の1つ
グリッドは「このデザインでこの言葉、この写真、イラストを伝えたい」という思いを叶える、ビジュアルデザインやWebデザインなどの、さまざまな現場に活用できるツール機能です。
まだ、グリッドを理解できず使っていない、使い方がよくわからないと思っていた方へのヒントになりましたら幸いです。グリッドレイアウト（グリッドデザイン）を頭に入れて、ぜひデザイン制作に活かしてみてください。
デザインACなら、無料会員登録をするだけでチラシやメッセージカードなど様々なテンプレートを利用可能！
オリジナルデザイン制作も手軽にできますよ♪
＼ 無料会員登録はこちら ／