2026年6月18日、Claude Designが大幅アップデートされました。
機能が増えて、画面も変わっています。
私も触りながら確認したので、画面のどこを押せばいいかを順番に書きます。
この記事は「一緒に触りながら覚える」用です。
実際に\[claude.ai/design](//claude.ai/design)\を開きながら読んでください。
無料で使えますか？
使えません。
Claude Designは有料プラン限定です。
プラン
月額
Claude Design
Free
$0
✗ 使えない
Pro
$20
✓ 使える
Max 5x
$100
✓ 使える
Max 20x
$200
✓ 使える
Team
$25/人
✓ 使える
Proプラン($20/月)があれば使えます。追加料金はかかりません。
Claude Designとは
日本語でざっくり指示するだけで、スライド・LP・アプリの試作品・提案書などを作れるAIツールです。
Anthropicが2026年4月17日に公開しました。今回のアップデートで機能が大きく増えています。
出力は「ライブHTML」です。静止画ではなく、クリックできる動くデザインが生成されます。
画面の見方
\[claude.ai/design](//claude.ai/design)\を開くと、この画面が表示されます。
上のタブ
タブ
意味
Recent
最近作ったデザインの一覧
Your designs
自分の全デザイン
Design systems
ブランドカラー・フォントの管理(
今回のアップデート
)
Examples
サンプルデザイン集
「Make something new」エリア
ここで作るものの種類を選びます。7枚のカードが並んでいます。
カード
日本語で言うと
① Start with a file
既存ファイルをデザインに変換
② Slides
スライド・プレゼン資料
③ Product prototype
クリックできる動く試作品
④ Product wireframe
画面の骨格設計
⑤ Document
LP・提案書・ドキュメント
⑥ Animation
アニメーション・動くコンテンツ
⑦ Blank canvas
白紙から自由に作る
下の「Designs」には、過去に作ったデザインが並んでいます。
Claudeから追加質問が来た時は（全カード共通）
カードを選んでプロンプトを送信した後、情報が足りないと判断するとClaudeが画面右側に追加の質問を出してくることがあります。
プロンプトの内容によって質問の内容も変わります。
必須項目と任意項目があります。
項目に答えて「Continue」を押せば生成が始まります。
Slides(スライド・プレゼン資料)の作り方
セミナー資料・説明会スライド・ピッチデックはここから作ります。
Step 1. ホーム画面で「Slides」をクリック
「Presentations & pitch decks」と書いてあるカードをクリックします。
Step 2. 作りたいスライドの内容を入力する
クリックするとこの画面になります。
左のサイドバーに「What's the presentation about?」と表示されます。
3つの入力方法から選べます
- Upload a doc WordやPDFなど既存の文書からスライドを作る
- Paste your notes メモ・テキストを貼り付けて構成してもらう
- Existing deck 既存のスライドデックをベースに作り直す
何も添付しない場合は、下のテキスト欄に日本語で内容を入力してSendを押すだけです。
プロンプト例
1AIコンサルサービスの紹介スライドを作ってください。2対象: PCが苦手な個人事業主・フリーランス3時間: 20分のセミナー用4構成: 今の困りごと→AIで解決できること→サービス内容→料金→申し込み方法5雰囲気: 親しみやすく、専門用語なし6見た目: シンプルで読みやすい、白背景
1自己紹介スライドを作ってください。2元SE・現在AIの使い方を教えている3実績: Claude Codeで業務を自動化・月30万の仕組みを構築4対象: AI初心者の個人事業主5枚数: 5〜7枚、余白多めで見やすく
1Claude Codeの使い方入門スライドを作ってください。2聴衆: コードを書いたことがない初心者3時間: 10分4内容: Claude Codeとは→インストール手順→最初の1コマンド→よくある失敗と対処5トーン: 丁寧でやさしく、怖くない雰囲気
Deck options（任意）
- Optimize for Google Slides Google Fontsのみ使用（Google Slidesで開く場合に便利）
- Add speaker notes 各スライドに話す内容メモを自動追加
Step 3. 生成を待つ
数分かかります。左パネルで進行状況を確認できます。
完成するとこうなります。
Step 4. 右上のボタンで調整する
生成が終わると、右上にボタンが並びます。
ボタン
できること
Mark up
手書き・マーカーでスライドにメモを書き込める
Comments
コメントを残す（チーム共有・レビュー時に便利）
Edit
テキストや画像を直接クリックして編集
+ Tweaks
「色をオレンジに統一して」「フォントを大きく」などAIに指示して修正
100%
表示倍率。クリックで拡大・縮小
Present
全画面でプレゼン。完成したらここから発表
Share
URLで共有、またはPDF・PPTXで書き出し
「Tweaks」が一番使います。チャット感覚で「1枚目のタイトルをもっと大きくして」と入力するだけで直してくれます。
注意点
スライドのビジュアルスタイルは最初に決めてください。
途中で「色を全部変えて」と言うと一貫性が崩れやすいです。
大枠を決めてから細部を直す順番が速いです。
Product prototype(動く試作品)の作り方
アプリの画面・サービスの予約フロー・Webサービスのモックアップを作れます。
完成するとクリックして実際に操作できる状態になります。
Step 1. ホーム画面で「Product prototype」をクリック
「Interactive app mockups」と書いてあるカードをクリックします。
Step 2. 作りたいアプリ画面の内容を入力する
クリックするとこの画面になります。
Slidesと同じく、テキスト欄に日本語で入力してSendを押すだけです。
プロトタイプは詳しく書くほど精度が上がります。以下を含めると完成度が高くなります。
- 何のアプリか 予約システム・タスク管理・決済画面など
- 画面数 何画面か
- 各画面の内容 何が表示されるか
- 操作の流れ どこを押したら次に進むか
- デバイスサイズ スマホ(390×844px)かPC向けか
- 色・スタイル ダークテーマ・明るい配色など
プロンプト例
1美容サロンの予約アプリの試作品を作ってください。2スマホ画面(390×844px)で。3画面は4つ:41. トップ: サロン名・メニュー一覧(カット/カラー/トリートメント)52. メニュー選択: 選ぶと次に進む63. 日時選択: カレンダーと時間帯74. 確認・完了: 予約内容と「予約する」ボタン8スタイル: ホワイト背景、ピンク系アクセント、角丸デザイン9「予約する」ボタンはタップしたら「予約完了！」の画面に遷移させてください。
Step 3. 生成を待つ
数分かかります。完成するとこうなります。
クリックすると実際に操作できる状態になっています。「予約する」ボタンを押すと次の画面に遷移します。
Step 4. 右上のボタンで調整する
生成が終わると、右上にボタンが並びます。
ボタン
できること
Mark up
手書き・マーカーでメモを書き込める
Comments
コメントを残す（チーム共有・レビュー時に便利）
Edit
テキストや画像を直接クリックして編集
+ Tweaks
「このボタンをもっと大きく」などAIに指示して修正
100%
表示倍率。クリックで拡大・縮小
Present
全画面でプレゼン・デモ。クライアントに見せるときに使う
Share
URLで共有、またはPDF・HTMLで書き出し
「Tweaks」が一番使います。チャット感覚で「背景色を白にして」「フォントを大きく」と入力するだけで直してくれます。
アニメーションを追加したい場合
Claude Designはデフォルトではアニメーションを追加しません。
動きをつけたい場合は明示的に指示します。
1ボタンはホバー時に1.05倍に拡大、200msのトランジションで。2ページ読み込み時にカードをフェードイン+スライドアップ、150ms間隔で順番に表示。
Product wireframe(骨格設計)の作り方
「どんな画面構成にするか」を先に決めたい時に使います。
詳細なデザインではなく、レイアウトの骨格だけを作ります。
「こういう順番でユーザーが進む」という流れを確認するのに向いています。
Step 1. ホーム画面で「Product wireframe」をクリック
「Lo-fi screens & flows」と書いてあるカードをクリックします。
### Step 2. 作りたい画面の構成を入力する
クリックするとこの画面になります。
テキスト欄に日本語で入力してSendを押すだけです。参考にしたい画面があれば「Add a screenshot」で貼ると精度が上がります。
プロンプト例
1コンサルサービスの申込フローのワイヤーフレームを作ってください。2ステップ: トップ→サービス説明→料金→申込フォーム→完了3各画面に何を置くかだけ分かればOKです。詳細なデザインは不要。
1セミナー申込LPのワイヤーフレームを作ってください。2セクション: ファーストビュー→登壇者紹介→内容→参加費→申込フォーム3スマホ表示で。
Step 3. 生成を待つ
完成するとこうなります。
グレーのボックスで画面の骨格が表示されます。「ここにボタン」「ここに画像」という配置確認に使います。詳細なデザインはProduct prototypeやDocumentで作ります。
Step 4. 右上のボタンで調整する
生成が終わると、右上にボタンが並びます。
ボタン
できること
Mark up
手書き・マーカーでメモを書き込める
Comments
コメントを残す（チーム共有・レビュー時に便利）
Edit
テキストや要素を直接クリックして編集
+ Tweaks
「このセクションを追加して」などAIに指示して修正
100%
表示倍率。クリックで拡大・縮小
Present
全画面表示。クライアントへの説明時に使う
Share
URLで共有、またはPDF・HTMLで書き出し
「Tweaks」で「3画面目に料金表示を追加して」のように指示すると追加修正してくれます。
Document(LP・提案書・ドキュメント)の作り方
ランディングページ・提案書・レポート・履歴書はここから作ります。
7種類のカードの中で、一番汎用性が高いです。
Step 1. ホーム画面で「Document」をクリック
「Resumes, PDFs, etc」と書いてあるカードをクリックします。
### Step 2. 作りたい内容を入力する
クリックするとこの画面になります。
Documentカード特有の機能が「Talk it out」。
頭の中を整理しながら話しかけるように入力すると、そのまま構成を読み取ってくれます。
PDFや資料があれば「Upload a PDF or notes」でアップロードできます。
プロンプト例
1個人向けAIコンサルサービスのLPを作ってください。2目的: LINE登録を増やす3構成:4- ファーストビュー: キャッチコピー＋登録ボタン5- こんな悩みはありませんか（3つ）6- サービスで解決できること（3つ）7- 料金8- よくある質問（3つ）9- 最後のCTA: LINE登録ボタン10対象: PCが苦手な個人事業主・50代女性11スタイル: シンプルで温かみのある、ホワイト＋コーラル系アクセント
1コンサルサービスの法人向け提案書を作ってください。2構成: 現状課題→提案内容→期待できる効果→料金→導入ステップ→次回打ち合わせについて3スタイル: シンプルで信頼感のある、ネイビー×ホワイト
1フリーランスとしての自己紹介資料(ポートフォリオ)を作ってください。2含める内容: プロフィール・スキル・実績・料金・連絡先3スタイル: モノクロ＋1アクセントカラー、モダンで清潔感のある
Step 3. 生成を待つ
数分かかります。完成するとこうなります。
スクロールすると続きも確認できます。LPなら料金・Q&A・フッターまで全部生成されます。
Step 4. 右上のボタンで調整する
生成が終わると、右上にボタンが並びます。
ボタン
できること
Mark up
手書き・マーカーでメモを書き込める
Comments
コメントを残す（チーム共有・レビュー時に便利）
Edit
テキストや画像を直接クリックして編集
+ Tweaks
「このボタンをもっと大きく」などAIに指示して修正
50%
表示倍率。クリックで拡大・縮小
Present
全画面でプレゼン。クライアントに見せるときに使う
Share
URLで共有、またはPDF・HTMLで書き出し
「Tweaks」でLPの文言や色を指示するだけで、その場で修正してくれます。
Animation(アニメーション)の作り方
動きのあるバナー・モーショングラフィックを作れます。
Step 1. ホーム画面で「Animation」をクリック
「Motion graphics & loops」と書いてあるカードをクリックします。
Step 2. 作りたいアニメの内容を入力する
クリックするとこの画面になります。
絵コンテや画像があれば「Drop a storyboard or images」でアップロードできます。
スクリプト（台本テキスト）があれば「Paste a script」で貼り付けも可能です。
プロンプト例
1サービス紹介のアニメーションバナーを作ってください。2内容: 「AI×仕組み化」というテキストがフェードイン→サービス名が下から登場→CTAボタンが点滅3背景: ダーク、コーラルのアクセントライン4サイズ: 1200×630px5ループ再生
1カウントアップするアニメーション数字を作ってください。2「3,000人が受講」というテキストで、0から3,000まで2秒かけてカウントアップ。3ページが表示された時にスタート。
完成するとこうなります。
Step 3. 右上のボタンで調整する
生成が終わると、右上にボタンが並びます。
他のカードと違い、「Edit」ボタンがありません。 アニメーションはコード（CSS・JavaScript）で動いているため、要素を直接クリックして編集できません。修正は「Tweaks」でAIに指示する方法のみです。
ボタン
できること
Mark up
手書き・マーカーでメモを書き込める
Comments
コメントを残す（チーム共有時に便利）
+ Tweaks
「動きをもっと速く」などAIに指示して修正
100%
表示倍率。クリックで拡大・縮小
Present
全画面でプレビュー再生
Share
URLで共有、またはHTML形式で書き出し
アニメーションをPDFに書き出すと動きは消えます。動きを保持したい場合はHTML形式を選びます。
Blank canvas(白紙から作る)の使い方
テンプレートも質問もなし。完全に白紙のキャンバスから始めたい時に使います。
「どのカードにも当てはまらないもの」「自分で全部決めたい」という場合に選びます。
テキスト入力欄に作りたいものを入力してSendを押すだけです。
Start with a file(ファイルから作る)の使い方
既存のファイルをデザインに変換するカードです。Word・PDF・PPTXを渡すだけで、Claude がデザインを作ってくれます。
Step 1. 「Start with a file」をクリック
「Turn it into a design」と書いてあるカードをクリックします。ファイル選択ダイアログが開きます。
対応ファイル形式はDOCX・PPTX・XLSX・PDF・JPG・PNGです。
Step 2. ファイルをアップロードして指示を入力する
ファイルを選ぶとアップロードされ、大きなテキスト入力欄が表示されます。何を作りたいかを日本語で入力して「Start project」ボタンを押します。
他のカードは「Send」ボタンですが、このカードは「Start project」です。
プロンプト例
1添付したWordの提案書をビジュアルな提案書スライドに変換してください。25〜7枚構成で、シンプルで読みやすいデザインにしてください。
1この手書きメモのアイデアをLPの構成案に変換してください。2ターゲット: AI初心者の個人事業主3ゴール: コンサル申込
完成するとこうなります。
Step 3. 右上のボタンで調整する
生成後は右上のツールバーで調整できます。「+ Tweaks」ボタンを押すとチャット入力欄が開き、細かい変更を追加指示できます。
ボタン
機能
Mark up
マークアップ・コメント追加
Comments
コメント管理
Edit
直接編集モード
- Tweaks
チャットで追加指示
100%
表示倍率変更
Present
プレゼンモード
Share
共有・書き出し
Design systems(デザインシステム)の使い方【今回のアップデート】
ホーム画面のカード一覧の下に「Set up design system」ボタンがあります。
ブランドカラー・フォント・ロゴを一度登録しておくと、以後のデザインに自動で反映されます。
「毎回色がバラバラになる」問題を解消します。
ボタンを押すと「Add a design system」モーダルが表示されます。
登録方法は2択です。
① Create here（初心者向け）
フォームに必要情報を入力するだけで設定できます。
登録できるもの
- 会社名・ブランドの説明（テキスト入力）
- GitHubリポジトリのURL
- Figmaファイル（.figファイルをアップロード）
- フォント・ロゴ・素材ファイル
コードがなくても使えます。まず試してみるならこちらがおすすめです。
② Create using Claude Code（BEST FIDELITY）
Claude Code にブランドの情報を覚えさせる機能です。
一度登録しておくと、LP・ホームページ・スライドを作るたびに「このカラー、このフォントで」と指定しなくてよくなります。ブランドとして統一されたデザインが自動で出てきます。
主に企業の開発チーム向けです。React というルールで作られたサービスのコードがある場合に、そこからブランド情報を自動で読み込ませる機能です。個人での利用シーンはほとんどありません。
使い方
以下の手順でゼロから作れます。
Step 1. Node.js を確認する
Step 2. フォルダとファイルを作る
1任意のフォルダ/2 └── design-system/3 ├── package.json4 └── tokens.js
package.json
1{2 "name": "my-design-system",3 "version": "1.0.0",4 "type": "module"5}
tokens.js（色・フォントを自分のブランドに書き換える）
1export const colors = {2 primary: "#DA7756", // メインカラー3 background: "#F5F4F0", // 背景色4 text: "#1C1917", // 本文テキスト5 white: "#FFFFFF"6}7export const fonts = {8 heading: "YuGothic",9 body: "Meiryo"10}
Step 3. /design-sync を実行する
Claude Code で以下のコマンドを実行
1/design-sync
完了すると「Design systems」タブにブランドが登録されます。以降のデザイン生成でこの色・フォントが自動で使われます。
書き出し方法
完成したデザインはいくつかの形式で書き出せます。
形式
向いている用途
送付用・印刷用・共有用
PPTX
PowerPointで開いて追加編集
HTML
そのままWebに載せる・Claude Codeに渡す
URL
チームや顧客に共有するリンク
Canva
Canvaで追加編集・SNS投稿用に調整
ZIP
全ファイルをまとめてダウンロード
アニメーションが入っている場合、PDFに書き出すと動きは失われます。
動きを保持したい場合はHTML形式を選びます。
調整のコツ（Tweaksパネル）
生成後に「Tweaks」ボタンを押すと、細かい調整をAIに指示できます。
効果的な指示の例
- 「ヘッダーの文字を大きく」
- 「ボタンをもっと目立たせて」
- 「全体的にもっとシンプルに」
- 「スマホで見たときのレイアウトも確認して」
一度に全部変えようとせず、1つずつ指示する方が狙った結果になりやすいです。
今回のアップデートで何が変わったか
変更内容
詳細
Design systemsタブが追加
ブランドカラー・フォントを一元管理
キャンバス上で直接編集
テキストやレイアウトを直接ドラッグして調整
Claude Codeと双方向連携
デザイン→コード実装が直接できるように(/design-sync)
PDF・PowerPoint書き出し対応
書き出し形式が増えた
外部ツール連携が拡張
Adobe/Canva/Gamma/Lovable/Miro/Replit/Vercel/Wixなどに対応
まとめ — 何を作りたいかでカードを選ぶ
Claude DesignはProプラン($20/月)以上で使えます。無料では使えません。
作りたいものでカードを選んでください
作りたいもの
使うカード
セミナー・説明会・ピッチの資料
Slides
アプリやサービスの動く試作品
Product prototype
画面の構成を先に確認したい
Product wireframe
LP・提案書・ポートフォリオ
Document
動くバナー・アニメーション素材
Animation
既存のWord・PPTをデザインに変換
Start with a file
プロンプトは「目的・構成・対象・スタイル」の4点を入れると精度が上がります。
最初から完璧を目指さず、大枠を作ってから1つずつ直していくのが速いです。
この記事がよかったなら「いいね」を押してくれると嬉しいです。
▼ PCが苦手でも始められるClaudeの使い方を、LINEで受け取れます
登録するとClaude Codeインストールガイドをプレゼントします。
https://utage-system.com/line/open/7AX6UZExr2sX?mtid=k9bP2gwMFMso
