デザイン参考サイト集
WEBサイト制作のたびに見返す、参考サイト・ギャラリー・実装テクニックのスワイプファイル。案件ごとにここへ追記していく。
初版作成: 2026-08-12（WEBESTIE公式サイト再デザイン案件から派生）
使い方：新しい案件でいいサイトを見つけたら、該当セクションにカードを追記する。個別サイトだけでなく、ギャラリー系（Awwwards・Godly・SiteInspire等）を起点に毎回新しい実例を探しに行くのが基本ルート。「マーブル＝グラデーションではない」という区別のように、参考サイトを見る時は表面の色じゃなく手法（質感・動きの作り方）まで見る。
マーブル・流体グラデーション表現
単純な2〜4色のグラデーションではなく、墨流し（すみながし）・オイルマーブリングのような、細い縞・脈理・不規則な渦を持つ質感を探す時に見る。
Awwwards - Trendy Gradients
awwwards.com/awwwards_collections/collections/trendy-gradients
今年のグラデーション表現をAwwwardsが選定したコレクション。マルチカラー・ブラー・歪みを使った実例が並ぶ。
グラデーションコレクション
モーション・スクロールインタラクション
配色でなく「動き」の参考。スクロール連動・カーソル追従・トランジションの質を見る時のギャラリー起点。
Godly
godly.design/sites
スクロール演出・モーション・ビジュアルストーリーテリングに特化した審査制ギャラリー。週3〜5件厳選更新。
ギャラリー動き特化
SiteInspire
siteinspire.com
8,000サイト超をStyle/Type/Subject/Platformで絞り込めるギャラリー。欧州的な余白の効いた編集的デザインに強い。
ギャラリーフィルタ検索
Land-book
land-book.com
ランディングページ特化ギャラリー。業種・配色・タイプ別コレクション（グラデーション背景等）で絞れる。
LP特化コレクション
GSAP Showcase
gsap.com/showcase
GSAP公式のショーケース。ScrollTrigger・Draggable・SplitTextなど機能別に実例を辿れる。
公式実装込み
モーション重視の制作会社（世界観ごと参考にする）
個別ページでなく会社の自サイトそのものが実験場になっている制作会社。世界観の一貫性・演出の作法をまとめて見る時に。
Cuberto
cuberto.com
カーソル追従・スクロール演出が豊富。UI/UX×ブランディングの動きが強い。
制作会社
basement.studio
basement.studio
プロダクト・開発者向けストーリーテリングに強い。3D×遊び心のある実装。
制作会社3D
Resn
resn.co.nz
インタラクティブ表現の老舗。技術的に振り切った実験的な作品が多い。
制作会社実験的
Obys Agency
obys.agency
タイポグラフィ主体・エディトリアルな設計思想。受賞多数。
制作会社タイポグラフィ
Locomotive
locomotive.ca
スムーススクロールライブラリ「Locomotive Scroll」の開発元。ブランド設計と実装力のバランスが良い。
制作会社スクロール
Active Theory
activetheory.net
大規模キャンペーン向けの映画的WebGL表現。エンタープライズ予算帯の到達点として。
制作会社WebGL
実装テクニック（コード付きチュートリアル）
見て終わりでなく手法まで持ち帰りたい時。特に流体・シェーダー系はここが情報源になる。
Codrops
tympanus.net/codrops
WebGL/GSAP/シェーダーを使った実験的UIのチュートリアルが大量にある老舗ブログ。流体グラデーション・歪み表現の実装元ネタはだいたいここに辿り着く。
チュートリアルWebGL