ブログ
2024-05-31
こんにちは！4月からCreative.LABに仲間入りしたM.Kです。
これから時々ブログを更新していきますので宜しくお願いします。
みなさんは2024年のWEBデザインのトレンドについてご存じでしょうか？
「このサイトのデザインおしゃれ！他にも同じようなデザインが見たい！検索したいけど何て言う名前のデザインなんだろう・・・？」と思うのはWEBデザインをやっている方には、あるあるな出来事だと思います。
そのような時に「このWEBデザインはこう言う名前だったのか！」と、デザインをしているみなさんのちょっとした手助けになるような内容をお届けしたいと思います。
1.Y2K
Y2K(Year2000)とは、1990年代〜2000年代前半に流行したデザインやファッション、カルチャー全体を表す言葉です。
デザインとしては以下のような要素が使われています。
・ビビットなネオンカラー
・光沢のある金属的でメタリックな質感
・キラキラした虹色のホログラムのようなカラー
・レトロフューチャー的なサイバー要素
・敢えて画質を落としたピクセル化された画像や映像(ブロックノイズ)
・太字や遊びのあるタイポグラフィー
ノスタルジックかつレトロな要素を持ちつつ、現代に合わせたモバイルフレンドリーな要素を組み込んだWEBデザインと言えます。
参考サイト：
https://www.shinshu-u.ac.jp/faculty/agriculture/pakapaan/（州大学農学部 受験生向けサイト パカパーン！）
https://www.meidensha.co.jp/knowledge/takingaction/
anatanotonari/（あなたのとなりの明電舎 ）
https://ac-bu.info/happening/（HAPPENING by group_inou）
2.パララックスデザイン・スクロールテリング
パララックスは日本語に訳すと「視差」という言葉で、パララックスデザインはサイトの背景と手前にあるコンテンツが異なる速度で動くことで奥行きや位置の差異があるように見える効果のことを言います。
手前のコンテンツが早く動くことで、WEBサイト自体は平面であるのにまるで近くにあるように見せることができ、閲覧者の注目を集めると共に他デザインに比べ没入感が出ると言う特徴があります。
またスクロールに合わせてコンテンツに動きが出る視覚効果は「スクロールテリング」と言いいます。(『ストーリーテリング』をもじった言葉です）
その名の通りサイトをスクロールして進めていく(ストーリーが展開していく)につれ、文字が飛び出してきたり、背景が大きくなったり、コンテンツがフワッと浮き出てくるような動きがあるのが特徴です。
この２つは1ページでインパクトのあるWEBサイトを作ることが可能です。
参考サイト：
https://www.plazastyle.com/heartsup2024/（HEARTS UP 2024 | PLAZA）
https://asagiri-kashiho.jp/（朝霧高原菓子舗 | 朝霧高原の恵みを味わう西洋菓子）
https://knot-to-knot.co.jp/（knot | 福島県浜通りで暮らす、普通の人々のWEBメディア）
3.要素を分割する境界線
要素を分割する境界線というのは、WEBサイト上のメニューやコンテンツを線で区切ったようなデザインのことです。
ナビゲーションやコンテンツのデザインが簡略化されることで初めてサイトに訪れたユーザーが分かりやすい見た目になります。
ハッキリと区切ることで力強いイメージにもなります。
構造がシンプル化されることでミニマルな印象を与えることができますが、うまく要素を整理しないと分かりづらくなり、ユーザーが迷子になってしまうと言うこともありますので気を付ける必要があります。
参考サイト：
https://www.coprec.co.jp/（COPREC）
https://bnn.co.jp/（https://bnn.co.jp/）
4.グラスモーフィズム
グラスモーフィズムは、すりガラスのような半透明なデザインやぼかしが入っているデザインのことを言います。
背景の写真やイラストがコンテンツの向こうにぼやけて見えることで、奥行きや透明感が出て、UIの背景であることを意識させない軽やか開放的な印象が与えられます。
身近な例として、Apple製品のコントロールセンターがそのデザインにあたります。
また、似たようなデザイン名称として「ニューモーフィズム」「クレイモーフィズム」というものが挙げられます。
この２つも現実にある物体の質感をWEBデザインに取り入れたようなデザインです。
「ニューモーフィズム」はドロップシャドウを使って手前にコンテンツが飛び出ていたり窪んでいたりするような印象を与えます。
対して「クレイモーフィズム」は粘土のようなマットな質感で丸みのあるぷっくりと浮き出たような3D要素を含むデザインです。
参考サイト：
【グラスモーフィズム】
https://www.pyuru.co.jp/（株式会社ピュール｜PYURU）
https://www.arluis.com/fair/miyakojima/（宮古島チャペル at Hilton）
https://aquall.jp/（Aquall（アクオル）公式サイト）
【ニューモーフィズム】
https://go-gx.com/（GO株式会社の脱炭素サービスGX（グリーントランスフォーメーション））
【クレイモーフィズム】
https://sdgsstory.global.brother/j/（ブラザーグループSDGsスペシャルサイト）
まとめ
2024年WEBデザイントレンドについて取り上げさせていただきましたがいかがだったでしょうか。
ここでご紹介したデザインを取り入れたサイトは、見るだけで楽しくなったり掲載されているものに興味を持ったりしますよね。
こういった工夫で注目を集め、企業のファンを増やしたりリピーターを増やしたりCV増加にもつなげていきましょう！
Creative.LABのブログではこういったデザインに関する記事を始め、SEOやWEBに関する記事を多数掲載しておりますので、興味を持たれた方は是非他の記事もチェックしてみてください！
