Home > デザイン > いまさら聞けない?グリッド・システムでのデザインの基礎

いまさら聞けない?グリッド・システムでのデザインの基礎

grid_03.jpg

グリッド・システムはデザインの基礎として敷いておくことで、自由なデザインを起こすことができる素敵なシステムです。グリッド・システムはシンプルですが、感覚的なところも多いため、言語化が難しい部分も多くあり、実際何度か挫折して書いていなかったのですが、ネットの言葉も借りながら、なんとか言葉で起こしてみました。

グリッド・システムとは
紙のデザインの時代からデザイナーが試行錯誤しながら出来上がったデザインシステムのこと。レイアウトを起こす際に、デザインや装飾に集中するためのガイドシステムとしてすごくよく考えられていて、マルチデバイス時代のウェブサイトデザインで必要とされるレスポンシブデザインフレームワークのソースコード上でも再現されています。
グリッドシステムでは、シンプルな直線ガイドラインを縦横に配置し、その中へ画像や文章情報を配置して使用します。
グリッドシステムは様々なデザイナーが開発していて、マイナーなものからメジャーなものまで多数あります。メジャーなものほど、多数のデザイナーが使用・改良が重ねられていて、使いやすくなっている傾向にあります。

グリッド・システムをおすすめする理由
グリッド・システムを使用することで、ベースラインとしての横幅や、余白の管理を行うことができます。
ガイドやグリッドを窮屈に感じる人もいるかもしれませんが、ひとつの定義やパターンをデザインに組み込むことで、無意識下で基礎のデザインの組み立てを行うことができ、ただ箱を積み上げるデザインから脱却し、自由でクリエイティブな表現や発想に注力することができるようになります。
自由と秩序をバランス良く共存させることができるため、感情的な表現と、ロジカルな誘導を同時に行えるので、伝えたいことを明確に表現することができる、デザインの基礎を築く考え方なのです。

グリッド・システムの機能
反復機能

数百と渡るページや、トランプなどのカードに同じレイアウトを適用したいとき、毎回数値を計算し、ガイドを引くのはうんざりしますし、非効率的です。デザインとしての編集を行うときに、グリッドシステムは役立ちます。また、読み手にも、読みやすくなるメリットがあります。グリッドシステムを使用すれば、複数ページに渡るバラバラに散らばった情報を「同じグループ」として誘導できます。
複数に渡るページに対しての統一感を引き出すだけでなく、ページ内での繰り返すオブジェクトに対しても、同じようにグループ感や、読みやすさを演出することができます。

構図

グリッドシステムには、構図に関する様々な知識が既に詰め込まれていて、デザインルールを意識することなく構築することができるようになっています。例えば、「行間が読みづらい」「どこまでがまとまった文章なのかわからない」というような問題を回避することができます。
さらに、ただ規則正しく並べるだけではなく、ベースラインがあることで、独創的なデザインを行うサポートも行います。
デザインの段階で、独創的な表現を行う部分にだけ、集中することができるということです。

伝達

Webデザインでも、グラフィックデザインでも、写真でも、イラストでも、目的は「メッセージを伝える」ことです。
伝えたいことを伝えるためにデザインは存在しています。
グリッドシステムを利用することで、「ここにメニューがある」「ここにフッターがある」「ここから他のページへ辿れる」といった「定位置のナビゲーション」を作り出すことができ、目的の場所へ誘導することができます。
また、中心となるコンテンツに対して、構図・文字・空白に配慮することができるようになり、メッセージを明確に発信できるようになります。

参考:DTP時代のレイアウトデザインの継承・発展

デザインだけではなく、グリッドは身近なところでも活躍しています
  • カメラのグリッド(三分割法)
  • 方眼用紙
  • 原稿用紙
  • 漫画のコマ割


身近なグリッドですぐ思い浮かぶのが、カメラのファインダーに搭載されているグリッドです。

三分割構図では、三分割グリッドに4つある分割点( 縦横2本ずつある分割線の交点 )のいずれかに、主題である被写体の重要な部分を配置します。
引用:写真が上達するコツ ~ 第2回 構図を意識すると写真が変わる<前編> WEB写真上達講座


スマホでも再現できますので、(iPhoneのカメラなら「設定>写真とカメラ>グリッドをON」にすると表示できます)ご存知の方も多いかと思いますが、カメラの三分割法も写真の構図における基本のグリッドのひとつです。
ここでは詳しく説明しませんが、この3分割法で撮ると、安定感のある写真が撮影できるようになります。

詳しく知りたい方は、「iPhoneカメラの「ある機能」を使うと写真が3倍上手くなる! | AppBank – iPhone, スマホのたのしみを見つけよう」あたりの記事をご覧ください。そして、ぜひグリッドのよさを味わってください。

方眼用紙や、原稿用紙など、学生時代に慣れ親しんだ用紙たちもグリッドです。文字を読みやすくしたり、図面を綺麗に描画するために使用していました。

