デザイン未経験がClaude Designで数分でLPと提案資料を作る手順

デザイン未経験で資料作成に時間を取られていませんか。テンプレートとAIプロンプトを使えば、デザインスキルがなくてもLPや提案資料を数分で見栄えよく仕上げられます。本記事ではClaude Designを使った、テンプレート選び→プロンプト作成→配色・レイアウトの最小限調整→出力までの手順を実例つきで丁寧に解説します。面倒な調整や試行錯誤を省き、すぐに再利用できるプロンプトとテンプレートのセットを手に入れることで、時間を節約しつつクライアントや社内向けの資料品質を確実に上げるワークフローをお見せします。続きを読めば、今日から実務で使える具体的な手順が手に入ります。

そもそもどう動くのか

デザイン未経験だと「どこから手を付ければいいかわからず時間だけが過ぎる」。

Claude Designは「テンプレート＋プロンプト＋手持ち素材」を組み合わせ、AIがレイアウト案や文言候補を出すワークフローだ。仕組みを理解すれば「生成→差し替え→推敲」を高速で回せる。特に長い文脈を一度に渡せるモデル（例：Claude Sonnet 5は大容量のコンテキストを扱える）を使うと、LPと提案資料を同一ワークスペースで扱いやすい。以下は実務で使える7ステップ。

1. 素材を揃えて命名する

   • action: ロゴや画像、テキストをフォルダにまとめる（例: assets/logo.png、assets/hero.jpg、assets/product.txt）。
   • command: アップロードは「ドラッグ&ドロップ → assets/ に配置」。ファイル名は半角英数字で統一。

2. テンプレートを決める

   • action: テンプレート一覧で「製品LP／提案資料」系を選択。
   • setting: カラム数を指定（例: Columns = 2）、Heroあり/なしを切り替え。

3. 初期プロンプトを投げる（骨組み生成）

   • action: プロンプト欄に目的・ターゲット・トーンを明記。
   • 例プロンプト:

     目的: B2B向けLP（リード獲得）
     ターゲット: マーケ責任者
     トーン: 専門的だが平易、CTAは「資料請求」
     出力: ヒーロー見出し3案、サブ見出し3案、主要3箇所のCTA文
     

   • command: 「Generate」ボタンを押す。

4. 生成案を素材で差し替える

   • action: 生成されたヒーロー画像をクリック→「Replace」→ assets/hero.jpg を指定。
   • command: 画像差し替え→ Replace with: assets/hero.jpg。テキストは編集画面で直接上書き。

5. 文言のA/Bを作る（短時間で複数案）

   • action: 見出しを3案ずつ欲しい箇所に対し、プロンプトで「3案」を要求。
   • 例指示: 「見出しを3案、1案は競合比較型、1案は問題提示型、1案はベネフィット提示型で」。
   • command: Edit prompt → append: "見出し3案（競合/問題/ベネフィット）" → Re-run。

6. レイアウト微調整と出力設定

   • action: モバイル表示を確認し、セクションの順序をドラッグで入れ替え。
   • setting: Export設定で「PDF（A4）」「PNG（1250px）」などを選択して出力。例: Export → PDF (print-ready)。

7. フィードバックを反映して再生成するループ

   • action: コメントで修正点をまとめ（例: CTA色を強調、文言を簡潔に）、プロンプトに反映して再生成。
   • command例: Edit prompt → "変更点: CTAを赤背景、見出しを8〜12文字に短縮" → Generate。

まとめ：仕組みは単純で、テンプレ→素材→プロンプトの順に扱えば短時間で品質を上げられる。まずはassetsにロゴと製品説明1段落を用意して、上の「初期プロンプト」を試してみてください。

① ゴールを決めてフォーマットを作る

家でデザインを始めようとしても「何から決めればいいか分からない」で時間を溶かすことが一番もったいない。

そもそもどう動くのか：成果物の目的と配布方法を最初に決めると、キャンバスのサイズ・レイアウト・出力設定が自動的に最適化される。これが決まればテンプレート選定→セクション設計→出力設定と順を追って手が動くだけになる。

1. ゴールを明文化する

• 目的を一行で書く（例: 「新規サービスのランディングページでリード獲得」）。
• 配布方法を決める（ウェブ公開 or PDF配布）。これで次の選択肢が変わる。

1. 新規デザインを作る（操作例）

• 「新規デザイン作成」→フォーマット選択で「LP / 縦長資料 / スライド」から選ぶ。
• 例: LPなら「LP (縦長)」を選択。

