2019年に見かける10種類の刺激的なウェブデザイントレンド

  エージェンシー, メディア, 企業

今年も例年どおり広範囲にインターネット上を検索し、2019年のウェブサイトで見かけることになりそうな新しいトレンドを探ってみました。2019年のウェブデザイントレンドでは、レイアウト、色調、タイポグラフィー、余白の使い方など、どんなデザイン要素も切り離すことができません。

2019年に入ってから多くのウェブサイトで見かけることになりそうな10種類のデザイントレンドは、次のとおりです。

1. 非グリッド/非対称のレイアウト

このトレンドは昨年のデザイントレンド予測ガイド(英語)にも加えましたが、2019年になった今も続いているようです。

デザイン用語におけるグリッドとは、縦横の線をひいた架空の平面のことで、ページや画面に要素を配置しやすくするために使われます。多くのウェブサイトで、すぐにグリッドを見つけることができます。ウェブサイトの左側を見れば、ロゴ、タイトル、コンテンツなどが並んでいることが多いですよね。非グリッドの場合だと、要素が画面のいろんなところに配置され、きっちりと線上に並べられている印象が薄くなります。

Times Talksのウェブサイトの大部分とさまざまなセクションで非グリッドのレイアウトが使われている。とくに上図のようなヒーローヘッダー部分で顕著。

このタイプのデザインは、境界線にとらわれずに非対称のレイアウトでいろいろと試しながら意外性を重視するもので、ここ最近、よく見かけるようになりました。周囲と違いを出す、注意を引きつける、新しいデザインを試す、といった目的で補助的に使われてきたテクニックですが、2019年になってからは、よりはっきりと一般的にインターネットで使われるようになっています。

Studio Reveleのトップページでは、非対称/非グリッドで実験的にデザインされている。上図の円は、画面上で動かすことができ、非グリッドのコンセプトを際立てている。

きっちりとしたグリッドのレイアウトはここ数年でかなり重用されるようになりましたが、現在はそこから距離が置かれ始めています。今年はさらに多くの非グリッド/非対称のレイアウトを見かけるようになるでしょう。非グリッド/非対称のウェブデザインが許容されるようになったことで、このトレンドが次の1年でさらに広まると見込まれます。

2. 流線形で有機的なデザインと要素

フラットデザインに直線はつきものでした。現在はそこから徐々に距離が置かれ、なめらかな要素とデザインが試されるようになっています。なめらかというのは、円や直線でできた正方形や長方形などの一般的な形状ではなく、有機的な流線形を主に指しています。

Wandering Aimfullyのトップページの一部では、丸い画像の後ろとヘッダー部分の間に挟まれるようにして、有機的な形状や線がちょっとした背景として用いられている。

ウェブ上では、真っすぐの無機質に近い直線がお馴染みですが、池、湖、紙切れといった自然や生物に近い要素へ置き換えることで、有機的な形状と線が本来の人間に沿った親しみやすい印象を生むようになります。

Mawlaのトップページのヒーローヘッダー部分では、有機的な形状や線が使われていることが確認できる。

2019年に入り、ウェブデザインで長らく使われてきた円や四角のような典型的な形状は、より有機的な形状と線に置き換えられていくでしょう。まったく新しい要素とアイデアをデザインに取り入れたウェブサイトが誕生していくと思われます。

3. ノスタルジックでレトロなデザイン

かつてのものが、新しいものとして見直されています。どんなことでも試すことができそうなフラットデザインですが、少し懐かしさのあるデザイン要素をあらためて使ってもいいかもしれません。

Statamicのウェブサイトデザインでは、1980年代の原色と鮮明な画像を彷彿とさせるレトロな色使いが採用されている。

ノスタルジックでレトロなデザインスタイルを試すことで、過去と現在のデザインを魅力的に対比させることができます。とくにおもしろいのは、インターネット以前の時代のレトロなスタイルです。多くの人にとって“新しい”印象になるデザインでしょう。

Great Jonesのウェブサイトでは、1970年代らしさのあるタイポグラフィーや色使いが採用されている。1983年のARPANETで普及していたデザインだ。

過去の時代に影響を受けたさまざまなスタイルを、ウェブサイトのデザインとコンテンツの両面で取り入れるページが増えていくと予想されます。こうした要素の一部には、過去のデザイントレンドや別時代を思い起こさせるタイポグラフィーが含まれることになるでしょう。

4. 写真を引き立てる処理

これまでにも写真を使ってユニークなデザインが行われてきました。それがとくに顕著なのがウェブデザインです。円形に配置したり、白黒の色調にしたり、ドロップシャドウをつけたりと、デザイナーはあらゆるテクニックで写真を強調して注意を引きつけてきました。これはウェブサイトに限らず、どのタイプのデザインにも言えることです。

