参考資料・ブランドを与える
言葉だけで説明するより、「お手本」を1枚渡すほうが、仕上がりは何倍も良くなります。この章では、Claude Design にファイルや画像を渡す方法と、色・文字の「決まりごと」を覚えさせて、いつも同じ雰囲気で作ってもらう方法を学びます。
- どんな種類のファイルを渡せるか、上限はいくつかを言える
- 画像や PDF を渡して「この雰囲気で」と頼める
- デザインシステム（ブランドの決まりごと集）が何かを説明できる
- 手持ちの資料やロゴから、自分のブランドを覚えさせる流れが分かる
まず結論：「参考資料を渡す」だけで仕上がりが激変します
ここまでの章では、言葉で指示を書く方法を練習してきました。しかし、デザインの「雰囲気」を言葉で伝えるのは、実はいちばん難しい部分です。「落ち着いた感じで」「うちの会社らしく」と書いても、Claude はあなたの頭の中を見られません。
そこで効くのが、参考資料です。実践記事でも「参考資料（画像・PDF）を先に渡すと精度が大きく上がる」と繰り返し指摘されています。好きな Web サイトの画面写真、過去に作ったスライド、会社のロゴ。そうした「お手本」を1つ渡すだけで、Claude は色・文字・余白の取り方を読み取って、それに寄せたデザインを最初から出してくれます。
雰囲気の説明に長い文章を書くくらいなら、気に入っているデザインの画像を1枚添えるほうが早くて確実です。「説明が苦手」と感じている人ほど、この方法が向いています。
渡せるファイルの種類と上限
Claude Design に渡せるファイルの種類は、次の表のとおりです。ふだん仕事で使うファイルは、ほぼそのまま渡せると考えて大丈夫です。
| 種類 | 形式 | 主な使いみち・注意点 |
|---|---|---|
| 画像 | JPEG / PNG / GIF / WebP | お手本のデザイン、ロゴ、画面写真（スクリーンショット）。雰囲気を伝える主役です |
| 既存のパンフレット・資料。色使いやレイアウトの参考に | ||
| スライド | PPTX（PowerPoint） | 過去のプレゼン資料を「うちの定番の型」として渡せます |
| 表計算 | XLSX（Excel） | 中のデータをグラフや図表にしてもらう用 |
| 文書 | DOCX（Word） | 文字だけ読まれます。中に貼った画像は読まれない点に注意 |
| テキスト類 | TXT / CSV / MD | 原稿・データ・メモをそのまま渡せます |
| コード置き場 | GitHub リポジトリ（プログラムの保管場所） | プログラムからデザインの決まりごとを取り込む用。第9章（Claude Code との連携）で登場します |
1つのファイルは最大 30MB、1つのチャットで渡せるのは最大 20 ファイルまでです。写真をたくさん渡したいときは、本当に参考になる数枚に絞るほうが、Claude も迷わず良い結果を出せます。
DOCX（Word）は文章だけが読み取られます。文書の中に貼り付けた写真や図は無視されます。画像を参考にしてほしいときは、その画像だけを JPEG や PNG で別に渡してください。
渡し方は3通り
ファイルの渡し方はとても簡単です。次の3つのうち、やりやすいものを使ってください。
- ドラッグ＆ドロップ
パソコンのフォルダからファイルをつまんで、チャット欄の上まで運んで指を離します。いちばん手軽な方法です。 - ファイル選択
チャット欄から、ファイルを選ぶ画面を開いて選択します（画面の案内に従ってください）。ドラッグ操作が苦手な場合はこちらで。 - URL 貼り付け
Web ページのアドレス（URL）をチャットに貼ると、そのページの内容を取り込んでくれます。「このサイトを参考に」と伝えたいときに便利です。
図：画像をドラッグ＆ドロップで添付し、「この雰囲気で」と頼んだところ
「この雰囲気で」の頼み方 実例集
ファイルを渡したら、それをどう使ってほしいかを一言添えます。よく使う言い回しを挙げておきます。そのまま真似してください。
- 画像を渡して →「この画像の雰囲気で、イベント案内のページを作ってください」
- PDF を渡して →「この PDF の色使いに合わせて、新商品のチラシを作ってください」
- スライドを渡して →「この PPTX と同じ構成・同じトーンで、来月の報告資料を作ってください」
- ロゴ画像を渡して →「このロゴの色に合わせた配色で、名刺風のカードを作ってください」
添付した画像の雰囲気（色使い・文字の感じ・余白の取り方）を参考にして、 セミナー案内のページを1枚作ってください。 内容はこちらです。 ・タイトル：はじめての資産づくり入門 ・日時：8月20日（木）14:00〜15:30 ・場所：オンライン開催 ・参加費：無料
ポイントは、「画像のどこを参考にしてほしいか」（色・文字・余白など）と、「中身の情報」（日時・場所など）を分けて書くことです。見た目はお手本から、中身はあなたの指示から、と役割がはっきりします。
デザインシステム＝ブランドの決まりごと集
毎回ファイルを渡すのも良いのですが、「いつも同じ色・同じ文字・同じ雰囲気で作ってほしい」なら、もっと良い方法があります。それがデザインシステムです。
デザインシステムとは、色・文字（フォント）・部品（ボタンや見出しの形）・余白のルールをまとめた「ブランドの決まりごと集」のことです。会社や個人の「らしさ」をレシピ帳のように書き留めたもの、と考えてください。
Claude Design にこれを一度覚えさせると、以後の新しいプロジェクトに自動で適用されます。毎回「色は藍色系で、文字はこのフォントで…」と書かなくても、最初から「いつものうちの雰囲気」で出てくるようになります。
何から取り込めるか
決まりごと集は、ゼロから手書きする必要はありません。手持ちの資料から Claude が自動で読み取ってくれます。取り込み元として使えるのは次のものです。
- 既存資料：過去のスライド（PPTX）や PDF、画面写真
- ロゴ・フォント仕様書：ロゴ画像や、使う書体を定めた資料
- デザインファイル：Figma（デザイン専用ツール）などから書き出したファイル
- GitHub リポジトリ（プログラムの保管場所）：Web サイトのプログラムから直接読み取る方法。第9章で扱います
渡すと、Claude が色・文字づかい・部品・レイアウトの型を自動で抽出します。ただし、特に GitHub リポジトリなど取り込み元が大きい場合、抽出には 12〜22分ほどかかることがあります。始めたら、お茶でも飲みながら気長に待ってください。途中で失敗したわけではありません。
図：手持ちの資料から「ブランドの決まりごと集」が自動で作られるイメージ
デザインシステムの設定画面には Published（公開）という切り替えスイッチがあります。これはオンにするとチーム全体に決まりごと集を共有できる、Team・Enterprise プラン向けの機能です。一人で使っている分には触らなくて大丈夫です。
ふだん「このサイト、きれいだな」と思っている Web サイトを1つ思い浮かべてください。その画面写真（スクリーンショット）を撮って Claude Design に渡し、その雰囲気でお知らせカードを1枚作ってもらいます。
- 画面写真を撮る
お手本にしたい Web サイトを開き、キーボードの Windows キー + Shift + S を押して、画面の一部を切り取って保存します。 - Claude Design に渡す
保存した画像を、チャット欄にドラッグ＆ドロップします。 - 指示を書く
下のプロンプトを貼り付けて送ります。
添付した画面写真の雰囲気（色使い・文字の感じ・余白の取り方）で、 お知らせカードを1枚作ってください。 ・見出し：夏季休業のお知らせ ・本文：8月13日（木）から8月16日（日）まで、お休みをいただきます。 ・下に「詳しくはこちら」というボタンを1つ
できあがったら、お手本の画像と見比べてください。色の系統や余白のゆったり感が寄っていれば成功です。ずれていたら、第3章（修正の4つの方法）の要領で「もっとお手本の色に近づけて」と追加で頼みましょう。
練習問題
手元にある PDF かスライド（PPTX）を1つ選んで Claude Design に渡し、「この雰囲気で、新しい資料の表紙を1枚」と頼んでみてください。表紙のタイトルは自由です（例：「2026年度 活動報告」）。
ヒントを見る
ファイルはドラッグ＆ドロップで渡せます。指示には「色使いとレイアウトを参考に」のように、参考にしてほしい点を書き添えると、狙いどおりになりやすいです。表紙に入れる文字（タイトル・日付・名前）も忘れずに指定しましょう。
模範解答を見る
添付した資料の雰囲気（色使い・文字の感じ・レイアウト）に合わせて、 新しい資料の表紙を1枚作ってください。 ・タイトル：2026年度 活動報告 ・サブタイトル：上半期のまとめ ・日付：2026年7月 ・作成者名：藤川
元の資料と表紙を並べて見比べ、「同じシリーズに見えるか」を確認できれば合格です。
ロゴ画像（会社のロゴ、または好きなマークの画像）を1枚用意して渡し、「この色に合わせて」名刺風のカードを作ってもらってください。
ヒントを見る
ロゴは JPEG か PNG で渡します。名刺に載せる情報（名前・肩書き・連絡先）を箇条書きで指定しましょう。練習なので、連絡先はダミー（例：example@example.com）で構いません。本物の個人情報は、共有の予定がないか確認してから使ってください。
模範解答を見る
添付したロゴ画像の色に合わせた配色で、名刺風のカードを1枚作ってください。 ・ロゴを左上に配置 ・名前：藤川 太郎 ・肩書き：代表 ・メール：example@example.com ・全体はシンプルで、余白を多めに
ロゴの色とカードの配色がなじんでいれば成功です。色がずれていたら「ロゴの青をメインカラーにして」のように、色を名指しで直してもらいましょう。
次の項目に自信をもって「はい」と言えたら、この章は合格です。