2019年の夏は”さわやか＆シンプル”。サマーシーズンに流行るWebデザイン3選

夏に向かうにつれて、街にも人にもリラックスした楽しげなムードが漂いはじめます。Webサイトもその例外ではありません。

2019年の夏は、シンプルなデザインや広いホワイトスペースが人気を集めているようです。

今回は2019年夏におさえておきたい、Webデザインのサマートレンドを3種類ご紹介します。

1. 色つき背景×白文字のナビゲーション

ナビゲーションといえば、最近はハンバーガーメニューの話題が多いですよね。

しかし今回取り上げるのは、白文字を取り入れたシンプルなナビゲーションです。背景色を変えるだけで、印象はガラッと変わります。夏っぽくさわやかな青色を採用するのもおすすめですね。

classtag

Webサイトを訪れた人はまず、画面の大部分を占める広いホワイトスペースに目がいきます。その後、右の青いエリアと、その上に配置された白い文字のナビゲーションに目が止まるでしょう。

注目してほしいエリアや順番を、色によって階層化していることがわかりますね。巧みに視線を誘導した良い事例です。

▲出典：classtag

DesignGapp

画面上部が青のグラデーションになっており、そこに白文字でナビゲーションが配置されています。

こちらも画面中央に広いホワイトスペースがあるため、まず中央に目がいきますよね。ナビゲーションは、ユーザーに次の行動を促すためのアシスタントのような存在です。まずコンテンツに目がいき、そしてナビゲーションに目がいくという構造は、理にかなっているといえます。

▲DesignGapp

Camo

ツートンカラーの配色と、波のような曲線が印象的です。下にスクロールすると、同形かつ白色 / 淡い緑色の背景が用いられています。曲線を境に色が反転しているようなデザインです。ナビゲーションはページ最上部を表示している時のみ白文字＆濃い緑色の背景で、以降はアニメーションで色が反転します。

実際にページを見ると、訪問者がナビゲーションに注目しやすい仕組みであることが分かります。

▲Camo

2. 円を取り入れたデザイン

円を使ったデザインは、これまでもたびたび注目されてきました。円はどんなデザイントレンドとも組み合わせやすい万能エレメントであり、この夏ますます注目度を上げています。

ナビゲーション要素から背景まで、さまざまな場面で活躍してくれるでしょう。

Bimble

画面左よりに配置された、明るい色の円が目をひきます。製品のラベルにも円が使われていますね。

円とピンク色の組み合わせが、程よくリラックスした雰囲気を演出しています。

▲Bimble

Raquel Acon

まず大きな円に目がいきますが、よく見るとさまざまなところに細かな円が使われています。

これらの円は動きや変化、そして調和をあらわしています。

▲Raquel Acon

Major Tom

円が波のようにさざめく、シンプルながら印象的なWebサイト。アニメーションをつけることにより、フレッシュなエネルギーをうみだしています。

ぜひ静止画ではなく、実際にWebサイトをのぞいてみてください。

▲Major Tom

3. 均等な大きさのグリッド

異なる大きさの画像を組み合わせたものや、画像同士をオーバーラップさせたものなど、グリッドにはさまざまな種類があります。しかし2019年の夏にご紹介したいのは、その中でももっともシンプルな「均等な大きさのグリッド」です。

ポートフォリオサイトには特におすすめですが、製品の紹介ページや決済代行システムのWebサイトでも活用されています。

Gabriel Alves

こちらのグリッドはほぼ正方形で、静止画と動画を組み合わせているところが特徴です。

ホバーすると緑色のオーバーレイがかかり、白い文字で詳細が表示されます。

▲Gabriel Alves

Liebe Ouark

Webサイトにアクセスすると、画面全体にグリッドが展開されます。

Gabriel Alvesのグリッドとは違いインタラクティブなものではありませんが、動きを感じさせる画像を使っており、カラフルで元気な印象です。

▲Liebe Ouark

Payvision

カラフルな写真で紹介されているのは、決済代行サービスのチームメンバー。

グリッドはフルスクリーンではなく、画面の中心に表示されます。写真がゆっくり入れ替わるところも注目したいポイントです。

▲Payvision

これらすべての例に共通しているのは、要素の「重み」が均等であるということ。そして枠で区切られておらず、要素同士が直に接しているということです。

おわりに

今回ご紹介した中でも最もおすすめしたいトレンドは、やはり円でしょう。

とてもシンプルなエレメントなので、もしかしたら使われていることにすら気づかないかもしれません。しかし、だからこそ応用しやすく、実用的なのです。

（原文：Carrie Cousins　翻訳：Nakajima Asuka）

あわせて読みたい！▼