現役デザイナーが多用するレイアウトのデザインパターン7選

デザインをする上で悩みがちなのがレイアウトです。

デザインにおいてレイアウトは全体の構成を担い、デザインの印象を決定づける重要な要素の１つです。

レイアウトパターンの引き出しが少ないといつも同じようなデザインになってしまいがちになります。また、少しでもいつもと違う状況になると途端にデザインに行き詰まったり、臨機応変な対応が難しい場合があります。

これはいけない事ではなく、上手くレイアウトするには経験値が必要なのです。

そんなデザインレイアウトに困っている方に、現役デザイナーがよく使うレイアウトパターン7選をご紹介します。

どういう状況に適したレイアウトなのかを理解していれば、いざという時に引き出しから最適なレイアウトパターンを選ぶことが出来るはずです。

〈レイアウトデザインパターン1〉グリッドデザイン

王道のレイアウトパターンとして挙げられるのが「グリッドデザイン」です。

グリッドデザイン(グリッドレイアウト)とは画面やページを格子状に分割して、規則的な直線を基準にデザイン要素を配置していくデザイン手法です。

グリッドデザインは美しく規則的に整えてデザイン要素を魅せる事が出来る為、レイアウトパターンとして頻繁に使われます。

チラシやwebデザインなどにはとても有効なレイアウトパターンなので、是非活用してみてください。

グリッドデザインの作り方はこちらの記事を参考にしてください。

〈レイアウトデザインパターン2〉２分割デザイン

デザインレイアウトパターンとしてプロでも多用されるのが「２分割デザイン」です。

２トーンデザインとも言われたりしますが、デザインを完全に分割してしまうレイアウト方法です。

２分割デザインは画面を分割することで、情報は情報で片側の面にまとめる事ができ、もう片方の面で見せたいビジュアルを見せる事ができます。

つまり、見せたい要素がたくさんある場合には有効なレイアウトパターンです。

スッキリなレイアウトにしやすいので、モダンなシンプルでお洒落なデザインとの相性も良いです。デザインレイアウトに迷ったら画面を分割してみてください。

〈レイアウトデザインパターン3〉縦割デザイン

２分割デザインの派生で頻繁に使われるのが「縦割デザイン」です。

基本的なレイアウトの考え方は２分割デザインと同じで、分割の仕方を縦割にするレイアウトパターンです。

縦割デザインの特長はずばり、縦長の要素との相性が良い為、縦組み文字のコピーや、写真やビジュアルが縦長の場合に有効です。

縦組みに文字を組む事が多い和テイストのデザインなどにはよく使われるデザインレイアウトパターンです。

和風デザインを制作するコツはこちらの記事で詳しく解説していますので興味のある方は参考にしてください。

〈レイアウトデザインパターン4〉余白を活かす

写真やビジュアルの余白を活かしたレイアウトパターンもあります。

写真などで物や人などのメインビジュアル以外の背景(余白)箇所に文字などの要素を上手くレイアウトする事で一体化した世界観に要素を溶け込ます事ができます。

余白を活かすレイアウトはこれまでの王道パターンとは違い、難易度が高い上級者向けの手法です。

ただ、難易度が高いため上手くレイアウトできるとグッとクオリティが高いお洒落で美しいデザインになる可能性があります。

なぜ難易度が高いかというと「余白」を見つけ、生み出す事がまず難しいからです。

デザイナーは余白がない場合は自ら生み出す方法を熟知しています。

その１つの方法としては「背景を引き伸ばす」事で無理やり余白を創り出す事ができます。背景の作り方はこちらの記事で詳しく解説していますので参考にしてください。

〈レイアウトデザインパターン5〉わざと要素を見切れさせる

文字やビジュアル要素をわざと見切れさせるレイアウト方法もあります。

限られたスペース内で要素を納めようとすると要素が小さくなりがちですが、わざと見切れさせる事で要素を大きく広く使う事ができます。

僕はよく写真の一部分をクローズアップして、他の部分は画面から見切れさせるようなレイアウトを頻繁に使用します。

インパクトを出しつつ見せたい所をピンポイントで効果的に見せたい場合などには有効なレイアウトパターンなので是非試してください。

〈レイアウトデザインパターン6〉対比

デザインレイアウトパターンとして多用されるもので「対比」が挙げられます。

こちらは複数の要素を比べて見せたいという限定的なケースですが、とても有効なレイアウトパターンです。

対比は分割デザインなどと併用して構成するとレイアウトしやすいです。

比べる物の大きさや配置位置が異なっていると、人は直感的に比べる事が出来ません。対比によるレイアウトをより効果的にするためには要素同士の条件を揃えることを意識してください。

〈レイアウトデザインパターン7〉傾けて動きを出す

デザインレイアウトパターンとして「傾けて動きを出す」ことも有効です。

「傾けて動きを出す」レイアウト手法は、デザイン全体でも良いですし、一部分だけでも効果的です。タイトルだけ傾けるなどすれば、タイトルは他のデザイン要素と差別化され双方に良い効果が生まれます。

傾けすぎると見づらくなり逆効果ですので注意が必要です。

「傾けて動きを出す」事で平凡なレイアウトも一気に雰囲気が変わりますので、是非試してみてください。

レイアウトのデザインパターンまとめ

現役デザイナーが多用するレイアウトのデザインパターン７選をご紹介しました。

王道パターンから特殊な場合に有効なパターンまで様々ですが、それぞれのレイアウトパターンの特性を知っておくことが重要です。

この記事で紹介した他のレイアウトパターンなどはこちらの記事で紹介する「レイアウト本」で勉強するのがおすすめです。レイアウトについて特化した本だけを厳選しています。