Webデザインの業界では、毎年さまざまなトレンドが出現しています。
その中でも、フラットデザインやマテリアルデザインなど、時を経た現在でも人気を博し続けているトレンドは、数多く存在しています。

2017年にもさまざまなWebデザインのトレンドが登場していますが、その中でも2018年のメインストリームになりそうなトレンドにはどのようなものがあるでしょうか。
今回は、注目の重要Webデザイントレンドをご紹介します。

要注目の重要Webデザイントレンド5選

1. レインボーカラー

フラットデザインやマテリアルデザインでは、単色のUIを作り上げるのがよしとされてきました。
しかし、現在ではその潮流は真逆を行っているかもしれません。

0101.png
GitHub Universe / スクリーンショット：2017年10月

2016年頃から、デュオトーンやグラデーションがWebデザインのトレンドとしても注目を集めるようになり、2色以上の色の組み合わせをあたかも1色のように扱うようなホームページが増えてきました。
2017年後半から、その流れはますます加速し、とうとう*「レインボーカラー」*を採用するホームページが台頭してきています。

レインボーカラーと聞くと、もしかしたらデザイナーの中には「あまりよくないデザイン」だと思われるかもしれません。
実際、単色をメインカラーにしたホームページは、非常に個性があり、イメージもはっきりします。
しかし、レインボーカラーを活用することで、「万能」で「オールマイティ」なイメージを演出することができます。

0102.png
Untold / スクリーンショット：2017年10月

昨今登場した「レインボーカラー」の特徴として、ダークな背景を好んで選んでいる傾向も、見逃してはいけません。
レインボーカラーの中には明度の高い色も含まれるので、白背景よりも黒背景のほうがはっきりと映るのです。

また、レインボーカラーは、CSSやJavaScriptを使ったアニメーションとも非常に相性がよく、色を動かすことによって注目を惹きつけることもできます。
ユーザーの注目を集めたいところを中心に、レインボーカラーを活用してみるといいでしょう。

2. 境界線を超えたレイヤーテキスト

0201.png
Matter Planning and Design / スクリーンショット：2017年10月

間違いなく今後人気になっていくであるトレンドの一つが、境界線を超えてテキストをはみ出すように配置するレイヤーテキスト効果です。
このレイアウトは、ユーザーの視線を引き付けるといった効果があるだけでなく、コーディングが簡単で、あっという間に作れてしまうというメリットもあります。

0202.png
Ready Set Rocket / スクリーンショット：2017年10月

このトレンドの特徴は、写真とホワイトスペースの両方にテキストを重ねるというだけのものです。
この雑誌のようなレイアウトは、思いついてみれば何のことはないのですが、ブロックを重ねていくように配置するWebデザインレイアウトではこれまで無縁だったのかもしれません。

しかし、ありがたいことに、2017年上半期にブルータルデザインやブロークングリッドレイアウトが登場したことで、*「枠を超える」*という発想にデザイナーの抵抗が少なくなったことで、こうしたトレンドが生まれたのではないでしょうか。

3. オーバーサイズドフォトコンテンツ

0301.png
Westward Leaning / スクリーンショット：2017年10月

実生活の道具の実際の大きさよりも、限りなく大きく見せるような手法も、注目に値するでしょう。

オーバーサイズでホームページに写真を登場させるということ自体は、取り立てて新しいことではありませんが、ホワイトスペースを大きく活用してショーケース風に見せる手法は、斬新です。

0302.png
Colour on Code / スクリーンショット：2017年10月

プロダクトを紹介するようなホームページであれば、プロダクトをオーバーサイズに表示して、他のエレメントを小さくし、ホワイトスペースを存分に取ることで、プロダクトの写真に自然と視線を集めることができます。
プロダクトの写真が主役になるからです。

また、プロダクトの写真が大きいと、小さな部分(ディティール)を存分に確認することができます。
そのため、最近ではコマースサイトなどでもできるだけ大きな写真を使っているケースが多くなっています。

4. 極端に太いタイポグラフィ

0402.png
Sézane / スクリーンショット：2017年10月

タイポグラフィはいつでもデザイナーの注目の的です。
時代やトレンドによって、細くなったり、太くなったりもするようですが、これからしばらくは極端に太いタイポグラフィが流行するかもしれません。

0401.png
iPhone 8 / スクリーンショット：2017年10月

その先駆となっているのが、Appleのホームページです。
Appleのホームページといえば、これまでは究極的に細いSan Franciscoフォントを活用していましたが、iPhone XやiPhone 8などの新製品のホームページでは、打って変わって極太のタイプフェイスを採用しています。

細いフォントは繊細で華麗ではありますが、弱々しい印象を与えることもあります。
一方で、太くてどっしりしたフォントであれば、堂々としており、大胆で、他に勝るものがないほどの強力なブランドイメージを構築することができます。

5. ホローシェイプ

0501.png
brüdert / スクリーンショット：2017年10月

2017年は、さまざまなホームページで幾何学的な図形に出会う年だと言っても過言ではないでしょう。
しかし、取り立てて顕著なのは、ホローシェイプと呼ばれる図形が多用されていることです。

*ホロー(Hollow)*とは、空疎で中身のないという意味です。
これは比喩的ではなく、実際に中抜きの、ボーダーだけでかたどられた図形を使ったホームページがたくさん誕生しました。

0503.png
cwart / スクリーンショット：2017年10月

ホローシェイプはもともと、アイコングラフィックの世界で中を「塗り」にするか、それとも線だけにするかで揉めていたころに誕生したものです。
アイコンで言えば、細い線だけを使って表現するようなリニアアイコンは、以前から存在します。

2017年には、そうしたホローシェイプを太い線を使ってロゴデザインに活用したり、イラストで活用するような例も多く見られました。
ホローシェイプはIllustratorなどを使って簡単に作成することができるので、デザインコストもかからず、デザイナーにとってもお得だと言えるでしょう。