カテゴリー: 学習・Tips

カテゴリ: 学習・Tips　公開日: 2026-04-20

このブログについて： 開発経験ゼロの私（セルシー）が Claude を毎日1つ試して記録する学習ブログ「zeroCC」です。

---

先に言っておく

デザイン、怖くないですか。私は怖い。

Canvaを開くたびに「このフォントで合ってる？」「この余白、多すぎ？ 少なすぎ？」と30分以上悩む側の人間です。プレゼン資料を作るとき、レイアウト調整に溶けていく時間の量、両手で数えたら足りないくらいある（そしてそれはデザインの腕前とは無関係だということにそろそろ気づいている）。

そんな私の前に2026年4月17日、颯爽と登場したのが Claude Design。Anthropicが「これ、どうぞ」と差し出してきた、プロンプトを入力するだけでデザインが出てくるやつです。

「これ知ってたら昨日の2時間が返ってきた」案件です。もう返ってきませんが（合掌）。

ちなみに結論だけ先に言うと、現時点で私が試した限りでは、プレゼン・資料・ワンページャーには強い。ゲーム素材・イラスト・映像には向いていない。この一文を最初に読んでいたら、私の試行錯誤の時間もいくらか返ってきたと思います——本当に。

---

結論マップ（ビフォー／アフター）

改善前（Before）	改善後（After）
Canvaを開いて途方に暮れる	プロンプトを入力するだけで第一案が出る
フォント・色・余白の調整に1時間	「もう少し余白を増やして」と言うだけ
デザインの知識がないと怖くて触れない	知識ゼロでも動く（それが私の活路）

---

要するに何ができるか

Claude Designは、テキスト・画像・ドキュメントを入力すると、デザイン・プロトタイプ・スライド・ワンページャーなどを作ってくれるAIツールです。

Anthropicが「Anthropic Labs」ブランドで出したリサーチプレビュー版で、Claude Pro・Max・Team・Enterpriseのサブスクライバーが対象です（無料プランの方はもう少し待ちましょう——私はMax 1プランなので今回は先に行かせてもらいます）。

エンジンは Claude Opus 4.7（＝Anthropicが同タイミングで発表した最新のビジョンモデル）。「Claude Opus 4.7という本質の上に、Claude Designというインターフェースが乗っている」構造です——本質と表象の関係、とでも言いましょうか。少し哲学めいてきたので先に進みます。

完成したら、PDF・PPTX・Canva・ZIP・スタンドアロンHTMLのいずれかでエクスポートできます。さらに、エンジニアがいる環境ならClaude Codeにそのままハンドオフ（引き渡し）もできます。

「Canvaに送れる」と書いておいてなんですが、「Canvaのかわりになれるツール」がCanvaに送れるの、ちょっとシュールな関係ですよね（業界の仲良し案件）。

---

画面の構造から理解する

Claude Designは「普通のClaude画面」とは別物なので、まずURLから別です（claude.ai/design）。この入り口だけ最初に覚えておくと5分の迷子が防げます——私は5分迷いました（完全に自業自得）。

Step 1: プロジェクトを作る

ログインして claude.ai/design を開くと、プロジェクト一覧またはそのまま作業画面が表示されます。「New project」をクリックすると、まずこの2択を迫られます：

• Wireframe（ワイヤーフレーム）: 色もフォントも最小限で、「レイアウトと構成だけ確認したい」とき用。「まずどこに何を置くか」の設計図です
• High Fidelity（ハイフィデリティ）: 色・フォント・質感まで含んだ本格的なデザイン。「そのまま使える完成物に近いものを作りたい」とき用

どちらかを選んでプロジェクト名を入力し、「Create」を押すと次の画面に進みます。

---

Step 2: コンテキスト（参考資料）を渡す（任意）

チャット欄には最初から4つのボタンが並んでいます：

• Design System: デザインシステムを設定・読み込む（後述）
• Add screenshot: スクリーンショットや画像を追加する
• Attach codebase: コードベースを添付する
• Drag in a Figma file: Figmaファイルを直接ドロップする

さらにチャット欄の下部に「DROP FILES HERE」エリアがあり、画像・ドキュメント・Figmaリンク・フォルダをまとめてドロップできます。

💡 「Design System」ボタンから「Set up your design system」ページに入れます（後のセクションで詳しく説明します）。

もちろん何も渡さずにプロンプトだけで始めることもできます。「素材ゼロから気軽に試す」でも十分動きます。

---

Step 2.5: デザインモードを選ぶ

チャット入力欄の左下に2つのモード切り替えがあります：

• Hi-fi design: 色・フォント・質感まで含んだ本格的なデザイン（通常はこちら）
• Interactive prototype: クリックなどのインタラクションが動くプロトタイプ

これは後から変更もできます。「まず形を見たい」なら Hi-fi design で始めるのが無難です。

---

Step 3: プロンプトを入力する → 右に現れる

チャット欄にやりたいことを書いて送ると、右のキャンバスにデザインがリアルタイムで生成されます。

