インターネットビジネス最新情報ポータル IBNIP

Webデザインのトレンド15選!2018年の流行りをまとめました!

Webデザインのトレンドは、刻一刻と変化します。2018年は、意外性、インパクト、色などにこだわりを持つサイトが、多くなっています。

また、昨年に引き続き、過去に回帰したデザインでありながら、今時のデバイスや解像度にマッチしたレイアウトや、新しいスクリプトを取り入れて変化させています。

ここでは、いくつかの2018年のトレンドをご紹介したいと思います。

グラデーション

一昔前に多用されていたグラデーションですが、ここ数年は回帰傾向にあり、再びよく見かけるようになってきましたが、2018年もその傾向が続いています。

グラデーションの効果は、明度や彩度に差をつけることにより変化が生まれ、視認性を高めることにあります。

インスタグラムのアイコンが、マルチグラデーションに変更されたことも、グラデーション人気に一役買っているとも言われています。

変化を印象付けるグラデーション

夕焼け、海の日の出、夜明けの空、紅葉の山、虹など、自然界にはさまざまな美しいグラデーションが存在しますが、私たちはそれらを見て感動し、感性が刺激されます。

1. FCNQ

URL:https://www.fcinq.com/

このサイトは、左側のダークな紫から右の方の少し明るい紫へのグラデーションを使うことにより、もうすぐ夜が明ける明け方を連想させ、グラデーションによって時間の流れを感じさせる使い方です。

スクロールした先では、画像の上に濃い目の色を乗せることで、結果的にグラデーションがかかっているような色味になります。

オンマウスにより、乗せている色は消え、通常のカラー画像になります。

高級感を演出するグラデーション

グラデーションにより、高級感や特別感を演出することができます。

2. ユンケル黄帝液

URL:https://www.yunker.jp/premium/index.html

ゴールドという色は、もともとユンケル黄帝液のテーマカラーではありますが、グラデーションでゴールドの色を作り出し、黒と合わせることにより「プレミアム」という名前にちなんだ特別感を出しているサイトです。

まったく別の世界観を作りだすグラデーション

3. 成安造形大学


URL:http://www.illustration.seian.ac.jp/

このサイトでは、アクセスのたびに切り替わる全画面の画像の上に、はけで描いたような、スクロールすると降りてくるグラデーションの透過画像を重ねています。

切り替わる画像は、風景画像、交差点の画像、教室の中という3枚の画像ですが、その上に、その画像の中には含まれない淡いレインボーカラーを重ねることにより、まったく別の世界観を作り出しています。

スプリット(分割)レイアウト

スプリット(分割)レイアウトは、大きく分割されたレイアウトのことです。

分割部分の色やコンテンツの対比により、インパクトのあるデザインとなり、さらにアニメーションを使えば、各分割エリアの中に、たくさんのコンテンツを表示することもできます。

例えば、2分割のレイアウトで、スクロールすると各分割エリアが別方向に動く、というものなどがあります。

縦に分割されている場合は、レスポンシブサイトにも対応しやすくなっていますので、今後も進化をしながら、採用されていく可能性は大きいのではないでしょうか。

各分割エリアが別方向にスクロール

4. fillet


URL:http://fillet.com.br/

このサイトでは、3分割で、それぞれの分割エリアが別々の方向に動くものです。

一見、単純そうに見えるこのサイトは、3分割されている各々の部分が、スクロール時に、アニメーションで互い違いに別方向に動きます。

何通りにもコンテンツが切り替わりますので、1画面でとても多くのことを表現することができます。

各分割エリアの中のロゴのようなイラストは、それぞれ少しだけアニメーションが施されています。スマートフォン表示の場合は、縦に並び、パララックスのような動きをしています。

 

片方だけスクロール可能なタイプ

スプリットレイアウトでアニメーションを使う場合、1つの分割部分のみをスクロールさせる、という方法もあります。

5. minico


URL:http://minico.handmade.jp/

このサイトでは、固定で表示しておきたいテキストなどを左側に配置し、右側はスクロールによって、各バナーがグローバルMenuのような役割をしながら、ビジュアルに表現しています。

シンプルながらインパクト大なタイプ

6. Roman Kirichic


URL:http://kirichik.com/

個人のWebデザイナーのサイトです。白と黒のツートンの分割であり、色のコントラストが大きいことと、余分なデザインや情報は一切載せないシンプルなレイアウトなのでインパクトの大きいサイトです。

マウスオーバーにてMenuが表示されます。

鮮やかな配色

一目見ただけで、印象に残る鮮やかな配色のWebサイトも多くなってきています。鮮やかな色の部分が背景であるため、全体に占める配分が多い場合は、ごちゃごちゃしてしまわないように、余白を十分に取ったシンプルなデザインが多くなっています。

これに、パララックスを組み合わせる場合もあります。また、無彩色の背景や画像のアクセントとして、鮮やかな色を使っても、インパクトは大きくなります。

鮮やかな色は余白を多くシンプルに

7. Todd proctor


URL:http://toddproctordesign.com/

このサイトは個人のデザイナーのサイトです。目の覚めるような濃いピンク色のサイトに、独特の画像を合わせています。

一度見たら忘れられないようなサイトです。スクロールした先も、白黒、エメラルドグリーン、グラデーション、黄色などを使った、シンプルなデザインのバーティカルスライドになっています。

