Claude Design プロンプト100選【2026年版】LP・ダッシュボード・モバイルUI・スライド・図解で使える完成テンプレ集

「Claude Design に何を頼めばいいか分からない」「プロンプト書いても思った結果が出ない」——課金後の最大のつまずきです。本記事では、Claude Design で そのまま動く完成プロンプト100本を10カテゴリで公開します。

結論：100本の構成

① LP制作（10本）        - ヒーロー・特徴・料金・CTA
② SaaSダッシュボード（10本）- KPI・チャート・テーブル
③ モバイルUI（10本）       - オンボーディング・タブバー
④ 営業資料スライド（10本） - 提案書・全社発表
⑤ インフォグラフィック（10本）- 図解・フロー・比較表
⑥ メールHTML（10本）       - ニュースレター・お知らせ
⑦ 管理画面（10本）         - 設定・ユーザー管理
⑧ オンボーディング（10本） - 初回フロー・チュートリアル
⑨ EC商品ページ（10本）     - 詳細・カート・決済
⑩ ブログテンプレ（10本）   - 記事・著者・カテゴリ

各プロンプトには 「カスタマイズ箇所」「推奨スタック」「コツ」 を明記しています。

機能全体はClaude Design 完全解説、料金はClaude Design 料金、業務事例はClaude Design 業務活用10事例も併せてどうぞ。

カテゴリ1：LP制作（10本）

01｜SaaS LP ヒーローセクション

SaaS プロダクト「[製品名]」のLPヒーローセクションを作って。

要件：
- React + Tailwind CSS
- 画面：PC（1280px幅）+ モバイル対応
- 構成：左にコピー（H1+サブ+CTA×2）、右にスクショプレースホルダー
- カラー：ダークグレー背景にバイオレット〜フクシアのグラデアクセント
- フォント：Noto Sans JP + Inter
- アニメーション：スクロールフェードイン、ボタンホバー光彩

H1：「[キャッチコピー]」
サブ：「[サブコピー]」
CTA：「無料で試す」「料金を見る」

カスタマイズ：[製品名][キャッチコピー][サブコピー]の3箇所のみ 推奨スタック：React + Tailwind / Astro + Tailwind コツ：画像サイズを「16:9 のプレースホルダー」と明示

02｜B2B SaaS の特徴セクション（3列）

B2B SaaS の特徴セクションを3列カードで作って。

要件：
- React + Tailwind、横3列（モバイルは縦1列）
- 各カードに：アイコン（Lucide Icons）、見出し、本文100字、リンク
- カラー：白背景、紺アクセント、ホバーで影深く

特徴1：[特徴1]
特徴2：[特徴2]
特徴3：[特徴3]

03｜料金プラン3段階（Free / Pro / Enterprise）

SaaS の料金プラン3段階を比較カードで作って。

要件：
- React + Tailwind、3カラム（モバイルは縦）
- 各カードに：プラン名、月額、機能リスト5〜7、CTA、人気バッジ（Pro）

Free：¥0 ／ Pro：¥3,000 ／ Enterprise：要相談

04｜お客様の声（Testimonials）

お客様の声セクションを6名分のカードで作って。

要件：
- React + Tailwind、3列×2行（モバイルは1列）
- 各カードに：プロフィール画像（プレースホルダー）、氏名、肩書、コメント80字
- 背景：パステルカラー6色を順番に

05｜FAQ セクション（アコーディオン）

よくある質問セクションをアコーディオン形式で作って。

要件：
- React + Tailwind、HTML <details> でJSなしでも動く
- 5問のFAQ、クリックで開閉
- 開閉時にアイコン回転アニメ

質問1：[質問1] ／ 回答：[回答1]
質問2〜5も同様

06｜ニュースレター登録セクション

ニュースレター登録セクションを作って。

要件：
- 左にコピー（「週1配信、いつでも解除可」）
- 右にメール入力 + 登録ボタン
- 信頼シグナル：「[N]人が購読中」
- カラー：黒背景、エメラルドアクセント

07｜フッター（4列構成）

SaaS のフッターを4列で作って。

要件：
- 1列目：ロゴ + キャッチ + SNSアイコン
- 2列目：プロダクト（料金・機能・統合）
- 3列目：会社（運営・採用・お問合せ）
- 4列目：法務（プライバシー・規約・セキュリティ）
- 下部：コピーライト + 法人番号

