AIで3Dサイトを作る
AIでモダンなサイトを作り、Splineの3D要素で魅力を高める方法を学びます。
ロードマップと資料
スタート用のテンプレートを選ぶ
ベースにするテンプレートを選ぶ
インタラクティブな3Dサイト
柔軟な3Dの出発点として最適
Template
https://profitstudio.app/template/interactive-3d-website
3D AIプラットフォーム
AI・SaaS系サイトに最適
Template
https://profitstudio.app/template/3d-ai-platform
Aether Horizon
映画のようなランディングページに最適
Template
https://profitstudio.app/template/aether-horizon
Explore All Templates
https://profitstudio.app/templates
3D要素を差し替える
3D要素を差し替える
3Dシーンを探す
Splineのライブラリを開いてシーンを選ぶ
SPLINE
https://app.spline.design/community
3D要素を差し替える
テンプレートの現在の3DシーンをSpline ViewerのURLで差し替えます。
Update the current Spline 3D scene in this project to use this new Viewer URL: {{SPLINE_VIEWER_URL}} Keep everything else exactly the same. Do not redesign the website. Do not change the layout, text, spacing, or any other sections. Only replace the current Spline 3D scene with the new one.
Spline ViewerのURL
Spline ViewerのURLを貼り付け
サイトをカスタマイズする
サイトをカスタマイズして仕上げる
サイトをカスタマイズして仕上げる
テンプレートを自分のジャンル、ブランド、目的、必要なセクションに合わせて調整します。
Customize the current website to match this project. Project details: - Website type: {{WEBSITE_TYPE}} - Brand name: {{BRAND_NAME}} - Main goal: {{MAIN_GOAL}} - Style direction: {{STYLE_DIRECTION}} - Sections to add or adjust: {{SECTIONS_TO_ADD}} Use only the details that are provided above. If any field is empty, ignore it and do not reference it. Do not invent unnecessary details. Update the existing website so it fits the project clearly. Requirements: - Keep the current structure and overall design quality - Update the hero section, headings, paragraphs, buttons, and section content based only on the provided details - Adapt the messaging so it feels clear, relevant, and professional - Add the requested sections if they are provided and missing - Adjust, simplify, or remove sections only when needed for clarity and fit - Keep the website clean, modern, and visually consistent - Improve spacing, alignment, content hierarchy, and section flow where needed - Make sure the final result feels polished and cohesive - Do not overcomplicate the layout - Do not redesign the website from scratch - Keep the website responsive Important: - Focus on improving the existing website, not replacing it with a completely different design - Ignore any empty customize fields - If some details are missing, keep the current content or make only minimal sensible adjustments Apply the changes directly to the current website.
サイトの種類
例:ポートフォリオ、ランディングページ、SaaS
ブランド名
例:Profit Studio
主な目的
例:3D作品を見せる、問い合わせを増やす
テイストの方向性
例:ミニマル、ダーク、鮮やか
追加・調整するセクション
例:料金セクションを追加、サービス内容を更新
モバイルプレビューを確認し、必要ならモバイルだけに絞った調整を依頼します。
サイトをデプロイする
公開手順のチュートリアルに進む
デプロイのチュートリアルを見る
デプロイのチュートリアルを見る
デプロイに進む
https://youtu.be/HGs-4QjyjHQ?si=EBUOpPx38n9vVROR