Claude Design の業務活用10事例｜LP・資料・スライド・ダッシュボードのコピペで使えるプロンプト集【2026年版】

「Claude Design に何を頼めばいいか分からない」——課金後の最大のつまづきポイントは、具体的な業務シナリオが思い浮かばないことです。本記事では Anthropic 公式情報・主要メディアの解説・編集部の利用所感をもとに、10の業務事例を そのままコピペで使える完成プロンプトつきで紹介します。

結論：この10事例から1つでも自分の業務に当てはまれば元が取れる

編集部が公開情報と利用所感をもとに整理した最も効果が出やすい10シナリオ：

1. LP制作：プロダクト紹介ページのヒーロー
2. 営業資料：提案書のスライド
3. 社内スライド：勉強会・全社発表用
4. 管理画面UI：ダッシュボード1画面
5. メールHTML：マーケメール
6. SNS画像：Instagram カルーセル
7. インフォグラフィック：図解1枚
8. アプリのオンボーディング：3画面フロー
9. モックアップ：要件定義時の確認用
10. ペルソナ・カスタマージャーニー：UX設計

Claude Pro（¥3,000/月）でこの10事例のうち1つでも週1回回せれば、月額の元は十分取れます。料金プランの選び方はClaude Design 料金完全比較、起動・操作の基本は使い方完全チュートリアルで解説しています。

事例1：LP制作｜プロダクト紹介ヒーローセクション（半日→15分）

ビフォー：マーケ担当者の半日業務

新機能リリースに合わせた LP のヒーローセクションをデザイナー依頼→ワイヤー→デザイン→修正で3〜5日。

コピペプロンプト

SaaS プロダクト「Aipedia」の新機能リリース用ヒーローセクションを作ってください。

要件：
- フレームワーク：React + Tailwind CSS
- 画面サイズ：PC（1280px幅）+ モバイル対応
- 構成：左に「キャッチコピー + サブコピー + CTAボタン×2」、右に「商品スクリーンショットのプレースホルダー」
- カラー：ダークグレー背景にバイオレット〜フクシア系のグラデーション
- フォント：Noto Sans JP（日本語）+ Inter（英数字）
- アニメーション：スクロール時のフェードイン、ボタンホバーで光彩

キャッチコピー：「2026年、業務の8割が AI で回る時代。」
サブコピー：「34本の徹底比較で、あなたに最適な1本を数字で示します。」
CTA：「無料で試す」「ランキングを見る」

ヘッダーには「Aipedia」のロゴテキストとナビゲーション5項目（ランキング・徹底特集・カテゴリ・比較・運営方針）。

効果

• 所要時間：半日 → 15分（96%削減）
• 質：そのままコピペで使える Tailwind コード
• 応用：プロンプトの製品名・コピーを書き換えれば再利用可

事例2：営業資料｜提案書スライド（4時間→30分）

ビフォー：営業担当者の提案書作成

PowerPointで0からデザイン、見栄えにこだわると4〜6時間。

コピペプロンプト

クライアント向けの提案資料スライド5枚を作ってください。

要件：
- React + Tailwind（横長16:9）
- 全体トーン：プロフェッショナル、信頼感、紺色基調
- フォント：Noto Sans JP（見出しは太字）
- 各スライド共通：上に「Aipedia | 提案資料 2026.04」の細いヘッダー、下にページ番号

スライド構成：
1. 表紙：「AIツール導入による業務効率化のご提案」
2. 課題：3つの bullet で現状課題（時間消費・属人化・コスト増）
3. 解決策：4ステップの図解（ツール選定→導入→運用→効果測定）
4. 期待効果：数字つき指標3つ（時間削減70% / コスト削減30% / NPS向上15pt）
5. ロードマップ：3ヶ月のガントチャート

各スライドの背景はダークグレー、アクセント色はエメラルドグリーン。

効果

• 所要時間：4時間 → 30分（87%削減）
• 品質：デザイン素人が作っても「コンサル提案書」レベル
• 応用：他クライアント向けにテンプレ流用可能

事例3：社内スライド｜勉強会・全社発表用（3時間→20分）

ビフォー：勉強会の準備で消える時間

社内勉強会のスライド作成。Keynote / PowerPoint で0から作って2〜3時間。

コピペプロンプト