08｜CTA バナー（フローティング）

モバイル下部の固定CTAバナーを作って。

要件：
- position: fixed; bottom: 0;
- グラデ背景（バイオレット→フクシア）
- 「無料で試す」ボタン + 「× 閉じる」アイコン
- スクロール時のみ表示（intersection observer）

09｜404 ページ

404 ページを作って。

要件：
- 中央配置、大きな「404」タイポ
- 「お探しのページは見つかりませんでした」
- 「ホームに戻る」「サイト内検索」CTA
- 背景：グラデ + 浮遊する装飾要素

10｜Coming Soon ページ

Coming Soon ページを作って。

要件：
- 中央にロゴ + キャッチ（「[製品名] - 2026年Q3 ローンチ予定」）
- カウントダウンタイマー（指定日まで）
- メール登録（早期アクセス）
- 背景：ダーク + 動くグラデ

カテゴリ2：SaaSダッシュボード（10本）

11｜KPI カード4枚並び

分析ダッシュボードのKPIカード4枚を作って。

要件：
- React + Tailwind + shadcn/ui
- カード4枚：MAU・MRR・解約率・LTV
- 各カードに：数値、前月比（矢印アイコン）、スパークライン
- ダークモード対応

12｜折れ線グラフ（30日推移）

過去30日のMAU推移を折れ線グラフで作って。

要件：
- shadcn/ui の Chart コンポーネント
- ホバーで日付・値表示
- 期間切替タブ（7日/30日/90日）

13｜テーブル（直近のアクティビティ）

直近のアクティビティテーブルを作って。

要件：
- 列：時刻・ユーザー・アクション・ステータス
- 行5件、ステータスバッジ色分け
- ソート・フィルタ・ページネーション

14〜20｜（同様パターンで続く）

14. 円グラフ（売上構成比）
15. ヒートマップ（時間帯別アクセス）
16. ファネル図（コンバージョン率）
17. 地理マップ（国別ユーザー数）
18. リーダーボード（TOP10ユーザー）
19. アラートパネル（異常検知）
20. 設定タブ画面（Profile/Billing/Team/Notifications/Security）

各プロンプトの詳細はClaude Design 業務活用10事例で実例紹介。

カテゴリ3：モバイルUI（10本）

21｜オンボーディング3画面

モバイルアプリのオンボーディング3画面を作って。

要件：
- React Native + NativeWind（または React + Tailwind 375px幅）
- 各画面：イラスト + キャッチ + 説明 + 「次へ」
- 進捗インジケーター（3点）
- 最終画面に「始める」ボタン

画面1：ようこそ（[製品名]）
画面2：機能紹介（3つ）
画面3：登録準備（30秒で完了）

22〜30｜

22. ボトムタブバー（Home/Search/Add/Notification/Profile）
23. プルリフレッシュ付きフィード
24. プロフィール画面
25. 設定画面（Toggle / Slider / Picker）
26. チャット画面（メッセージリスト + 入力欄）
27. カレンダー UI
28. 通知一覧
29. ログイン画面（メール / SNS）
30. パスワード再設定フロー

カテゴリ4：営業資料スライド（10本）

31｜表紙スライド

クライアント提案資料の表紙を作って。

要件：
- 16:9（横長）、React + Tailwind
- タイトル「[テーマ]」+ 副題 + 日付 + 会社ロゴ
- カラー：紺基調、アクセントにオレンジ
- フォント：Noto Sans JP（太字）

32〜40｜

32. アジェンダスライド（5項目）
33. 課題スライド（3つの bullet）
34. 解決策スライド（4ステップ図解）
35. 期待効果スライド（数字×3）
36. ロードマップスライド（ガントチャート）
37. 料金スライド（プラン比較表）
38. 事例スライド（ロゴ並び + コメント）
39. Q&A スライド（受付）
40. クロージングスライド（連絡先）

カテゴリ5：インフォグラフィック（10本）

41｜フローチャート（YES/NO 分岐）

[テーマ]の選び方をフローチャートで作って。

要件：
- 縦長（800×1200）、SVG / HTML
- YES/NO 分岐で進む
- 各ノード：丸いカード、矢印で接続
- 背景：白、ノードはパステル

質問1：[質問1] → YES: 次へ / NO: [回答A]
質問2：[質問2] → YES: 次へ / NO: [回答B]
（5階層）