1. キャンバスサイズを指定する

• Web LP: 幅1200px、高さはセクションごとに可変。
• PDF提案書: 用紙サイズA4、マージン20mm。
• UI操作例: 「キャンバス設定」→幅:1200px / 用紙:A4。

1. セクション構成を決める（テンプレ化）

• 最低3セクション: ヒーロー、機能/メリット、CTA。
• 各セクションに見出し・本文・画像のプレースホルダを作る（ドラッグで配置）。

1. グリッド・タイプスケールを設定する

• 12カラムグリッド、ガター16px。
• 見出し: 32px、本文:16px の基本ルールを設定。
• UI操作例: 「レイアウト」→カラム:12、ガター:16。

1. 画像・テキスト生成の初期プロンプトを用意する

• 画像: 「ヒーロー用 1200×600, サービス利用シーン」など。
• テキスト: ヘッドライン案3つ、サブコピー3つを用意。
• 例プロンプト（コピペ可）:

ヘッドライン案を3つ出してください。ターゲット: 中小企業のマーケ担当、目的: 無料トライアル獲得。

1. 出力設定とテンプレ保存

• 配布がウェブならPNG/JPEG書き出し、PDF配布なら解像度300dpiでPDF出力。
• 最後に「テンプレートとして保存」して次回使えるようにする。
• UI操作例: 「エクスポート」→形式: PDF / PNG、解像度: 300dpi（PDF時）。

まとめ：目的→配布→フォーマットの順で決めれば迷いが消える。まずは新規デザインを作って「LP」か「A4提案書」を選び、上の手順に沿って一つずつ設定してみてください。次の一歩：新規デザイン作成ボタンを押してフォーマットを選んでみましょう。

② アセットを整理して命名規則を決める

素材が散らばって「どれが最新版？」と探す時間で1日潰れる。
そもそもどう動くのか：多くのデザイン自動化ツールは「指定のパス／名前」でアセットを参照する。ファイルを一箇所にまとめ、意味のある名前を付ければ、テンプレート差し替えやスクリプト処理がそのまま動く。命名規則は自動処理の約束事だと考えれば応用が効く。

1. フォルダを作る（ワンコマンドで）

   • 例: 作業ルートにassetsフォルダを用意。

   mkdir -p assets
   

2. ロゴを統一命名で保存

   • 使い分け例: assets/logo.svg（メイン）、assets/logo_horizontal.svg（横長）、assets/logo_icon.svg（アイコン）。
   • 既存ファイルの移動例:

   mv "Company Logo.svg" assets/logo.svg
   

3. メイン画像は用途別に複数解像度で保存

   • 命名例: assets/hero.jpg, assets/[email protected]。ツールが高DPI差し替えに対応していれば@2xを参照できる。

4. ブランドカラー・フォント情報をテキストで残す

   • JSONかMarkdownで保存。自動スクリプトで読みやすくするために構造化する。

   printf '{"primary":"#xxxxxx","accent":"#yyyyyy"}' > assets/brand-colors.json
   

5. 参考資料（Figma, PDF, ワイヤー）を一元化

   • 直接ファイルを置けない場合はリンクをreferences.mdにまとめる。

   printf "Figma: <paste-figma-link>\nProposal: proposal.pdf" > assets/references.md
   

6. バージョンはファイル名で管理（厳密なVCSがない場合）

   • 例: assets/logo_v1.svg → assets/logo_v2.svg。最終版はassets/logo_final.svgにする運用にすると分かりやすい。

7. 命名規則のルールブックを一行で残す

   • assets/README.mdに「小文字・ハイフン区切り・用途_変種.拡張子」を記載。チームで破られないように最初に決めておく。

まとめ：assetsフォルダにロゴ・hero・brand-colors・referencesを意味ある名前で入れておけば、その先のLPテンプレート差し替えや自動生成が格段に速くなる。次の一歩：assetsをClaude Designに読み込ませるためのインポート設定をやってみましょう。

③ プロンプトで骨組みを生成する

デザインが苦手でも手が止まる原因は「何を書けばいいか分からない骨組み」である。

そもそもどう動くのか：Claudeに構成を出してもらうと、LPの見出し（ヘッダー、特徴、CTA）と短い説明文が返ってくる。仕組みはシンプルで、「必要な情報を与える → 出力フォーマットを指定する → 必要なら追い打ちで修正を指示する」だけ。出力が決まればあとはコピペで編集・デザインに渡せる。

