スクロールで視線を奪うパララックスエフェクトや、一瞬でエンゲージメントを高めるマイクロインタラクションなど、Webデザインの世界で流行しているトレンドは多数あります。

トレンドを取り入れることは重要ですが、ただなぞるだけでは独自性が出しづらいという問題があります。

今のトレンドを踏襲しつつ独自性を出すためには、まだあまり使われていないけどこれから流行する可能性のあるデザインを取り入れるのも1つの手段です。

今回は、今後流行するかもしれない3つのデザイントレンドをご紹介します。

参考：
2016年のデザイントレンドを振り返ろう！印象に残る国内・海外サイト50選
五感を刺激する！2017年注目のWebデザインアイデア10選

これから流行るかも？Webデザインのトレンド

1.直線的ではないヒーローヘッダー

ホームページの冒頭で、視線を引きつけて大きく印象づけるためにヒーローと呼ばれる画像とキャッチコピーを添えた見せ方をする部分があります。
通常、ヒーロー部分に限らず、多くの区切り目部分を平行に区切っていきますが、あえて四角形のように直線的に区切らずに、曲線や斜めの線などを使って区切っていくデザインが徐々に増え始めています。

百聞は一見にしかずといいますが、実際に具体例を見て確認していきましょう。

a.png
▲ by Leo Bassam on dribbble

ご覧いただいているのは、Plutioと呼ばれるタスクマネジメントツールの紹介ページのプロトタイプです。
ヘッダーの青い部分と、白背景の区切り目が、直線的ではなく、特徴的な曲線になっています。

b.png
▲ by Ibnu Mas'ud on dribbble

ALLDSGNRのヘッダー部分は、近未来的なブルーとパープルのカラーリングになっていますが、平行ではなく斜めに区切られていることがわかります。

c.png
▲ by Alex Sailer on dribbble

FIND YOUR CALLINGのページでは、さらに面白い形の区切り目を採用しています。
区切り目の中心部分に据えられた円形部分にアイコンが表示されています。

d.png
▲ by Brian Benitez on dribbble

Financial.lyのページでは、雲の部分と白背景がうまい具合にブレンドされています。
このようにシームレスに区切り目を繋いでいくデザインも面白いですね。

特徴的なヒーローヘッダーを実装するには、「z-index」を使ってレイヤーのようにボックス部分を重ねる手法がよく使われます。
ぜひ、ご自身のホームページにもシームレスでユニークなヒーローを実装してみてください。

2.オフセンターデザイン

モバイルサイトやモバイルアプリで最近よく見かけるようになったもののひとつに、オフセンター(Off-Centered)なデザインがあります。
オフセンターとは、あえてセンタリングせずに少し余白を開けて右や左に寄せていくデザインの手法です。
モバイル端末では表示可能な画面領域が限られているため全画面表示させることが多いですが、あえてオフセンターにすることで、なぜかカードやボタンなどのUIが機能的に見えてくるのです。

こちらも、実際にデザインされたプロトタイプを見てみることにしましょう。

e.png
▲ by Messaki on dribbble

f.png
▲ by Rounded Rectangle on dribbble

g.png
▲ by kingde on dribbble

いずれのデザインも、左側にスペースを開けておき、右寄せになっているのが分かりますね。
実際のところこのオフセンターなデザインが流行するのは「一時的」だという見方もありますが、一般的な中央揃えで画面全体を使ったデザインとは一線を画しているので、目を引くことは間違いありません。
また、上の3つのデザインは、下にいくごとに左側のスペースの幅が広くなっていますが、どれくらいスペースをとるのかで印象もずいぶんと変わってきます。

インパクトと使い勝手のバランスをうまくとってデザインしてみるといいでしょう。

3.エレクトリックブルー

インターネット黎明期によく出現した、青い色のハイパーリンク。

yahoo.png

実はデフォルトのハイパーリンクの青色を、*「エレクトリックブルー」*と呼んでデザインとして使われ始めている動きがあります。
パソコンのOSを立ち上げる際の設定画面などでもよく見かけるこの色を使うトレンドは、レトロへの回帰とも言えるでしょう。

以下、エレクトリックブルーを取り入れている実例をのぞいてみましょう。

i.png
▲ Bloomberg

アメリカのニューヨークに拠点を持つ大手総合情報サービス会社のBloombergほホームページを見てみましょう。
メインカラーにエレクトリックブルーを採用しており、デジタルにも強そうな印象を与えています。

h.png
▲ by Cole Hooey on dribbble

こちらもロゴやヘッダーにエレクトリックブルーを使っています。
ミニマルなデザインは、まるで90年代のインターネットのようですが、余白を十分に空けることでシンプルで美しいデザインになっています。

j.jpeg
▲ Cuberto

Cubertoのホームページは背景全体にエレクトリックブルーを活用しています。
まるで夜空を見ているような空間がブルーとマッチしており、星がゆっくりと動いていきます。

エレクトリックブルーのよさをしっかりと出していくには、あまり色を多用しないほうがいいでしょう。
エレクトリックブルー自体に存在感があるので、エレクトリックブルー以外には、白と黒だけを使うのがベストです。
*「デジタル」「クリエイティブ」「最先端」「アート」*などのキーワードと相性がいいので、適宜使ってみましょう。