無彩色との組み合わせで鮮やかさを際立たせる

8. LOVE LIVER iPhone CASE


URL:http://sanographix.github.io/loveliver-case/

鮮やかな色は、無彩色との組み合わせで、より鮮やかさが引き立ちます。

全画面の背景に使う場合と同じく、鮮やか色をこれだけの配分にするためには、余白を多めにシンプルなデザインでないと、ごちゃごちゃして安っぽい感じになってしまいます。

ずらす

画像同志であったり、画像と文字であったり、本来整然と配置したいところを、あえてずらすレイアウトです。パララックスでの表示でのずらしは当たり前ですが、静止画像でも、そのようなレイアウトが多くなっています。ずらすことによって生じる一種の違和感により、サイトの印象を強くします。

あえて、画像をずらして、できた空白に文字を乗せる。

9. asoview!


URL:https://www.asoview.co.jp/

画像をセンタリングしないことで、アシンメトリーにします。

ずらした結果できた余白部分に文字を重ねることで視線を空白のある左側に持って行かせ、文字を目立たせています。

一部をずらす

10. Marché Notre-Dame


URL:http://marchenotredame.com

横の線をずらしてでこぼこした感じにしながらも、縦の線は揃えているのでそれほどバラバラな感じはしません。

整然と並んでいる場合に比べて、少し下に下がっている右側の画像が、印象に残りやすくなっています。

タイポグラフィ

タイポグラフィーとは、文字を効果的にデザインして使用することを言います。

2017年に引き続き、2018年にも、強いインパクトや印象を与えるタイポグラフィーを使ったデザインがよく出ていました。

大きい文字を中央に配置

11. CREARIVE DOC

URL:http://creativedoc.co/

一文字やワンワードを大きく表示した、タイプグラフィーが出てきています。

この短いテキストで、すべてが表現できるような文字やワードを選ぶことで、非常に強いメッセージを閲覧者に伝えます。

マスクを使って大きい文字を中央に配置

12. funplex


URL:https://funplex.co.jp/

マスクもトレンドの一つではありますが、タイポグラフィーとマスクを組み合わせた例です。

大きい1文字フォントは、その左側のCHANGE THE GAMEのGAMEを1文字ずつ順番に表示して、GAMEというワードを印象付けています。

2018年の流行色、ウルトラバイオレット

PANTONE社が、2017年12月に発表した2018年の「パントン・カラー・オブ・ザ・イヤー 2018」は、ウルトラバイオレットです。神秘的な独創性を秘めた紫色は、日本では古来より高貴な色とされてきた色です。多くのWebサイトにおいても、メイン画像や各所の色の選択としてこの色が使われているようです。

2018年のトレンド色である、バイオレット系が使われているWebデザインを集めてみました。

カラー・オブ・ザ・イヤー2018の色をそのまま使う

13. THE FASHION POST


URL:http://fashionpost.jp/fashion/fashion-news-event/122445

まさに、パントン社の「カラー・オブ・ザ・イヤー2018」を紹介したサイトです。メイン画像や動画他、全体的にこの色を使った神秘的な動画を使っています。

紫の濃淡で宇宙の深みを表現

下記は、いくつかのサイトで鮮やかな色のグラデーションの事例として、紹介もされているサイトです。

少し明るめの紫の背景に、地球のアニメーションを配置していますが、その明るい部分が太陽の光を連想させ、宇宙の深みを感じさせるサイトです。

14. GlobeKit


URL:https://globekit.co/

差し色としてパープルを使う場合は組み合わせる色に注意

15. artemo

URL:http://artemo.co.jp/

ネイルサロンのWebサイトですが、煙のような画像の差し色としてパープルを使っています。

グローバルMenuは黒で引き締め、その他に紫と相性のいい、ピンクやうっすらと水色が使われています。パープルの場合は、配色を間違えると安っぽくなってしまうので注意したいところです。

まとめ

アップル社がフラットデザインを採用した時には、フラットデザインが流行しました。

それが、今ではフラットデザイン2.0と言われる、若干シャドウやグラデーションを取り入れたフラットデザインに変わって来ました。

最近では、スマートフォンの多くのアイコンがフラットデザイン、あるいはフラットデザイン2.0であるのに、インスタグラムのアイコンだけがあざやかな色のグラデーションになっていて、とても目立ちます。

こうしたものも、少なからずトレンドに影響を与えているのでしょう。

また、モバイルファーストの時代が到来してからのWebデザインは、パソコンサイトをいかにレスポンシブ対応にするか、ではなく、モバイルサイトをパソコンサイトにしやすい設計で制作するという事も多くなっています。

今後もますます、その傾向は続いて行く可能性があります。スプリットデザインなどは、その代表的な例なのです。

2018年のPANTONEのカラー・オブ・ザ・イヤー2018の受賞色も、配色の選択に一役買っています。

今年の暮れには、2019年のカラーが発表になるかと思いますので、また色のトレンドも変わって行くことでしょう。

Webデザインのトレンドは、2018年には「ずらす」「壊す」などの変化を付けたサイトが流行しましたが、2019年には、これまでのスタイルをさらに崩した、オリジナリティ溢れるデザインになって行くのでは?と予想する人もいます。

[記事公開日]2018.10.15
[ライター]natsu