KOBUのウェブサイトでは、単に写真を掲載するのではなく、チームメンバーの写真を切り出して使うことで、デザインに流れをつけている。

写真にひと手間かけることで、注意を引きつけられるだけでなく、注意を引き離すことも可能です。これまでは、ほとんどウェブサイトでヒーローヘッダー風の大きな写真がページの横幅に合わせて配置されてきました。縦幅もかなり長いものが多く、その写真が変更されることはほぼありませんでしたが、2019年は写真の掲載方法を変えることがデザインのトレンドになっていきそうです。

Dripのウェブサイトでは、切り出された写真に手描きの模様や図形を加えることで、写真をさらに引き立てられ、ウェブサイトそのもののデザインも強調されている。

写真の処理を1種類で済ますのではなく、数種類の処理を重ねることで写真を最大限に引き立てて、注意を引きつけたり、引き離したりするウェブサイトが増えていくでしょう。写真をモノクロにしたり、被写体を切り出したり、模様を加えたりといった処理を重ねて、新しいブランドイメージを作っていくことが、2019年のウェブデザインではさらに顕著になりそうです。

5. 単色/無色

ウェブサイトでは何種類でも好きな色を使えますが、1色だけに限定してみるとどうなるでしょうか? もしくは、まったく色を使わないとどうなるでしょう? このテクニックをうまく使いこなせば、デザインを引き立てて印象に残るものにすることができます。

Digital Broのウェブサイトでは、黄系の色に統一されており、それ以外の色はほとんど使われていない(白と黒は無彩色として扱われる)。

単色に限定することで、デザインの柔軟性を抑制しながら、ブランドカラーをはっきりと打ち出すことができます。ほとんどのウェブサイトでは2~5色で全体を統一しています。単色に限定すれば、違いのあるウェブサイトになって閲覧者に印象を残せるようになります。

Climateのウェブサイトでは、モノクロで統一されており、それ以外の色は使われていない。掲載している映像もモノクロになっている。

色使いをシンプルにしようとしている場合は、さらに一歩踏み込んで完全に無色にするのも選択肢のひとつです(アートやデザインの世界では、白、黒、灰は無彩色として扱われます)。2019年は、色使いの少ないウェブサイトや無色のウェブサイトがさらに増えていきそうです。

6. デザイン要素を重ね合わせる

これは非グリッド/非対称のデザインと同系統のテクニックです。ウェブページでは、デザイン要素を互いに重ね合わせると、視覚的におもしろくなるコンテンツがあります。わたしたちは余白のあるウェブページに各要素を触れ合わないように配置するデザインに慣れているので、このテクニックでは意外性が出せます。

Mad Studioのウェブサイトでは、デザイン全体の方向性として要素が重ね合わされ、ちょっとしたアニメーションをつけることでウェブサイトに3次元感覚が生まれている。

よく考えてデザインすれば、要素を重ね合わせるテクニックでウェブサイト全体を引き立てることができます。モバイル端末での閲覧を優先して考えなければいけない現在だと、このテクニックの実践は難しいかもしれません。要素の重なり具合をうまく考えておかないと、おかしな表示になってしまい、ユーザーが当惑して不満を感じることになります。

Hersのウェブサイトでは、トップページのメイン・ヒーローヘッダーを含む一部の場所で要素が重ね合わされている。

2019年は、要素を重ね合わせる3次元的なデザインがさらに試されていくことになりそうです。

7. これまでとは違うヒーローヘッダー

前述のテクニックでも少し触れましたが、ほとんどのウェブサイトでヒーローヘッダー部分に画面いっぱいの大きな画像が使われています。たいていの場合は、そこへ閲覧者に見てほしい文章が添えられています。この数年間、ヒーローヘッダー部分での新しい試みはそれほどありませんでした。ヒーローヘッダーは、ウェブサイトで最重要箇所といって間違いないでしょう。

Zoo Creativeヒーローヘッダーでユニークなアプローチを取っており、ヒーローヘッダーをビル広告として扱ってアニメーションを巧みに活用している。

いくつかのウェブサイトでは、すでにヒーローヘッダーで新しい試みが行われています。横幅いっぱいの画像へ文章を目立つように付け加えたヒーローヘッダーから距離が置かれ始め、これまでと違うデザインに挑む人たちがさらに増えていくでしょう。

Andreas Nymarkのウェブサイトでは、余白を十分に取ったシンプルな見出しのヒーローヘッダーが採用されている。このデザインには、後述のトレンドの要素も含まれている。

2019年は、ウェブサイトのもっとも大事なこの部分で、さまざまなタイプの試みが行われることになると思います。ヘッダーのエリアを小さくしたり、掲載するコンテンツを変更したり、横幅いっぱいの画像に代わって別のものを使ってみたりと、サイト訪問者を最初に引きつけるためにヒーローヘッダーの扱いがさらに重要視されそうです。