42〜50｜

42. 比較表（3社×7軸）
43. タイムライン（5年間の歴史）
44. ヒエラルキー図（組織図）
45. プロセス図（5ステップの円形フロー）
46. データ可視化（円グラフ + 棒グラフ）
47. マインドマップ（中央テーマ + 8方向）
48. ベン図（3円の重なり）
49. 階段グラフ（成長フェーズ）
50. ピクトグラム比較（10ピクト中3赤）

カテゴリ6：メールHTML（10本）

51〜60｜

51. ニュースレター（記事3本紹介）
52. ウェルカムメール（登録直後）
53. プロモーションメール（割引コード）
54. 確認メール（注文確定）
55. リマインダーメール（イベント前日）
56. リエンゲージメント（休眠ユーザー復活）
57. アンケート依頼メール
58. 退会確認メール
59. 月次レポートメール
60. 緊急告知メール

各メールは Outlook / Gmail / Apple Mail で正常表示、テーブルレイアウト + インラインCSS、ダークモード対応のメディアクエリ込み。

カテゴリ7：管理画面（10本）

61. ユーザー管理（一覧 + 検索 + フィルタ）
62. 権限設定（ロール × パーミッション）
63. 設定画面（一般 / 通知 / セキュリティ）
64. APIキー管理
65. Webhook 設定
66. 課金履歴
67. ログ閲覧
68. システムヘルスチェック
69. インポート/エクスポート
70. ヘルプ・サポート画面

カテゴリ8：オンボーディング（10本）

71. 初回起動チュートリアル（5ステップ）
72. プロフィール入力フォーム
73. 招待コード入力
74. アンケート（利用目的）
75. 機能紹介ツアー（吹き出し）
76. 初期設定ウィザード
77. チームメンバー招待
78. データインポート画面
79. 完了画面（ダッシュボードへ）
80. ヘルプ動画埋め込み画面

カテゴリ9：EC商品ページ（10本）

81. 商品詳細ページ（画像ギャラリー + 説明 + カート）
82. カテゴリ一覧（フィルタ + ソート）
83. カート画面
84. 決済画面
85. 注文履歴
86. レビュー一覧
87. お気に入り
88. クーポン適用画面
89. 配送先選択
90. 注文確定画面

カテゴリ10：ブログテンプレ（10本）

91. 記事詳細（H1 + 目次 + 本文 + 関連記事）
92. 記事一覧（カードグリッド）
93. カテゴリページ
94. タグページ
95. 著者プロフィール
96. 検索結果
97. ニュースレター登録（記事末尾）
98. シェアボタン
99. 目次（追従式）
100. コメント欄

プロンプトの作り方：5つのコツ

コツ1：フレームワーク・スタイルを必ず指定

❌ 悪い例：「LPを作って」
✅ 良い例：「Astro + Tailwind CSS で LP を作って」

コツ2：画面サイズを明示

❌ 悪い例：「カードを作って」
✅ 良い例：「PC（1280px幅）+ モバイル対応のカードを作って」

コツ3：使用目的を伝える

❌ 悪い例：「フォームを作って」
✅ 良い例：「ユーザー登録用のフォームを作って（メール/パスワード/利用規約）」

コツ4：ブランドカラー・フォントを指定

カラー：ダークグレー背景、バイオレット〜フクシアのグラデ
フォント：Noto Sans JP + Inter

コツ5：出力フォーマットを指定

末尾に「以下を必ず含めてください：①〇〇 ②〇〇 ③〇〇」

まとめ：100プロンプトを使い回す3ステップ

✅ Step 1：本記事から自分の用途に近いプロンプトを選ぶ
✅ Step 2：[製品名][カラー][コピー]等のカスタマイズ箇所を置換
✅ Step 3：Claude Design に送信、Artifacts でプレビュー確認

慣れてきたら、自分の業務に合わせて オリジナルプロンプト集 を作るのが王道です。

関連記事

• 機能詳細 → Claude Design 完全解説
• 料金比較 → Claude Design 料金完全比較
• 業務活用10事例 → Claude Design 業務活用10事例
• v0 / Figma AI 比較 → Claude Design vs v0 vs Figma AI
• 限界とできないこと → Claude Design の限界
• 使い方チュートリアル → Claude Design 使い方完全チュートリアル