v0用ワイヤーフレーム生成プロンプト(日本語)
あなたは一流のUX/UIデザイナーです。
下記の要件に合わせて、B2BサービスLPのワイヤーフレーム(低忠実度・グレー階調・ラベル付き)を作成してください。
ページ幅はデスクトップ1440 px基準・12カラムグリッド、モバイルでは1カラムに自然リフローします。
各セクション名・コンポーネント名はすべて日本語でラベルし、ボタンや画像は矩形+テキストで表現してください。
0. 全体設定
- キャンバス幅:1440 px
- 安全余白:左右80 px
- 12カラムグリッド(ガター24 px)
- モバイル:375 px幅、1カラム
- フォント階層:
- H1=48 px、H2=32 px、H3=24 px、本文=16 px
- ボタン:ラウンド角4 px、サイズ「大128 × 48 px」「小104 × 40 px」
- 主要CTA色は後で決定するためグレー塗りでOK
1. ヒーローセクション
- 背景ブロック(高さ560 px、フル幅)
- 左寄せ縦並び:
H1 見出し
:「次の10年、社長一人で戦うつもり?」
サブ見出し
:「経営者の分身を育てる会議 ー すごい会議®」
CTAボタン(大)
:「まずは体験セッションを予約」
- 右側にヒーローイメージプレースホルダ(320 × 400 px):社長と幹部が立ち上がるシルエット
- ヒーロー下端にスクロール誘導アイコン(↓)
2. 緊急アラート(Pain)
- 背景ライトグレー、上下80 pxパディング
H2
:「“社長依存”チェックリスト」
- 6項目チェックボックスの縦リスト(2列×3行)
- 横に
CTAリンク
「17秒で自己診断 →」
3. ソリューション見出し
H2
中央寄せ:「幹部が“経営者の分身”に変わる唯一の仕掛け」
- すぐ下に
ロゴ(すごい会議®)
プレースホルダ
4. 成果カウンター帯
- 濃グレー背景、高さ160 px
- 横並びでKPIカウンター3つ(数字+ラベル)
- 例:1000社導入/平均営業利益+20%/売上10倍企業◯社
5. ストーリームービー
- 左:ビデオサムネイルプレースホルダ(640 × 360 px)
- 右:
H3
「90秒でわかる幹部覚醒ストーリー」+再生ボタン
6. Before → After スライダー
- 幅960 pxのスライダー枠
- 3枚分のBefore画像・After画像プレースホルダ
7. コアメソッド 3ステップ
- 3カラムカード
- 10時間覚醒セッション
- 月1コミット会議
- 100フォーマットで仕組み化
- 各カード:アイコン枠40 × 40 px+
H3
+本文50字以内
8. 社会的証明
- 実績ロゴウォール:6×2 グリッド(Apple/P&G/湘南美容…)
- その下に数値実績カード3枚(上場達成など)
9. 成功ストーリー(ケーススタディ)
- 左:人物写真枠(260 × 320 px)
- 右:
H3
「売上10倍&営業人員7倍/EST社」
- 箇条書き成果3行
引用ブロック
クライアントコメント
10. メカニズム深掘り
- アコーディオン5本(心理的安全性ルール/OKR連動/認定コーチ…)
11. ROIシミュレーター
- 入力フォームプレースホルダ(売上・粗利)
- 右側に結果表示カード(期待伸び率/ROI)
12. プラン & CTAセクション
- 背景ブランドカラー(後で定義)
- 2段階プライシングテーブル(スタンダード/プレミアム)
- 右下に最終
CTAボタン(大)
:「体験セッションを申し込む」
13. FAQ & リスク反転
- アコーディオン6本
- 最下部:
H3
「ご不安な点はお気軽にご相談ください」+小CTAリンク
付記
- すべての画像/アイコンは灰色矩形と
ラベル文字
で表現してください。
- テキストは“日本語ダミー”ではなく、上記コピーをそのまま配置してください。
- モバイル版では各セクション縦並びに自動リフローする形で示してください。
この指示に従い、ワイヤーフレームのみ(配色・写真なし)を出力してください。