レイアウトをあえてずらして、デザインに動きをつけるテクニック

今回は、グリッドシステムで「レイアウトをあえてずらして、デザインに動きをつけるテクニック」に注目していきます。

グリッドレイアウトにしたがって「ずらし」を使うと、一見単調（硬い印象）のグリッドレイアウトに、注目させる部分ができ、デザインにリズムを与えることができます。この記事では "ずらすとは何か" について紹介します。

ずらすオブジェクトは、テキスト、背景、写真などさまざまですが、ずらす（崩す）部分以外の要素では、グリッドレイアウトにしたがっているということがポイントです。

これは、最近のWebサイトのデザインで注目されているトレンドでもありますので、参考を見ながら習得していきましょう。

グリッドレイアウトに沿ってデザインしていくことの重要性は、こちらの記事でお伝えした通りです。基本はグリッドに忠実にオブジェクト（テキスト、背景、写真など）をレイアウトしていくのが一般的ですが、それがすべてだと一見単調に見えてしまう現象が起こりえます。

そこで、グリッドの規則性からオブジェクトをずらすことによって、デザインに注目させることができ、リズムを与えることができます。具体的にずらすというのは、単純にテキストをずらしたり、テキストを重ねたり、写真とタイトルをずらしたりすることが挙げられます。では、これからその具体例を見ていきましょう。

では、こちらのデザインを元に、テキストに動きを与えていきます。

タイトルと本文を同じガイドに配置するのではなく、ずらして配置することでテキストレイアウトにリズムが生まれ、タイトルがより際立ちます。本文のテキストボックスは、グリッドにしたがって配置してください。

グリッドシステムについては、「デザインに美しさと秩序を与えるグリッドシステム」をご覧いただくと、より理解が深まります。

タイトルと本文をずらして（重ねて）配置してみました。タイトルを重ねる場合は、装飾的な意味合いで使うことが多く、タイトルと本文のフォントを変えてみるとより効果的です。

先ほどのタイトルをずらして強調するのに比べ、タイトルとしての機能（役割）と本文が調和し、柔らかな印象を受けます。

文字を重ねる際は、参考のようにタイトルと本文のジャンプ率を大きくすることがポイントです。フォントのジャンプ率とは、本文のサイズに対してのタイトルや見出しのサイズ比率のことを言います。ジャンプ率が小さいと、文字と文字が重なっている部分が、読みにくい印象となってしまいます。

文字を重ねるときは、タイトルと本文のコントラストも意識するようにしてください。

グリッドに沿ってタイトルと本文全体の重心をずらし、テキストを配置しています。レイアウトデザインとしても、リズムが出ます。加えて、余白部分をキャプションなどのエリアにするなど、デザイン構成に合わせ重心をずらすこともテクニックのひとつです。

次は、テキスト以外の部分でのずらしを見てみましょう。

参考では、タイトルと写真をずらす（重ねる）ことで、レイアウトにリズムが生まれていることがわかります。

最近、目にすることが多いトレンドのレイアウトで、「テキストと写真」のどちらも印象に残るレイアウトと言えます。タイトルと写真をずらす(重ねる)場合は、上下の余白を少し広めにとることがポイントです。上下の余白が少ないと、「テキストと写真」を重ねたことでタイトルが読みづらくなり、全体の印象も窮屈な印象になるので、注意してください。

また、重なりの部分で、テキストがきちんと読めないといけません。

参考のパターンでは、写真の上部に重ねていますが、写真の大きさに合わせてタイトルのサイズをどれほどにするか、検証してみるといいでしょう。

写真の重心をずらすことも、最近よく目にするレイアウトです。

タイトルや画像などのアイキャッチとなる要素のみのシンプルなレイアウトでも、視線を左右交互に誘導させていくと、全体のバランスが保ちやすくなります。

また、今回のように写真の重心をずらした場合でも、バランスとリズムが保ちやすいので、タイトルや画像を左右に振ることはデザインに注目させるという意味で、有効です。

グリッドレイアウトにしたがって、テキストを配置して、背景をずらしています。こちらも、グリッドレイアウトでよく使われるテクニックのひとつです。

参考では、背景もグリッドの幅に合わせていますが、テキストのレイアウトにグリッドのルールがあるので、背景の位置は自由にくずしても配置しても、収まりの良いデザインとなるはずです。

今回は、グリッドシステムの使い方として、「あえてずらしを与えて、デザインに動きをつける」部分に注目しました。グリッドでレイアウトを保ちつつ、くずす部分を意図的に作ることで、デザインのリズムやレイアウトがより良いものになります。「ずらす(くずす)」部分以外の要素では、グリッドレイアウトにしたがっているということがポイントですので、ルールの中で自由にデザインしてみましょう。

今回の記事はグリッドレイアウトの応用編のようなもの。基礎については、こちらでもいくつか取り上げられていますので、参考にしてみてください。