全社員向けの勉強会スライド10枚を作ってください。

テーマ：「2026年Q2の AI 業界トレンド」
スピーカー：プロダクト企画部 山田

要件：
- React + Tailwind、横長16:9
- カジュアルだが情報量は多めの社内向けトーン
- 各スライドは「タイトル + 本文 + ビジュアル要素」の3パート構成

スライド構成：
1. タイトル：「2026年Q2の AI 業界トレンド」+ 副題 + スピーカー名
2. アジェンダ：5項目の bullet
3. ChatGPT Agent Mode 2.0 のインパクト
4. Claude Design のリリース速報
5. AI エージェントの主要4プレイヤー比較表
6. 業務へのインパクト見積もり（部署別）
7. 当社で取り入れるべき3ステップ
8. 期待されるROI
9. Q&A
10. まとめ + 次回予告

カラーは紺・白・グレーのシンプル構成、アクセントにオレンジを1点だけ使用。

効果

• 所要時間：3時間 → 20分（89%削減）
• 品質：誰がやっても一定の見た目に
• 応用：内容を入れ替えるだけで他テーマにも使える

事例4：管理画面UI｜ダッシュボード1画面（1日→1時間）

ビフォー：エンジニアのコンポーネント設計時間

社内ツールの管理画面ダッシュボードをFigmaで設計→React実装で1〜2日。

コピペプロンプト

SaaS 管理画面の「分析ダッシュボード」を作ってください。

要件：
- React + Tailwind + shadcn/ui
- ダークモード対応
- ログイン後の管理者向け画面（左サイドバー + メインエリア構成）

機能要件：
- 左サイドバー：ロゴ + ナビゲーション7項目（ホーム・ユーザー・プロジェクト・分析・請求・設定・サポート）
- メインエリア上部：4つのKPIカード（総ユーザー数・MAU・解約率・MRR）
  - 各カードに前月比の差分と矢印アイコン
- メインエリア中央：折れ線グラフ（過去30日のMAU推移）
  - shadcn/ui の Chart コンポーネントを使用
- メインエリア下部：直近のアクティビティ一覧（5行のテーブル）

カラー：ダークグレー背景、エメラルドグリーンとシアンのアクセント

効果

• 所要時間：1日 → 1時間（92%削減）
• 正確性：shadcn/ui ベースで一貫性が保たれる
• 応用：プロパティを差し替えれば別の管理画面にも転用可

事例5：メールHTML｜マーケメール（半日→20分）

ビフォー：マーケのメールデザイン業務

新着情報をユーザーに送るメール。HTML で作るとレスポンシブ対応で半日かかる。

コピペプロンプト

マーケティング用のニュースレターHTMLメールを作ってください。

要件：
- HTMLメール対応（テーブルレイアウト、インラインCSS）
- Outlook / Gmail / Apple Mail で正常表示
- ダークモード対応（メディアクエリ）
- レスポンシブ（モバイル幅で1カラム）

コンテンツ：
- ヘッダー：会社ロゴ + 発行日（2026年4月26日）
- 1セクション目：今月の注目記事（タイトル + サムネ + 本文100字 + 「続きを読む」リンク）
- 2セクション目：人気記事ランキング Top 3（番号 + タイトル + 一言コメント）
- 3セクション目：イベント・キャンペーン情報
- フッター：配信解除リンク + SNS アイコン4つ（X・Instagram・YouTube・LinkedIn）

カラー：白ベースに紺アクセント、品のあるシンプルデザイン。

効果

• 所要時間：半日 → 20分（94%削減）
• 互換性：主要メールクライアントで崩れない
• 応用：月次ニュースレターのテンプレ化

事例6：SNS画像｜Instagram カルーセル9枚セット（半日→1時間）

ビフォー：SNS担当者のクリエイティブ作成

Instagram の9枚カルーセルを Canva で作って2〜4時間。

コピペプロンプト

Instagram カルーセル投稿用の9枚スライドを作ってください。

テーマ：「ChatGPT エージェントモード 完全攻略」

要件：
- 各スライドは正方形 1080×1080
- React + Tailwind で1スライドずつ生成
- 全体トーン：ダーク、モダン、テック感

