UI ビジュアルトレンド(2025-2026 スナップショット)

調査時点: 2026-04〜05。この種のトレンドは陳腐化が速く、半年〜1 年で再確認が要る。

プラットフォームのデザイン言語#

Apple Liquid Glass(2025-06-09 WWDC25、iOS 26 / macOS Tahoe など): 光を動的に屈折・散乱させる半透明マテリアル。Light / Dark にリアルタイム適応。テキスト・スライダー・トグル・パネル・サイドバーが新コンポーネントに刷新され、SwiftUI / UIKit / AppKit に新 API。
Material 3 Expressive(Google、Android 16): 可変フォントウェイト、大型のインタラクティブサーフェス、AI 提案のカラーハーモニー。

常態化したもの#

ダークモード常用: スマホユーザーの約 82% が常用(2024 調査)。OLED 向けの true black #000000 は省電力だが対比で眼精疲労のトレードオフがあり、#121212 / #1E1E1E が一般的な推奨値。
command palette / keyboard-first: プロシューマー向けアプリの共通前提。

レイアウト・ビジュアル#

Bento grid: Linear / Raycast 風の大カードをグリッドで並べる。2025-2026 でピークから定着・やや飽和へ。“Bento 2.0” は角丸 12〜24px + micro-interaction。CSS Grid の grid-template-areas で組む。
フィルタリング可能なプロジェクトグリッド: 20 件未満なら CSS の display: none 切替で十分。shuffle.js(MIT)、isotope.js(GPLv3 / 商用 $25)。
Before / After スライダー: img-comparison-slider(Web Components、MIT)。
3D hover tilt カード、OS ノスタルジア UI(98.css など、ニッチで飽和気味)、マルチフォントの組み合わせ、サイバーパンク(ダーク + ネオン + グリッチ)、Claymorphism、character-first / 擬人化キャラクター(2025 以降復調)。
グラフィック: ノイズ / グレイン + 高彩度グラデーション(Acid Fade)、ブルータリズム成熟期、タイポグラフィ主役。

スクロール・モーション#

スクロールストーリーテリング(スクロールで物語が進む、WebGL ナラティブ)、パララックス、ページトランジション、ローディングのブランド体験化(タイル消去・段階シーケンス・周年カウント)。
実装の優先順位は CSS → Web Animations API → JS ライブラリ。prefers-reduced-motion の代替は必須。

デザイン賞(もっとも陳腐化が速い)#

Lando Norris F1 公式(Studio OFF+BRAND)と Messenger(WebGL 小惑星)が Awwwards Site of the Year 2025。Bruno Simon のポートフォリオ(ブラウザ内 3D ドライブ)が Site of the Month 2026-01。

更新履歴#

2026-05-08: 初版(ローカル調査ノート)
2026-10-17: Wiki へ移植、概念ページとして再構成