BLOG MENU

【6月版】知っておきたい2025年Webデザインニュース！ Apple「Liquid Glass」がもたらすWeb制作の新潮流とは？

Apple、次世代のデザイン「Liquid Glass」を発表
Figmaの「オールインワン化」が本格始動：「Figma Sites」正式リリース
リッチ体験を実現する、6月注目したい海外サイト3選
最新トレンドと普遍的な知見を活かした、Webソリューションならクーシーへ！

2025年も半分が過ぎたこの6月、Webデザインの業界を揺るがす2つのビッグニュースが舞い込みました。

その主役が、AppleとFigma。

Appleは、iOS 26やmacOS Tahoe 26など、すべてのOSに統一した新デザイン「Liquid Glass」を発表。これは、2013年のフラットデザインへの移行以来とも言える、最も大規模なビジュアルの刷新です。

一方のFigmaも、Webサイトの公開までを完結させるAI搭載の新機能群をリリースし、単なるデザインツールからクリエイティブの全工程を担う「オールインワン・プラットフォーム」へと、その姿を大きく変えようとしています。

UIの「表現力」と制作の「効率性」。その両方が刷新されつつあることを告げた2つの大きなニュースを中心に、今知っておくべきWebデザインの最前線を、海外の先進的なサイト事例とともにWeb制作会社のクーシーが紐解いていきます。

クリエイティブ×マーケティング戦略でビジネス成果を追求！
　▶︎弊社の制作実績はこちらをご覧ください。
多種多様な規模・業界・目的のWeb戦略もお任せください。
　▶︎Web制作・運用のご相談はこちらで承ります。

Apple、次世代のデザイン「Liquid Glass」を発表

画面の中のUIが、まるで現実のガラスのように光をまとい、背景に溶け込んでいく。Appleが6月のWWDCで発表した新デザイン言語「Liquid Glass」は、そんな魔法のような体験をすべてのデバイスで実現します。

これは単なる見た目の変化ではないと考えるべきでしょう。iOS 7以来のフラットデザインから、よりリッチで没入感のある表現へと、Appleのデザイン哲学が大きく舵を切ったことを意味しています。

参考

Apple、楽しくて優雅な新しいソフトウェアデザインを発表｜Apple

「Liquid Glass」の特徴は、本物のガラスのようでいて液体的なアニメーションが組み合わさった特徴的な表現です。例えば、Dockやロック画面、ボタン、スライダー、タブバーなど、UI全体にガラスのような光沢や縁取りが施され、見る角度や操作によってリアルタイムに変化する動きも加わります。カメラアプリでは、透明なメニューがライブ映像に重ねて表示されるなど、インタラクションと視覚効果が一体化したデザインが印象的です。

このデザインは、Appleの空間コンピューティング向けOS「visionOS」の美学から着想を得ており、ライトモードとダークモードの両方に自然に馴染む仕様となっています。さらに、開発者向けには新しいAPIも提供され、アプリのデザインをLiquid Glassに対応させる準備が進められています。

macOS Tahoe 26では、Dockやサイドバー、ツールバーに加え、メニューバーも完全に透過化され、より広く感じられる画面体験が実現されています。Appleが2013年にiOS 7でスキューモーフィズムからフラットデザインに移行して以来、大きなビジュアル変化が少なかった中で、Liquid Glassは久々に“劇的”な進化と言えるでしょう。

Appleのガラス表現は「Aqua（2001）」や「Big Sur（2020年）」といった先例がありますし、かつてWindows Vista（2007）でも類似した表現が用いられていました。一方で、それらが静的な「見た目の装飾」であったのに対し、「Liquid Glass」の革新性は、操作に追従する流体的なアニメーションと、物理法則に基づいた光の表現にあります。表層的な美しさから実用性と没入感を両立させた「体験」のリッチなデザインへと、Appleはブランド全体のビジュアルを新たな次元に引き上げたのが今回の革新的なポイントです。

Figmaの「オールインワン化」が本格始動：「Figma Sites」正式リリース

デザインツールのFigmaは、今やWeb制作の全工程を飲み込む「オールインワン・プラットフォーム」へと、その進化を加速させています。先日のカンファレンス「Config 2025」では、その布石となる以下の5つの大きな発表がありました。

Figma Draw：表現力を高めるドローツール
Grid：直感的なレスポンシブレイアウト機能
Figma Buzz：ブランドアセットを管理・展開するマーケティングツール
Figma Sites：デザインからWebサイトを直接公開する機能
Figma Make：AIがプロトタイプ作成を支援する開発ツール

そして今回、これらの中でも特に注目されていた「Figma Sites」が正式リリースされ、ついにデザインから公開までをFigma単体で完結できるようになりました。 以下、この革新的な機能の詳細を、詳しくご紹介します。

コード不要、Figma内で完結するWeb制作