1. 必要情報を揃える（3分）

   • ターゲット（例：法人／業種）、課題（例：業務効率化／コスト削減）、提供価値（USP）、トーン（例：信頼感・フレンドリー）、目標CTA（例：資料請求）。
   • 例: ターゲット=IT企業、課題=オンボーディングに時間がかかる、USP=テンプレ有りで即導入。

2. 基本プロンプトテンプレを作る（コピペ用）

   • まずはこのテンプレを投げる。出力は「見出し＋一文」で指定。

   ターゲットは法人（{TARGET}）、課題は{PROBLEM}、USPは{USP}です。
   この情報でLPの以下を作ってください：
   - ヘッダー（見出し＋一文）
   - 特徴を3つ（各見出し＋一文）
   - CTA（見出し＋一文）
   出力はJSONで、キーは header, features（配列）, cta としてください。
   制約：見出しは30文字以内、一文は50文字以内で簡潔に。

3. 出力形式を固定して取り込めるようにする（実務向け）

   • JSONやCSVで返してもらえば、そのままスプレッドシートやCMSに張り付け可能。例: "出力はJSON" を明確に指示。

4. モデル設定を決める（再現性のため）

   • ブラウザUIなら温度（temperature）低めを推奨（例：0〜0.3）、長さは最大トークン300程度で安定。これで文言のぶれを減らす。

5. 一回で完成させない運用ルール（検収フロー）

   • まず「原案出力」を得る→プロダクトやコンプライアンス観点でチェック→修正指示を出す。修正プロンプト例：「語尾をビジネス向けに整えて」「専門用語を削ってください」。

6. 直接使えるCSV出力の例（そのまま貼れる）

   section,heading,description
   header,導入を最速で完了,テンプレートで初期設定を半分以下の時間に短縮します
   feature1,テンプレ即導入,既定の設定で構築済みのテンプレを提供
   feature2,カスタマイズ容易,API連携で主要ツールと接続可能
   feature3,サポート充実,オンボーディング資料と導入支援を提供
   cta,資料を請求する,今すぐ導入事例と料金表を入手してください

7. デザイナー／CMSへの受け渡し手順（1分）

   • JSON/CSVを保存→LPテンプレの該当ブロックにコピペ→文言の幅（行数）を確認してビジュアル微調整を依頼する。これだけでデザイン作業が格段に速くなる。

まとめ：まずはテンプレプロンプトをそのままClaudeに投げて、1セットの骨組み（ヘッダー／3特徴／CTA）を作ってみてください。次はその出力を実際のLP枠に貼ってデザイン調整に進みましょう。

④ テンプレート適用とレイアウト調整

LPがいつも「情報はあるのに読まれない」ことに悩んでいませんか？

そもそもどう動くのか：テンプレートは「情報の骨格」を用意し、グリッドとカラムは視線の流れを物理的に作る装置です。骨組み（見出し・導入・CTA）をテンプレートへ流し込み、各ブロックに対して「何カラム占めるか」「余白（ガター）はどれくらいか」「モバイルでどう折りたたむか」を決めれば、意図した順に読まれるレイアウトが完成します。後は数値とツール操作を詰めるだけです。

7ステップ

1. テンプレートを選択する

   • 操作例: テンプレート一覧からLPカテゴリを開き、ビジュアル密度が近いものを1つ選ぶ（例：シンプルヒーロー）。
   • チェック: ヘッダー→ヒーロー→特徴→CTAのブロックが揃っているか確認。

2. 生成した骨組みをコピペで流し込む

   • 操作例: 骨組みテキストをテンプレートの対応ブロックに貼る。見出しはH1ブロック、導入はリード文ブロックへ。
   • Tip: 直接編集できない場合は「ブロックを置換」機能を使う。

3. レイアウト候補を適用して全体感を確認

   • 操作例: テンプレートの「レイアウト候補」を開き、候補A/Bを順に適用して視認性を比較。
   • 判断基準: ファーストビューでCTAが見えるか、主要な価値提案が上側にあるか。

4. グリッド設定を確定する（具体値を入れる）

   • 推奨設定例（編集画面で入力）:

     グリッド: 12カラム
     ガター: 24px
     コンテナ最大幅: 1200px（中央寄せ）
     モバイルブレイクポイント: 768px
     

   • 操作例: レイアウト設定パネルで上の数値を入力。

5. カラム切替でコンテンツ幅を調整する

   • 操作例: ヒーローの見出しを「6カラム」、サイド画像を「6カラム」に設定。特徴セクションは「3カラム×3項目」に切替。
   • コマンド例: ブロック選択 → カラム数ドロップダウンで「6/6」→ 適用。

