目次を開く
- 1.Claude Design とは？（Research Preview 前提で読む）
- 2.始めるための条件：プランとブラウザ
- 3.Claude Design を開く：サイドバーの「Design」
- 4.ホーム画面の見方：Designs / Examples / Design systems
- 5.最初の1枚を作る：Examples から始めるのが最短
- 6.自分で作る：プロジェクト種類の選び方と作成フロー
- 7.編集画面の使い方：チャット・Design Files・Canvas
- 8.デザインシステム：ブランド統一のための任意設定
- 9.エクスポート：PDF / PPTX / Canva / HTML / ZIP
- 10.つまずきポイントとQ&A
- 11.UI は変わる：最新情報の追い方
Claude Design は Anthropic が公開しているAIデザイン生成ツールです。テキストで指示するだけでスライド・プロトタイプ・アニメーション等を自動生成できる、まだ新しいツールです。
この記事は、初めて Claude Design に触る方が「どこをクリックすればいいか分からない」と迷わないように、実画面を見ながら書き起こしたものです。公式のUIを操作してみて初心者がつまずきそうだと感じた箇所—— たとえば「Exportボタンが見当たらない」「Design Files を開いたら真っ白で驚く」「デザインシステム設定画面がエンジニア向けに見える」——を先回りして解説します。
⚠️ 重要：Claude Design は現在「Research Preview」段階です
Claude Design は Anthropic Labs が公開している研究プレビュー版のプロダクトです。機能追加・UI変更・名称変更が高頻度で発生します。本記事は2026年4月24日時点のUIを元に書かれています。画面や操作が記事と一致しない場合は、Claude Design公式画面と当サイトの最新記事を合わせてご確認ください。
Claude Design とは？（Research Preview 前提で読む）
Claude Design は claude.ai の中に組み込まれているAIデザイン生成ツールです。ホーム画面のヘッダーには「Claude Design — Research Preview by Anthropic Labs」 と明記されており、まだ正式リリース前の研究プレビュー段階であることが分かります。
何が作れるのか
プロジェクト作成時に選べる種類は現時点で4つあります。
Prototype
Webサイトやアプリ画面のモック。「Wireframe」と「High fidelity」の2種類から選べる
Slide deck
プレゼン資料・スライド。スピーカーノートの有無を選択可能
From template
テンプレートから開始。現時点では「Animation（タイムラインベースのモーション）」が利用可能
Other
上記に当てはまらない自由な制作物（バナー、ロゴラフ等）
他のAIデザインツールとの違い
ChatGPT の DALL-E が「1枚の画像を生成する」ツールであるのに対し、Claude Design は「複数ページの一貫性のある成果物」や「HTMLコードとして編集可能なデザイン」を出力できる点が特徴です。出力された成果物は単なる画像ではなくHTML/CSS等のコードとして扱われるため、あとから修正や再利用がしやすい構造になっています。
Canva のようなテンプレートベースのツールとは異なり、既存テンプレートに縛られずゼロからAIがレイアウトを考える方式です。自分の要件にぴったり合ったデザインを欲しい場合に向きます。
始めるための条件：プランとブラウザ
必要なプラン
Claude Design は有料プラン（Pro / Max / Team / Enterprise）で利用できます。Free プランでは使えません。
| プラン | 月額目安 | Claude Design |
|---|---|---|
| Free | 0円 | ✗ 利用不可 |
| Pro 最小構成 | $20前後 | ◯ 利用可 |
| Max | $100前後〜 | ◯ 利用可 |
| Team | $25前後／人 | ◯ 利用可 |
| Enterprise | 要問合せ | △ 管理者設定次第 |
価格・プランは変動します
上記は2026年4月時点の目安です。Anthropic の料金体系は頻繁に改定されるため、契約前に必ず公式の料金ページで最新情報を確認してください。
推奨ブラウザ・環境
Chrome / Safari / Firefox / Edge などの主要ブラウザで動作します。Claude Design はPC画面での利用が前提のUIになっており、スマホからでも閲覧はできますが、編集・エクスポート操作はPC（できれば 横幅1280px以上のディスプレイ）がおすすめです。
Claude Design を開く：サイドバーの「Design」
Pro 以上のプランでログイン済みであれば、Claude Design へのアクセスは非常にシンプルです。
方法1：左サイドバーから
claude.ai にログインした画面の左サイドバーに、Designというメニュー項目があります。クリックすると Claude Design のホーム画面に移動します。
方法2：直接URLを開く
claude.ai/designをブラウザのアドレスバーに直接入力しても同じ画面に到達できます。
「Design」が見当たらない場合
Free プランでは「Design」メニュー自体が表示されないか、クリックしてもアクセスできないことがあります。右上のアカウントアイコンから Pro 以上にアップグレードしてください。また、Claude Design は段階的ロールアウトの途中のため、プラン条件を満たしていてもまだ表示されないアカウントが一部存在する可能性があります。
ホーム画面の見方：Designs / Examples / Design systems
Claude Design ホームは、左側にプロジェクト作成パネル、右側にタブ切り替えのメインコンテンツ、という構成です。タブはDesigns・Examples・Design systems の3つあります。
Designs タブ
自分が作ったプロジェクト一覧。「Recent」と「Your designs」で絞り込める。最初は 「Learn about Claude Design」というチュートリアルだけが並んでいる。
Examples タブ
Anthropic が用意した作例ギャラリー。各例に「Use this prompt」ボタンがあり、そのプロンプトから自分のプロジェクトをすぐ開始できる。初心者はまずここから試すのが最短。
Design systems タブ
ブランド色・フォント・ロゴを登録しておくための設定。最初はスキップしてOK（詳細は後述のSection 8）
最初の1枚を作る：Examples から始めるのが最短
ゼロから「何を作ろう？」と考えるより、Examples ギャラリーから気になるものを選んで複製するのが、一番早くClaude Designの感触を掴める方法です。
ホームで「Examples」タブをクリック
タイポグラフィ演出、ポスター、UIモック等の作例が並んでいる
気になる作例をクリック → 右パネルで「Use this prompt」
その作例が使っている実際のプロンプトが表示される
新規プロジェクトとして自分のアカウントにコピーされ、編集画面に入る
あとはチャット欄で修正指示を加えれば自分好みに調整できる
なぜ Examples から始めるのが良いか
白紙状態から指示を書くと、どんな粒度でプロンプトを書けばいいか分からず出力がブレやすいです。Examplesのプロンプトは「AIに効く書き方」のお手本になるので、そこから差分を修正していく方が圧倒的に速く上達します。
自分で作る：プロジェクト種類の選び方と作成フロー
自分の目的が明確なときは、ゼロから新規作成する方が速いです。Claude Design ホームの左パネルで種類を選び、Project name を入力してCreate ボタンを押すだけでプロジェクトが立ち上がります。
種類別の選び方ガイド
- ・スライドを作りたい → Slide deck（必要なら「Use speaker notes」をオン）
- ・Webサイト・アプリのモック → Prototype（まず「High fidelity」でOK）
- ・アニメーション（動画風の演出） → From template → Animation
- ・バナー・ロゴラフなど上記に当てはまらない → Other
迷ったら Slide deck
Slide deck はもっとも出力が安定しており、資料づくりの練習にもなります。営業資料・社内勉強会資料・ピッチデックあたりは Slide deck で始めるのが無難です。
最初のプロンプト例
プロジェクト作成後は編集画面に入り、チャット欄にプロンプトを入力します。最初は「何を・誰向けに・どんなトーンで」を最低限指定するだけで十分です。
例1: 営業資料の表紙（Slide deck）
営業資料の表紙を作ってください。会社名は「ABC株式会社」、サービス名は「クラウド在庫管理」、テーマカラーはネイビーです。シンプルで信頼感のあるデザインにしてください。日本語で作成してください。
例2: サービス紹介LP（Prototype / High fidelity）
中小企業の人事部向けSaaSのランディングページを作ってください。上からHero・特徴3つ・料金・導入事例・CTAの構成。モダンで清潔感のあるデザイン。日本語で作成してください。
例3: セミナー告知バナー（Other）
セミナー告知バナーを作ってください。タイトル「DX推進セミナー 2026」、日時「6月15日（月）14:00〜」、会場「オンライン開催」。16:9の横長、背景はグラデーション。日本語で作成してください。
日本語で作りたいときは明示する
日本語のプロンプトで指示しても、出力テキストが英語になることがあります。プロンプト末尾に日本語で作成してくださいと明記するとほぼ確実に日本語で出力されます。
編集画面の使い方：チャット・Design Files・Canvas
編集画面はここで多くの初心者がつまずきます。ポイントは、プロジェクトを開いた直後の右側は「Canvas（デザインそのもの）」ではなく「Design Files」というファイル一覧が表示される、ということです。
画面の3つの領域
左：チャットパネル
AIとの会話履歴と、下部にプロンプト入力欄（「Describe what you want to create...」）。画像や参考ファイルを添付する「Import」ボタンもここ。
右：Design Files タブ（初期表示）
プロジェクト内のファイル（Folders / Pages / Scripts）一覧。生成されたデザインは「Pages」配下にHTMLファイルとして並ぶ。「まだ何も生成されていないと真っ白に見える」ことがあるので驚かないこと。
右：Canvas（ページを開いた後）
Pages一覧から目的のHTMLページを選んで「Open」をクリックすると、そのページがフルサイズで表示される実際のデザインプレビュー。
Canvas 上部のボタン群
ページを開いた Canvas 画面の右上には複数のボタンが並びます。役割がパッと見で分かりにくいので、初回は以下を参照してください。
| ボタン | 役割 |
|---|---|
| Tweaks | 細かい調整指示のショートカット（配色・間隔など） |
| Comment | デザイン上の特定箇所にコメントを付ける（チーム共有時に便利） |
| Edit | テキストや要素を直接編集するモード |
| Draw | キャンバスに直接手描きマークを入れて、AIへの修正指示に使う |
| Present | プレゼンモード（In this tab / Fullscreen / New tab から選択） |
| Share | 共有リンク発行＆エクスポート（次のSectionで詳述） |
デザインシステム：ブランド統一のための任意設定
ブランドカラーやフォント、ロゴを事前登録しておくと、以降の生成が全てそのブランドに沿ったトーンで出力されます。これが「デザインシステム」機能です。ホーム画面の「Set up design system」ボタン、または「Design systems」タブから設定できます。
初心者は最初はスキップでOK
設定項目は見た目が本格的で「これ全部埋めないとダメ？」と身構えがちですが、すべての項目が任意です。まずは設定せずに1〜2個プロジェクトを試し、ブランド統一が必要になった段階で戻ってきて設定する流れがおすすめです。
設定画面にある項目（すべて任意）
Company name and blurb
会社名・サービス名と、短い紹介文（例：「ファストカジュアルのパスタ店、店内キオスク・モバイルアプリ・Webサイトを持つ」）
Link code on GitHub / Link code from your computer
自社サービスのコードリポジトリを連携するとAIがそれを参考にする（エンジニア向け、一般の方はスキップで問題なし）
Upload a .fig file
Figmaファイル（.fig）をアップロードすると、ブラウザ内でローカル解析されてデザイントークンが抽出される。Figmaを使っている方には強力
Add fonts, logos and assets
フォントファイル、ロゴ画像などを直接アップロード。一般の方はここが一番使いやすい
Any other notes?
自由記述欄。「温かみのあるアースカラーと角丸を使う」「ブランドボイスは遊び心があるがプロ」といったトーンを文章で伝える
エクスポート：PDF / PPTX / Canva / HTML / ZIP
「Export」という独立したボタンは無い
エクスポートは右上の 「Share」ボタンの中に入っています。最初は気づきづらい配置なので要注意。
Canvas 画面右上の Shareボタンをクリックすると、共有リンク設定の下に出力オプションがまとめて表示されます。
| 形式 | こんなときに |
|---|---|
| Export as PDF | 印刷・社内配布・PDF添付 |
| Export as PPTX | PowerPoint/Keynoteで開いて更に編集する |
| Send to Canva | Canva上で仕上げ調整を続ける |
| Export as standalone HTML | そのままWebに埋め込む／ブラウザで開いて見る |
| Download project as .zip | プロジェクト一式をバックアップ／手元で改変したい |
| Handoff to Claude Code | コード開発側に引き継ぐ（エンジニア向け） |
PNGやSVGで書き出したいときは
現時点では直接のPNG/SVGエクスポートは提供されていません。PNGが欲しい場合は「Export as standalone HTML」で出力したファイルをブラウザで開いて画面キャプチャ、または PDFで書き出して画像変換するのが代替策です。今後の機能追加で変わる可能性があります。
つまずきポイントとQ&A
実際に触って「これ分かりにくい…」と感じた箇所をまとめました。詰まったらまずこちらを確認してください。
Q: サイドバーに「Design」が表示されない
まずプランを確認してください（右上アカウントアイコン→設定）。Free では使えません。Pro 以上でも、ロールアウト時期によっては一部アカウントで遅れて表示されることがあります。数日待つか、claude.ai/designに直接アクセスしてみてください。
Q: プロジェクトを開いたが右側が真っ白
右側は初期状態で「Design Files（ファイル一覧）」になっています。Pagesがまだ空ならデザインが生成されていない可能性が高いので、左下のチャット欄にプロンプトを入力して送信してください。既に生成済みなら、Pages配下のHTMLをクリック→「Open」で Canvasを開けます。
Q: Exportボタンが見つからない
独立したExportボタンはありません。Canvas右上のShareボタンを押すと、共有設定の下に PDF / PPTX / Canva / standalone HTML / ZIP / Claude Code ハンドオフの選択肢がまとめて表示されます。
Q: 日本語指示なのに英語で出力される
プロンプト末尾に「日本語で作成してください」を追記すると解消します。明示指定が無いと、内容の性質によっては英語で生成されることがあります。
Q: デザインシステム設定が難しそう（GitHub連携とか）
すべての項目が任意です。最初は設定を一切せずに使い始めて、慣れてから必要な項目だけ埋める流れがおすすめです。GitHub連携や.fig連携はエンジニア・デザイナー向けの上級機能で、通常の資料作成なら使わなくて問題ありません。
Q: PNG / SVG で書き出したい
現時点では直接のPNG/SVG書き出しは無いため、「Export as standalone HTML」で出力後にブラウザのスクリーンショット機能を使うか、PDF経由で変換するのが回避策です。
Q: 生成が遅い・失敗する
Research Preview段階のため、時間帯によっては生成が混雑で遅くなる・エラーになることがあります。数分待って再試行、ブラウザキャッシュをクリア、別ブラウザで試す、あたりが定石です。繰り返し失敗する場合はプロンプトを短くしてみてください。
UI は変わる：最新情報の追い方
冒頭でも触れた通り、Claude Design は Research Preview 段階のため、本記事の画面と実際のUIが食い違う日がいずれ必ず来ます。その時に頼れる情報源を挙げておきます。
- ✓公式ドキュメント: Claude Design ホーム左下の「Docs」リンク
- ✓ホームの「Learn about Claude Design」Quick tutorial：最新UIに追従したチュートリアルがここに用意される
- ✓Anthropic 公式ブログ・リリースノート：大きな変更は公式発信される
- ✓当サイトのAI活用カテゴリ：UI変更が大きいときは本記事の改訂もしくは新記事で追従します
UIの細部が変わっても、「どこからプロジェクトを作る／ファイル＋Canvasの二層構造／Share内にExport」という大きな骨格は当面維持されると見ています。細部が違ってもこの骨格を頼りに探せば、大抵の機能は再発見できるはずです。
AIで資料作成を、もっと速く。
スラサクは、自社テンプレートを読み込んでAIがスライドを即時生成するサービスです。
Claude Designで作ったアイデアを、そのまま社内フォーマットに落とし込めます。
無料で試してみる →