グリッドシステム
グリッドとは？ グリッドシステムとは？
グリッドを簡単にいうと”補助線”です。
ノートや便箋などに、薄く補助線が入っていると思いますが、あれもグリッドの一種です。
補助線は単なる直線で引くこともあれば、マス目にして引くこともあります。
グリッドシステムとは、引いたグリッドを基準にデザインしていく一連の流れのことです。
間隔でなく、法則に沿ってデザイン
デザインに慣れていない内、間隔だけで綺麗にレイアウトすることは難しく、「デザインしたものの、なんかバランスが悪い…」ということがよくおこります。
グリッドを引き、グリッド通りにレイアウトしていくと、間隔ではなく法則に沿ったレイアウトができるようになり、デザインの効率、バランスが格段に向上します。
初心者でも今日から使える
グリッドシステムはあくまでも法則。
一度法則を覚えてしまえば（簡単）、初心者でもすぐにデザインに活かすことができます。
グリッドを使ったデザイン事例
私自身、大学でグリッドを習い、かれこれ10年以上グリッドを使い続けてきましたが、もはやグリッド無くてはレイアウトできないっていうくらい重宝しているテクニックです。
実際に私がグリッドを活用してデザインしたものがこちらです。
これだけでは、法則はわかりにくいのですが。
デザインをしているときは、下記の様にグリッドに沿ってレイアウトをしてます。
（青い線で引かれた直線、マス目がグリッド）
マス目に、ポコポコと画像や文字を配置してます。
（グリッドはあくまでもデザイン用なので、実際に印刷されることはありません）
このように私がチラシやリーフレットをデザインするときは、まず最初に必ずグリッドを引いてから、レイアウトをしていきます。
以上、グリッドについて基本概念でした。
次はグリッドの引き方を解説していきます。
グリッドの引き方と手順
今回は、デザインのソフトとして最もポピュラーなイラストレーター（以下、イラレ）を使い、グリッドの引き方を解説をしていきます。
（イラレの基本的な使い方については、今回は省略させていただきます）
イラレにはデザイン用の“印刷されない線を引く機能”として、“ガイド機能”というものがあり、下記の様にガイド線を引くことが出来ます。
Step1：上下左右にグリッド線を引く
まず初めに、グリッドの基本ともいえる上下左右のグリッド線を引きましょう。
グリッド線を引き上下左右の余白を整えるだけでも、きちっとした印象が伝わるようになります。
先ほどの例でいうと、下記の点線で囲った部分が上下左右の余白です。
（やや、線をはみ出している要素もありますが、整えた後に動きを付けるためです）
1-1：右クリックで『定規を表示』
右クリック → 『定規を表示』
↓↓↓↓↓↓↓
定規が表示されます。
1-2：上下左右の定規から『ガイド線』を引きだす
上下左右の定規にマウスを合わせドラッグすると、『ガイド線』が引き出されます。
引き出したガイド線は、アートボード（白い印刷面）のフチにピッタリつけておきます。
1-3：各ガイド線を10mmずつ内側にずらす
目安でなく、きちっと10mmずらすために、ガイド線はカーソルキーを使ってずらしましょう。
メニューバー『編集』から 『環境設定』を開き（ショートカットキー 【Ctrl＋K】）、『一般項目』のキー入力欄に10mmと入力して、1回のカーソル移動値を設定します。
↓↓↓↓↓↓↓
先ほど引いたガイド線を選択し、カーソルキーを使い内側に10mmずつずらします。
ちなみに「ガイドが選択できない！」という時は、ガイドのロックを解除しましょう。
解除の仕方は右クリック →『ガイドのロック』からチェックマークを外します。
これで基本的なグリッドは引くことができました。
次はいよいよマス目のグリッドを作っていきます。
Step2：マス目のグリッドを作る
マス目のグリッドを使いこなせるようになると、効率よく整ったレイアウトができるようになります。
見た目に格段の差が生まれるテックニックなので、絶対にマスターしておきましょう！
先ほどの例でいうと、下記の点線で囲った部分がマス目のグリッドです。
今回は4×4のマス目を例に作り方を解説します。
完成形はこんな感じです。
2-1：適当に長方形を作成
『オブジェクトツール』で、サイズを気にせずに適当な長方形を作ります。
2-2：作成した長方形を4つコピペ
作った長方形をコピペして、長方形を4つ作ります。
2-3：整列ツールで均等に配置
メニューバー『ウインドウ』から『整列ツール』を表示。
↓↓↓↓↓↓↓
もし整列ツールが画面と違うという場合は、整列ツール右上の小さな▼をクリックして、『オプションを表示』にチェックを入れましょう。
↓↓↓↓↓↓↓
作成した全ての長方形を選択して、『整列ツール』から①選択範囲に整列（右下の”整列”項目） を選び→ ②直方向中央に整列 → ③平方向等間隔に分布の順にクリック。
長方形が等間隔で横に綺麗に並びます。
2-4：左と上のグリッド線の交差点に、長方形のグループを合わせる
均等に並べた長方形×4をすべて選択して（一時的にグループ化してもOK）、先ほど引いた左と上のグリッド線の左上の交差点に、長方形グループの左端と上端を合わせます。
2-5：左端の長方形を基準に、整列ツールで長方形を8mmずつ均等配置
すべての長方形を選択した状態で、一番左の長方形をもう一度ワンクリックすると、一番左の長方形が基準として設定されます。
その後、整列ツールの入力欄に8mmと記入し → 『水平方向等間隔に分布』をクリック。
↓↓↓↓↓↓↓
8mm間隔で長方形が均等配置されます。
2-6：長方形×4の全体幅をグリッド線に合わせる
右の長方形がグリッド線からはみ出るため、全ての図形を選択した状態で全体の幅を無理やり縮め、グリッド線に合わせます。
2-7：もう一度、左端の長方形を基準に、長方形を8mmずつ均等配置
全体の幅を縮めたことで8mmの間隔も縮むため、再度、手順2-5を行います。
2-8：手順2-6、手順2-7を繰り返し、8mm間隔に限りなく近づける
先ほどと比べてはみ出す量は少なくなったものの、まだ右の長方形がグリッド線からはみ出ます。
そこで手順2-5、手順2-6を2度ほど繰り返し、サイズを合わせながら間隔を8mmに限りなく近づけていきます。
2-9：均等配置された長方形×4をグループ化
長方形が8mmの等間隔で綺麗に並んだらグループ化しておきます。
グループ化しておけば、同じグループ内の図形は1つの図形として扱われます。
グループ化の手順はすべての長方形を選択した状態で、右クリック → 『グループ』を選択します。
2-10：長方形グループをコピペして4つ作成
長方形４つを作った時同様に、今度は長方形のグループをコピペして4つ作成します。
2-11：一番上のグループを基準に、4グループを8mm間隔で均等配置
手順2-5の要領で、一番上のグループを基準に、４グループを8mm間隔で均等配置します。
2-12：グループ×4の全体高をグリッド線に合わせる
1番下のグループがグリッド線からはみ出るため、全体の高さを無理やり縮めグリッド線に合わせます。
2-13：もう一度、一番上のグループを基準に、それぞれのグループを8mmの間隔で均等配置
全体の幅を縮めたことで間隔も縮むため、再度、手順2-11を行います。
2-14：手順2-12、手順2-13を繰り返し、限りなく8mmの間隔に近づける
先ほどと比べてはみ出す量は少なくなったものの、まだ下のグループがグリッド線からはみ出ます。
そこで手順2-11、手順2-12を2度ほど繰り返し、サイズを合わせながら間隔を8mmに近づけていきます。
2-15：全ての図形をガイド化すれば、マス目のグリッドが完成
後は長方形をガイド化させ、グリッドにするだけです。
ガイドにする方法は、全ての図形を選択した状態で、メニューバー『表示』 → 『ガイド』 → 『ガイドを作成（ショートカットCtrl＋5）』。
↓↓↓↓↓↓↓
これでマス目のグリッド完成です！
お疲れ様でした！
いかがでしょうか？
こう書くと難しく感じるかもしれませんが、慣れてしまえば5分もかかりません。
ちなみに今回は4×4のグリッドしてたが、好みに合わせマス目は自由に増やしたり減らしたりすることができます。
補 足
ガイド線として引いたグリッドは印刷はされません。
またデザイン中に、グリッドの表示・非表示を自由に切り替えることができます。
グリッドを活用したデザイン具体例
Step1：グリッドレイアウト
グリッドが完成したら、マス目に沿ってレイアウトをしていきます。
私が適当に作ったデザインサンプルで具体例を見ていきましょう。
例えば、こんな感じで、タイトルは3マス、画像は4マス、説明文は1マスといった具合に要素を埋めていきます。
↓↓↓↓↓↓↓
レイアウトが終わったら、マス目のグリッドを消してみましょう。
グリッドの法則にそってレイアウトしただけですが、効率よく整ったデザインができました！
Step2：演出を加え、デザイン完成
レイアウトを整えたら、少し演出を加えてみましょう。
まずは色味をちょっと変更してみます。
先ほどのモノトーンと比べ、デザインに温かみが出てきました。
↓↓↓↓↓↓↓
さらに少し動きを加え、遊び心を演出していきます。
右は時の英文を斜めにして、画像をフチいっぱいに広げました。
↓↓↓↓↓↓↓
完成です！
以上、グリッドの引き方と、グリッドを活用したデザインの具体例でした。
慣れてきたら、いろんなパターンのグリッドを引きながら、グリッドの使い勝手を広げてみてくださいね！
記事が役に立ったと思う方は、シェアをしていただけると非常に喜びます。
コメントや質問があれば、下記のコメント欄よりお願いいたします。
柳井 謙一
柳井です。
私が大学でデザインを勉強していた時のことです。
どうやってもバランスの悪いレイアウトしかできない時期がありました。
そんな時、グラフィックの先生から「グリッドを引きなさい」と言われ、教わったとおりにやってみたら、バランスのとれたレイアウトがあっという間に出来るようになりました。
今回は、このグリッドシステムを解説していきます。