最初の一手はざっくりでOKです。「週次レポートのワンページャー、青系で」くらいの粒度でも形は出てきます。「プロンプトが短すぎると薄いのが出てくる」問題は実際あるので、後の「詰まったポイント」欄で対策を書きます。

---

Step 4: 修正する（3通りの方法）

最初の出力がそのまま使えることはまずないと思っておくと気が楽です。修正は3通りの方法を組み合わせます：

① チャットで大きく変える

左のチャット欄にそのまま指示します。「全体的にもう少し明るいトーンに」「ヘッダーのレイアウトを変えて」のような構造的・全体的な変更はここが向いています。

全体的に余白を増やして、もう少し「読みやすい」感じにしてほしい。
あとフォントサイズ、見出しと本文の差を大きくして。

② インラインコメントでピンポイントに変える

これが個人的に一番「わかった」感があった機能です。

キャンバス上の要素を直接クリックすると、そこにコメント欄が出現します。「このボタンの色をブランドカラーに合わせて」「ここのテキスト、もう少し小さく」と書いてEnterを押すと、その要素だけ変わります。

全体を巻き込まずに「ここだけ直したい」というときに威力を発揮します。「一箇所直したら全体が崩れた」というCanvaあるある体験を回避できます（私だけじゃないと信じています）。

💡 メモ: インラインコメントが消えてしまう場合、コメント内容をチャットに貼り付けて送ると同じ効果が得られます。

③ スライダーで微調整する

Claudeが特定のデザインを生成すると、キャンバス上に専用のスライダーが自動で作られることがあります。パディング（余白）・カラーの濃さ・フォントサイズなど、数値で動かせる要素を直感的に操作できます。

「なんとなくここだけずらしたい」という感覚的な調整に向いています。スライダーが出る出ないはClaudeが判断するので、いつでも出るわけではありません——その辺のムラも含めてリサーチプレビューです。

---

Step 5: エクスポートする

右上の「Export」ボタンから書き出します。

形式	使いどき
PDF	印刷・共有用
PPTX	PowerPoint形式で持ち出したいとき
Canva	Canvaでさらに編集したいとき
ZIP	HTMLごとまとめてダウンロード
スタンドアロンHTML	そのままブラウザで動くページとして
Claude Codeにハンドオフ	エンジニアに実装を引き渡すとき

---

デザインシステムを設定する（最初の1回だけ・任意）

「デザインシステム」って言葉、なんか難しそうに聞こえますよね。私も最初「別に個人で使うしいいか」と読み飛ばしかけました。

でも要するに「あなたのブランドを覚えさせる設定画面」です。ここに情報を入れておくと、以降のすべてのプロジェクトで自動的に会社のブランドカラー・フォント・スタイルが適用されます。「うちのブランドカラーって何色でしたっけ」事件が永遠に起きなくなります（起きてたのは私だけかもしれませんが）。

チャット欄の「Design System」ボタンをクリックすると、「Set up your design system」というページが開きます。

---

各フィールドの説明

Company name and blurb（会社名とひとこと説明）

最上部にあるテキスト入力欄です。

「会社名：何をしている会社か」をひとこと書きます。Claudeはこれをもとに、デザインのトーンや用途を判断します。

例の入力テキスト（画面上の例示）：
Mission Impastabowl: fast-casual pasta restaurant
with in-store touchscreen kiosk, mobile app and website

個人ブログなら「セルシー: 非エンジニアによるClaudeの学習ブログ、読みやすいカジュアルなデザイン」くらいの感じで書けばOKです。

---

その下の 「Provide examples of your design system and products」 というセクションは全部任意（all optional）です。1つだけ入れても、全部入れても、何も入れなくても先に進めます。入れれば入れるほど精度が上がる、という仕組みです。

Link code on GitHub

GitHubのリポジトリURL（https://github.com/owner/repo の形式）を貼り付けて「Add」を押します。

ReactなどのUIコンポーネントライブラリを持っているチームが使う項目です。「そもそもGitHubって何？」という場合は、ここは完全にスキップして問題ありません——私もスキップしました（きっぱり）。

Link code from your computer

フォルダをドラッグ＆ドロップするか「browse」からフォルダを選択します。

注記に「This doesn’t upload the whole codebase; Claude will copy selected files.」とあります。大きなプロジェクトの場合は「frontend-focused subfolder（フロントエンド関連のサブフォルダ）を渡すことを推奨」との説明があります。コードがないなら飛ばして大丈夫です。

Upload a .fig file

Figmaのデザインファイル（.fig形式）をドロップまたはブラウズでアップロードします。

ここで重要なのは「Parsed locally in your browser — never uploaded.（ブラウザ内でローカル処理され、Anthropicのサーバーにはアップロードされない）」という記載。Figmaのデータをクラウドに渡したくない場合でも使えます。.figファイルの取り出し方は画面内のリンクで案内されています。

Add fonts, logos and assets

ロゴ画像・フォントファイル・ブランドアセットをドラッグ＆ドロップまたはブラウズで追加します。

