2026年夏のUI/UXギャラリー：キネティックタイポグラフィ、リキッドグラス、”物言わぬAI”インターフェース

デザイン・UI
UI/UXトレンド のアイキャッチ

2026年夏、Webデザインの賞レースでは「派手さ」より「意味のある動き」が評価され始めている。今回はAwwwardsやCSS Design Awardsなど主要ギャラリーの直近受賞作を手がかりに、キネティックタイポグラフィ、リキッドグラス、そして”物言わぬAI”インターフェースという3つの潮流を実例つきで見ていく。

UI/UXトレンドのイメージイラスト

賞レースの現在地：2026年7月の受賞作から

AwwwardsやCSS Design Awards、FWA（Favourite Website Awards）といった老舗ギャラリーは、いまも「今この瞬間のWebデザインの質」を測る定点観測として機能している。この7月だけでも動きは多い。

  • CSS Design Awardsでは7月17日、高級腕時計を題材にリアルタイムWebGLでインタラクションを見せる作品「The FS 60P」がSite of the Dayを受賞。
  • Awwwardsでは、フィンテック企業Jetonのサイトが「シームレスなUX」を評価されてSite of the Dayに選出。
  • ウクライナのObysエージェンシーによる「Masterpiece」プロジェクトが7月8日にSite of the Day認定。
  • 日本のUtsuboによる作品が7月、FWAとAwwwards Site of the Dayの両方を受賞。

共通するのは、派手なエフェクトを積み上げるのではなく、ブランドの世界観に沿って動きや質感を絞り込んでいる点だ。以下、その背景にある3つの具体的なトレンドを見ていく。

トレンド1：キネティックタイポグラフィ — 文字が「演技」する

スクロールに連動して文字が伸縮・回転・分解する「キネティックタイポグラフィ」は、2026年に入って露出が増えている代表的な手法だ。かつてのFlash時代のように「動きそのものがUI」として機能し、見出しの動き方がそのままインタラクションの手がかりになる。

  • ヒーローセクションでの文字の分解・再構成アニメーション
  • ホバー時にウェイト（太さ）が変化するバリアブルフォント表現
  • スクロール量に応じて文字がレイヤー間を移動する演出

実装面ではGSAPのようなアニメーションライブラリやSVGベースの手法が使われることが多く、SVGatorのまとめ記事では50件の実例がスタイル別に整理されている。ただし可読性とアクセシビリティ（`prefers-reduced-motion`への配慮など）を犠牲にしないことが前提になる点は、実務者が繰り返し指摘している。

トレンド2：リキッドグラスとソフトインターフェース — 「深さ」の再発明

Appleが「Liquid Glass」をiOS 26に導入したことをきっかけに、Web側でもガラスのような半透明・屈折表現が再評価されている。従来のグラスモーフィズムが単なる装飾だったのに対し、2026年版のリキッドグラスは「構造と階層をわかりやすくするための深さ」という位置づけが強い。

要素 旧来のグラスモーフィズム 2026年のリキッドグラス／ソフトUI
目的 装飾・雰囲気づくり 階層・構造の可視化
質感 単純なぼかし＋半透明 屈折・反射・動的な光の再現
動き 静的、もしくは過剰 状態変化に連動した控えめな追従
評価軸 見た目のインパクト わかりやすさ・予測可能性

あわせて広がっているのが「ソフトインターフェース」志向だ。角の丸み、柔らかい影、彩度を抑えた配色などにより、情報密度の高い画面でも圧迫感を減らす方向性で、モーションも「効果」ではなく「状態変化の説明」として使われる。

トレンド3：AIネイティブUXパターン — 「物言わぬ」パーソナライゼーション

もう一つの軸は、AIを前面に出さない設計だ。「AIネイティブ製品のための8つのUXパターン」という記事が指摘するのは、UIそのものはコモディティ化しつつあり、デザイナーの仕事が「見た目」から「エージェント的なシステムを包むルール・信頼・判断の設計」に移っているという変化だ。

  • AIによる提案やパーソナライズは、通知や派手なバッジではなく、レイアウトや並び順の微調整として静かに現れる
  • チャット的な自然文入力と、従来のフォーム／ボタンUIを状況に応じて使い分けるハイブリッド設計
  • AIの処理範囲と「人が最終判断する境界」を、UI上で明示するトラストレイヤーの設計

ドーパミンデザイン（鮮やかな配色によるポジティブな感情喚起）のような視覚的トレンドと、こうした「静かなAI」の設計思想は一見矛盾するようだが、実際には「派手な要素は絞り込み、要所にだけ使う」という共通の判断基準でつながっている。

グラデーションを使ったUIデザインのイメージ写真
Photo: Gustavo da Cunha Pimenta / CC BY-SA 2.0, Openverse経由

2026年夏のトレンド早見表

トレンド 特徴 参考
キネティックタイポグラフィ スクロール・ホバー連動で文字自体が動くUI Awwwards typography collection
リキッドグラス／ソフトUI 屈折・反射を伴う控えめな深さ表現 Pixelmatters「7 UI design trends」
AIネイティブUXパターン AIの存在を前面に出さない静かなパーソナライズ Medium「8 UX patterns for AI-native workflows」
ドーパミンデザイン 要所に絞った鮮やかな配色 各種2026年トレンド記事

実例をチェックする

実際の受賞サイトを継続的に眺めるなら、以下のギャラリーが定番だ。

主な情報源

各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。