6. 視線の流れを作る微調整（配置・余白・強調）

   • 操作例: 重要なCTAボタンに対して「左寄せ→右寄せ」に切替え、ボタン周りの上余白を16px増やす。
   • 実践チェック: スクロールせずに主要メッセージが伝わるかスマホ幅で確認。

7. レスポンシブ確認と最終調整

   • 操作例: デスクトップ→タブレット→モバイルの切替で表示を確認。モバイルで画像を上、テキストを下にする場合はブロックの順序を入替。
   • 保存前のルール: 各ブレイクポイントでCTAがファーストスクリーンに残るようにする。

まとめ：テンプレート適用は「骨組みを流し込む → グリッドで幅を決める → カラムで視線を誘導する」だけです。まずは一つのテンプレートを選んで、上の手順で実際に「グリッド:12カラム／ガター:24px」を設定してみてください。続きを読んで、実際の素材で一緒に手を動かしましょう。

⑤ 画像生成・差し替えで視覚を強化する

家のPCの前にいないとデザインが止まる、そんな時間を減らしたい人向け。

そもそもどう動くのか：LPや提案資料の「視覚」は、画像の差し替えで即座に印象が変わる。Claude Design上ではプレースホルダーを選んで「置換」し、アップロードかAI生成を選ぶだけ。仕組みが分かれば、あとはテンプレとプロンプトを回すだけで作業が爆速化する。

1. ヒーロー画像を確定する

   • 画面でヒーローブロックをクリック → 画像を選択 → 置換。
   • ファイルはJPG/PNGで横幅は1200〜2000pxを目安に用意。命名規則は hero_サービス名.jpg のようにする。

2. ストックか生成かを決める

   • 既存の雰囲気が合うならストックを検索して選択。なければ生成。
   • 操作例：画像を選択 → 置換 → 「生成」または「アップロード」をクリック。

3. 生成プロンプトの基本テンプレを用意する（コピペで使える）

   • 例（そのまま貼る）：

     シンプルなオフィス背景、明るいトーン、ブランド色をアクセントに反映、人物は自然な表情で中央寄せ、広めの余白、横長（16:9）
     

   • 右端にブランド色を入れたい場合は「ブランド色をアクセント（例：コーポレートカラーを背景の右下に薄く）」と追記。

4. 生成後のトリミングとオーバーレイ調整

   • 生成画像を選択 → トリミングで焦点を中央に移動 → オーバーレイを追加（透明度30%前後でブランド色を重ねる）。
   • 操作例：画像選択 → 編集 → オーバーレイカラー #xxxx を 25〜35% に設定。

5. アイコンは小さめ・SVG優先で差し替え

   • アイコンを選択 → 置換 → SVGファイルをアップロード（ない場合は生成で「フラットアイコン、1色、線幅2px」等を指定）。
   • 実務例：機能アイコンを一括で選択 → 置換 → 複数ファイルをドラッグ＆ドロップ。

6. テキストとの整合チェック（コントラスト・代替テキスト）

   • 画像選択 → プロパティ → Altテキスト入力（例：hero の場合「SaaSプロダクトを示す明るいオフィス風の写真」）。
   • コントラスト不足なら画像の明度を上げるか、テキストにシャドウを追加。

7. バージョン管理と差し戻し用の保存

   • 差し替え前に「複製」を作る（ページ複製またはアセットを別フォルダへ移す）。
   • 操作例：ページメニュー → 複製 → hero_v1 を保存。気に入らなければ元に戻せる。

まとめ：画像の差し替えは「選択→置換→微調整」の3ステップをテンプレ化すれば数分で終わる。まずはヒーロー画像を1枚、上の生成プロンプトを使って差し替えてみてください。

⑥ コピーをAIで推敲して説得力を上げる

LPの見出しや導入が弱くて、決裁まで話が通らない——そんな悩みを一行で突くところから始める。

そもそもどう動くのか：やることは単純で、「対象テキストを入れて、改善のための指示を出す」だけである。Claudeは入力と指示に沿って書き換え案を返すので、要点抽出→改善→差し替えのループを回すことで、実務レベルの説得力を短時間で上げられる。長いLP全文でも扱える大きなコンテキストを持つモデルがあるため、一度にまとまった箇所を直せるのも利点だ。

7ステップ

1. 対象を決める（狙いを明確にする）

   • 改善対象を「見出し」「導入文（〜30〜60字目安）」「CTA」など具体化する。
   • 例: 「導入文：現状の1文をそのままペースト」

