01Project / 案件基本情報
何のサイトか。ここが曖昧だとモデルが構成を「発明」してしまいます。
02Reference / 参照サイト
最重要項目。「高品質な」の1000倍効きます。実在サイトを名指ししてください(think ○○ 構文になります)。
03Vibe / アートディレクション
形容詞3つ + 質感エフェクトのセットで指定します。複数選択可。
04Typography / タイポグラフィ
見出しの「扱い方」まで指定すると一気に高級になります。
05Sections & Copy / 構成と文言
表示する文言は必ず人間側で支給します。AI任せにすると安っぽくなる最大要因です。
06Motion / モーション仕様
「かっこよく」ではなく数値で。高級感はほぼここで決まります。
07Tech & Fallback / 技術指定
実装方式を固定してモデルの迷いを消します。フォールバック指定は一発出しの保険です。
08Assets / ブランド素材(任意)
ロゴ・OGP・ファビコンを登録すると、ファイル名と寸法が仕様としてプロンプトに書き出されます。小さい画像は「埋め込み」をONにするとbase64でプロンプトに直接同梱でき、単一HTMLで完結します(OFFの場合は実行時に assets/ フォルダへ画像を置いてください)。
LOGO
画像を選択![]()
OGP (1200×630推奨)
画像を選択![]()
FAVICON (32×32 / SVG)
画像を選択![]()
Generated Prompt
左のフォームを埋めて「プロンプトを生成」を押すか、入力するとここにリアルタイムで組み上がります。
使い方: 生成されたプロンプトをコピーして、Claudeアプリ(Fable 5)または Claude Code に貼り付けるだけ。APIは一切使わないので、Maxプランのサブスク範囲内で実行できます。