Gravity Dropを自分仕様にする
01色・形・動きを選ばせ、生成結果と相性のよい商品やプランを提案する。
発想の出典: 観察 × 物理応答 × 感覚報酬
- 行動仮説
- 選択内容が結果へ反映されると、商品理解と自己関連性が高まる。
- 配置
- 商品カスタマイザー・ブランド診断・料金提案
- 報酬・返り値
- 生成ビジュアル・個別提案・保存画像
計測候補
開始率完了率CTAクリック率
🪨
Gravity Drop
ジェネラティブアート / シミュレーション / ビジュアル実験
Drop!
Interaction DNA
この動きが行動を生む構造
- input
- 観察
- response
- 物理応答
- psychology
- 感覚報酬
- role
- 価値理解
- reward
- 効果の証明
ユーザーが得る価値
抽象的な価値を、自分の操作で確かめられる。
反証・逆効果の条件
結果が出る前に価値が伝わらないと、操作コストが離脱を増やす。
CVR Idea Lab
このインタラクションを、コンバージョンに使う
ゲームや動きそのものを目的にせず、参加・理解・特典獲得から次の行動へつなげるための施策仮説です。
変化を触って理解させる
02操作前後の差をシミュレーションし、サービス導入後の変化を疑似体験させる。
発想の出典: 観察 × 物理応答 × 感覚報酬
- 行動仮説
- 抽象的なベネフィットを自分の操作で可視化すると、理解と納得が進む。
- 配置
- SaaS・美容・住宅・データサービスのLP
- 報酬・返り値
- 変化の可視化・改善予測
計測候補
開始率CTAクリック率リード獲得率
生成結果を持ち帰らせる
03生成したビジュアルへブランドとCTAを添え、保存・共有できる成果物にする。
発想の出典: 観察 × 物理応答 × 感覚報酬
- 行動仮説
- 自分で作った成果物は保存されやすく、継続的なブランド接点になる。
- 配置
- キャンペーン・診断結果・UGC企画
- 報酬・返り値
- 保存画像・壁紙・シェアカード
計測候補
完了率シェア率コンバージョン率
仮説は商材・流入・特典原価に応じて検証が必要です。ゲーム完了だけで成功とせず、最終CVまで計測します。
DNAが近い、次の発想
同じ構造を持つ別の表現へ移動し、施策を組み替えられます。
Related Articles
Canvas vs DOM — 203個のコンポーネントで選んだ基準と実測データ
203個のインタラクティブコンポーネントをCanvas APIとDOMに振り分けた判断基準を、実例と実測データで解説する。
自前物理エンジン180行の限界点 — Matter.jsを捨てた理由と、カバーできなかったこと
physics.tsの166行で2D物理エンジンを自作し、Matter.jsの300KBを4KBに削減した。重力・衝突・バウンドに絞り、拘束・摩擦・スタッキングを諦めたトレードオフを解説する。
Tailwind CSS v4移行で壊れたもの — @custom-variantとダークモードの実装記録
Tailwind CSS v3からv4への移行で踏んだ破壊的変更と、@custom-variantを使ったダークモード/ライトモードの実装パターン。
ブラウザで動く物理エンジンを自前で書いた話
ポートフォリオサイトにMatter.jsを使わず約180行の軽量物理エンジンをTypeScriptで自作した経緯と設計判断。バンドルサイズ300KBを4KBに削減しつつ60fpsを維持した手法を解説。