2. 最初の指示テンプレを用意する

   • シンプルに効果的な指示を用意する。例をそのまま投げる。
   • 例（コピーを改善する指示）

     読み手が法人の決裁者に響くように、簡潔で力強い文に書き換えてください。文字数は60字前後、専門用語は一つだけに絞り、最後に行動を促す一文を加えてください。
     

3. 要点抽出を先にやる（リファクタの鉄則）

   • 長文ならまず「要点を3つに要約してください」と指示して、核を抽出する。
   • 例コマンド:

     以下の導入文を読み、重要な要点を箇条書きで3つにまとめてください。続けてそれを使った短い見出し案を2つ作ってください。
     

4. 出力をそのまま差し替えず検証する

   • 返ってきた案をそのまま置き換えず、社内目線で5分検証（誤字・事実誤認・トーン齟齬）。
   • 具体的にはSlackに案を貼って同僚3人に「賛否と改善案」をコメントしてもらう。

5. 微修正は具体的指示で

   • 「もっと短く」「具体的な数値を入れる」「競合比較を一文で入れる」など具体的に指示する。
   • 例:

     先の案を「数字を入れて信頼感を上げる」方向で書き直してください。可能なら『××%改善』などの表現を仮置きで使い、注釈で出典不要としてください。
     

6. A/Bを作って検証する

   • 見出しA・見出しBを作り、社内投票やメール開封率で比較する。少なくとも2案を同時に公開して反応差を見る。
   • 手順例: Slackで投票→3営業日で開封率比較→上位案を採用。

7. 繰り返す（コードリファクタと同じ）

   • 要点抽出→改善→差し替え→測定を数回実行。改善は小単位（見出し一つ、導入文一段落）で回すと効果が見えやすい。

まとめ：具体的な指示と短いループが肝心だ。まずはLPの見出しと導入文を1案ずつClaudeに投げ、出力を2案作って社内で投票してみてください。それだけで説得力が明確に変わります。

⑦ エクスポート・共有して反応で改善する

家族やチームに渡しても「見づらい」「何を直せばいいか分からない」と言われて作業が止まる――そんな痛み。

そもそもどう動くのか：完成デザインはまず配布可能なファイル（PNG/SVG/HTML/PDF）で出力し、A/B用に複製して差し替え、共有リンクやPDFで関係者からコメントを集める。得られたフィードバックをプロンプトに落とし込み再生成する、このループを回すのが肝。よく使う説明文はベクトルDBに保存して検索再利用すると差し替えが速くなる。

7ステップ

1. 書き出し形式を決める — まず「Export → PNG(2x) / SVG / HTML / PDF」のどれを出すか決定。印刷ならPDF、実装渡しはSVG/HTMLを推奨。
2. ファイル名ルールを付ける — 例: lp_projectA_v1_heroA.png。バージョン管理が楽になる。
3. 共有リンク作成 — 公開URLかパスワード付き共有を作成。レビュアーに「コメント欄に箇条で3点」と依頼しておく。
4. A/Bを作るため複製 — デザインを複製して「LP_A」「LP_B」にリネーム。ヒーロー画像差し替え、CTA文言を変更。
5. フィードバック取得の型を決める — 例: 「目的/良い点/改善点(3つ)/緊急度(高中低)」で回答を依頼。PDFなら注釈機能、共有リンクならコメント機能を使う。
6. プロンプト修正の具体例 — レビューで「CTAが弱い」とあれば、元プロンプトに追記:

   元: CTAは「無料登録」だけ
   修正: CTA案を3つ出して、コンバージョン率を想定した文言を提案して下さい
   

   これをClaudeに投げて差し替え。
7. スニペットをベクトルDBで再利用 — よく使う説明文をJSONで保存し検索可能にする例:

   {"id":"pricing-blurb-1","text":"月額プランは初月無料、解約はいつでも可能です。"}
   # 後で "無料 解約" で検索して再利用
   

まとめ：まずは1ファイルをPNGでエクスポートして共有リンクを投げ、1回フィードバックをもらうこと。反応をプロンプトに落とし込んで再生成する、この循環を始めてみてください。

まとめ

テンプレートとプロンプトでまず試作を作り、画像差し替えとAI推敲で短時間に品質を上げるのが王道です。ポイントはテンプレ選び→プロンプト設計→ビジュアル差替え→AIで文言整形のサイクルを回すこと。最初は完璧を目指さず、実際の一件で繰り返して改善しましょう。まずは手元の一件を選び、セクション①のフォーマット選択から始めてください。