カテゴリ: 学習・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通りの方法を組み合わせます：
① チャットで大きく変える
左のチャット欄にそのまま指示します。「全体的にもう少し明るいトーンに」「ヘッダーのレイアウトを変えて」のような構造的・全体的な変更はここが向いています。
② インラインコメントでピンポイントに変える
キャンバス上の要素を直接クリックすると、そこにコメント欄が出現します。全体を巻き込まずに「ここだけ直したい」というときに威力を発揮します（私だけじゃないと信じています）。
③ スライダーで微調整する
Claudeが特定のデザインを生成すると、キャンバス上に専用のスライダーが自動で作られることがあります。「なんとなくここだけずらしたい」という感覚的な調整に向いています。
Step 5: エクスポートする
右上の「Export」ボタンから：PDF・PPTX・Canva・ZIP・スタンドアロンHTML・Claude Codeハンドオフの6形式で書き出せます。
デザインシステムを設定する（最初の1回だけ・任意）
チャット欄の「Design System」ボタンをクリックすると「Set up your design system」ページが開きます。ブランドカラー・フォント・スタイルを覚えさせる設定画面です。「うちのブランドカラーって何色でしたっけ」事件が永遠に起きなくなります（起きてたのは私だけかもしれませんが）。
実際に打ったプロンプト
「テーマ・対象・カラーイメージ」の3つを最初から伝えると修正回数がぐっと減ります——これがコツです。
最初で詰まった3つ
- 「どこで使えるの？」問題: 入り口は claude.ai/design。通常チャット画面とは別URLです（5分迷いました）。
- 「プロンプトが短すぎると薄いのが出てくる」問題: 「対象・内容・トーン」の3点を伝えてから頼みましょう。
- 「Enterpriseの場合は管理者設定が必要」問題: Organization settings → Capabilities から有効化が必要です。
で、結局どうなの
Claude Designは「とりあえず形にする」ための強力な道具です。
実際に試してわかったのは、「何を作るか」によって向き・不向きがかなりはっきりしているということ。
プレゼンスライド・ワンページャー・レポート資料・ランディングページといった「文字と構造が中心のデザイン」は本当によく仕上がります。「これで作ったの？」というクオリティが、プロンプト数回で出てきます。
一方で、ゲーム素材・イラスト・アイコンセット・映像といった「画像や映像そのものを生成したい」用途には向いていません。そこは画像生成AIや動画AIに任せる仕事で、Claude Designの守備範囲の外です（最初それをやろうとして「あれ？」となったのは私です）。
現時点での私の結論は——「画像・映像よりプレゼンなどの制作向け」。ここさえ最初からわかっていれば、余計な試行錯誤が省けます。
ただしこれはリサーチプレビュー段階の話で、今後の機能拡張に期待しています。画像・映像系の生成がうまくいったという方がいれば、ぜひコメントで教えてください。
リリース発表の数時間以内にFigmaの株が爄7%下落したとのことで、業界的にはかなりざわついています。教育系スタートアップのBrilliantによると、競合ツール〇20回以上プロンプトが必要だったところ、Claude Designでは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公式サイトをご参照ください。
本記事の内容は筆者個人の学習過程であり、いかなる保証もするものではありません。
コメントを残す