前提

1時間を前半30分・後半30分で分ける

LPを1時間で仕上げるには、いきなり実装から始めないことがコツです。前半で準備を整え、後半で一気に作ります。準備が整っていれば、実装はぐっと速く進みます。

つまり1時間のうち前半30分は準備、後半30分は実装と確認。この配分を意識するだけで、迷いなく進められます。

時間配分

前半と後半でやることを分ける

それぞれの30分で、次のことに取り組みます。前半の準備が後半の速さを決めると考えてください。

最初の30分:準備

  • ヒアリング内容をまとめる
  • CLAUDE.md と design.md をクライアント仕様に更新する
  • プロンプトを整える

残りの30分:実装

  • ClaudeCodeで実装する
  • ブラウザで表示を確認する
  • 大きな修正を1〜2回入れる
テンプレート

[ ]を埋めるだけのLP生成プロンプト

下のテンプレートは、[ ]の部分を埋めるだけで使えます。まずはサービス情報から。一番伝えたいことを言葉にしておくのがポイントです。

プロンプト(① サービス情報)
以下の内容でLPを作ってください。

【サービス情報】
- サービス名:[            ]
- ターゲット:[            ]
- 訴求ポイント:[一番伝えたいこと]
- CTA:[ボタンのテキストと遷移先]
テンプレート

続けてLP構成を指定する

次に、LPに載せるセクションの並びを伝えます。定番の構成をそのまま指定すれば、抜け漏れなく整ったLPになります。

プロンプト(② LP構成)
【LP構成】
1. ファーストビュー(キャッチ+CTA)
2. 課題提示(悩み3つ)
3. 解決策
4. 特徴・強み(3ポイント/アイコン+説明)
5. 実績・信頼(数字や事例)
6. 料金プラン([プラン数]種類)
7. よくある質問(5問)
8. 最終CTA+フォーム(Formspree使用)
テンプレート

最後にデザインを指定する

デザインはdesign.mdに従うと書けば、ブランドのカラーやフォントが自動で反映されます。セクションの区切りは背景色で見せると、まとまりが出ます。

プロンプト(③ デザイン)
【デザイン】
- design.md に従う
- セクションの区切りは背景色で
  (白/ライトグレーを交互に)

つまり①サービス情報 ②LP構成 ③デザインの3つをまとめて1つのプロンプトにして送れば、LPの土台が一気に生成されます。

割り切りのコツ

1時間を超えないための割り切り

時間内に収めるいちばんのコツは、最初から完璧を目指さないことです。まずは形にして、細部は後から詰めます。

  • 完璧を求めないファーストドラフトは70点でOK。残りはフィードバックを受けてから仕上げる
  • 画像はプレースホルダーで進めるpicsum.photos などで仮置きし、素材が揃ってから差し替える
  • 修正は1つずつ指示する「全体的に修正」より「ヘッダーの文字サイズを大きく」のほうが確実

ポイント実際に時計を使い「1時間でファーストドラフト」と決めて取り組むと、集中力が上がって作業が締まります。

ノーコードサロン