「おしゃれな感じでお願いします」。Webサイトの相談で、いちばんよく出てくる言葉です。そして、いちばん困る言葉でもあります。AIに作らせるときも事情は同じで、最初に詰まるのはコードではなく「どんな見た目にしたいか」のほう。シンプル、今っぽい、動きがある、かっこいい。この手の言葉だけをCodexへ渡すと、返ってくるのはたいてい無難なヒーローセクションです。
ここで効くのが、threeuiのような参照サイトです。Three.js系のコンポーネント、動きのある背景、ヒーロー、UIの効果が並んでいます。気に入ったデザインのプロンプトを持ってきて、作りたいサイトの要件と一緒にCodexへ渡す。それだけで、「雰囲気」を言葉にする時間はぐっと減ります。ただし、丸写しで実務サイトになるかというと、そこは別の話です。
この記事を読むとわかること
- check_circleCodexでWebサイトを作るとき、threeuiのプロンプトをどう使うか
- check_circleコピーしたプロンプトに必ず足したい要件
- check_circleアニメーションサイトで見落としやすい公開前チェック
- check_circleそのまま使えるCodex用プロンプトテンプレート
向き：AIでLP、サービスサイト、採用ページ、デモサイトのたたき台を作りたい人。
向かない：既存ブランドガイドラインを厳密に守る大規模サイトを、レビューなしで自動生成したい人。
threeuiを使うと、AIに「見た目の方向性」を渡しやすくなる
ThreeUIは、Three.jsのコンポーネント、テンプレート、動きのある背景（WebGL）、ヒーロー、UIの効果などを集めたサイトです。噛み砕いて言うと、見本帳。「こんな感じの動き」「この立体感」「このヒーローの雰囲気」を、言葉ではなく実物で渡せます。
| AIに任せたいこと | 言葉だけの指示 | 参照プロンプトがある場合 |
|---|---|---|
| 雰囲気 | おしゃれにして | 光、奥行き、動き、余白の方向性を渡せる |
| ヒーロー | かっこいいファーストビュー | どんな背景・動き・CTA配置かを具体化できる |
| 実装 | Reactで作って | Three.jsやアニメーション前提の構成を伝えやすい |
デザイン探しで止まりがちな人ほど、先に参照を1つ決めてしまうと進みます。AIにゼロからセンスを出させるのではなく、方向を決めてから走らせる。順番を入れ替えるだけですが、体感はずいぶん違います。
ただし、コピーしたプロンプトだけでは自社サイトにならない
手順としてよく共有されているのは、「Codex内のブラウザでthreeui.comを開く」「気に入ったデザインのプロンプトをコピーする」「作りたいサイトの要件と一緒に貼る」という流れです。実務でもそのまま使えます。ただ、効きどころは最後の一節にあります。「要件と一緒に」のところです。
要件が抜けると、AIは見た目だけを作りやすい
プロンプトがデザイン中心だと、AIはヒーローセクションだけを作ったり、英語のダミー文言で埋めたり、CTAや問い合わせ導線を忘れたりします。実務サイトでは、誰に何を伝え、どこへ誘導するかまで必要です。
| 必ず足す要件 | 例 |
|---|---|
| 目的 | 無料相談へつなげる、資料請求を増やす、採用応募を増やす |
| 読者 | 中小企業の経営者、採用担当者、店舗オーナー |
| 構成 | ヒーロー、課題、解決策、料金、事例、FAQ、CTA |
| 制約 | 日本語、スマホ優先、1ページ、画像なし、既存カラー使用 |
| 技術 | HTML/CSS、React、Next.js、Astro、Tailwindなど |
Codexに貼るなら「参照プロンプト + 自社要件 + 確認条件」にする
OpenAIのプロンプト設計ガイドも、良い結果を引き出すための考え方をまとめています。Web制作でも同じでした。「何を作るか」だけでなく、「何を守るか」「何を確認するか」まで渡すほど、出てくる画面のズレは小さくなります。
以下の要件で、1ページのWebサイトを作ってください。 目的: - 中小企業向けAI導入相談の問い合わせを増やす ターゲット: - AIを使いたいが、何から始めるべきか迷っている経営者 ページ構成: - ヒーロー - よくある課題 - 解決できること - 導入までの流れ - FAQ - 問い合わせCTA デザイン参考: - ここにthreeuiでコピーしたプロンプトを貼る 制約: - 日本語で作る - スマホ表示を優先 - CTAは /contact.html - テキストが読みにくい強いアニメーションは避ける - まずは1ファイルで動く形にする 確認: - H1は1つ - CTAが見える - スマホ幅でも崩れない - アニメーションが重い場合は軽量版も提案する
「モデルはSolを使うといい」というコツも、あわせて共有されていました。公式に最適解と示されたわけではないので、ここでは断定しません。選べる環境なら、重いUI実装や動きのある表現に強いモデルを当てる。そのくらいの実務メモとして持っておくのが安全です。
アニメーションは「見た目」だけでなく、速度と読みやすさも確認する
Three.jsは、3D表現をWebへ持ち込むための定番の土台です。Motionのように、動きを付けるための道具も揃っています。印象は確かに強くなる。ただ、実務サイトでは「動けば良し」とはいきません。
公開前に見るチェック
- check_circleスマホ幅で文字が読めるか
- check_circleファーストビューにCTAが残っているか
- check_circle背景アニメーションが本文の邪魔をしていないか
- check_circle低スペック端末でも表示が重すぎないか
- check_circle動きを減らしたいユーザー向けに、控えめな動きへ調整できるか
生成直後は、どうしても動きに目が行きます。派手なほど、できあがった気になる。けれど問い合わせにつなげたいなら、最後に見るのは読みやすさ、導線、速度、スマホ表示です。人が確認する意味は、だいたいこの4つに集まります。
海外ツールの流れは「テンプレートから生成し、実装までつなぐ」方向
海外では、AIでWebページを作る流れがひと足先に進んでいます。v0 by Vercelは、生成だけでなく、テンプレート、GitHub連携、デザインモード、デザインシステムまで打ち出しています。読み筋としてはこうです。「文章で指示して画面を出す」段階から、デザイン・コード・公開・運用をひと続きにする段階へ移ってきている。
| 段階 | やること | Codexでの考え方 |
|---|---|---|
| 参照 | threeuiなどで方向性を探す | 雰囲気を言語化する材料にする |
| 生成 | 要件とプロンプトを渡す | ヒーローだけでなく全体構成を作らせる |
| 調整 | 文言、CTA、色、速度を直す | 実務サイトとしてレビューする |
| 公開 | 本番環境で確認する | 表示、導線、SEO、計測まで見る |
threeuiのプロンプトを使う発想は、その流れの入口にあたります。デザインの引き出しをAIへ渡して、白紙で悩む時間を削る。その代わり、事業の目的と導線は人が持ち続ける。ここを手放すと、きれいなだけのページが残ります。
実務で使うなら、この順番がおすすめ
i-Styleでこの手順を使うときは、プロンプトを探す前にページの目的を1つ決めます。順番を逆にすると、気に入った見た目に引きずられて、目的のほうが後から曲がるからです。決めてから、threeuiで近い雰囲気を選び、要件とセットでCodexへ渡します。
- ページの目的を1つに絞る
問い合わせ、予約、採用応募、資料請求など、最終行動を決めます。 - threeuiで近い方向性を探す
光、立体感、背景、余白、動きの雰囲気を選びます。 - Codexに要件と一緒に貼る
コピーしたプロンプトだけでなく、読者、構成、CTA、技術制約を入れます。 - 日本語と導線を直す
英語ダミー、抽象コピー、押しにくいボタンを修正します。 - スマホと速度を確認する
動きが強すぎる場合は、軽量版や静的版も作らせます。
コツは、一発で完成品を出させようとしないことです。まず方向を寄せる。次に事業要件へ寄せる。最後に公開できる品質へ整える。3回に分けると、Codexの出力は現場で扱いやすくなります。
まとめ：デザインプロンプトは、AIへの「参考資料」として使う
threeuiのような参照プロンプトを使うと、見た目の方向性は驚くほど伝わります。ただ、貼っただけで事業に合うサイトが出てくるわけではありません。
- check_circlethreeuiは見た目の方向性を渡す参照元として使う
- check_circleCodexには、参照プロンプトだけでなく自社要件を必ず入れる
- check_circleモデル名だけに頼らず、構成・制約・確認条件まで渡す
- check_circleアニメーションサイトは、スマホ表示・速度・読みやすさを必ず確認する
- check_circleAIで作った下書きを、最後は事業目的と問い合わせ導線へ戻す
i-Styleでは、AIで作るときほど、最初の要件整理と最後の人のレビューが効くと見ています。見た目はAIで一気に近づけられる。けれど、誰に何を伝えて、どの行動につなげるかは人が決める。冒頭の「おしゃれな感じで」も、そこまで決まっていれば、もう曖昧な言葉ではなくなります。
よくある質問
threeuiのプロンプトをそのまま貼れば十分ですか？
見た目の方向性を伝える参考にはなりますが、それだけでは不十分です。目的、ターゲット、ページ構成、CTA、使う技術、スマホ対応などの要件を一緒に渡すと、実務で使いやすい下書きになりやすくなります。
CodexでWebサイトを作るとき、モデル指定は必要ですか？
使える環境なら、重めのUI実装やアニメーション制作に強いモデルを選ぶのは有効です。ただし、モデル名だけで品質が決まるわけではなく、要件、制約、確認手順まで渡すことが重要です。
アニメーションが多いサイトで注意することは何ですか？
見た目だけで判断せず、スマホ表示、読み込み速度、操作しやすさ、文字の読みやすさ、問い合わせ導線を確認します。動きが強すぎる場合は、軽量版や動きを減らす設定も用意します。
参考リンク
AIで作るWebサイトの要件整理から相談できます
i-Styleでは、AIを使ったLP制作、Webサイト改善、プロンプト設計、公開前チェックまで含めて、実務で使える形に整える支援を行っています。
お問い合わせページへarrow_forward