また、漫画のコマ割りもグリッドです。漫画の原稿用紙が印刷サイズの原稿グリッドとなっていて、そこへ四角をリズムよく配置したり、繰り返したり、時々はみ出したり全画面にしたりすることで、物語の時間経過や感情の表現の手助けをしています。これがいわゆる「ルールを破る」「グリッドをハズす」という手法そのものです。Webデザインでもよく使います。

グリッドのバリエーション
manuscript grid(原稿グリッド)

「原稿グリッド」は、グリッドの基本形。単一の四角形で外側の余白(マージン)を定義します。

column grid(カラムグリッド)

カラム(列)グリッドは、ページを複数列に分割する、最もよく使用されるグリッドです。960gsなどのライブラリは、カラムグリッドをウェブ用に変換したものです。

modular grid(モジュラーグリッド)

モジュラーグリッドは、列と行のガイドを同時に表示するグリッドです。

hierarchical grid(階層グリッド)

上記3つのグリッドに適合しないものを、階層グリッドと呼びます。モジュール間の等幅を持ちません。

グリッド・システムを応用する
グリッド・システムは、自分で自由に設計することができます。
斜めにしたり、大きなマージンを敢えてとったり、バランスをアウトラインで考えて画像や文章を配置していくことで、グリッドシステムを設計していきます。

引用:GridSystems

引用:GridSystems

Webデザインとしてのグリッド

webサイトでは、960gsをはじめとした12カラムで構成されたカラムグリッドをベースに、他のグリッドシステムを使用して配置する手法がしばしば使用されています。ランディングページなどの1ページレイアウトでは、ひとつひとつのセクションに対して別のグリッドシステムをオーバーレイすることで、差別化したり分類したりすることができます。

また、ページをまたいで同じレイアウトを実装するための手助けにもなります。この場合は、ベースの12カラムグリッドを基準として起こします。

CSSフレームワークを使用する場合、2カラムや100%表示など、ウェブサイトならではの表現も内包されている場合があります。
フレームワークの性質を知るためにも、ドキュメントのカラム設計をある程度読み込みましょう。ベースの12カラムグリッド以上の表現も可能になります。

グリッドシステム自体はアプリケーションを超えることができるので、普段PhotoshopでWebデザインを起こしている人が、IllustratorやSketch、Adobe XDでデザインを起こす際にもいつもどおりのデザインや、空間を取る手助けにもなります。

参考本


Grid Systems in Graphic Design/Raster Systeme Fur Die Visuele Gestaltung


わたしがウェブデザインを始めるときにも読んだ、ロングセラーにもなっているグリッド本。刊行は古いですし、日本語は一切ありませんが、グリッドの可能性について学ぶならこの本です。いまだグリッドデザインのバイブル的存在だとおもいます。さらに、タイポグラフィについても学べます。

まとめ
グリッドシステムは多種多様です。ベースのグリッドの上に別のグリッドをレイヤーのように乗せることもあります。
「グリッドシステム」と聞くと、固い印象を感じるかもしれませんが、とても自由なものです。(固い印象の裏には、崇高で入りづらい印象の文章や、美しくクリエイティブすぎるタイポグラフィデザインとグリッドが結びついているということもあるかもしれません。)

けれど、本質はとてもシンプルです。伝えたいことを正しく伝えることです。そのために、グリッドシステムも生まれました。

「なんとなく四角の枠を積み上げて綺麗になる」だけがグリッドシステムのいい部分ではありません。より理解を深めることで、さらに自由な表現が可能になります。もう一歩踏み込んで、自由なデザインや表現をはじめてみてもらえれば嬉しいです。


////
▼ばにのUdemyのウェブ制作講座「Photoshopでプロになる!オシャレ&クールなウェブデザイン講座」でも、グリッドシステムを使用してPhotoshopウェブデザインを進めています。
【WebDesign】Photoshopでプロになる!オシャレ&クールなWebデザイン作成講座
関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/205-4bc2742a
Listed below are links to weblogs that reference
いまさら聞けない?グリッド・システムでのデザインの基礎 from バニデザノート

Home > デザイン > いまさら聞けない?グリッド・システムでのデザインの基礎

Sponsored Link
【WebDesign】Photoshopでプロになる!オシャレ&クールなWebデザイン作成講座
▲Udemy講座第二弾!Photoshopデザインカンプ作成の流れをレクチャーします。クーポンコード【PS_BANIDESIGN】
はじめよう!Wordpressで作るおしゃれサイト【デザイン入門】
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、お得な価格で受講可能!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。10年以上に渡りオールラウンドウェブクリエイターとして活動した経験を活かして高品質なPhotoshopデータでの「デザインカンプ作成」のお仕事を主に行っています。業務提携いただける企業さま、ウェブディレクターさまを随時募集中です。Wordpress(ワードプレス)、レスポンシブ、スマホ用サイトもできます♪
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items