2017年上半期に取り入れたい5つのWebデザイントレンド

世界中のWebデザイナーが、日々最新の技術やトレンドに追いつこうと必死になっています。
実際、AIやVRなどの技術がWebの世界にも侵食しはじめたこともあり、現状維持のままで留まってしまうWebデザイナーはますます世界に取り残されてしまうでしょう。

その中でWebデザイナーがやるべきなのは、世界でよく取り入れられているトレンドを知り、キャッチアップしていくことです。
今回は、2017年上半期に取り入れてみたい5つのWebデザイントレンドをご紹介します。

2017年上半期に取り入れたいWebデザイントレンド

1. シンプルな塗り背景

デザインにおいて何かを強調するときに使える最も簡単な方法のひとつが、2つ以上の要素を比べることです。
数年前にフラットデザインが流行しましたが、ここに来てアニメーションなどの動きをつけて、フラットデザインが再登場しています。
単色で塗った背景はフラットに見えるため、アニメーションをはじめとしたデザイン上の「仕掛け」を演出するためのキャンバスとして使われています。

逆に言えば、アニメーションが際立つのは、背景がフラットだからです。
以下に紹介するようなホームページは、背景が白やパステルカラーを採用しており、ユーザーがメインコンテンツに集中できるようにできるだけその存在感を隠しています。
ほのかな色を塗っただけの背景は、まるで芸術作品を展示する際の壁紙のような役割をしているのです。

▲ http://www.3kvc.com

▲ https://retracehealth.com

▲ http://sprinklesapp.com

シンプルな背景にする際に色を選ぶときには、気をつけたいことがあります。
それは、できるだけ白や黒、あるいはニュートラルな色を選ぶことです。
大胆で明るいビビッドな色だと意図に反して背景のほうが目立ってしまうので、目標を達成できなくなってしまうからです。

2. 低コントラストレイヤーの全面背景

ヒーローイメージを使ったWebデザインのレイアウトが未だに健在かどうかは別として、低いコントラストのダークカラーのオーバーレイを使った全面背景のWebデザインをよく見かけるようになりました。
極端に低いコントラストであれば彩度や明度の高い色の文字をタイポグラフィとして使うことで目立たせることができ、より立体感を持ったデザインを演出することができます。

▲ https://www.internetum.com

▲ https://music-incubator.eu

▲ https://www.polyterra.com

ただし、低コントラストのダークカラーが必ずしも黒やグレーである必要はありません。
深いグリーンやブルーのように、普段は使わないような色を使って個性を演出しているホームページも存在します。

不思議なことに、低コントラストのオーバーレイをかけることで、セミフラットなデザインが映えて見えます。
できるだけ上に配置する文字やボタンは、背景と対照的に明るい色を使うようにしましょう。

3. ブルータリズム

ブルータリズム(Brutalism)とはもともと1950年代から見られるようになった建築の形式で、荒々しさを残した打放しコンクリートなどを用いた表現を特徴としています。
「Brutal」とは冷酷で厳しい野生のさまを意味する形容詞で、「生身」(raw)を意味するフランス語に由来しています。

▲ http://www.purchase.design

▲ http://www.madeinaugust.co.uk

▲ https://theoutline.com

ブルータリズムは大胆な色使いをするので、決してユーザーフレンドリーであるとは言えません。
しかし、まるで前衛芸術のように若い世代の主張のようにも見える真新しいデザインは、まさに従来型のWebデザインと一線を画すような、Webデザイン界の超現実主義シュルレアリスムとも呼べる表現様式です。

日本ではミュージシャンのきゃりーぱみゅぱみゅさんのPVでブルータリズムが採用されています。
エディトリアルや映像制作で流行しているトレンドが、ようやくWebデザインにもやって来ました。

4. 白いエッジ

Webデザインのトレンドの中でもフラットデザインやミニマリズムなど、よりシンプルなものが好まれるようになったのはこの5年ほどのことです。
そして、シンプルさを追求した新しい表現方法が、四方に白いエッジを設けるデザインです。
白い額縁に飾っているようにも見えるので、海外ではこのトレンドを「ホワイトフレーミング」(White Framing)と呼ぶひともいます。

▲ http://www.adidizdarevic.com

▲ http://www.camdentownbrewery.com

▲ http://hillsiderancho.com

面白いことに、100％絶対ということではありませんが、縁取りのほとんどは縁取りに*「白」を採用しています。
白い縁取りがあると、真ん中に並べられるコンテンツがいくぶんかクリーンに見える効果*があります。
これは特にメインコンテンツである中央の色が濃い色であればあるほど、クリーンに見えるようです。

5. ダイヤモンドカット

ホームページのレイアウトというのは、縦横、水平・垂直のグリッド上にオブジェクトを配置するのが基本でしたが、近年ではグリッドを崩すような「ブロークングリッド」(Broken Grid)と呼ばれるレイアウト手法が注目を集めています。

参考：
あえて壊す？思わず視線が奪われる「ブロークングリッドレイアウト」とは

そして、2017年によく見られるようになったのは、正方形を斜め45度に傾けた形で写真を切り抜くような、いわゆる「ダイヤモンドカット」(Diamond-cut)と呼ばれるデザインです。

▲ http://www.linstantunique.com

▲ http://epoch-inc.jp

面白いことに、ただ単純に正方形を傾けただけだと思われるかもしれませんが、傾けただけでもだいぶ印象が変わります。
例えば写真を切り抜いて使った場合は、四つの角がはっきりと目立つようになります。
ただ単に正方形に写真を切り抜いたときと違って、印象に残りやすくなる効果があります。