2026年9月、受賞サイトの評価軸は「見た目の派手さ」から「機能する余韻」へと移りつつある。今週のUI/UXトレンド・実例ギャラリーは、マイクロインタラクション、ネイティブCSSのスクロール演出、View Transitions APIによるページ遷移、マグネティックカーソルという4つの切り口で、2026年後半の潮流を実例とともに整理する。
「見た目」から「機能する余韻」へ——2026年の評価軸
Awwwardsなど主要なCSS Design Awards系の受賞サイトを見渡すと、ピクセルパーフェクトなタイポグラフィやホバー時の小さなアニメーションはもはや「前提条件」になっており、審査の重心は「訪問者がスクロール位置を主入力として物語をたどれるか」という体験設計そのものに移っている。派手な演出よりも、状態変化を伝える機能的なマイクロインタラクション（成功時のフィードバック、エラー時のやさしい誘導など)が評価される傾向が強まっている。
受賞サイトケーススタディ：By-Kinに見る「抑制の美学」
英国のクリエイティブスタジオBy-Kinのサイトは、CSS Design Awards「Web of the Day」に加え、Awwwards「Site of the Day」と「Developer Award」を同時受賞した。GSAPとNext.jsで構築され、エディトリアルな余白と重みのあるスムーズスクロールを軸に、遷移そのものが目立たないよう設計されている点が特徴だ。Developer Award受賞は、コマ送りで検証しても破綻しないエンジニアリングの精度が評価された証でもある。
ネイティブCSSだけで作るスクロール駆動アニメーション
これまでGSAPやScrollMagicなどJavaScriptライブラリが担っていたスクロール連動演出が、CSS Scroll-driven Animations仕様のブラウザ対応拡大により、メインスレッドを一切使わないハードウェアアクセラレーション付きの表現として実現できるようになってきた。さらに、スクロール位置が特定のオフセットを通過した瞬間に発火する「スクロールトリガー」型のアニメーションも実装が進んでおり、ランディングページやポートフォリオサイトでのコンテンツの段階的な出現表現に広く使われ始めている。
View Transitions APIによるページ遷移の標準化
View Transitions APIは、SPA内のDOM状態間だけでなく、MPAでの通常のページ遷移にもネイティブなアニメーションを付けられる仕組みで、Chrome・Edge・Safari・Firefoxの主要ブラウザで対応が進んでいる。一覧ページのサムネイルが詳細ページの大きな画像へなめらかに変形する、固定ナビゲーションバーが遷移中も位置を保つ、フィルタリング時にグリッド内の要素が位置を入れ替えながら移動する——といった演出が、重いサードパーティ製アニメーションライブラリなしで実装できる。実装例集も充実してきており、フォーカス管理やスクリーンリーダーへの配慮が保たれる点もアクセシビリティ上の利点として挙げられている。
マグネティックカーソルという「もう一つのUI」
カーソル自体をブランド表現やナビゲーションの一部として扱う動きも継続している。クリック可能な要素に近づくとカーソルが吸い寄せられる「マグネティックカーソル」は、クリエイティブスタジオObysなどが早くから採用してきた手法だが、Motion for Reactが提供するMotion+ Cursorのようなライブラリ機能によって、磁力的なスナップやゾーニングを伴うカーソル演出が一般の開発者にも扱いやすくなってきている。ただし、実用重視のサイトでは「訪問者の邪魔をしない」ことが前提であり、ポートフォリオ系など表現寄りのサイトに使いどころが限られる点は留意したい。
4つのトレンドの比較
| トレンド | 主な用途 | 実装コスト | 向いているサイト |
|---|---|---|---|
| 機能的マイクロインタラクション | 状態変化のフィードバック | 低〜中 | ほぼ全種類 |
| ネイティブCSSスクロール演出 | コンテンツの段階的表示 | 中 | LP・ポートフォリオ |
| View Transitions API | ページ/状態遷移の連続性 | 低〜中 | ECサイト・一覧〜詳細遷移 |
| マグネティックカーソル | ブランド表現・注意誘導 | 中〜高 | クリエイティブ系ポートフォリオ |
主な情報源
- Why Are Immersive Experiences Dominating the 2026 Awwwards? – Digital Strategy Force
- By-Kin Case Study: Award-Winning Next.js Website – Hon Tran
- ‘kin – CSS Design Awards
- CSS scroll-driven animations – MDN Web Docs
- Scroll-Driven Animations – Josh W. Comeau
- View Transition API – MDN Web Docs
- Some practical examples of view transitions to elevate your UI – Piccalilli
- Introducing magnetic and zoning features in Motion+ Cursor – Motion Magazine
- UI/UX Evolution 2026: Micro-Interactions & Motion – Primotech
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。