エムタメ!について facebook twitter

マーケティング担当者のために
マーケティングに関わるためになる情報をためていく

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2019/01/25
まるでDTPデザインのようなレイアウト。テキストとコンテンツを「重ねる」デザインがトレンド!

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

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

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

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

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

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

●色の表現方法

紙のデザインはCMYK(Cyan、Magenta、Yellow、Key plate)、WebデザインはRGB(Red、Green、Blue)という色の表現方式を使用します。

●サイズ

紙のデザインは、作成する制作物の紙の大きさが最大値です。
一方Webサイトは、縦の長さはスクロールによって無限に伸ばすことができます。
また横幅は、ユーザーの閲覧環境によって変わるため、可変的であることが前提です。

●レイアウト

紙媒体は、掲載できる情報量に制限があるため「1ページの中でいかに情報を整理し、わかりやすく、印象的にみせられるか」が重要になります。
一方Webでは、文字や画像などの要素を、縦方向や横方向にはっきり区切って配置することで、導線がわかりやすく、閲覧環境が違っても崩れにくいレイアウトにすることを基本としています。

●動き

紙媒体は静的デザインなのに対し、Webデザインは動的デザインです。
Webページでは、マウスオーバーでのアクションや、ページ内でアニメーションや動画の再生、リンクによるページ遷移など、動きのある表現やユーザー導線を踏まえてデザインすることが必要です。

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

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

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

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

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

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

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

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

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

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

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

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

  • とくに見せたい写真や画像をあえて整列させず、ずらして配置
  • キャッチコピーなどの目立たせたい文字を、背景となるオブジェクトからはみ出して配置
  • マルチデバイス対応も加味し、情報量を詰め込みすぎないシンプルさは維持

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

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

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

ウォンテッドリー株式会社

ウォンテッドリー株式会社

画像引用:ウォンテッドリー株式会社

大きく使ったキービジュアルと、重ねて配置された英語のコピーがシンプルだけど洗練された雰囲気です。

リグナイト株式会社

リグナイト株式会社

画像引用:リグナイト株式会社

細めのフォントを使うことで、よりDTPのカタログのような印象を受けます。

住信SBIネット銀行株式会社

住信SBIネット銀行株式会社

画像引用:住信SBIネット銀行株式会社

写真と背景カラーブロック、飾り文字の「ずらした」配置が参考になります。

ポート株式会社

ポート株式会社

画像引用:ポート株式会社

シンプルだけど、動きのあるデザインが魅力的です。

The Mirpuri Foundation

The Mirpuri Foundation

画像引用:The Mirpuri Foundation

重ねて配置されたキービジュアルがスライドし、ファーストビューを印象的にしています。

5.まとめ

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

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

セミナー情報

セミナー情報

無料資料ダウンロード

BtoBマーケティングハンドブック 表紙

BtoBマーケティングハンドブック

無料ダウンロード

デジタルマーケティングのすすめ

デジタルマーケティングのすすめ

無料ダウンロード

関連キーワード

Web制作 おすすめ

特集

WEBリニューアル物語

WEB制作のよくある失敗に全て引っ掛かるけど憎めない青木の奮闘記

はじめての展示会物語

はじめての展示会出展までの道のりを描いたドッタンバッタン劇場

メールマーケティング