従来のWeb制作では、Figmaでデザインを作成 → プロトタイピング → ブレークポイントの設定 → 開発者への引き継ぎ → コーディング → 公開という複雑なステップが必要でした。しかし、Figma Sitesを使えば、これらをすべてFigma内で完結できます。個人のポートフォリオやイベントサイト、製品ランディングページなど、開発知識がなくてもインタラクティブなWebサイトを制作・公開可能です。

スタートしやすいテンプレートとプレビルド要素

Figma Sitesには、初心者でも始めやすいようにテンプレート、レスポンシブなWeb要素、インタラクション付きのパーツがあらかじめ用意されています。さらに、今後はAI機能「Figma Make」を通じて、「こういう動きをしたい」と入力するだけで、必要なアニメーションや挙動を生成してくれる機能も登場予定です。

デザインシステムとの連携

Figma上のライブラリと直接リンクさせることで、ナビゲーションやヒーローセクション、フルページといった共通要素を素早く挿入できます。すでにデザインシステムを持っている場合はもちろん、持っていなくても標準パーツがあるためゼロからの構築も不要です。

完全レスポンシブ対応と直感的な調整機能

ブレークポイントごとのテキストサイズ・余白調整やマルチ編集など、デバイスごとの表示最適化も簡単に行えます。さらに、実際のHTML/CSSでプレビュー表示されるため、Figma上でも実際のWeb表示とほぼ同じ見え方で確認できます。

多彩なアニメーションとインタラクション効果

パララックス（マウスやスクロールによる奥行き演出）
タイプライター効果
ドラッグ操作可能なオブジェクト
ライトボックス、スピン、スクランブルテキストなど

これらのインタラクションはすべてビジュアルベースで設定可能。今後はコードレイヤーやAIによるインタラクション追加機能も登場し、さらに自由度の高いカスタマイズが可能になる予定です。

リッチ体験を実現する、6月注目したい海外サイト3選

AppleとFigmaの発表が示すように、Webデザインは今、ユーザーを魅了し、世界観に没入させる「体験のデザイン」へと舵を切っているのかもしれません。

では、その「リッチな体験」とは、実際のWebサイトでどのように表現されているのでしょうか。

ここでは、ビジュアル、インタラクション、情報設計のすべてが一体となり、ブランド価値を新たな次元へと高めている海外の優れた事例を3つ厳選してご紹介します。制作現場でのヒントやインスピレーション源として、ぜひご覧ください。

Tripletta Pizza

参考

「Tripletta Pizza」公式サイト

今月注目したい海外サイトの1つ目は、イタリア・ナポリ発のピッツェリア「Tripletta Pizza」の公式サイトです。サイトを開いたら、思い切ってスクロールしてみてください。スクロールに合わせて画面全体のカラーがダイナミックに変化しながら、イタリアンカルチャーの陽気さとクラフト感を感じるリッチなコンテンツが繰り返し表示されていきます。

特に注目したいのは、リズミカルに動くマイクロインタラクションや、余白とタイポグラフィの使い方。メニューやコンセプトの紹介にも遊び心が散りばめられており、訪問者の視線を自然に誘導しながらブランド体験を深めています。食の魅力を視覚で伝えるだけでなく、ブランドの「熱量」までデジタル上で体感できる、非常に完成度の高いサイトです。

Overflow

参考

「Sui Overflow 2025」特設サイト

2つ目に紹介するのは、Web3プラットフォーム「SUI」が手がけるデジタルアートとテクノロジーの祭典「Overflow」の特設サイトです。先進的なWeb技術と映像的なビジュアルを融合させたこのサイトは、没入感のある3Dモーションとインタラクティブなレイアウトが特徴で、まるで仮想空間を旅しているかのような体験を提供します。

コマンドプロンプトやコードエディターのような黒を基調としたUIにアクセントとして動くグリッチやグラフィックが散りばめられ、アーティスティックかつ近未来的な印象が演出されています。スクロールやホバーに応じて変化する視覚表現も緻密に設計されており、デジタル表現の最先端を体感できる一例として注目に値します。テクノロジーとアートが融合する新しい時代のWebデザインの方向性を示す、インスピレーションに満ちたサイトです。

Foulards 3D

参考

「Foulards 3D」特設サイト

3つ目に紹介するのは、ラグジュアリーブランドGUCCIが展開する「Foulards 3D」プロジェクトの特設サイトです。このサイトでは、GUCCIのスカーフコレクションを3Dビジュアライズで体験できる構成になっており、ファッションとテクノロジーの融合による新しいオンライン接客の形を提示しています。

ユーザーは視点を自由に動かしながら、布の質感や動き、プリントの細部をまるで実物のように確認でき、静的な画像では得られない没入感が魅力です。ミニマルで洗練されたUIと繊細なモーションの組み合わせにより、ブランドの高級感を損なうことなくデジタル上でのリアルなスカーフの閲覧を見事に再現しています。ECやブランド体験のあり方に一石を投じる、非常に革新的な試みとして注目を集めています。