Webデザインについて考えるとき、最も後回しにされるものの一つが「背景」に関するデザインです。
どうしても、ロゴデザイン、ボタンやメニューなどのUI、ナビゲーション、フォントのタイポグラフィなどが優先されてしまいます。
しかし、背景を少し変えるだけでも、180度印象が変わることもあります。
そのため、「背景」を軽視することはできません。

今回は、2017年に流行するであろう、背景に関するWebデザインのトレンドについてご紹介します。
ご紹介するデザインを参考にすることで、新しいアイデアが生まれるかもしれません。

2017年の背景に関するWebデザイントレンド

1. 階層的ビビッドカラー

数年前に「フラットデザイン」と呼ばれる、パステルカラー調のシンプルなデザインが流行しました。
その延長線上で、できるだけシンプルにしつつも若くて活気のあるイメージを持つ「ビビッドカラー」を使うホームページが増えています。

ポイントは、単にビビッドカラーを使っているだけではなく、ブロックのように重ねて使っているのがポイントです。

このアイデアの発端になっているのは、Microsoft Windowsでサポートされている「メトロモード」のUIです。

メトロモードのUIでは、ビビッドなカラーブロックを上下左右に積み木のように積み立てて、情報を区別できるようにしています。
また、色のアイデアはマテリアルデザインで使われている「マテリアルカラー」が源流だとも言われています。

ビビッドな色の背景を使うと、ユーザーの視覚的な興味を引くだけでなく、画像やそのほかの視覚要素を省いて大胆なデザインができるようになります。
情報量が多いホームページには向いていないかもしれませんが、シンプルな分、サイト作成者にとってはメンテナンスしやすいという利点もあります。

2. 抽象的なアニメーション

抽象的な図形を使ったアニメーションを背景に取り入れているホームページも増えてきました。
いくつかの色や図形を組み合わせて動かすだけで、不思議と何か意味を持っていそうな雰囲気を演出できるのです。

図形を使ってアニメーションを作成することは、ビビッドカラーに比べるとオリジナリティを出しやすいという利点があります。
ホームページを作成するときには視覚的に「差別化する要素」があったほうが、ユーザーの興味を引きます。
図形を使った抽象的なアニメーションは、図形自体もユニークで、さらに独特で個性的な動きをさせたアニメーションにすればするほど、ユーザーの視線を集めることができます。

ポイントは、単一的で直線的な動きにしないことです。
動きが予測できてしまうと、ある程度見たあとにユーザーは飽きてしまうかもしれません。

予測不可能で突発的であるほど、ユーザーはその動きを面白がって、結果的にホームページの滞在時間を伸ばすことに繋がります。

3. 写真＋幾何学模様

画像を用いたヒーローヘッダーは、まだまだ健在です。
ファーストビューで大きな写真を用いると、一瞬でホームページのテーマが刷り込まれ、ユーザーのエンゲージメント率を上げる効果があります。

厳密にはヒーローヘッダー自体は背景とは言えませんが、全画面に引き伸ばして拡大したインパクトのある画像によってホームページの印象は格段によくなります。
画像の上にはヘッダーテキストやナビゲーション、「今すぐ登録」や「さらに詳しく」などのCTAボタンを置くので、その意味では背景の仲間に入れてもいいのかもしれません。

しかし、Webデザインのトレンドを振りかえると、背景写真にはデュオトーンが使われたり動画が使われたりとさまざまな試行錯誤を繰り返してきたわけですが、最近は新しいトレンドとして、幾何学模様を取り入れたヒーローヘッダーが登場しています。

これは、写真の上にイケてる幾何学模様を配置して、さらに視線を奪う工夫をしています。
三角形や四角形、二重丸や波模様、渦模様などはそれぞれに感触的な意味を持っているので、幾何学模様を使うことで写真にワンモアの意味を加えることができるのです。

4. 薄い影のようなグレー

ミニマルでシンプルなデザインが流行していますが、ミニマルデザインは次の段階に移行しています。
それが、薄いグレーの活用です。

背景を真っ白にするのではなく、少し薄いグレーにするというデザインは、実は従来からあるものです。
しかしながら、写真を多用し、テキストをできるだけ少なくし、余白を十分にとるミニマルデザインとの相性は抜群です。

ほんの少しだけ薄いグレーを背景にかけることによって、写真が背景から浮き出て、高級でエレガントに見えるので、最近では時計やファッションなどのブランドのホームページでよく見かけるようになりました。

また、ブランドカラーをアクセントカラーとして使うと、白背景よりも印象に残りやすくなります。

ただし、白やグレーは背景色の中でもかなり控えめなほうなので、薄いグレーの背景を敷いたからといって、それだけで特徴的で個性が出るというわけではありません。
白やグレーには空間的な意味合いがあるので、写真の輪郭やテキストとの位置関係によってはじめてよさが浮き彫りになります。

写真を切り抜きにするか、あるいは四角く切り取ったまま使うのかでもずいぶんと印象が変わるので、まわりの要素に関しては慎重にどのように配置すべきかを考えていきましょう。

5. 左右非対称 (アシンメトリー)

Webデザインといえばグリッドレイアウト(グリッドデザイン)を使うというのが主流ですね。
グリッドレイアウトは、情報が多いと整理されて表示されるので、コンパクトでまとまっているように見えますが、一方で整然としていて真面目すぎる印象を与えることがあります。

そこで最近登場しはじめてきたのが、アシンメトリー、つまり左右非対称のデザインです。
左右対象であれば確かにバランスが取れますが、視線をもっと奪いたいのであれば、背景を空間に見立て、アンバランスな配置をしてみるのも面白いでしょう。

ただし、全くもってバランスが取れていないとでたらめなデザインになってしまうので、大きな要素と余白のバランスを取ることによって全体感を保つことが大切です。

アシンメトリーなデザインを活用するには、画像の配置の仕方が非常に重要な役割を担います。
文字を極端に大きくすることはできませんが、画像は極端に大きく配置することができるからです。

製品などの切り抜き画像をはみ出すくらいに大胆に配置し、ヘッダーと詳細説明、CTAボタンをシンプルに配置するくらいがちょうどよいでしょう。