ラグジュアリー 3D ウォッチ製品体験ページ (Next.js + Three.js)
高級時計向けの豪華な 3D 製品体験ウェブページをデザインするための、詳細な日本語プロンプト。Next.js、Three.js、React Three Fiber、GLSL を使用し、特定のスクロールセクションとシェーダー要件を盛り込む。
プロンプト
高級腕時計の3Dプロダクト体験ページを設計してください。
**ターゲット：**富裕層、時計愛好家、30-50代のビジネスパーソン
**ブランドトーン：**ラグジュアリー × テック（モダンで洗練されたハイエンド感）
スクロール体験（5セクション構成）：
ヒーローセクション - 暗闇から腕時計が徐々に光に照らされながら回転登場。カスタムシェーダーでホログラフィック効果とフレネル反射を実装
ディテールズーム - 文字盤のクローズアップ。GLSLでメタリックな反射、視差マッピング、リアルタイムの光沢表現
機構の分解 - 時計が分解され、内部のムーブメント機構が浮遊。ディスプレイスメントシェーダーでエネルギーフィールド効果、各パーツにグローエフェクト
マテリアル体験 - 異なる素材バリエーション切り替え。PBRシェーダーで金属感、ガラスの屈折、チタンのマット質感を物理ベースで表現
エンディング - 時計が組み上がり、背景にカスタムシェーダーで作った抽象的なグラデーションメッシュ。ポストプロセッシングでブルーム、被写界深度
**技術スタック：**Next.js 15 + Three.js + React Three Fiber + GLSL(カスタムシェーダー) + react-postprocessing + Lenis
シェーダー要件：
フレネル反射シェーダー（リム光効果）
PBRマテリアルシェーダー（粗さ、メタリック、AO）
ホログラフィックシェーダー（虹色の干渉効果）
ディスプレイスメントシェーダー（波打ち、歪み効果）
カスタム背景シェーダー（グラデーションノイズ）
ポストプロセス：Bloom, ChromaticAberration, DepthOfField, Vignette
以下を具体的な数値で提案してください：
各セクションのscroll範囲（%または vh単位）
アニメーションパラメータ（position, rotation, scale等の開始/終了値）
イージング関数（ease type）
カメラのFOV、position、target値
ライティング設定（強度、色、位置）
各シェーダーのuniform値（時間経過、スクロール進行度、色相、強度など）
このプロンプトの使い方
- 1
上の完全なプロンプトをコピーします。
- 2
Gemini 3 Pro に対応したプラットフォーム（YouMind など）を開き、プロンプトを貼り付けます。
- 3
アイデアに合わせて被写体・スタイル・細部を入れ替え、生成します。
これは YouMind のプロンプトライブラリにある無料の AI プロンプトです。ほかにも数千点の web ページ プロンプトがあり、すべて自由にコピーして使えます。
ほかの web ページ プロンプトを見るGemini 3 Pro の他のプロンプト
ネオブルータリズム ウェブページ生成プロンプト
@Dorksense
ダウンロードボタン付きのシンプルな SVG アイコンを 40 個生成
@KAWAI
Mediapipe と Three.js を使ったレーザーアイエフェクトの Web デモ
@愚瞳 | winterx
React で作られた、ハイエンドなスイススタイル ランディング ページ ジェネレーター
@チャエン | デジライズ CEO《重要AIニュースを毎日最速で発信⚡️》
Gemini の CapCut のような動画エディター UI
@padphone
画像からの Voxel アート Three.js シーン生成プロンプト
@Ian Goodfellow
その他のプロンプト機能
ビジョンツール
画像からプロンプト
どんな写真も詳細な AI 画像プロンプトに変換。無料の Image to Prompt 変換ツールが構図・スタイル・ライティングを解析し、数秒で同じ表現を再現できます。
クリエイターのために。ずっと無料。
YouMind は世界中のクリエイターに信頼される AI 制作パートナーです。ここにあるプロンプトは、より速く、より良い制作を助けるために厳選されています。