Loading...

wokobo

2016 31 March

デザインを美しく見せるグリッドレイアウトについて学ぶ

Foundry / Pixabay

グラフィッックデザインやWEBデザインにおいてレイアウトは「わかりやすく」「読みやすく」そして「美しく」見せるために必須の行為です。いくらパッと見た印象が良かったとしても、文章が読みづらかったり内容が読み手に伝わりにくければなんの意味もありません。レイアウトを工夫することは、読み手にストレスなく伝えることを可能にします。今回はレイアウトの中でもグリッドを使用したグリッドレイアウトについて学んでいきます。グリッドを使用することで、整理された見やすいレイアウトを簡単に作成することが可能です。

グリッドの基本構造

グリッドはすべて、ここで説明する基本パーツから作られています。これらのパーツの組み合わせによって様々なグリッドが生まれます。先ずは基本パーツと構造から学んでいきます。
グリッド構造

マージン

紙面フォーマットとコンテンツ領域との間にある、空白のスペースのことです。マージンの設定は紙面全体の構図のバランスを左右します。

トンボ

欄外見出し、章のタイトル、ノンブル、その他のさまざまな付属的情報、あるいは各ページに繰り返し現れる情報を、規定の位置に配置するための目安になるマークです。

フローライン

紙面を分割して水平帯を設置するための、整列用の線です。紙面を横切るように視線を導く働きを持っています。

ゾーン

複数のモジュールが合わさり、グループ化された特別な形状の領域です。

モジュール

グリッドにおいて一定の間隔をおいて設置される、最小単位の領域です。モジュールを紙面全体、規則的に並べたものが、コラムや行になります。

コラム

文字を整列させた縦長の領域です。マージンをはさんで、横幅をいくつかに分割する役目があります。

 

ブロックグリッド

ブロックグリッド
グリッドの中で最もシンプルなグリッドです。一つの大きな四角形を配置することでブロックグリッドは完成します。このグリッドは小説など、大量の連続的なテキストを配置するのに向いています。シンプルがゆえに大切になるのが、余白を利用したマージンです。マージンの取り方によっては印象的なレイアウトにすることも可能となります。

コラムグリッド

コラムグリッド
紙面に複数の縦長のコラムを配置したグリッドです。テキストが途中で途切れても構わないような場合に利用されます。コラム幅は本文の文字サイズに合わせて適切なサイズに調節するとよいでしょう。

モジュールグリッド

モジュールグリッド
コラムグリッドをさらに細かな行に分割したのが、モジュールグリッドです。モジュールグリッドは”モジュール”と呼ばれるセルの配置の仕方で、極度に複雑なプロジェクトでも対応可能です。モジュールグリッドの利用で複雑な構成のコンテンツも、見やすく伝わりやすいレイアウトにすることが可能です。

階層状グリッド

階層状グリッド
どのカテゴリーにも適合しない、独特なグリッドが階層状グリッドです。階層状グリッドはいろいろなエレメントを自由に配置し、作成者自らが視覚で確認しオリジナルのグリッドを完成させます。WEBデザインで使われているのが階層状グリッドであり、レイアウトの構成を決めるワイヤーフレームがこれにあたります。

 

デザインを美しく、また伝わりやすく見せるためにはレイアウトがとても重要です。今回紹介したグリッドを利用することでレイアウトの構成に統一感を持たせると共に、レイアウトの作業をスムーズにします。何度もレイアウトの構成を行うことで、必ず美しいレイアウトというものがわかってきます。そしてオリジナルのグリッドを作成し、デザインに役立ててはいかかがでしょうか。

Pocket