五感を刺激する！2024年注目のWebデザインアイデア10選

2016年には新タイプのホームページのデザインやテクニックが流行しました。
しかし、実際にはまだまだ駆け出しのトレンドも多く、2017年も引き続き、世界のクリエイターたちによってより面白いアイデアが生み出されるはずです。

そこで今回は、2017年に挑戦してみたいWebデザインのアイデアを集めました。

これらのアイデアは、すでに登場しているものの、まだ採用しているホームページはそれほど多くありません。
インスピレーションを生み出すために、これから紹介する10のアイデアを見てみましょう。

参考：
あなたはいくつ知っていますか？2016年に最も話題になったWebデザイントレンド17選｜ferret
　　

2017年に挑戦してみたいWebデザインアイデア10選

1. ビビッドなグラデーション

出典：Impossible Bureau
※このWebページは現在公開されていません

グラデーションはCSS3登場直後に一度流行しましたが、ここ数年*「失われた時代」と言っても過言ではないほど目にする頻度が少なくなっていました。
しかし、2016年頃から写真や文字に取り入れる形で、グラデーションが復活の兆しを見せています。
　　
昔は、Photoshopなどの画像化ソフトによってグラデーションを施したボタン画像をスライスにして利用していました。
ただCSS3の登場により、画像化しなくてもCSSによる記述だけでグラデーションを表現することが可能になり、マウスホバーしても画像を差し替える必要がなかったので、その当時としては斬新な方法*として多用されていました。

ところが、フラットデザインやマテリアルデザインのような*「ベタ塗り」時代の到来*で、グラデーションの登場頻度が極端に少なくなります。
Webデザインのカラーリングもできるだけシンプルにする方向へと変わっていきました。

ただ、Ratinaなど高画質のディスプレイの登場、全画面のヒーローイメージの流行で、画像をふんだんに使用するようになります。
そこで登場したのが、デュオトーンやモノトーンなど、数色で着色したレトロな写真の加工テクニックでした。

最近では、できるだけ鮮やかでインパクトのあるグラデーションを取り入れるホームページも増えてきました。ピンクや赤、オレンジなどの暖色と、青や水色、紫などの寒色を両方とも使う大胆なグラデーションも見かけます。グラデーションを上手に使うと、写真をそのまま使うよりも洗練された印象を与えることもできます。
　　
参考：
https://www.nycpride.org
https://wpcrew.co
http://www.tubatomic.com
　　

2. ローディングアニメーション

https://www.mozaik.com

ホームページの表示スピードは、そのサイトのコンバージョンに大きく影響します。

Amazonの調査では、「ページの表示速度が0.1秒遅くなると、売上げが1%低下する」と言われています(※)。
しかしながら、インターネットの回線速度は年々改善しているとはいえ、Webの技術が進化するごとにリッチメディアが増え、容量も増えてくるため、ページの表示速度を短くすることは簡単ではありません。

そこで最近では、ページが完全に表示されるまでの離脱を減らす試みとして、読み込み時に可愛らしいローディングアニメーションを表示してユーザーを退屈させないようにする工夫が施されたページが増えています。

こうしたローディングアニメーションは人間的なやりとりを促すための微細なアニメーションである*「マイクロインタラクション」*の一つですが、真っ白なページでしばらく待たされているよりもずっと親近感が湧きます。

ホームページによっては、読み込み完了までのわずかな時間の中で、キャラクターがいろんな顔をしてユーザーを楽しませたり、読み込み完了までのパーセンテージを表示してユーザーを安心させています。

参考：
http://vallierbistro.com
http://gms.life

※出典：Aberdeen Group Report
　　

3. 世界観溢れるサウンド

http://invisi.jp

YouTubeやHuluをはじめ、あらゆるデバイスでビデオを観るのが当たり前の時代になった昨今、ホームページの在り方も時代に合わせて変わってきています。
ホームページでは全画面の無声動画(サイレントスクイザー)が使われることもありましたが、2017年には音声を再生するヒーロー動画を取り入れたホームページが増えてくるでしょう。

実は、ブラウザで音声を流すという技巧は10年以上も前から存在していました。
しかし、やり方が違います。以前はFlashを使っていたのです。

ところが、時代は移り変わり、HTML5によって音声を流すことも簡単になり、サポートブラウザも広がってきました。
こうした技術的な背景と、スマホなどでビデオを観る習慣が広まったという文化的な背景が重なって、音声を流すサイトが増えてきています。

視覚的にはブラウザで様々なことが再現できるようになったので、音声面ではその世界観を邪魔しないようなサウンドが求められています。
また、音声のオン・オフの切り替えができるようにユーザーに配慮することも大切です。

参考：
人もデザインも第一印象が大事！想像力を湧き立てるオーバーレイ手法を上手に活用したホームページ21選｜ferret
http://idstr.jp/jp/
　　

4. 奥行きのあるタイポグラフィ

https://www.gazelleno1.com/nl

かつては、Webデザイナーと、Illustratorなどのソフトを使って紙面デザインを行うDTP(デスクトップパブリッシング)のクリエイターを区別する傾向がありました。
しかし、現在はホームページでもポスターのようにクリエイティブなことができるようになり、その境目というのがほとんど消えています。

そこで注目したいのが、上の画像にあるような文字と物体を重ねながら奥行きを出す手法、タイポグラフィの使い方です。

面白いことに、文字を重ねている対象物はリアルなのに、タイポグラフィ自体には影や立体感がないので、最初は不思議な感覚を覚えます。
一方でVRの時代でもあるので、平面と立体が同じ空間にあるという視覚的なトレンドを示唆しているので、意外と受け入れやすいのかもしれません。
　　
参考：
ファーストビューで惹き込まれる！ポスターみたいな大胆なタイポグラフィを使ったWebサイト21選｜ferret
https://performingarts.withgoogle.com/en_us
https://www.beatcycling.club
　　