スライド構成：
1. 表紙：大きなタイトル「ChatGPT エージェント 完全攻略」+ 副題「2026年版」+ サムネ用アイコン
2. 「エージェントモードとは？」3行で説明
3. 「いつ使うべきか」3つの場面
4. 「料金プラン早見表」Plus / Pro / Team の3カラム
5. 「使い方ステップ1：起動」スクショ風プレースホルダー
6. 「使い方ステップ2：プロンプト」具体例
7. 「使い方ステップ3：結果確認」イメージ
8. 「やってはいけない3つのこと」リスト
9. 「続きはサイトで」CTA + プロフィール誘導

カラー：黒背景、紫・フクシアのグラデーション、白文字
フォント：Noto Sans JP（太め）

効果

• 所要時間：半日 → 1時間（87%削減）
• 量産：1テーマ1時間で9枚完成、週3テーマ作れる
• 応用：テーマだけ差し替えれば永遠に使える

事例7：インフォグラフィック｜図解1枚（2時間→15分）

ビフォー：図解職人の手作業

ブログ記事に挿入する図解を Adobe Illustrator で2〜3時間。

コピペプロンプト

AIツールの選び方フローチャートをインフォグラフィックとして作ってください。

要件：
- 縦長（800×1200）、SNSにそのまま投稿可
- React + Tailwind
- フローチャート形式：YES/NO の分岐で進む

フロー内容（YES/NOの順）：
1. 「業務でAIを使う？」 → YES: 次へ / NO: Free プランで十分
2. 「コードを書く？」 → YES: Cursor / Claude Code / NO: 次へ
3. 「デザインする？」 → YES: Claude Design / Figma Make / NO: 次へ
4. 「文章を書く？」 → YES: ChatGPT / Claude / NO: 次へ
5. 「リサーチする？」 → YES: Perplexity / Gemini / NO: ChatGPT Plus

各ノード：丸いカード、矢印で接続。判定の YES は緑、NO は赤の矢印。
背景：白、ノードはパステルカラー、テキストは濃紺。

効果

• 所要時間：2時間 → 15分（87%削減）
• シェア性：そのまま X / Instagram に投稿可
• 応用：他テーマのフローチャートも同じ手順で量産可能

事例8：アプリのオンボーディング｜3画面フロー（1日→1時間）

ビフォー：プロダクトデザイナーの設計時間

新規ユーザー向けのオンボーディング画面（3〜5画面）を Figma で1〜2日。

コピペプロンプト

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

アプリ：「ペット管理アプリ Pawmate」
ターゲット：犬・猫を飼う一般ユーザー

要件：
- React + Tailwind、モバイル幅（375px）
- 3画面で完結（左右スワイプで遷移）
- 各画面下に「進捗インジケーター（3点）」と「次へ」ボタン
- 最後の画面に「始める」ボタン

画面構成：
1. 画面1：ようこそ
  - イラスト：かわいい犬と猫
  - キャッチ：「ペットの健康を、もっと身近に」
  - 説明：3行
2. 画面2：機能紹介
  - イラスト：通知のイメージ
  - キャッチ：「予防接種・健康診断を忘れない」
  - 機能リスト：3項目（リマインダー・履歴・獣医探し）
3. 画面3：登録準備
  - イラスト：スマホで操作するイメージ
  - キャッチ：「30秒で登録完了」
  - 「始める」ボタン（大きめ）+ 「ログインする」リンク

カラー：パステルグリーン基調、ボタンはコーラル。

効果

• 所要時間：1日 → 1時間（92%削減）
• イテレーション：3画面の差分を簡単に試せる
• 応用：別アプリにも同じ構造で展開可能

事例9：モックアップ｜要件定義時の確認用（半日→20分）

ビフォー：プロダクトマネージャーの要件定義業務

クライアントと要件確認するためのモックアップを Figma / Adobe XD で半日。

コピペプロンプト

要件定義の確認用モックアップを作ってください。

機能：「カスタマーサポート用 FAQ ページ」

要件：
- React + Tailwind、PC + モバイル両対応
- 作り込みすぎず、要件確認用の「クリック可能ワイヤーフレーム」レベル
- グレースケール中心、テキストはダミー