「うちのロゴPNGとブランドカラーのPDF1枚」でも十分です。Claudeはここから色・フォント・スタイルを読み取り、デザインシステムを自動生成します。

Any other notes?（その他メモ）

自由記述欄です。フォームでは伝えきれない補足を書く場所。

例の入力テキスト（画面上の例示）：
We use a warm, earthy color palette with rounded corners.
Our brand voice is playful but professional...

「角を丸くしたい」「暖色系で統一したい」「フォーマルすぎず、くだけすぎず」のような言葉でしか伝えられないニュアンスはここに書きます。

---

すべて入力したら右上の「Continue to generation →」を押すと、Claudeがデザインシステムを生成して以降のプロジェクトに自動適用します。

---

実際に打ったプロンプト

以下のワンページャーを作ってください：

テーマ：「週次レポートのポイントまとめ」
対象：上司への共有用（IT知識なし）
構成：
  - タイトルと1〜2行の概要
  - 今週のトピック3つ（アイコン付き箇条書き）
  - 来週の予定（シンプルなリスト）
  - 問い合わせ先

カラー：落ち着いた青系
フォント：読みやすいもの、1種類で統一

💡 ポイント： 「対象」「構成」「カラーイメージ」の3つを最初から伝えると修正回数がぐっと減ります。最初から全部言う、これがコツです（人間相手でも同じでは……と思いますが、それはまた別の話）。

---

最初で詰まった3つ

• 「どこで使えるの？」問題: 入り口は claude.ai/design です。Claudeの通常チャット画面とは別のURLになっているので、チャット画面をいくら探しても見つかりません。私は見つかりませんでした（5分）。

• 「プロンプトが短すぎると薄いのが出てくる」問題: 「プレゼン作って」だけ入力すると、当然ながら非常にシンプルなものが出てきます。「対象は誰か」「何を伝えたいか」「トーンは？」の3点をある程度伝えてから頼むと、やり直しが減ります。ここだけは少し丁寧に書く価値があります。

• 「Enterpriseの場合は管理者設定が必要」問題: Enterpriseプランは、デフォルトでClaude Designが無効になっていることがあります。Organization settings → Capabilities から管理者に有効化してもらう必要があります。私はEnterpriseではないので直接は体験していないのですが、ドキュメントを読んでいて「これは絶対ひっかかる人いるな」と思ったので念のためメモしておきます。

---

で、結局どうなの

Claude Designは「デザイン作業を完全に置き換える魔法」ではなく、「とりあえず形にする」ための強力な道具です。

実際に試してわかったのは、「何を作るか」によって向き・不向きがかなりはっきりしているということ。

プレゼンスライド・ワンページャー・レポート資料・ランディングページといった「文字と構造が中心のデザイン」は本当によく仕上がります。「これで作ったの？」というクオリティが、プロンプト数回で出てきます。

一方で、ゲーム素材・イラスト・アイコンセット・映像といった「画像や映像そのものを生成したい」用途には向いていません。そこは画像生成AIや動画AIに任せる仕事で、Claude Designの守備範囲の外です（最初それをやろうとして「あれ？」となったのは私です）。

現時点での私の結論は——「画像・映像よりプレゼンなどの制作向け」。ここさえ最初からわかっていれば、余計な試行錯誤が省けます。

ただしこれはリサーチプレビュー段階の話で、今後の機能拡張に期待しています。画像・映像系の生成がうまくいったという方がいれば、ぜひコメントで教えてください。

リリース発表の数時間以内にFigmaの株が約7%下落したとのことで、業界的にはかなりざわついています。「AnthropicはAIラボからフルスタック製品会社へ移行している」という声もあちこちで見かけました（Figma側のコメントは確認できていませんが、複雑な気持ちだろうとは思います）。

教育系スタートアップのBrilliantによると、競合ツールで複雑なページを再現しようとすると20回以上プロンプトが必要だったところ、Claude Designでは2回で済んだとのこと。20対2、です。……この数字を見て「私の一昨日の資料作業はいったい何だったのか」と遠い目になりましたが、まあ、今日から使えばいい話です。

---

まだリサーチプレビューで今後機能が変わる可能性はありますが、今のうちに触っておくと後々きっと役立つはず。

百聞は一見にしかず、百見は一触れにしかず——というわけで、まず claude.ai/design を開いてみてください。昨日の2時間は返ってきませんが、明日の2時間は守れるかもしれません。

---

関連リンク

• Anthropic 公式ブログ — Introducing Claude Design
• Get started with Claude Design（公式ヘルプ）
• Set up your design system（公式ヘルプ）
• Claude Design を使ってみる

---

この記事について

本記事はAI支援を経て作成しているため、内容に誤りが含まれる可能性があります。実行前に公式ドキュメントをご確認ください。 情報は2026-04-20時点でのものです。Claudeの機能は頻繁に更新されるため、最新情報はAnthropic公式サイトをご参照ください。 本記事の内容は筆者個人の学習過程であり、いかなる保証もするものではありません。