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