LP構成案をHTMLで生成する

最初の実践として、LP の構成案をArtifactsで生成してみましょう。

• 1
  新規チャットを開いて次のプロンプトを入力

  「フリーランスのWebデザイナー向けポートフォリオサイトのLP構成案をHTMLで作ってください。ヒーロー・サービス紹介・実績・CTAの4セクション構成で。」

• 2
  右上のサイドバーボタンをクリックしてArtifactsを開く

  一覧にHTMLが表示されるのでクリックするとプレビューが表示されます。表示されない場合はプロンプトに「HTMLで」というキーワードが含まれているか確認してください。

• 3
  修正指示を出してみる

  例：「ヒーローセクションのコピーをもっとキャッチーに変えて」「全体のカラーをブルー系に」など言葉で指示するだけでプレビューが更新されます。

提案書ドラフトをMarkdownで生成する

• 1
  新規チャットで提案書のプロンプトを入力

  「美容室向けInstagramリール制作の提案書ドラフトをMarkdown形式で作ってください。背景・課題・提案内容・費用感・スケジュールの構成で。」

• 2
  Markdownドキュメントが右側に表示されることを確認

  見出し・箇条書きで整形された提案書ドラフトが表示されます。

• 3
  内容を微調整する

  「費用感を削除して」「スケジュールを1ヶ月に短縮して」など追記・修正してみましょう。

よくあるつまずきと対処法

• ArtifactsパネルがHTMLで出てこない
  プロンプトに「HTMLで」「HTML形式で」という言葉が含まれているか確認してください。明示しないとテキストとして返ってくることがあります。
• 修正するたびに全部作り直しになってしまう
  「〇〇のセクションだけ修正して、他はそのままで」と指示に「他はそのまま」を加えると、変更箇所を絞れます。
• 生成されたHTMLの品質がいまいち
  プロンプトに参考にしたいデザインの雰囲気（例：「シンプルなミニマル系、余白多め」）を追加するか、「〇〇のようなスタイルで」と方向性を具体的に伝えましょう。