8. 大きく実験的なメニュー表示

毎年、ウェブサイトのメニュー表示に関するトレンドを見かけます。理由はおそらく、デザインの対象として挑みがいのある要素だからでしょう。ウェブページの使い方を考えるうえで欠かせない要素でありながら、機能性とデザイン性の両立させるのは大変なのがメニュー表示です。

56 Digitalのウェブサイトでは、メニュー表示が一般的な小さいものではなく、ページの中心的要素として大きくなっている。

2019年も引き続き実験的なメニュー表示が増えていきそうです。ただし、ページ上の配置やフォントサイズ、もしくはレイアウトそのものなどを単に変更するのではなく、ウェブページの主要部分にしたり、中心的要素として非常に大きくしたりするなど、メニュー表示の在り方を広げていくものになるでしょう。

Ganderのウェブサイトでは、ページ上部や下部に配置される一般的なメニューバーに代わって、四隅に大きくメニューが配置されている。

実験的なナビゲーションが2019年のデザイントレンドになっているので、大型のナビゲーションや、ナビゲーションしかないトップページ、高度なアニメーションを取り入れたナビゲーションなどが増えると予想されます。

9. 十二分に余白を取る

余白を取るというテクニックは、何年もデザイナーに使われてきました。ところが、さらに広く余白を取ったり、コンテンツそのものの代わりに余白を中心に据えたりすることは、それほど一般的ではなかったかもしれません。

Daniel Boddamのウェブサイトでは、見出し部分に十分な余白が取られている。一般的にはコンテンツで埋められる場所が余白になることで意識が引きつけられる。

このように十分な余白が取られていると、その効果がよくわかります。つまり、余裕や空間を持たせることで、ページを見ていて疲れないものにする効果です。現在では大きく余白を取るテクニックが、デザインで意識を引きつける要素や中心的要素として使われるようになっています。必ずしも余白が必要ではない場所で余白を取ると、その場所がデザインの重要箇所になってウェブサイト訪問者に注目されやすくなります。

Maxime Rimbertのウェブサイトでは、大きく余白が取られている。それによって、画面下部の作品に意識が集まりやすくなり、画面上部の文字との距離感が際立っている。

2019年は、大きく余白を取って存在感を出したり、中心的要素に据えたりするウェブサイトが増えていくかもしれません。かつて余白は空間の無駄遣いだと考えられていましたが、いまのトレンドでは、ちょっとした効果をもたらすものになっているようです。

10. タイポグラフィーの可能性を広げる

デザイナーはタイポグラフィーをいろいろと試すことを求められますが、印刷物と違い、ウェブサイトで実験的なタイポグラフィーを使うのは少し大変です。とはいえ、ウェブサイトのコーディングが高度になるに従い、実験的なタイポグラフィーは使いやすくなってきています。

Kurppa Hoskのウェブサイトでは、アニメーションとインタラクティブなインターフェースで実験的なタイポグラフィーが採用されており、マウスポインタを動かすと文字が円状に爆発する。

これまでにない実験的なタイポグラフィーには、意図的に文字の一部を削って隙間を作る、文字内に写真を取り込む、文字組みを斜めにする、アニメーションで動きをつけるなどのテクニックがあります。

ARCHE68のウェブサイトでは、2次元を3次元のように見せるタイポグラフィーが採用されている。このタイポグラフィーは単に曲がっているだけでなく、文字が自動で左から右へ流れるようになっているほか、画面スクロールの操作を行うと、文字が動く(前述の実験的なメニュー表示も行われている)。

2019年は、実験的なタイポグラフィーで新しい可能性を模索することが、この1年の新しいウェブサイトデザインとともにトレンドになるでしょう。印刷物ではすでに実験的なタイポグラフィーが試されていますが、そうした試みが、新しいコーディングによってウェブサイトでも見られるようになると思われます。

最後に

ポスト・フラットデザインの時代となったいま、これまで以上に実験的なアプローチがウェブデザインで取られているようです。2019年は、ウェブページのあらゆる要素でさまざまな試みが行われるようになると言っていいでしょう。

※「2018 web design guide」、「2017 web design guide」「2016 web design guide」では、過去のトレンド予測をご案内しています(いずれも英語)。

十分な余白、ウェブサイトの中心的要素としてのメニュー表示、レトロな雰囲気を取り入れる実験的なタイポグラフィーなど、ありとあらゆるデザインが2019年のウェブサイトで試されることになりそうです。

この記事は、The Next Web(英語)のアンバー・リー・ターナー(Amber Leigh Turner)が執筆しました。パブリッシャーネットワークを行うNewsCred(英語)をつうじてライセンスされています。ライセンスに関するご質問は、legal@newscred.comへ直接ご連絡ください。