Lumenで代謝を「見える化」|健康管理が変わる理由
CODE PREVIEW
プロンプト
Build an immersive 3D landing page hero for a premium SaaS product.
Tech stack: Next.js 15 + React Three Fiber + drei + Tailwind
Scene: floating frosted-glass crystalline shapes, subtle bloom post-processing,
depth-of-field focus on center
Interaction: mouse-tracking parallax camera (lerp smoothing), scroll-triggered
zoom-out into product UI reveal
Lighting: 3-point studio lighting, rim light in cyan (#00D4FF)
Palette: charcoal background (#0A0E1A), cyan accents, warm white text
Typography: Inter Display for headline (7xl), Inter for body
Mobile: degrade gracefully to static image + CSS transform
Performance: lazy-load R3F, keep scene under 50KB
このプロンプトは、Next.js 15とReact Three Fiberを組み合わせたプレミアムSaaS向けの没入感あるヒーローセクションを構築するための詳細な設計書です。3Dシーンの構成、ライティング、インタラクション、パレット、タイポグラフィ、モバイル対応、パフォーマンス目標まで一括して指定しており、フロントエンドエンジニアがそのまま実装指示として活用できる粒度になっています。
特に、マウス追従視差カメラやスクロール連動のズームアウト演出、シアンリムライトによる高級感の演出など、デザイン意図が具体的な技術パラメータで表現されている点が特徴です。ランディングページのプロトタイプ制作やデザインシステムの起点として、即戦力のスターターコードを生成したい場面に適しています。
プロンプトの解説
このプロンプトは、Next.js 15とReact Three Fiberを組み合わせたプレミアムSaaS向けの没入感あるヒーローセクションを構築するための詳細な設計書です。3Dシーンの構成、ライティング、インタラクション、パレット、タイポグラフィ、モバイル対応、パフォーマンス目標まで一括して指定しており、フロントエンドエンジニアがそのまま実装指示として活用できる粒度になっています。
特に、マウス追従視差カメラやスクロール連動のズームアウト演出、シアンリムライトによる高級感の演出など、デザイン意図が具体的な技術パラメータで表現されている点が特徴です。ランディングページのプロトタイプ制作やデザインシステムの起点として、即戦力のスターターコードを生成したい場面に適しています。
このプロンプトは役に立ちましたか？
コメント
コメントは承認後に表示されます
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選