2022年のWebサイトのトレンドと今後の傾向｜Webグランプリ受賞作から考察
【目次】
1. はじめに
先日、日本アドバタイザーズ協会Web広告研究会の第10回Webグランプリで
企業グランプリ部門の受賞サイトが発表されましたね。
https://award.dmi.jaa.or.jp/pdf/wgp2022_release_20221117.pdf
元Webディレクター、現コピーライターの自分にとっては
やはり最新のWebクリエイティブ事例は見ていてワクワクしますね！
そこで、今回の受賞作の中でも、個人的に好きだったサイトを
勝手ながらコメント付きで紹介していこうかなと思います。
2. 最新のサイトデザインの傾向について
と、その前に、最近のデザイントレンドや以前から流行っていて
最近一般的になってきた特徴をいくつか紹介します。
1.スクロールテリング・パララックス
パララックスを用いたサイトは
最近かなり一般的になってきましたね。
パララックスとは、簡単に言うと
スクロールに合わせて奥行きのある動きをするサイト。
動きがあることで没入感を感じてもらい、
飽きずに最後まで見てもらいやすくなります。
以前は派手な動きを多く入れることで、
ユーザーをワクワクさせることを目的としたサイトが多くありましたが、
最近では、特に「スクロールテリング」を重視しているサイトが多いですね。
ユーザーに対するプレゼンテーションのような感覚で、
ユーザーの理解や関心を促すような構成やデザインが意識されています。
参考：
●本と美容室｜美容室とセレクト書店を、面白きローカルへ
https://book-and-hair.com/
浮遊感、奥行きのある感じや粒子の荒いざらっとした感じ、
そしてコンテンツの見せ方から、まさに本を読んでいるような感覚。
●「サンテFX × 山口一郎」特設サイト｜そうだ、その目だ。
https://www.santen.co.jp/ja/healthcare/eye/products/otc/sante_fx/ichiroyamaguchi/
サカナクションの山口一郎さんの鋭利でストイックかつスタイリッシュな魅力を
引き立たせるデザインとギミック、素敵です。
2.水平スクロール
これも少し前に流行りましたね。
Instagramや本を読むような感覚でコンテンツを見ていけるので、
一つのコンテンツとしてより世界観を伝えやすかったりします。
文字は基本横書きなので、読みやすいですしね。
参考：
株式会社Prism Partner
https://www.prismpartner.co.jp/
ただ、スマホではなかなか同じ動きを再現できないので、
ちょっともったいないなと前々から思っていたのですが、
最近では一部に横スクロールを入れ、見せる情報に合わせて
変化をつけるサイトが多く、工夫が凝らされているなと思います。
参考：
株式会社プロバンクホーム
https://probank-home.co.jp/
CIRAFFITI
https://ciraffiti.com/
3.グラスモーフィズム
グラスモーフィズムとはすりガラスのような、
半透明の要素をデザインに取り入れたものです。
以前別のコラムでもご紹介していましたね。
▼
「CRルームデザイン部推薦のデザイントレンド3選」
https://www.nippon-ag.co.jp/design-trend/
こちらはサイトのトレンドとしても同様に、
かなり身近なデザインとして浸透してきました。
参考：
株式会社ピュール
https://www.pyuru.co.jp/
ブランドの世界観を損なわず、溶け込むデザインで
心地よくコンテンツを見ていくことができますね。
他にも、One Page Webサイトや大きなタイポを用いたサイト、
レトロ感やサイケデリック感のあるデザインなど流行りにもいろいろあるのですが、
すべて紹介しているとキリがないので、わりと王道なものを紹介しました。
3. 第10回Webグランプリ受賞作の中で特にお気に入りのサイト事例
では、ここからは第10回のWebグランプリ受賞作の一部と
ここが素晴らしいなと思った感想をコメントしていきます！
▼NGKサイエンスサイト／日本ガイシ
https://site.ngk.co.jp/
サイトのデザインが良いだけでなく、コンテンツの中身が素晴らしい。
どれも興味深く読みたくなる記事ばかりです。
こちらにもグラスモーフィズムが使われていますね！
▼SDGs STORY／brother
https://sdgsstory.global.brother/j/
パララックスがいっぱい！色合いやグラスモーフィズムで
うまくバランスを取っているので、不快感がなく
スムーズにコンテンツを見ていけます。
▼KUBOTA FUTURE CUBE
https://www.kubota.co.jp/futurecube/
こちらもサイトの作りが非常に凝っています。
こういう動きがすごいサイトってスマホの場合
うまく再現できず平坦になりがちなのですが、
スマホでの挙動も素晴らしいです。
ゲームの中の世界のようなわくわく感。
▼ここから始まる学校選び！／熊本県 教育庁 県立学校教育局 高校教育課 高校魅力化推進室
https://kumamoto-pref-hs.jp/
こんなサイトあったら、自分が中学生のとき
高校選び楽しかっただろうな、というサイト。
さまざまな切り口で高校選びのためになる情報が紹介されており、
編集力に並々ならぬ熱量を感じます。
▼人柄にじむ福島通販｜シオクリビト／福島県商工会連合会
https://shiokuribito.com/
生産者の人柄が伝わるECサイト。
デザインもおしゃれで作りや動線に工夫があり、
なおかつシオクリビトというコンセプトや
企画内容が素晴らしいですね。
ネーミングも人の温もりが感じられて好きです。
▼亀田製菓コーポレートサイト／亀田製菓
https://www.kamedaseika.co.jp/
派手な動きやデザインはないですが
ちょっとしたあしらいやフォントなどから
ブランドの世界観が伝わってきますね。
4. 受賞作の傾向から考えるユーザーにとって良いサイトとは
今回は6つのサイトをご紹介しましたが、これら以外にもどのサイトも非常に作りこまれており
素敵なサイトばかりでした。
すべてに共通して言えるのは、派手なモーションや仕掛けがあるものよりも、
コンテンツが優れておりよく考えられているユーザーにとって有益なWebサイトが
評価される傾向にある気がします。
先述したデザイントレンドについても、数年前まではいかに派手さ、斬新さを出すかが先行して、
コンテンツがとても見づらかったり、重すぎて読み込みが遅くなってしまっているサイトがあったのですが、
それらがより洗練され、目的にあったデザインをうまく活用しているサイトが多くなってきたように思います。
ただかっこよくしたい、おしゃれにしたい、今風にしたい、ではなく
ユーザーにとって伝えたい情報やユーザーが知りたい情報を効果的に伝える手段として、
サイトのデザインや動きを上手に設計できているサイトが理想なのではないでしょうか。
5. 日本エージェンシーがご提案するソリューション
日本エージェンシーでは、コーポレートサイトやキャンペーンサイトの制作について
コンセプトの企画・提案から、ユーザーに興味関心を持ってもらえるような
コンテンツの企画、目的に応じたサイト設計をお手伝いさせていただきます。
「サイトをリニューアルしたいが、何から考えればいいかわからない…。」
「単にかっこいいサイトではなく、
より深くユーザーに興味を持ってもらえるようなサイトにしたい。」
「売上の増加やCV獲得数の増加を図れるようなサイトにしたい。」
などなど、ご要望があればお気軽にご相談ください！