没入・リッチ演出
WebGL・粒子・3D・音・地図など、リッチで没入感のある表現。
WebGL・粒子・3D・音・地図・ゲームといった、画面に没入させる表現のカテゴリ。シェーダーで動く WebGL 背景、CSS 3D の立方体操作、粒子ネットワーク、47都道府県のインタラクティブ地図、Web Audio の音連動ビジュアル、制限時間つきのゲーム風 UI がある。原則はピークエンドの法則。体験は平均ではなく山場と終わりで記憶されるので、没入表現は常時ではなく、体験の山場に1箇所だけ置いたときに効く。WebGL 非対応時のフォールバックのように、環境が揃わない前提で組む点も、このカテゴリ特有の判断として引く。
使い分けヒーロー背景は webgl-background（非対応時は CSS グラデにフォールバック）か particle-network。地域データがあるなら interactive-map。product-3d は回して見せる対象があるときだけ、audio-reactive / gamified-ui は利用者が自分で開始する形に限る。
まず見る3件
- ホバー
WebGL背景
WebGL Shader Background
生WebGLのフラグメントシェーダーで藍系プラズマをアニメーション。マウス/タッチで揺らぎが反応し、上に重ねたキャッチコピーがヒーロー背景として機能する。WebGL非対応時はCSSグラデにフォールバック。
- fbm を2段ネスト（q→r→f）して流体らしい歪みを作る。1段のノイズは雲にはなっても流れにならない
- 時間は 0.28 倍・ポインタの効きは exp(−距離×3.5)×0.18 と小さく。背景は「反応した」と分かる最小限で止める
- 色は藍の4色を f で混ぜ、ビネットで四隅を 25% 落とす。白文字を中央に置く前提の明度設計
- JS
- WebGL
- ホバー
パーティクル演出
Particle Network
Canvas 2D で粒子が漂い、近い粒子同士を線でつなぐネットワーク表現。マウス・タッチに反応して粒子が引き寄せられ、線が伸びる。
- 線の濃さは距離（80px）と両端の粒子の alpha の積。寿命で消える粒子の線が先に残ると糸だけが浮く
- 粒子は寿命 240〜600 frame で端から作り直す。引力だけだと全部がポインタに集まって止まる
- ポインタが無い間は仮想カーソルを楕円軌道で回す。静止した網は「反応しないもの」に見える
- JS
- Canvas
- ホバー
インタラクティブ地図
Interactive SVG Map
正確な日本地図（47都道府県）をインライン SVG で描画。ホバー/タップで属する地方全体がハイライトされ、地域名と統計をツールチップ表示。地方ボタンからも選べる。地図データ © geolonia/japanese-prefectures, MIT
- 県の形は触らず fill だけを CSS で上書きし、stroke は vector-effect: non-scaling-stroke で縮小しても 1px に保つ
- ホバーは県単位ではなく data-region で地方ごとにまとめて着色する。県単位だと小さすぎて当てられず、意味も薄い
- PC はホバー、タッチはタップでトグルし地図外タップで解除。タッチにホバーの真似をさせると閉じ方が無くなる
- JS
使い分け表
| パーツ | 操作 | 技術 | 向く場面 | 状態 |
|---|---|---|---|---|
| WebGL背景 WebGL Shader Background | ホバー | JS / WebGL | ブランドサイトのヒーロー背景・テック系プロダクトの第一印象づくり | default |
| 3Dオブジェクト操作 3D Object Viewer | ドラッグ | JS | パッケージ・製品を全方位から見せる・3Dモデル無しで立体感を出す演出 | default / focus / active |
| パーティクル演出 Particle Network | ホバー | JS / Canvas | テック・データ系サービスのヒーロー背景・つながり・ネットワークを示す演出面 | default |
| インタラクティブ地図 Interactive SVG Map | ホバー | JS | 地域別の拠点・統計を地図で引く・対応エリア・配送圏の案内 | default / hover / focus / active |
| 音連動ビジュアル Audio Visualizer | クリック | JS / Canvas / Web Audio | 音楽・オーディオ系サービスの演出・Web Audio の導入デモ・教材 | default / focus / active |
| ゲーム風UI Gamified UI | クリック | JS / Canvas | キャンペーン LP の遊び要素・ミニゲーム・待ち時間を埋めるおまけコンテンツ | default / focus / active |
すべての見本（6件）
- ホバー
WebGL背景
WebGL Shader Background
生WebGLのフラグメントシェーダーで藍系プラズマをアニメーション。マウス/タッチで揺らぎが反応し、上に重ねたキャッチコピーがヒーロー背景として機能する。WebGL非対応時はCSSグラデにフォールバック。
- JS
- WebGL
- ドラッグ
3Dオブジェクト操作
3D Object Viewer
CSS 3D transformで立方体をドラッグ回転。慣性付き。矢印キーでも回せる。
- JS
- ホバー
パーティクル演出
Particle Network
Canvas 2D で粒子が漂い、近い粒子同士を線でつなぐネットワーク表現。マウス・タッチに反応して粒子が引き寄せられ、線が伸びる。
- JS
- Canvas
- ホバー
インタラクティブ地図
Interactive SVG Map
正確な日本地図（47都道府県）をインライン SVG で描画。ホバー/タップで属する地方全体がハイライトされ、地域名と統計をツールチップ表示。地方ボタンからも選べる。地図データ © geolonia/japanese-prefectures, MIT
- JS
- クリック
音連動ビジュアル
Audio Visualizer
Web Audio API でアルペジオを鳴らし、周波数データを Canvas のバーグラフにリアルタイム反映。再生/停止ボタンで制御。
- JS
- Canvas
- Web Audio
- クリック
ゲーム風UI
Gamified UI
制限時間内に動く的をタップ/クリックしてスコアを稼ぐ。的はランダム移動し、ヒットするとパーティクル演出＋スコア加算。タイムアップで結果表示、スタート/もう一度ボタンでリトライ可能。
- JS
- Canvas