5. ユニークなパララックス

出典：YAYA合同会社
※このWebページは現在公開されていません

デバイスのスクリーンサイズには限界があるので、ほとんどのサイトではユーザーが*「スクロール」というアクションを通してブラウジングを行います。
この「スクロール」の前提に遊び心のギミック*を取り入れたホームページが増えてきました。

こうしたギミックの元祖とも言えるのが、パララックスエフェクトです。
パララックスエフェクトは*「視差効果」という意味で、スクロールする時にそれぞれのオブジェクトの動く速度を変えることで立体的に見せようとする手法*です。

ただ、俗に言う"パララックス"はもう少し広義で、スクロールする時にあらゆるオブジェクトがどう動くかという動きかた全般に関して言うことがあります。
語義が微妙に変わってきたのは、スクロールによって、奥行きだけではなく、様々な動きでユーザーの注目を集めていくユニークなホームページが増えてきたということです。

参考：
http://florianmonfrini.com
http://uniel.jp
　　

6. VR志向

出典：パナソニック株式会社
※このWebページは現在公開されていません

VR元年と言われた2016年。
Webの世界でもVR(Virtual Reality、仮想現実)を意識したホームページが登場し始めています。

通常VRを楽しむにはヘッドセットと呼ばれるデバイスをつけて楽しみます。
もちろんVR対応のブラウザは登場していて、スマートフォンなどをGoogle Cardboardのようなデバイスに装着して楽しむコンテンツもあります。
一方、ヘッドセットなしで楽しむようなコンテンツも登場しているのです。

つまりは、視線で360度を追いかけていく代わりに、マウスポインタを上下左右に動かすことによって視界を変えていくコンテンツが登場してきたということです。

ただ、よく考えてみれば、VRの先陣を切ったGoogleマップのストリートビュー機能も同様の機能を提供していました。ストリートビューでは、マウスカーソルや指でのフリックによって操作をします。
同じようにマウスカーソルや指での操作によって360度観ることができるコンテンツが増えています。

これから登場するホームページは、ヘッドセットのようなデバイスにも対応していくのか、あるいはストリートビューのようにデバイス不要で閲覧できるのでしょうか。ぜひ注目したいところです。

参考：
https://www.titanfall.com/en_us/

　　

7. フロアナビゲーション

出典：Sonikpass
※このWebサイトは現在公開されていません

リッチなUX(ユーザー体験)にするために、クリックよりもスクロールさせることに重きを置いているサイトが増えてきました。
意図的にページ遷移を減らし、1ページあたりのコンテンツ量を増やすことで、スクロール量も増えます。

しかし、スクロール量が増えると、1つの問題が発生します。
それは、全体の中で今どこを見ているのかがわからなくなるということです。

それを解決するために、左右どちらかにフロアナビゲーションと呼ばれるナビを設置するサイトが増えています。
フロアナビゲーションは点や線などのシンプルな幾何学記号で表され、左右に置いても本体となるコンテンツの邪魔にならないようなデザインになっています。

左右に置くことで自分が*「何階」*にいるかがわかり、任意のほかの階に移動することもできます。
これがフロアナビゲーションと呼ばれている理由です。

参考：
https://recruit.japanmedical.jp
http://2016.naoyoshioka.com
　　

8. ダウンディレクションアロー

https://garden-eight.com

同じく、スクロールを促すために、わざわざ*「下にスクロール」とアニメーション表示するサイトが増えてきました。
まだはっきりとした言葉があるわけではありませんが、下方向にスクロールを促すことからダウンディレクションアロー*と呼ばれることがあります。

スクロールを促すこの矢印は、マウスの形をしていることや、「SCROLL」の文字が添えられているなどのバリエーションも存在します。
いずれにしても、コンテンツ量の多い場合にスクロールによってコンテンツを見せたい場合には、この方法は有効かもしれません。

参考：
http://www.welikesmall.com
http://www.details.co.jp
https://maeda-g.co.jp
　　

9. 触感的なデザイン

http://thesocietyinc.com.au

ブラウザで文字を表示するくらいであれば非常に平坦なデザインとなってしまいますが、最近では写真がふんだんに取り入れられるようになっているので自然と奥行きのでるデザインが増えています。
その中でも、思わず触りたくなるような感触に訴える、そんなデザインが頭角を現しています。

上の写真にあるようなザラザラ感だけではなく、水滴のぽたぽた感、煙のさらさら感なども、写真やシネマトグラフを使って表現できます。
先ほど触れたVRもそうですが、Webの世界はより五感を意識したデザインに変わっていくのかもしれません。

参考：
http://circlesconference.com
http://toki-minoyaki.jp
　　

10. オリジナリティ溢れるフォントフェイス

出典：大日本印刷株式会社
※このWebページは現在公開されていません

デザイン性のあるカッコいいフォントも、今ではWebフォントとして簡単に利用できるので、タイポグラフィで差をつけるのがますます難しくなっています。
一方で、ロゴにはこうしたフォントをそのまま利用するのではなく、ユニークでオリジナリティ溢れるデザイン性溢れたフォントフェイスを採用する例が増えています。

上のロボットのホームページのように幾何学模様を組み合わせる例のほか、参考サイトでは手書き文字を利用した例も挙げています。
ロゴデザインは、ほかのWebサイトにはないホームページの個性を引き出すところでもあるので、こだわっていきたい部分でもあります。

参考：
http://www.sundaybreakfast.org
https://pivot.jp