画面構成：
- ヘッダー：戻るボタン + ページタイトル「よくある質問」
- 検索バー：「質問を入力してください」プレースホルダー
- カテゴリタブ：「料金 / 機能 / トラブル / 利用規約」の4タブ
- アコーディオン形式の Q&A リスト 5件（タップで開閉）
- 下部：「お問い合わせはこちら」CTA

注意：
- 装飾は最小限
- 要件確認に必要な情報量を網羅
- 「これで合ってますか？」と相手に聞く前提のシンプルさ

効果

• 所要時間：半日 → 20分（94%削減）
• イテレーション：相手のフィードバックを即反映できる
• 応用：要件確認のたびに新規モックを生成

事例10：ペルソナ・カスタマージャーニー｜UX設計（1日→1時間）

ビフォー：UXリサーチャーの資料作成

ペルソナシート、カスタマージャーニーマップを Miro / Notion で1〜2日。

コピペプロンプト

SaaS プロダクトのペルソナとカスタマージャーニーを 1 ページにまとめたインフォグラフィックを作ってください。

プロダクト：法人向けプロジェクト管理ツール
ペルソナ：30代後半 PdM 山田太郎

要件：
- React + Tailwind、A4 1ページ収録
- 上半分：ペルソナ情報、下半分：ジャーニーマップ

上半分（ペルソナカード）：
- アイコン + 名前 + 肩書き
- 基本情報：年齢・部署・役職・チームサイズ
- 行動パターン：4項目
- 課題：3つの bullet
- 目標：3つの bullet

下半分（カスタマージャーニーマップ）：
- 横軸：認知 → 検討 → 試用 → 契約 → 利用 → 拡大
- 各フェーズで「行動・思考・感情・タッチポイント」の4行
- 感情グラフ：折れ線で曲線を描く

カラー：白背景、ペルソナ部はベージュアクセント、ジャーニーは段階別に色分け。

効果

• 所要時間：1日 → 1時間（92%削減）
• 網羅性：UX設計の主要ドキュメントが1つで済む
• 応用：プロジェクト初期に毎回利用

プロンプト設計の3つの鉄則（デザイン版）

10事例を運用してわかった、Claude Design への指示で品質が上がるコツ：

鉄則1：フレームワーク・ライブラリを必ず指定

❌ 悪い例：「LP のヒーローを作って」 ✅ 良い例：「React + Tailwind CSS で、shadcn/ui ベースのヒーローを」

鉄則2：画面サイズと用途を明示

❌ 悪い例：「ダッシュボードのカード」 ✅ 良い例：「PC 1280px 幅 + モバイル対応、SaaS 管理画面用」

鉄則3：カラー・フォント・トーンを言葉で指定

❌ 悪い例：「いい感じに」 ✅ 良い例：「ダークグレー背景にバイオレット系アクセント、Inter + Noto Sans JP、プロフェッショナルなトーン」

この3つを守るだけで、Claude Design の出力品質は 2〜3倍になります。

編集部おすすめのパターン：用途別プロンプトテンプレ集

ai-pedia 編集部では、上記10事例のプロンプトをベースに以下のテンプレ集を運用しています：

• LP系：ヒーロー / 料金 / 機能紹介 / お客様の声 / FAQ（5本）
• 資料系：提案書 / 勉強会 / 営業 / 社内発表 / 報告会（5本）
• UI系：ダッシュボード / フォーム / オンボーディング / モックアップ / プロト（5本）
• SNS系：Instagram / X / TikTok / LinkedIn / note（5本）

合計20本のテンプレを Notion で管理し、月1で更新しています。

まとめ：10事例の中から1つ選ぶだけで月額の元は取れる

• 本記事の10事例はすべて編集部で運用検証済み
• コピペで使える完成プロンプトを各事例に用意
• 自分の業務に1つでも当てはまれば、Claude Pro の月¥3,000は確実に元が取れる
• プロンプト設計の3つの鉄則を守ると品質が大きく向上

Claude Design に初めて触れる方は使い方完全チュートリアル、料金プランの選び方はClaude Design 料金完全比較を先に読むと、本記事のプロンプトをすぐに実行できます。

Figma や Canva との具体比較はAIデザインツール5選比較、導入前のリスク評価はClaude Design の限界とできないこと、Claude Design 全体像は新機能Claude Designとは？が参考になります。

• トラブル対処 → Claude Design トラブルシューティング