2024年も残りわずかとなり、振り返りの季節がやってきました。
今年、Webデザインの世界ではAIの進化や大胆なインタラクションデザインが注目を集め、私たちに新しい可能性を示してくれました。
この記事では、そんなトレンドを象徴する2024年に話題となった年間ベストWebデザイン60選を厳選してお届けします、
今年を締めくくる一押しのデザイン事例で、次のプロジェクトへのアイデアを探してみませんか？
2024年世界で話題になったWebデザイン60選
30色を超える、45Rオリジナルのインディゴ。自分たちらしい色を求め続けた、20年以上にも渡るものがたりをふんだんなイラスト付きで紹介する巻物？サイト。とにかくクリエイティブなアイデアに脱帽です。
Collecting Stamps on Yoshida Trail, Mt. Fuji
山梨県側の富士山の北側から山頂を目指す「吉田ルート」からの登頂の記録を、インタラクティブに残したアートプロジェクト。
茨城県北部6市町にまたがる、全長320km(予定)のロングトレイル。映像でトレイルを体験できるコーナーや、各エリアに伝わる物語を絵巻物風に見せるなど、ぜひ行きたいと思わせる工夫ばかり。
WebGLやCSSアニメーションでリゾートの魅力を引き立て、心地よいインタラクションを提供したサイト。
日本語テキストの美しさを最大限に活かした、視認性を高めるウェブフォントや配色設計も魅力です。
House of Dreamers – ÊTES-VOUS PRÊTS À RÊVER?
あらゆる年齢の夢見るひとに捧げる初の没入型展示会。18のチャプターを通じて、デザイン、色彩を駆使した魔法のような驚きに満ちた世界へと訪問者を誘います。
BOTANIST | フレグランスコレクション’24 アイスピーチティーの香り
スマホで閲覧されることを前提にした幅の狭いレイアウトを採用したWebページで、スクロールに応じて表示されるコンテンツにはどれも素敵なアニメーションが実装されています。
ブラビス・インターナショナル｜トータルブランディングカンパニー
スクロールするたびに形を変える美しいブロブや、水面に落ちる水滴のような繊細なエフェクトが楽しめます。
ページ遷移時もブロブのダイナミックなアニメーションが魅力的で、自然とサイト全体を巡りたくなる体験が待っています。
Base Habitation – Let the wild in. Find your Base.
プレハブ式パネル組み立てできる、サステナブルな家を販売するフランスの会社。まるでミニチュアのようなデザインのいせ方がかわいかったのでメモとして。
House on a Hill | A family holiday home in Bozeman, Montana.
さまざまな種類のスクロール駆動アニメーションをページ全体に採用し、ユーザーを飽きさせないシンプルなレイアウト。アニメーションが良いアクセントとなり、メッセージがより伝わりやすくなりそう。
古いアンティークなイラストをデジタルで活用した例。重厚感のあるセリフ書体と、デジタルなサンセリフと鮮やかな青色の組み合わせで、新しいスタイルを確立しています。
wanna manna（ワナマナ）台灣早餐〜台湾朝食の新習慣〜
台湾朝食を提供する大阪にある飲食店の公式サイト。お店の様子を撮影した動画をヒーローイメージに使用し、美味しそうな料理の数々は見ているだけでお腹が減ってしまいそう。
マウスを動かすとまるで「暖かさ」が漂うかのように、やさしい炎のようなエフェクトがリアルタイムで描かれます。また、女性モデルが光で包まれる演出も加えられ、製品の暖かさと柔らかさを視覚的に伝える工夫が満載。
診療〜お薬の処方まで、まるっとオンラインで完結する新しいサービス。従来の薬処方を覆すほどポップでおしゃれなパッケージで、Z世代にも刺さるデザインに。
愛の詰まったコンテンツやイラスト、下まで続く長ーいフッター、どれもが素敵すぎる九州を代表するWeb制作会社モンブランさんのブランディングサービスサイト。ワクワクが止まりません。
ChainGPT Labs | Fund, Incubate and Accelerate Web3 Projects
ロックチェーン関連のAI技術を紹介する先進的な構成がポイント。WebGLや3Dアニメーションを活用して、立体的で動きのあるインターフェースを実現。直感的で没入感のある体験が楽しめます。
Premium Branding for Serious Startups | SERIOUS.BUSINESS
カーソルに合わせて陰影が変化するヒーローイメージにはじまり、カードスタック型サービス紹介、コンテンツの切り替わりに合わせた背景トランジション、テーマカラーのピンク、記憶に残るデザイン。
ソーダ缶のタブを開くとまるで炭酸飲料がこぼれたようなエフェクトが素敵。マウスの動きに合わせてグラフィックが変化したり、果物がポンポン出現するなど面白い仕掛けが満載。
I LOVE SWEATS | ブランドキャンペーン特設サイト
大小さまざまなグリッドが動画付きで切り替わり、思わずクリックしてみたくなるトップページ。ページ下にあるコンテンツ切り替えボタンも使いやすい。
TOMOMI SHIBAKUSA – Space Communication Director
淡いオレンジ色と青色の水彩テクスチャをつかった文字テキストにはじまり、ページ遷移のキラキラBokehエフェクトや心地よいアニメーション、くるくると回転するローディング画面など、印象に一発で残るデザインセンスの塊。
25周年を迎えたMIXIを振り返る特設LPページ。アイソメトリックなイラストとカラフルな配色で統一。創業者インタビューや年表など見ることができ、懐かしいひともいるかもしれません。
RAYMOND WEIL x BASQUIAT™ | an Iconic Special Edition
20世紀を代表するアーティストの一人、「ジャン・ミチェル・バスキア」とのコラボレーションで生まれた時計のランディングページ。ページ全体にザラッとしたグランジ感のある質感をプラスしています。
53 West 53 | Iconic Manhattan Condominiums With a View
ニューヨークのマンハッタンにある82階建ての超高級マンションのランディングページ。各部屋のルームツアーや施設紹介など、どこをとっても高級感にあふれるデザイン。
855-HOW-TO-QUIT | Turning the object of addiction into a way out
薬物の乱用や依存症に苦しむ人と、実際に依存症を克服した人をつなぐヘルプライン。各錠剤ごとに体験者のストーリーを聴くことができます。錠剤が3Dデザイン要素として活用されています。
パッと見ると普通のPVですが、ページ下にある「Lyric Mode（リリックモード）」をクリックすると…。マウスを上下に動かせば、ターンテーブルをこすっているような動きに。
THE BEST GIFT SHOP | BEAMS HOLIDAY 2024
スタッフ一押しのアイテムで特別な一年の締めくくりを。心をくすぐる、遊び心と上質さを兼ね備えたアイテムが勢揃い。大切な人への贈り物、そして自分へのご褒美に。
Bored Ape Yacht Club – Welcome to the BAYC Clubhouse
ページ全体に表示されるイラストにマウスで触っていくと、各コンテンツに移動できたり、さまざまな部分に仕掛けが施されたNFTコミュニティースペース。
世界的な大物アーティストBonJoviのバックステージを詳しく探検できる体験型Webサイト。スタジオやツアーの控室、オフィスなど視線を変えながら楽しむことができる。
世界的な気候変動により、炭素が海底にどのように蓄積されているのか紹介するプロジェクトページ。海に住むプランクトンから巨大なクジラまで、どのような影響があるのかストーリーテリング手法で伝えます。
Sea Moss and Bladderwrack by Organimo
コスメティック商品のランディングページで、スクロールに合わせて海底空間へと潜りながら商品の詳しい説明を知ることができる、ストーリーテリング手法を全面に利用した訴求力のあるサイト。
Lumara Container Homes – Innovative, Customizable Living
高級素材を使用したラグジュアリーなコンテナ住宅の建築を専門としたアメリカ、フロリダ拠点のウェブサイト。
分割スプリットで切り替わるヒーロースライダーや、縦書きテキストのメッセージ、無限マーキースクロールとさまざまなテクニックを駆使したLPは、角丸で親しみやすい雰囲気が素敵です。
2024年に紹介したいWebデザイン一覧
ちなみに2023年のWebデザイン総まとめがこちらでした。人気のスタイルやトレンドが移り変わる様子をわかりやすく確認できます。
2024年に人気だったデザイントレンド
ストーリーテリング手法
スクロールするたびに展開する没入感の高いストーリー性の高いWebサイトが増えた。ユーザー体験をより有意義なものにし、人々の心を惹きつけるストーリー作りが重要に。
インタラクティブな３D要素
立体感のある3Dデザインの利用も、2024年を代表するWebデザインの変化のひとつ。奥行感とリアルさを追求した、デジタルとに日常世界の境界線がよりあいまいに。
WebGLエフェクトとGSAP アニメーション
GSAPライブラリとの組み合わせによって、デザイナーはあまりコーディングの知識がなくても、 高性能でインタラクティブなビジュアルを作成できるようになった。
AI生成による画像や動画
2024年は、AIがコンテンツ制作に革命を起こした年となりました。デザイナーはよりダイナミックなビジュアルを短時間で、そして効率的に作成できるようになってきています。
マイクロアニメーションの確立
心地よいアニメーションが実装しやすくなったことで、より生き生きとした雰囲気をWebサイトで表現できるように。デザイナーはコードを書かずに、直感的なインターフェースを提供しユーザーエクスぺリエンスを向上できます。
レトロデザイン復活
ヴィンテージな配色カラーパレットや、クラシックなタイポグラフィー、ノスタルジックなイラストなどが人気になった一年でした。フレンドリーな親しみやすさがこのトレンドの特徴。
2024年も多くの素晴らしいデザインに出会い、クリエイティブの可能性を再発見する1年となりました。
PhotoshopVIPをご覧いただき、コメントやシェアを通じて交流してくださった皆さん、本当にありがとうございました。
この「2024年Webデザイン年間ベスト」が、来年の新しい挑戦やアイデアのきっかけになれば幸いです。
2025年も一緒に、さらに素晴らしいデザインの世界を探求していきましょう。
アドビだからストック素材サービスも ここまでクリエイティブ。
Adobe Stockは、アドビがクリエイターのためにつくったストックサービスです。写真やイラストなど高品質な素材が約3億点。無料素材も100万点。
検索、プレビュー、ライセンスの取得をPhotoshopから直接できるので効率の良さが抜群。
たくさんのAdobe Creative Cloudユーザーに選ばれているのには理由があります。
最初のひと月は素材が10点まで無料なので、気軽に始めてみませんか。
