まるでDTPデザインのようなレイアウト。テキストとコンテンツを「重ねる」デザインがトレンド！

Webサイトのレスポンシブ化が進んだ現在。PC、タブレット、スマートフォンなど、さまざまなデバイスへの表示に対応するため、近年のWebデザインは「グリッドレイアウト」「フラットデザイン」に代表されるような、「シンプルで整った」ものが主流でした。

しかし最近では、紙媒体のデザインのように、文字やオブジェクトをあえてずらしたり、重ねたりして配置することで、印象的にみせるWebデザインが増えています。

今回は、2019年のトレンドのひとつでもある「重ねる」デザインに注目してみましょう。

1.「DTPデザイン」と「Webデザイン」の違い

そもそも、紙のデザインは昔からあるのに、なぜ『まるでDTPのようなWebデザイン』に新しさを感じるのでしょうか。

それは、紙媒体のデザインとWebデザインでは、色の表現方法や表示領域、構成の考え方など、デザインの手法や理論に大きな違いがあるからです。下記に、紙のデザインとWebデザインの代表的な違いをまとめました。

このように、デザインは媒体の特性に合わせて考えられており、それぞれに「できること」や「向いているデザイン」が異なります。
とくにWebページは、さまざまな閲覧環境で正確に表示できることや、ユーザビリティが重要なため、デザイン上配慮しなければならない点が多いのが特徴です。

2.レスポンシブの登場でレイアウトの自由が失われた「Webデザイン」

近年では、多様なデバイスへのレスポンシブ対応が求められたことで、Webデザインの自由度はさらに失われました。

レスポンシブデザインは、タブレットやスマートフォン、PCなど、ブラウザサイズの異なるさまざまなデバイスに、同じ情報を1つのhtmlファイルからシームレスに表示するレイアウト手法です。
コンテンツを更新する際に、ひとつのソースを修正するだけでモバイルサイト、PCサイト両方に対応できるため、モバイル対応が重視されるようになった現在、採用するサイトが増えています。

しかし、レスポンシブレイアウトには、デザイン上のデメリットもあります。
横幅の大きく異なるPCにもモバイルにも、同じデザインを表示するためには、画像や文字のレイアウトはよりシンプルなグリッド配置でなければなりません。
PCとモバイルではネットワーク環境にも違いがあるため、どちらにも対応するためには画像の容量や数、文字数、表示できるコンテンツの数などにも制限が生じます。

流行が続いている「フラットデザイン」も、発展が続くモバイル環境に対応しながら、洗練されてきたものです。

一般的なレスポンシブデザインのイメージ

3.CSSやJavaScriptの発展で多様な表現が可能に

しかし、同じ流行が長く続けば、人は新しさを求めます。
近年ではCSSやJavaScriptの発展で、マルチデバイスに対応しながら、Web上でより自由なレイアウトや動きのある表現ができるようになりました。

そのなかでも「シンプルで整った」デザインの潮流に、変化をもたらしたのが「ブロークングリッドデザイン」などといわれるデザイン手法です。
テキストや画像をグリッドに沿って、すべてきちんと整列させるのではなく、目立たせたい部分をあえて「ずらす」、あえて「重ねる」手法で、まるでDTPで制作したポスターやパンフレットのような、美しいレイヤーを実現しています。

このようなデザインを効果的に取り入れているサイトには、下記のような共通点があります。

また、すべてを無秩序に並べるのではなく、揃えるべきところがきちんと整列されていることも共通しています。
整列したコンテンツの中に、少しズレた要素が入ることで、その部分を際立たせ、デザインにリズムや躍動感を生み出しているのです。

4.「重ねる」デザインの事例

それでは実際に、「ずらす」「重ねる」デザインをうまく取り入れたWebサイトの参考事例を見てみましょう。

5.まとめ

参考事例としてご紹介したサイトは、どれもキャッチコピーやキービジュアルが際立ち、躍動的な印象をうけます。

たとえばファッションの着こなしやヘアスタイルなどでも、「あえて崩す」「あえてはずす」要素が入れることが、おしゃれと言われる場合があります。
フラットやミニマルなデザインの流行が続いたなかで登場した、あえて「ずらす」「重ねる」手法は、デザインの単調さを打破し、シンプルな中にもアクセントを付けるテクニックとしてぜひ注目したいトレンドです。