【2024年版】Webデザイントレンド15選｜デザイナー監修
更新日 2024年1月14日（公開日 2021年12月22日）
オンラインプレゼンスを確立するなら、トレンドを捉えた魅力的な Web デザインにしたいですよね。フリーランスとしてや、クリエイターとしてホームページを作成するなら、毎年の Web デザインのトレンドはチェックしておきたい所です。
2023 年はあらゆる業界で AI が席巻し、Twitter は X となりカオス化が進み、企業やブランドはこうした変化を切り抜ける必要がありました。そして Web デザインのトレンドも、このような世界の変化に反応して進化を遂げてきました。
Web デザインにおいても、マキシマリズムのデザインアプローチが広く受け入れられるようになり、そこに「エモさ」を取り入れてさらに発展した Y2K や Web 黎明期のノスタルジックなデザインが人気になってきています。この「懐かしさ」を求めるトレンドは、AI ツールの台頭を目にし、「AI が人間を超える未来はすぐ来てしまうのだろうか？」と疑問を投げかける、私たちの感情と深く結びついているのかもしれません。
このことを念頭に置いて、この記事では Wix のマーケティングクリエィティブディレクター、イフタハ・コロニオ（Yiftach Koronio）の監修のもと、Wix が予測する 2024 年の Web デザイントレンドと、デザインの重要な要素について解説します。これらのトレンドが生まれた背景、与える影響、そしてそれぞれの Web デザインを応用するコツを紐解いていきましょう。
＼900種類以上のテンプレートをノーコードで編集／
2024年注目のWebデザイントレンド
01. ループスクロールエフェクト
無限ループの中で生きているような、現在を取り巻くこの感覚が、今年は Web デザインとしても登場。ループスクロールでデザインされた、始まりも終わりもなく続くかに見える Web サイトを見かけるようになりました。ループスクロールはシームレスで連続的なコンテンツナビゲーションを可能にする手法のひとつです。Lusion Lab や Nobel Foods で見られるような、進化した無限ループは、いつフッターまでたどり着けるのか分からない迷宮感が特徴です。
02. 流行再燃のパララックスデザイン
パララックスは、日本語では「視差効果」と訳されるように、背景と前景のコンテンツを異なる速度で動かすことによって深みのある錯覚を生み出します。2024 年は動きのあるデザインが人気になっていることから、パララックス効果も再評価されるようになりました。
視差効果を取り入れることで、ダイナミックなビジュアル体験を生み出し、 インタラクティブなユーザー体験を提供することができます。これまでは、画像とテキストなど静的なデザインをパララックスに使用することが主流でしたが、今年のパララックスはビデオコンテンツを背景に使用するなど、さらに動きを強化したトレンドになっています。
03. ダイナミックなタイポグラフィデザイン
太字でユニークなタイポグラフィをあしらった Web デザインも引き続きトレンドとして人気でしょう。Google フォントなどの Web フォントが普及したことで、フォントメインのデザインも身近になり表現の幅が広がりました。
テキストをアニメーション化し、注目を集めて伝えるメッセージを動的に表現する、キネティックタイポグラフィーと合わせて、より印象的なWeb デザインとしてさらに進化していくでしょう。これらのトレンドは Web デザインの美学を再定義し、ページを単なる情報伝達の場から体験的なものに変えています。
04. クレイモーフィズム
クレイモーフィズムとは、クレイ（粘土）とスキューモーフィズム（他の物質に似せるために行うデザイン）を掛け合わせた造語です。3D モデリングとソフトな色合いを用いて粘土のような質感を表現します。
このスタイルは、柔らかく触れたくなるような質感を表現することができ、親しみやすさといった印象を与えることができます。またそれだけでなく、近未来的な印象を与えられるユニークなスタイルです。
フラットデザインやマテリアルデザインとは異なる、おもしろい視覚体験を Web デザインに取り入れてみましょう。
05. Bento Box
「お弁当箱（Bento Box）」を彷彿とさせる、角丸が特徴のレイアウトです。オンラインの世界でたとえると、デザイナーが箱に合わせて材料を詰め（デザイン）、クライアントはそれを消費（閲覧）するというイメージが湧いてきます。
ユーザーフレンドリーな構造で、直感的に理解しやすく、視覚的に魅力的なフォーマットで情報を提示することでユーザーエクスペリエンスの向上も期待できます。
「Workshop Survival Guide」や「Prowl Studio」のようなサイトはボックス同士の間隔を最大限まで詰めて構成されており、整然としたイメージに仕上がっています。また、同じボックスレイアウトでも遊び心ある要素を取り入れたサイトもあります。クリエイティブスタジオの Schoooool や、Vogue もお墨付きの新米パパママ向けブランド「Swehl」のサイトは親しみやすいデザインです。
企業向けのデータ解析を専門にする Mode Analytics のサイトのように、爽やかな色の組み合わせにすることも Bento Box デザインを生かす斬新なアイデアです。このレイアウトトレンドは今年の大ヒットトレンドのひとつになると予測されます。
06. トグルデザイン
トグルスイッチはこれまでもモバイルサイトに登場してきましたが、最近では PC 用サイトにもこのトレンドが組み込まれるようになっています。たとえば、映画『バービー』のサウンドトラックを紹介するサイトでは、特別版のレコードアルバムギフトセットが販売されています。デフォルト表示はバービーバージョンなのですが、画面下のトグルボタン「Shop Ken’s Version（ケンバージョンを購入）」をクリックするとトグル機能が動作し、ケンのバージョンに画面が切り替わります。
トグルスイッチはまた、機能的な目的も果たしています。Lusion Lab のリスト / グリッドモードの切り替えや、Contra のダーク / ライトモードの切り替えなどが良い例です。柔軟性が高いデザインのため、さまざまなオーディエンスに向けてサイトを適応させ、全体的なアクセシビリティとインタラクティブ性を高めることができます。2024 年には、広範な Web デザイントレンドの一部として、このように PC のインターフェースにユーザーがモバイルで一般的に目にするデザイン要素が取り入れられるというケースがさらに増えていくと考えられます。
07. 巨大ボタンデザイン
直近で見られた最も「小さな」マキシマリズムの要素のひとつが、巨大なボタンの登場でした。Lovers Magazine の巨大な「Join Waitlist（キャンセル待ちリストに登録する）」ボタンや、画面のほぼ全領域を占める Rekki のダウンロードボタンなどがそうです。
この Web デザインは、ユーザーの注意力が低下してより大きな行動喚起を必要とするようになったことや、もともとモバイルサイト向けだった機能が PC サイトのインターフェースにどんどん登場していることに起因するのかもしれません。
どのような理由であれ、これらの特大ボタンは今や無視できないトレンドです。もしこれがユーザーの行動をより高い確率で喚起するのなら、2024 年にクリック率の向上を狙えるデザインソリューションとして広く受け入れられることでしょう。
08. 存在感のあるフッター＆タイトルデザイン
これまで、フッターやサイトタイトルは Web サイト上で特に注目されることがありませんでした。しかし、昨今のデザイナーたちは、これらのデザイン要素にスポットライトを当てて、既成概念を覆そうとしています。
クリエイティブスタジオ Sturdy や革新的なレコードレーベル RCA のダイナミックな動画ヘッダー、ブランディングと Web デザインを手掛ける Powell-Studio、デザインスタジオの Atio などの例を見てみてください。いずれも、タイトルがファーストビュー画面の全体を占めていることが分かります。
この Web デザインのトレンドは現在、マスマーケットブランドにも波及しています。ヘイリー・ビーバーが手掛けるスキンケアブランド「Rhode」や、Z 世代向けのニキビパッチブランド「Starface」、大手 CPG ブランド「Twice」などです。
これは表現力豊かな個性溢れるフォントが数々生まれてきたためにできた動きかもしれません。大きなフォント、さらに大きなフッターやヘッダー。Web デザインにおいてこれまで注目されていなかった要素が主役となり、2024 年にはより存在感を放つようになるでしょう。
ラコステのブランドヒストリーサイトは、バランスが取れたデザインの良い例です。スクロールするのに十分な量のストーリーがあることに加えて、注目したいのは最後に現れる特大サイズのフッター。このフッターが、長いストーリーの旅の終わりに満足できる視覚的な目的地としての役割を果たしています。果たしてこの2024年、ループスクロールは人気のブランドに受け入れられるでしょうか？それとも、個性的なファッションや DTC・D2C（顧客直結型）サイトのような、よりクリエイティブな分野での人気に留まるのか、今後の流れに注目したいところです。
09. マキシマリズム
ドイツ出身の著名なデザイナー、ディーター・ラムスの有名な言葉に、「Good design is as little design as possible（良いデザインとは可能な限りデザインをしないことだ）」というものがあります。
しかし、このアプローチに真っ向から対立するのがマキシマリズムです。マキシマリズムは 2023 年にインターネット上で大流行し、2024 年も続くであろう Web デザインのトレンドです。派手なグラフィック、ビビットなカラフルさ、表現力豊かなタイポグラフィ、そしてカオスさが特徴です。
このままいくとマキシマリズムは市場の飽和のピークに達するかもしれませんが、今のところ、この「More is More」のアプローチはクライアントや消費者の間で大きな人気を博しているようです。マキシマリズムはカテゴリーを問わず魅力を発揮しますが、特に CPG、飲食、若年層向けの新興ブランドなどのオンラインプレゼンス強化により適しています。たとえば、お馴染みの炭酸飲料「ファンタ」のリブランディングや、セレブシェフのモリー・バズの Web サイトの遊び心のある原色に、ぽっちゃりした全角アルファベットを使用したブランディング（なんと、Playlab Inc. がデザインした彼女の新刊はその名も『More is More』」）、ディズニー傘下のストリーミングサービス「フリーフォーム」におけるコリンズ（クリエイティブエージェンシー）の新しい試みなどからその人気がよく分かります。
マキシマリズムはまた、ヘリテージ・リヴァイヴァリズムや 80 年代にインスパイアされたレトロトレンドといった小さなサブトレンドも多数生み出しており、個々のサイト要素だけでなくブランディング全体に影響を与えています。2024年、マキシマリズムは進化を続け、デザイナーは自らの殻を打ち破って、クライアントの要求に応えるために「More is More」のアプローチの新しいスタイル表現を見つけていくことでしょう。
10. ヘリテージ・リヴァイヴァリズム（原点回帰）
これはマキシマリストデザインのサブトレンドのひとつで、17世紀と18世紀のバロックとロココの芸術運動でみられる過剰、装飾、小さなディテールにインスパイアされたものです。
ざっくりと表現すれば、これまでの無機質でデジタルに最適化されたデザイントレンドから一変し、より装飾的なデザインへのリバイバルです。これが可能になったのは、解像度の向上と画面サイズの大型化が進んだことでデザインをより細部まで表現できるようになったおかげでもあります。
デザインについて昨年最も盛り上がった Twitter（X）トレンドの一つに、バーバリーが 2023 年 2 月に行ったリブランディングがあります。コバルトブルーのセリフ体のワードマークと122年の歴史を持つ馬術騎士のモチーフを復活させ、サンセリフ体ロゴのトレンドを打ち破りました。
テレビでは、クリエイティブコンサルティング会社の Plains of Yonder が手掛けた『ホワイト・ロータス』のタイトルシークエンスが、16 世紀の光降り注ぐイタリアの別荘の壁画を彷彿とさせました。その豪華さ、逃避主義、時代を超越したそこにしかない職人技は、香水や缶詰、犬のシャンプーのサイトなどでも使用され、Web デザインを長年席巻してきたミニマルなサンセリフ体のデザインからの解放を彷彿とさせました。
2024 年にマキシマリズムの美学があらゆるデバイスで発展し人気を集め続ける中で、新たな局面に突入したことを示す初期の兆候でもあります。
11. 80年代、90年代風レトロデザイン
こちらもマキシマリズムから派生した別のトレンドです。日焼け止めブランドの Vacation、会員制ワイナリーの Rochambeau Club など、イッセイ・ミヤケを着用するプロフェッショナル層をターゲットに、 80 年代から 90 年代初頭の過剰さがテーマのデザイントレンドです。
このアプローチでは、粒状の背景テクスチャ、ソフトな単色グラデーション、ヴィンテージ写真やスタイリングの多用など、どこか懐かしさを醸し出すデザイン要素がいくつか使われています。
また、細い線のモチーフや縁取りのある画像など、昔ながらの雑誌レイアウトのテクニックも散見されます。もちろん、フォントでもレトロ感を表現します。ニュートラルなセミセリフや、二次的なスクリプトと組み合わせた細いセリフ体がぴったりです。
しかし、このレトロ思考への回帰は 80 年代の印刷メディアだけを体現しているわけではありません。ペプシは創業125周年を記念して、マドンナのヴィンテージクリップを使った 80 年代半ばのヴィジュアル・アイデンティティをリブートしていますし、ボディケアブランドのビリーは最近のデジタルキャンペーンで、かつてテレビ CM のような雰囲気を再現しています。
12. ブランド独自の世界観構築
昨年は多くのブランドが総合的（ホリスティック）なデザインアプローチを採用し、ムードボードを超えて、Web サイト、SNS チャンネル、パッケージなど全体にわたり没入感のあるブランド世界を作り上げてきました。この戦略は、単に製品を売るだけでなく、個人を豊かなストーリーの一部へと誘い、潜在顧客にブランドと出会うあらゆる場所で遊び心と想像力に触れてもらうことで、ファンコミュニティを育成することにあります。
Futurewise、Starface、Dieux Skin のようなスキンケア系のスタートアップは、Flamingo Estate のように、清潔でエレガント、そして自然体なブランドの世界観を創り出すことを得意としていました。
その一方、Vacation は、テニスボールブランドの Prince や個性が際立つ AriZona Beverage Company との巧みなコラボレーションを含め、「レトロ・レジャー」の世界を広げたことで、2度目のリスト入りを果たしました。消費者がブランドファネルに入る方法が2024年以降も広がり続ける中、2024年にはブランドを運営するクライアントのオムニチャネルデザインとマーケティングソリューションとして、ブランド世界観の構築はどんどん増えてくるものと予想されます。
13. Y2K
数年前から本格的な購買力を持つようになった Z 世代。以前のミレニアル世代と同様、独特の美意識が醸成され、2024年にはこの Y2K が世代を超えたデザイン用語となると予想されます。
Z 世代の特徴は活気、デジタルネイティブであること。レトロな影響とモダンなスタイルを融合させ、大胆な色使い、90年代や2000年代初頭を振り返るノスタルジックな雰囲気、ハイテクに精通したマキシマリズムなどが人気です。
ステッカー、キラキラアイコン、魚眼レンズ、デコデザイン。そしてイエロー、ライラックパープル、ビビッドグリーンといった性別にとらわれない（ジェンダーニュートラルな）カラーはすべて、今やそれなりの経済力を持つようになった Z 世代の消費者をターゲットとするブランドによって作り上げられた特徴的なビジュアルです。
ナイキをはじめ、ボディケアブランドのビリーや Good Weird のようなメイクアップブランドもこのトレンドに追随しています。Superette のような食料品サービスでさえも、Z 世代の美意識の波に乗っていることが分かります。
14. ダイヤルアップデザイン
よりニッチなオンラインコミュニティが存在し、ブランドガイドラインが少なかった Web 黎明期を懐かしく思うという方は少なくないのではないでしょうか。
今日、Web デザイン界ではマイクロソフトのペイントやワードアートのようなミームや Y2K への回帰といったアナログなソーシャルアセットを作品に活用するなど、インターネット初期のジオシティーズ時代の実験精神を彷彿とさせる動きが見られるようになっています。
Droga5 や Wieden + Kennedy のような大手エージェンシーのソーシャルコラテラル、最近立ち上げられたインターネットカルチャーサイト「Byline」、新しい Z 世代向け myspace アプリ「NoSpace」、女性が運営する慢性的にオンラインな人向けのメディアスタートアップ「Boys Club」、また BusinessWeek などがその例です。これらはすべて Y2K ブームの一部であり、2024 年もこのデザイントレンドが継続することを示唆しています。
特に、ミレニアル世代、Z 世代、α 世代をターゲットにしているクライアントにとっては、受け入れられやすいデザインです。
人気のコミュニティ「Seamoss Girlies」、前述の「Boys Club」、新登場したアフターピルのブランド「Julie」などの SNS アカウントを一度覗いてみてください。このトレンドを肌で感じることができるはずです。
また、各ブランドではキャンペーンのコンセプトとしてアナログなデザインを活用しています。トマト缶プリントが特徴のアパレル、「Lisa Says Gah」と、トマトピューレのブランド Hunts のコラボ ＃tomatogirl のように、キャンペーンとしてなら取り入れやすいのでおすすめです。
このトレンドに乗った意外なブランドのひとつが、90 年代を代表する有名な紅茶ブランド、Celestial Seasonings（セレッシャル・シーズニングス）。おやすみモードのクマのマスコットは、昨年ミームとして広く拡散されました。セレッシャルは今、有名になったこのクマのアイコンを自社の公式アカウントで積極的に使用しています。
15. AI 生成デザインの活用
ChatGPT が世の中に登場してからまだ1年ちょっとしか経っていませんが、デザイン業界は明らかに変化しています。AI ツールは、アイデア出し、コンテンツ制作、ワイヤーフレームの考案、画像・動画制作など、業務で発生するデザインワークフローの多くにすばやく組み込まれてきました。
Synesthesia のようなサイトでは AI 生成アバターによる動画やナレーションを作成することができます。また、Midjourney や Dall-E などテキストから画像を生成できるツールも登場しており、こうしたツールを活用してソリューションを提供する AI クリエイティブスタジオも出てきました。たとえば、Revolve の IRL ビルボード事業では AI 生成型の広告キャンペーンを使用しています。
この技術はホームページ作成ツールでも利用可能になっており、Wix エディタには AI を活用した Web デザイン機能が搭載されています。Adobe Express も、独自の AI 画像生成ツールを発表しています。
これらのツールは爆発的な人気にもかかわらず、多くのデザイナーは慎重な対応を取っているようです。2024 年にこの技術がどのように進化しているかは未知数ですが、AI がデザインとテクノロジーの領域を支配し続けることは間違いなさそうです。
まとめ
2024 年は Web デザイン業界にとって大きな節目となるでしょう。
AI ツールの成熟により、トレンドの移り変わりが加速し、そして表現手法が大幅に発展していくことが予想できます。デザインのトレンドも、細分化していき、シンプルモダン及び派手で装飾的なデザインと両方が同時並行で発展して行くでしょう。
この記事で取り上げたデザイントレンドは、始まりにすぎません。今年は1年間を通して、全く新しいデザイントレンドが生まれる可能性があります。進化し続ける Web デザイントレンドを是非自分のサイトにも取り入れてみましょう。
思い通りのデザインをノーコードで実現
Wix はすべてのサイトで業界トップクラスのインフラを提供し、あらゆるサイトのパフォーマンス維持を実現していますが、それでもデザインの容量が大きすぎるとサイトの表示速度が遅くなる可能性があります。トレンドを取り入れたおしゃれなデザインに仕上げるだけでなく、機能性も両立できるように、画像や Web フォントなどメディアの最適化といった対策も行っておきましょう。
Wix のデザイナーは、ユーザーのみなさんが最新のデザイントレンドを取り入れられるように、 Wix エディタのデザイン素材を日々アップデートしています。
他にも、Wix のオンラインコースなら、Web デザイン講座から、Wix エディタの便利なデザイン機能の活用方法まで学ぶことができます。ぜひチェックしてみましょう。
監修：Yiftach Koronio
ソーシャルクリエイティブディレクター
編集者：Miyuki Shimose ブログ コンテンツマネージャー
