受賞サイトの「型」とスクロール演出の線引き：GSAP・CSS新仕様・“人の手触り”回帰から読む2026年10月のUI/UX

2026年11月2日

10月最終土曜のUI/UXトレンド回。今回は「受賞サイトは何で作られているか」「スクロール演出の良し悪しの分かれ目」「AI時代に強まる“人の手触り”志向」の3点から、AIに出す指示へ落とし込める形で整理します。

1. 受賞サイトの技術スタックは「GSAP＋WebGL＋スムーススクロール」に収れん

デザイン事例集サイトのEXHIBITAは、2026年8月のAwwwards Site of the Dayの直近31サイトを集計しています。タグの上位はGSAP（16）、Animation（15）、WebGL（13）、Clean（11）、3D（10）、Scrolling（9）でした。同ページは、描画はThree.js、動きの設計はGSAPのScrollTrigger、滑らかさはLenisという分業を紹介しています。フレームワークやCMSは入れ替え可能で、審査で見られているのは演出の質だと読めます。

タグ	件数（31サイト中）	AIへの指示のヒント
GSAP	16	「ScrollTriggerで固定→解除する演出は最大2か所」など回数を絞る
Animation	15	動かす対象（見出し・画像）と目的を先に指定する
WebGL	13	ヒーロー1か所に限定し、静止画フォールバックも依頼する
Scrolling	9	スクロールを奪わない前提を明記する

2. スクロール演出は「奪わない」「最初は静か」

ギャラリーサイトA1 Galleryのスクロール演出特集は、優れた事例に共通する習慣を2つ挙げています。

スクロールは常に前へ進む：要素を一瞬固定しても、すぐ解除する。ホイールを乗っ取る「スクロールジャック」は離脱を招くとされています。
ファーストビューは控えめに：最初は静止か小さな動きにとどめ、スクロール演出は訪問者が動かし始めてから始める。

AIに「Appleのように動かして」とだけ頼むと過剰になりがちです。「ヒーローは静止、固定は1セクションのみ、素早いスクロールでフッターに届くこと」と条件で縛るのが安全です。

実装の選び分け：CSSの2種類のスクロールアニメーション

Josh W. ComeauのCSSの未来に関する記事によると、スクロール連動アニメーション（scroll-driven）は2026年のInteropで全ブラウザに実装されました。一方、スクロール位置で開始だけ決める「scroll-triggered」は、同記事の2026年10月時点の表示でChrome 155とEdge 154のみの対応です。utilitybendの解説は、視差や読了バーなど連続的な効果にはscroll-driven、カードや文字の出現にはscroll-triggeredが向くとしています。

種類	動き方	向く用途	対応状況（2026年10月時点の出典記載）
scroll-driven	スクロール量と進行が一致	視差・読了バー	全ブラウザで実装
scroll-triggered	位置で開始し、時間で再生	出現演出・テキスト表示	Chromium系のみ（Firefox・Safariは未対応）

3. 「Made by Humans」志向とAI製デザインの距離感

広告分野では、Heineken、Polaroid、Cadburyなどが「人が作った」ことを打ち出し始めた、とAlternate Co.の記事は伝えています。同記事は、これを単純な「AI対人」ではなく、安っぽさや手抜きに見えることへの反発だと整理しています。Webでも、AIで量産した均質なレイアウトより、固有の文字組み・写真・語り口が差別化になる流れが想定されます。AIは下書きと反復に使い、最終の見せ場は人が決める、という分担が現実的です。