生成できる成果物の種類 | Claude活用講座
Chapter 3 — Lesson 2
生成できる成果物の種類
🕐 約8分 📚 知識型 🔖 成果物一覧
このレッスンのゴール 目安 8分

Artifacts で生成できる4種類の成果物を把握し、どんなプロンプトを使えばよいか判断できるようになる。

このレッスンの内容
  1. 4種類の成果物カタログ
  2. デザイナー向け活用マップ
  3. Artifactsを呼び出すプロンプトの書き方

4種類の成果物カタログ

デザイナーに特におすすめ
🌐
HTML / CSS
Webページがそのままプレビューできる状態で生成される。LPの構成案、バナーレイアウト、ランディングページのたたき台など。
→ LP構成案・クライアント提案用たたき台
デザイナーに特におすすめ
📄
Markdown
見出し・箇条書き・表などで整形されたドキュメントが生成される。提案書・要件定義書・ミーティングメモのドラフトに最適。
→ 提案書ドラフト・仕様書・要件整理
🎨
SVG
ベクター形式の図解・アイコン・シンプルなイラストを生成できる。デザインのラフイメージを言語で表現するのが難しいときに活躍。
→ アイコン下書き・フロー図・シンプルな図解
⚛️
React コンポーネント
インタラクティブなUIコンポーネントを生成・プレビューできる。コーダーと連携して実装イメージを共有したいときに活躍。
→ UIの動作確認・エンジニアとのイメージ共有

デザイナー向け活用マップ

業務シーン 使う成果物 依頼の例
クライアントへのLP初期提案 HTML / CSS 「〇〇サービスのLP構成案をHTMLで作って」
提案書・見積書のドラフト Markdown 「Webデザイン提案書のドラフトをMarkdownで」
業務フローの整理・可視化 SVG 「このフローをSVGの図解で表現して」
コーダーへのUI仕様説明 React 「このモーダルのOpen/Closeの挙動をReactで実装して」

Artifactsを呼び出すプロンプトの書き方

Artifacts を出力させるには、「何の形式で作るか」を明示するだけで十分です。

プロンプト例
HTML を生成させる
「フリーランスのWebデザイナー向けポートフォリオサイトのLP構成案をHTMLで作ってください。ヒーロー・サービス紹介・実績・CTA の4セクション構成で。」
Markdown を生成させる
「美容室のInstagramリール制作の提案書ドラフトをMarkdown形式で作ってください。背景・課題・提案内容・費用感・スケジュール の構成で。」
SVG を生成させる
「LP制作の3ステップフロー（ヒアリング→デザイン→納品）をSVGの図解でシンプルに表現して。横並びのフロー形式で。」
確認クイズ

クライアントへのLP初期提案のたたき台を Artifacts で作る場合、最も適切な成果物の種類はどれですか？

正解！ LP の構成案はHTML/CSS が最適です。Webページとしてそのままプレビューでき、クライアントにビジュアルで方向性を伝えやすい形式です。
LP の初期提案には HTML/CSS が最適です。Webページとしてプレビューできるので、クライアントが「どんな見た目になるか」をイメージしやすくなります。
このレッスンのまとめ
  • Artifacts で生成できる主な成果物は「HTML/CSS」「Markdown」「SVG」「React」の4種類
  • デザイナーには HTML/CSS（LP提案）と Markdown（提案書）が特に役立つ
  • プロンプトには「〜をHTMLで」「〜をMarkdownで」と形式を明示するだけでOK
  • 複雑な指示は不要。シンプルに「何を・どの形式で」を書けばArtifactsが起動する
理解度チェック 2項目で自分の理解を確認しよう
4種類の成果物とそれぞれの活用シーンを言える
①HTML/CSS：LPの構成案・クライアント提案用たたき台。②Markdown：提案書・要件定義書・ミーティングメモ。③SVG：フロー図・アイコン下書き・シンプルな図解。④React：インタラクティブなUIの動作確認・コーダーとのイメージ共有。
Artifacts を呼び出すプロンプトの書き方を説明できる
プロンプトの中に「〇〇をHTMLで作って」「〜をMarkdown形式で」「〜をSVGで表現して」のように形式を明示する言葉を含めるだけで Artifacts が起動する。複雑な命令は不要で、「何を・どの形式で」の2点を押さえればOK。