Claude Artifact用のLP作成プロンプト

以下をコピペして試してみてください。Claudeの機能に驚かされます。

Amazon風のWebサイト作成プロンプト

Amazon風の商品販売Webサイトを作成してください。

ビジネスアイデア出しプロンプト

私は○○に興味があります。
それに関連する、○○（個人/団体/法人）向けのビジネスアイデアを5つ出してください。

例：
私は保護猫活動に興味があります。
それに関連する、法人向けのビジネスアイデアを5つ出してください。

LP作成用プロンプト1

私は○○のWebサイトをLLMに作成させたいです。
下記のプロンプトの一部を、希望に合った内容に改変してください。

### 0. デザインスタイル
次のデザインを採用し、色・フォント・レイアウト・装飾のトーンで表現してください。  
- 〔例：プロフェッショナルなITコンサル風、おしゃれなオーガニック風 など〕

### 1. 基本情報
- LPの目的　　　：〔例：新しい SaaS「BizGrowth」の無料トライアル登録を獲得する〕  
- 商品・サービス：〔例：中小企業向け売上分析 SaaS〕  
- ターゲット　　：〔例：商学部の学生起業家、20〜25歳〕  
- メインカラー　：〔例：#0052CC〕 
- アクセント色　：〔例：#FFB300〕 
- キービジュアル：〔例：CSV 解析グラフのイラスト〕  
  （画像 URL または「生成用イメージ指示文」を記入。記入が無い場合は汎用イラストを提案する）  

LP作成用プロンプト2

あなたは一流のWebデザイナー兼コピーライターです。以下の条件に従って、ビジネス志向のランディングページ（LP）を日本語でフル生成してください。最終納品物は **単一の HTML ファイル（内部にインライン CSS & 必要最小の JS を含む）** とし、コード全体を ```html から ``` のコードブロック内に収めてください。また、アイコンはFont Awesome SVG アイコンを直接使用するように設定してください。

### 0. デザインスタイル
次のデザインを採用し、色・フォント・レイアウト・装飾のトーンで表現してください。  
- 〔例：プロフェッショナルなITコンサル風〕

### 1. 基本情報
- LPの目的　　　：〔例：新しい SaaS「BizGrowth」の無料トライアル登録を獲得する〕  
- 商品・サービス：〔例：中小企業向け売上分析 SaaS〕  
- ターゲット　　：〔例：商学部の学生起業家、20〜25歳〕  
- メインカラー　：0. デザインスタイルから自動で決定してください。
- アクセント色　：0. デザインスタイルから自動で決定してください。
- キービジュアル：〔例：CSV 解析グラフのイラスト〕  
  （画像 URL または「生成用イメージ指示文」を記入。記入が無い場合は汎用イラストを提案する）  

### 2. ページ構成（各セクションを含め、見出し・本文コピー・CTAボタンを作成）
1. **ヒーローセクション**  
   - キャッチコピー（最大20文字）  
   - サブキャッチ（1行）  
   - 上記キービジュアル  
   - CTAボタン（例：「無料で試す」）  

2. **課題提示 & ベネフィット**（3~4項目、アイコン付きカード）  

3. **機能／特徴ハイライト**（4~6項目、要点は見出し＋20〜40字で）  

4. **社会的証明**  
   - ケーススタディ / 成功事例（2件）  
   - 口コミ／レビュー（3件、★評価表示）  

5. **料金プラン**（2〜3段階、価格は〔例：¥0 / ¥3,000 / ¥8,000〕など自由）  

6. **FAQ**（5問5答）  

7. **今すぐ行動を促すセクション**（ヒーローのコピーを変形し、CTAを再提示）  

8. **フッター**  
   - 会社情報（架空可）  
   - お問い合わせメールリンク  
   - SNSアイコン（リンクは # で可）  
   - コピーライト  

### 3. トーン & ライティング
- 読者が **ビジネスに活用したくなる** 前向きな言葉を使用  
- 各セクション見出しはインパクトのある動詞始まり  
- 行動喚起（CTA）は必ず動詞＋利益で表現（例：「今すぐ無料で分析を始める」）  

### 4. 技術仕様
- レスポンシブ対応（Flexbox または Grid を用いて、幅768px未満で縦並びになる）  
- Webフォントは Google Fonts から１種類読み込み  
- アニメーション効果：ページロード時にフェードイン（CSS keyframes または簡潔な JS で）  
- HTML内コメントで主要なセクション開始位置を示す  

### 5. 出力形式
以下の順序で出力してください。  
1. 説明や余談は一切書かず、コードブロックだけを表示  
2. コードブロックの冒頭は ` ```html `、末尾は ` ``` `  
3. コードは VS Code でそのまま貼り付けて動作することを保証  

### 6. 未指定項目への対処
上記で空欄（〔　〕）が残っている場合は、 **あなたの裁量で魅力的かつ一貫した内容を補完** してください。必要に応じてフリー素材サイトの想定 URL（例：Unsplash）を記載しても構いません。

参考：LP作成プロンプトを作成させたプロンプト

# 命令
最終成果物として、LLMに対してランディングページ（LP）制作を命令する、プロンプトを作成せよ。

# 背景情報
・学生向けのワークショップで、AIによりLPを作成させたい。
・典型的なLPの要素をプロンプトに盛り込みたい。
・デザイン等を選択できるように、デザインの雰囲気の例をプロンプト内にスラッシュで書くようにしたい。例：プロフェッショナルなITコンサル風/おしゃれなオーガニック風/近未来的なサイバーパンク風
・学生は商学部の所属で、ビジネス作成に興味がある。それゆえ、LPはビジネスの雰囲気を含んだものにしたい。

# 補足情報
・不足する情報があれば質問せよ。