Claude Designを使ってみたいけれど、何が作れてどこから始めればよいか分からず、手が止まっていませんか？
じつは2026年9月から、Claudeのチャット画面（claude.aiやアプリ）でデザインを頼むだけで、Claude Designを利用できます。
無料プランでも使えて、申し込みページやSNSの告知画像、案内の資料などを作成できます。
以下は、実際にClaude Designで作成したデザインです。
すぐに作り始めたい方は、基本の5ステップから読んでみてください。Claude Designの使い方【基本の5ステップ】はこちら
この記事では、これらの作例を実際に作りながら、Claude Designの使い方をご紹介します。思いどおりに仕上げるコツや、Canvaで開いてさらに編集する方法まで詳しくまとめました。
読み終えるころには、申し込みページや告知画像など、作りたいデザインをClaude Designで作り始める手順が分かります。ぜひ気になるところから参考にしてみてください。
＼公式LINEにご登録いただくと、Claude Designの指示文テンプレ30選をプレゼント／
公式LINEにご登録いただいた方に、特典「Claude DesignでAIっぽくしない指示文テンプレ30選」を無料でプレゼントしています。現役Webデザイナーが厳選した、コピペでそのまま使える指示文をまとめた資料です。
公式LINEご登録後、「こだわり」というキーワードをお送りください。
さらに、ご登録いただいた方限定で、無料のオンライン勉強会を月に2〜3回ほど開催しています。
Claudeの基本の機能から最新の情報まで、画面を見ながら一緒に学べる勉強会です。おかげさまで、毎回満席になるほどご好評をいただいています。
目次
Claude Designとは？2026年9月の変更点
Claude Designは、Claudeと会話しながらデザインや画面の見本を作成・修正できる機能です。
作ったデザインは「アーティファクト」として、会話の横に表示されます。アーティファクトとは、Claudeが作る成果物のことで、その場で中身を編集できるのが特長です。
アーティファクトはサイドバーの「アーティファクト」のタブに保存されるので、ほかの会話からもあとで開き直せます。
Claudeでは、Claude Designのほかにも、文章の作成や資料の要約、決まった時間に作業を自動で進めることなどができます。Claudeでできることのまとめはこちら
2026年9月からClaudeのチャットで利用可能
Claude Designは以前、専用の画面（claude.ai/design）から使う機能でした。
2026年9月16日に、どの会話からでもデザインを頼めるようになりました。
現在は、無料プランを含むすべてのプランで使えます。2026年9月より前の解説記事や動画と今の画面が違って見える理由の1つが、この変更です。
なお、専用の画面だったclaude.ai/designは2026年12月14日に終了する予定です。旧サイトで作ったものの扱いはよくある質問で説明します。
Claude Slides・Claude Docsとの違い
ClaudeにはDesignのほかに、Slides（スライド）とDocs（文書）という機能もあります。
Design・Slides・Docsで作れるものと向いている場面を、表で比べてみました。
| 種類 | 作れるもの | 向いている場面 |
|---|---|---|
| Design | ビジュアル・モックアップ・プロトタイプ・ワンページャー・ランディングページ | ページや画像をデザインして、仕上がりを確かめたいとき |
| Slides | メモや資料、チャットの内容をもとにしたプレゼン資料 | 発表や説明に使う資料を作りたいとき |
| Docs | Claudeやチームと一緒に書く文書 | 文章を中心にまとめたいとき |
申し込みページやチラシのように、色や文字の配置までデザインしたいときはDesignを選んでみてください。
Claudeでできることを幅広く知りたい方は、特典「Claude 初心者向け 全機能完全ガイド」をご活用ください。
Claudeの機能を初心者向けにまとめた資料で、公式LINEから無料でお受け取りいただけます。公式LINEご登録後、「ずかん」というキーワードをお送りください。
Claude Designで作れるもの【実際の作例5つ】
Claude Designでは、SNSの投稿画像のようなデザインから、Webページや画面の見本まで作れます。
ここでは、架空の講座「スマホで撮る 商品写真きほん講座」を題材に、5つの作例を実際に作りました。
5つは、Claude Designで作れるものの種類ごとに1つずつ作りました。作りたいものに近い作例から、ぜひ参考にしてみてください。
- 作例1：講座の申し込みページ（ランディングページ）
- 作例2：Instagramの告知投稿（ビジュアル）
- 作例3：撮影の手順シート（ワンページャー）
- 作例4：お悩み診断とチェックリスト（プロトタイプ）
- 作例5：スマホ画面の見本（モックアップ）
この記事の作例の前提条件（人物と講座は架空）
| 項目 | 内容 |
|---|---|
| 人物 | はるさん（仮名） ・会社員で、副業のオンライン講座を準備中の女性 ・デザインの経験なし／コードは書かない |
| 講座 | 「スマホで撮る 商品写真きほん講座」 ・Zoomで少人数（定員6名） ・全4回（すべて土曜 10:00〜11:30） ・受講料12,000円／初回の募集を準備中 |
| 目的 | 講座の申し込みを集める（InstagramとLINE公式アカウントから案内） |
| 添付した素材 | ・はるさん（講師）の写真風の画像 ・マグカップなどの商品写真（直す前／直したあと） ・どちらも別のツール（Codex）で作った架空のイメージ（Claudeは写真のような画像を作れないため） |
| 使った環境 | Claude Maxプラン／PCのChromeで開いたWeb版。無料プランでも使えます。料金と使えるプランはこちら |
| 頼み方 | すべて同じチャットで、申し込みページ→Instagramの告知投稿→手順シート→診断→スマホ画面の見本→チェックリストの順に依頼 |
作例1：講座の申し込みページ（ランディングページ）
講座の内容と申し込み方法を1ページにまとめたWebページです。InstagramやLINE公式アカウントから案内するページを想定しています。
この作例の作り方は後半の「基本の5ステップ」で最初から説明します。
実際に送った依頼文は次のとおりです。
▼ 依頼文（クリックで全文を開く）
オンライン講座の申し込みページ（LP）のデザインを作ってください。
添付は、mug-before（直す前の写真）、mug-after（直したあとの写真）、shooting-scene（スマホで撮っている場面）、cut-showing（講師の写真・背景透過）です。
・講座名：スマホで撮る 商品写真きほん講座
・見る人：ネットショップやフリマアプリで物を売っていて、商品写真をきれいに撮りたい人
・内容：全4回（光の当て方／背景と小物／構図／スマホでの明るさの調整）、Zoomで少人数（定員6名）
・日程：2027年1月9日・23日、2月6日・20日（すべて土曜 10:00〜11:30）
・受講料：12,000円（全4回）
・講師：はる（会社員をしながら副業で写真講座を開く）
・申込方法：申込ボタンから申し込みフォームへ
見た目は、白を土台にして、写真を画面いっぱいに使ってください。一番上はshooting-sceneを全幅で大きく置き、講座名を重ねます。
アクセントの色はテラコッタ1色です。mug-beforeとmug-afterは、真ん中のつまみを左右に動かして見比べられるスライダーにしてください。
講師の写真には小さく「イメージ」と入れてください。スマホで見やすい縦長の1ページで、一番上と最後に申込ボタンを置いてください。
おすすめの共有・公開の方法
- 知人や制作を頼む人に見てもらうなら「共有」のリンクがおすすめです
- ただし、リンクでの共有は有料プランの機能です
- 申し込みを受け付けるには、申込ボタンを実際の申し込みフォームにつなぐ準備が別に必要です。公開する手順はこちら
実際に試した結果
- 完成までの時間：約3分半
- できたもの：写真を全面に使った縦長のページ
- 見比べのつまみ：キャンバスの上で、左右に動かせた
- 頼んでいない文章：「こんな方に」の3項目や各回の説明が入っていた
mikimikiClaudeが書き足した文章は、使う前に内容を確かめるのがおすすめです。
その他の活用方法
- 個別相談の案内ページ
- セミナーの募集ページ
- ネットショップの新商品の紹介ページ
作例2：Instagramの告知投稿（ビジュアル）
講座の開講を知らせる、正方形の画像5枚をめくって見る投稿（カルーセル）です。表紙→悩み→直す前と直したあと→講座の内容→申し込みの順に読んでもらう流れにしました。
申し込みページとはデザインを変え、太い文字を主役にするように頼んでいます。
▼ 依頼文（クリックで全文を開く）
同じ講座で、Instagramの5枚組の投稿（正方形・カルーセル）を別に作ってください。今ある案は残してください。
1枚目は表紙（講座名を大きく）、2枚目は悩み（商品写真が暗い・ごちゃついて見える）、3枚目は直す前と直したあと（mug-beforeとmug-afterを並べる）、4枚目は講座の内容（全4回：光の当て方／背景と小物／構図／スマホでの明るさの調整）、5枚目は申し込み（2027年1月9日開講・すべて土曜 10:00〜11:30・受講料12,000円（全4回）・定員6名）です。
見た目は申し込みページと変えて、テラコッタの大きくて太い文字を主役にし、写真と文字を大胆に組んでください。
添付のcut-shooting（講師）、beads-after、candle-afterも使ってください。講師の写真には小さく「イメージ」と入れてください。
おすすめの書き出し方
- Instagramに投稿するなら画像（PNG）で書き出すのがおすすめです
- 各枠の上の下向き矢印からPNG（1×・2×）を選べます
- 5枚は1枚目から順に保存し、投稿するときに同じ順に並べます
実際に試した結果
- 完成までの時間：約4分
- できたもの：1080×1080pxの枠が5つ（申し込みページの右に追加）
- 前の案：申し込みページはそのまま残っていた
- 写真の向き：表紙の講師の写真を、文字の方を向くように左右反転した（Claudeの案内）
mikimiki写真の向きなどを変えられたくないときは、依頼文で伝えておくと安心です。
その他の活用方法
- お店のキャンペーンの告知
- ブログ記事の紹介画像
- LINE公式アカウントで送る画像
余白の取り方やフォント・色の数など、投稿の基本ルールは別の記事で紹介しています。インスタ投稿デザインのコツはこちら
作例3：撮影の手順シート（ワンページャー）
撮影の5つの手順を図解と写真でまとめた、A4・1ページの資料です。受講生に渡して、撮影するときに手元で見てもらうことを想定しています。
▼ 依頼文（クリックで全文を開く）
同じ講座で、受講生に渡すA4縦・1ページの「撮影の手順シート」を別のページとして作ってください。今ある案は残してください。
内容は、①窓の光を横から当てる ②背景を無地にする ③水平に構える ④商品を画面の左寄りに置く ⑤明るさを整える、5つの手順です。
各手順に図解を付け、添付した直す前と直したあとの写真（マグカップ）も使ってください。
下に講座名と日程（2027年1月9日・23日、2月6日・20日、すべて土曜 10:00〜11:30）を小さく入れます。見た目は、落ち着いたベージュを土台にした資料らしい組み方にしてください。
印刷して使えるように、文字は読みやすい大きさにしてください。
おすすめの書き出し方
- LINEやメールで送る場合や、印刷して渡す場合は、PDFで書き出すのがおすすめです
- 最初に「A4縦・1ページ」のように紙の大きさを伝え、書き出したら1ページに収まっているか確かめてみてください
実際に試した結果
- 完成までの時間：約2分（同じキャンバスにA4のシートが追加）
- 図解：5つの手順すべてに窓や画面の枠などの簡単な図
- 文字の大きさ：本文は約11.5pt、いちばん小さい文字も9pt以上（Claudeの案内）
- 説明文：各手順の説明は「仮の文案」（Claudeの案内）
mikimiki仮の文章は使う前に内容を確かめ、必要に応じて書き直すのがおすすめです。
その他の活用方法
- サービスの料金表
- セミナーの概要シート
- お客様に渡す使い方の説明書
作例4：お悩み診断とチェックリスト（プロトタイプ）
クリックして動きを試せる画面の見本（プロトタイプ）を、2つ作りました。
作例4-① 写真のお悩み診断から申し込むフォーム
3つの質問に答えるとおすすめの回が出て、そのまま申し込みフォームに進む画面の見本です。申し込みの流れを実際にクリックして確かめるために作ります。
▼ 依頼文（クリックで全文を開く）
同じ講座で、スマホ幅の「写真のお悩み診断」の試作を別に作ってください。
今ある案は残してください。実際にクリックして進められるようにしてください。流れは、スタート画面→3つの質問（1問ずつ。
例：どんな商品を撮りますか／いちばんの悩みは何ですか／撮影できる時間帯はいつですか）→答えに合わせた、おすすめの回と学び方の結果→申し込みフォーム（名前・メール）→完了画面です。
回は、光の当て方／背景と小物／構図／スマホでの明るさの調整の4つです。
結果とフォームには、2027年1月9日開講・すべて土曜 10:00〜11:30・受講料12,000円（全4回）・定員6名を入れてください。
見た目はこれまでの案と変えて、質問ごとに画面いっぱいの大きな選択肢と進み具合のバーを置き、切り替えに動きをつけてください。
結果の画面に添付のcut-answer（講師）を使い、小さく「イメージ」と入れてください。送信した内容の保存はしなくて大丈夫です。
今回の作例は画面の切り替えを試すものです。送信された内容の保存や通知のメールは含めずに頼みました。
完了の画面が出ても、申し込みを受け付けたわけではない点にご注意ください。
おすすめの共有と確かめ方
- 作ったら枠の上の「PLAY」から再生して、自分でボタンを押して確かめるのがおすすめです
- 制作を頼む人や知人に操作してもらうなら共有のリンクが便利です（有料プランの機能）
実際に試した結果
- 完成までの時間：約4分20秒
- 操作：再生すると、スタート→3つの質問→結果→フォーム→完了までクリックで進めた
- 入力した名前：完了画面にも表示された
- 結果の出し分け：答えによって変わる（Claudeの案内）。試したのは1通りだけ
- 画面の表示：「試作のため保存・送信されません」
- 色：結果・フォーム・完了の画面が深い緑と黒に近い色だった
mikimiki申し込みを終えた方に安心してもらえるよう、完了画面はチャットで明るい色に直しました。直し方はステップ4で紹介します。
作例4-② 撮影前チェックリスト（タップで印が付く）
同じチャットで、受講生が撮影の前に使う「撮影前チェックリスト」も作りました。項目をタップすると印が付き、進み具合が数とバーで分かる画面の見本です。
▼ 依頼文（クリックで全文を開く）
同じ講座の受講生向けに、スマホ幅の「撮影前チェックリスト」の試作を別に作ってください。今ある案は残してください。
項目をタップするとチェックが付き、上に「3／6」のような進み具合が出て、全部終わると、直したあとの写真（添付済みのマグカップ）と「準備ができました」が出るようにしてください。
項目は、窓の近くに置く／照明を消す／背景を片付ける／レンズを拭く／水平に構える／商品の汚れを拭くの6つです。見た目は、明るくてやさしい色にしてください。
実際に試した結果
- 完成までの時間：約1分50秒
- タップしたとき：項目に印がつき、「2／6」「6／6」のように数とバーが進んだ
- 6つすべてに印をつけたとき：直したあとの写真と「準備ができました」が出た
- チェックした内容：保存されない（Claudeの案内）
- 各項目の補足の文：「仮の文案」（Claudeの案内）
その他の活用方法
- 予約の流れを試せる画面の見本
- 商品選びの診断
- イベントの持ち物チェックリスト
- 制作を頼む人に見せるたたき台
作例5：スマホ画面の見本（モックアップ）
作例1の申し込みページを、スマホの枠の中で見せる見本です。公開する前にデザインを決めるときや、人に意見をもらうときに使います。
▼ 依頼文（クリックで全文を開く）
作例1の申し込みページを、スマホの枠の中で見せる見本を別に作ってください。今ある案は残してください。
枠の中をスクロールできて、下のボタンで「一番上／直す前と直したあと／全回の内容／申し込み」の場所に切り替わるようにしてください。
背景は明るい無地にし、スマホを主役にしてください。
おすすめの見せ方
- ページの上の部分を見てもらうなら画像（PNG）、操作して見てもらうなら共有のリンクがおすすめです
- 見本はあくまでデザインの確認用で、実際のスマホでの表示を確かめる代わりにはなりません
実際に試した結果
- 完成までの時間：約1分40秒
- できたもの：スマホの枠の中に申し込みページが入った見本
- 下の4つのボタン：押すとその場所へ移動し、押したボタンの色も変わった
- 写真の差し替え：申し込みページの写真を変えると、見本の写真も変わった（同じページを表示しているため。Claudeの案内）
その他の活用方法
- お店のホームページを作り直す前の見本
- プロフィール画面のデザイン案
5つの作例を使う場面とおすすめの書き出し方で比べると、次のとおりです。
| 作例 | 使う場面 | おすすめの書き出し・共有 |
|---|---|---|
| 申し込みページ | SNSやLINEから案内する先 | 確認用は共有リンク、公開はHTMLやNetlify・Wixなどの公開用のサービス |
| Instagramの告知投稿 | Instagramで開講を知らせる | PNG |
| 撮影の手順シート | LINE・メールで送る、印刷する | |
| お悩み診断とフォーム・チェックリスト | 申し込みの流れや操作を試す | 共有リンク |
| スマホ画面の見本 | 公開前にデザインを決める | PNG・共有リンク |
Claude Designの操作を動画で見たい方は、YouTube「mikimiki webスクール」もご覧ください。スライドやLP、アプリの作り方を、実際の画面を見ながら解説しています。
おかげさまで、チャンネル登録者は37.9万人になりました。いつもご覧いただき、ありがとうございます。
Claude Designを始める前の2つの準備
始める前に、設定の確認と作りたいもののメモの2つを済ませておくと安心です。メモを用意すると依頼に必要な情報を整理できます。
Claude Designの使用条件（2026年11月時点）
使い始める前に、料金・使える場所・共有の条件・必要な設定を確かめておいてください。
| 項目 | 内容 |
|---|---|
| 料金 | Freeを含むすべてのプランで使えます。Design専用の料金はなく、各プランの利用上限の中で使います。料金と使えるプランはこちら |
| 場所 | Web版・デスクトップアプリ・iOSとAndroidのアプリのチャットから使えます。 |
| 共有 | Pro・Max・Ultra・Team・Enterpriseで使えます。「リンクを知っている全員」にすると、多くの場合はログインなしで開けます |
| 設定 | 設定の「機能」で「Artifacts」と「クラウドでコードを実行」がオンになっていること。 |
① 設定でアーティファクトがオンか確かめる
Claude Designは、アーティファクトとコードの実行の設定がオンになっていないと使えません。以下は個人のプランで設定を確認する手順です。
新しい設定画面では「ファイルの作成と編集」と表示される場合があります。項目が見つからないときは、ヘルプ『アーティファクトとは何か、どのように使用するのか？』も確かめてみてください。
学習に使わせるかどうかやプロフィールなど、ほかに見直したい項目は別の記事で紹介しています。Claudeの初期設定はこちら
Team・Enterpriseなど会社のアカウントでは、組織の設定で管理者が決めています。
mikimikiClaude Designが使えないときは、自分で設定を変えずに会社の管理者に確認するのがおすすめです。
② 作りたいものをメモにまとめる
よい依頼には「目標・配置・内容・見る人」を入れるのがおすすめです。頼む前にこの4つをメモにしておくと、依頼文をまとめやすくなります。
ここでは、はるさんの講座の申し込みページを例にします。
| 項目 | メモの例 |
|---|---|
| 目標 | 講座の内容を知ってもらい、申し込んでもらう |
| 配置 | スマホで見やすい縦長の1ページ。一番上に講座名、最後に申込ボタン |
| 内容 | 講座名・誰向けか・全4回の内容・日程・受講料・定員・講師紹介・よくある質問・申込方法 |
| 見る人 | ネットショップやフリマアプリで物を売っていて、商品写真をきれいに撮りたい人 |
写真や、講座の案内をまとめたWordファイルなどを添付して頼むこともできます。講座名や日程をご自身の講座・サービス・お店などのものに置き換えながら、読み進めてみてください。
＼ 公式LINEでは、特典資料「Claude絶対にするべき設定8選」を無料で配布中 ／
Claudeを使い始める前に見直しておきたい設定を、8つにまとめた資料です。まだ設定を見直せていない方は、Claude Designを始める前にご活用ください。
公式LINEご登録後、「わくわく」というキーワードをお送りください。
Claude Designの使い方【基本の5ステップ】
使い方は「頼む→質問に答える→確かめる→直す→書き出す」の5ステップです。
ここからは前の章のメモを使って、はるさんの申し込みページを最後まで作ります。ステップ4では診断のフォームを直した例も紹介します。
- 作るもの：講座の申し込みページ（スマホで見やすい縦長の1ページ）
- 画面：PCのChromeで開いたWeb版のClaude（Maxプラン）
- 人物・講座・日時・料金・連絡先は、すべて架空
- ステップ1：チャットでデザインを頼む
- ステップ2：質問が来たら答える
- ステップ3：キャンバスにできたデザインを確かめる
- ステップ4：チャット・コメント・直接編集で直す
- ステップ5：目的に合う方法で書き出す・共有する
ステップ1：チャットでデザインを頼む
いちばん簡単な始め方は、Claudeのチャット画面で文章で頼む方法です。以下はチャットからデザインを頼む手順です。
実際に送った依頼文は次のとおりです。
▼ 依頼文（クリックで全文を開く）
オンライン講座の申し込みページ（LP）のデザインを作ってください。
添付は、mug-before（直す前の写真）、mug-after（直したあとの写真）、shooting-scene（スマホで撮っている場面）、cut-showing（講師の写真・背景透過）です。
・講座名：スマホで撮る 商品写真きほん講座
・見る人：ネットショップやフリマアプリで物を売っていて、商品写真をきれいに撮りたい人
・内容：全4回（光の当て方／背景と小物／構図／スマホでの明るさの調整）、Zoomで少人数（定員6名）
・日程：2027年1月9日・23日、2月6日・20日（すべて土曜 10:00〜11:30）
・受講料：12,000円（全4回）
・講師：はる（会社員をしながら副業で写真講座を開く）
・申込方法：申込ボタンから申し込みフォームへ
見た目は、白を土台にして、写真を画面いっぱいに使ってください。一番上はshooting-sceneを全幅で大きく置き、講座名を重ねます。
アクセントの色はテラコッタ1色です。mug-beforeとmug-afterは、真ん中のつまみを左右に動かして見比べられるスライダーにしてください。
講師の写真には小さく「イメージ」と入れてください。スマホで見やすい縦長の1ページで、一番上と最後に申込ボタンを置いてください。
ポイントは、目的・見る人・形・載せる内容を最初にまとめて伝えることです。添付した写真は、ファイル名で「どれを、どこに使うか」を指定すると伝わりやすくなります。
写真を添付する場合は、送る前に「使ってよい写真か」を確かめてみてください。詳しくは注意点の章の②と③で説明します。
チャットのほかに、サイドバーの「アーティファクト」を開き、「デザイン」を選んで始めることもできます。
ステップ2：質問が来たら答える
情報が足りないと、Claudeが作る前に質問を返すことがあります。質問が来たら分かる範囲で答えて、決めていないことは「色はおまかせします」のようにClaudeに任せて大丈夫です。
質問がなくそのまま作り始めた場合は、待つだけで大丈夫です。
実際に試した結果
- 作る前の質問：なし
- 最初のデザインができるまで：送ってから約3分半
mikimiki依頼文に必要な情報をまとめて入れておくと、質問なしで作り始めることがあります。
ステップ3：キャンバスにできたデザインを確かめる
できた案はチャットの横のキャンバスに表示されるので、まずは次の3つを確かめてみてください。
① 講座名・日程・受講料・申込方法の文字や数字が、メモのとおりか
② 文字の欠けやはみ出しがないか
③ 頼んでいない文章が書き足されていないか
実際に試した結果
- 頼んでいない文章：「こんな方に」の3項目、各回の説明、直す前と直したあとの説明
- 写真の並べ方：依頼文で指定したとおり
Claudeが書き足した文章は、内容が正しいか自分で確かめておくと安心です。講座の実績や受講生の声など、事実と違う内容が入っていたら消してもらいます。
ステップ4：チャット・コメント・直接編集で直す
直し方は3つあります。配色など全体を変えるときはチャット、1か所を変えるときはコメント、文字の大きさなど細かな調整は直接編集が向いています。
以下は3つの方法の手順と、実際に直した例です。
① チャットで直す
Claudeに質問するときと同じように、チャットに文章で頼みます。
どこを、どう変えるかと、ほかは変えないことを一緒に伝えると、ねらった所だけが変わりやすくなります。
例1：診断の完了画面の色を変える
▼ 依頼文（クリックで全文を開く）
申し込み完了の画面だけ、明るいアイボリーの背景にして、チェックの丸はやわらかいテラコッタかセージにしてください。
安心感のある、あたたかい雰囲気にしてください。ほかの画面は変えないでください。
結果：約1分15秒で、完了画面だけが明るい色になりました。ほかの画面は変えていないとClaudeから案内がありました。
例2：一番上の写真を差し替える
送った文
申し込みページの一番上の写真を、添付の写真に差し替えてください。ほかは変えないでください。
結果：1分以内に差し替わり、講座名・ボタン・写真の切り取り方は変わりませんでした。同じページを使っているスマホ画面の見本も、新しい写真に変わりました。
② コメントで直す
結果：「この『CURRICULUM』を『講座の内容』に変えてください。」と頼むと、40秒ほどで変わりました。チャットにもコメントの内容とやりとりが残っていました。
コメントが表示されないときはコメントビューで確認できます。反映されないときは、内容をチャットに貼り付けてみてください。
③ 直接編集で直す
直接編集は、チャットで頼まずにその場で変えられます。
結果：文字の大きさを変えると、文字の種類の設定や行の高さなども自動で変わりました。再生（PLAY）している画面では、直接編集はできませんでした。
mikimiki直接編集のあとも、まわりの見た目が崩れていないか確かめておくと安心です。
どこを直せばよいかの見つけ方は次の章で詳しく説明します。
ステップ5：目的に合う方法で書き出す・共有する
作ったデザインは、リンクでの共有やファイルへの書き出しができます。
どの方法にするかは、デザインを何に使うかで選ぶのがおすすめです。
図の①〜⑤の順に、それぞれの手順を画面つきで説明します。どの方法も、始めは右上の「共有」を押す操作です。
ステップ5-① 共有のリンクで確認してもらう
知人や制作を頼む人に、できたデザインを開いて確認してもらうときは、共有のリンクを送るのがおすすめです。以下は共有のリンクを送る手順です。
決まった人だけに見せたいときは、上の入力欄からメールアドレスで招待することも可能です。
デザインは最初は自分だけが見られる設定です。「共有」を押して誰が開けるか、何ができるか（表示・コメント・編集）を選びます。
複数人で同時に編集すると、正常に動かない場合があります。
リンクで共有できるのは、Pro・Max・Ultra・Team・Enterpriseのプランです。
「リンクを知っている全員」を選ぶと、多くのデザインはClaudeにログインしていない人も開けます。ただし、ログインしていない人にはClaudeを使う部分などが動きません。
外部のサイトにつながるデザインはこの方法で共有できない場合があります。
共有したら、ログインしていない状態でも開けるか自分で確かめてみてください。共有のリンクで見せられるのは、デザインと、クリックして動かせる画面の見本までです。
リンクで共有するときの条件は『アーティファクトの共有』より
ステップ5-② PNGにしてSNSに投稿する
SNSに投稿する画像は、PNGで書き出すのがおすすめです。以下はPNGで書き出す手順です。
1つの枠だけを書き出したいときは、各枠の上の下向き矢印を押し、「PNG 1×」か「PNG 2×」を選びます。1×は1080×1080px、2×は2160×2160pxで、大きさはメニューに表示されます。
ステップ5-③ PDFにして送る・印刷する
メールで送る資料や印刷するものは、PDFで書き出すのがおすすめです。手順は②のPNGと同じで、選ぶ形式だけが違います。以下はPDFで書き出す手順です。
各枠の上の下向き矢印からも選べます（②の画面と同じメニュー）。1つの枠だけなら「PDF (.pdf)」、全部の枠を1つにまとめるなら「All artboards (.pdf)」を選びます。
mikimiki書き出したら、紙の大きさと、ページに収まっているかを確かめておくと安心です。
ステップ5-④ HTMLでサイトに公開する
自分のサイトなどで公開するときは、HTMLで書き出すか、公開用のサービスへ送ります。以下は書き出しまでの手順です。
今回の作例で作るのは、申し込みページのデザインと、クリックして動かせる画面の見本です。公開して申し込みを受け付けるには、次の準備が別に必要になります。
「HTML」を選ぶと、1つのファイルで動くWebページとして保存できます。公開用のサービスへは「その他の形式とアプリ」から送れます。
自分のサイトや公開用のサービスで、ページを開くためのURLを用意します。詳しい手順はサービスごとに違うため、それぞれのサービスの案内を確かめてみてください。
作例の申込ボタンは、押すと次の画面へ進むだけの見本です。申し込みを受け付けるフォームを用意して、ボタンの行き先をつなぎます。
公開したらまず自分で1回申し込んでみます。完了の画面が出て申し込みの内容が届くところまで確かめると安心です。
ステップ5-⑤ Canvaで開いて編集する
Canvaで文字や画像を直して仕上げたいときは、Canvaで開いて編集するのがおすすめです。以下はCanvaを選ぶまでの手順です。
続きの操作は、Canvaとの連携の章で画面つきで説明しています。Canvaで仕上げるまでの手順はこちら
このほかにも、PowerPoint（PPTX）やGoogleスライドでの書き出し、Claude Codeへの引き継ぎができます。選べる形式の一覧は、下の表でご確認いただけます。
▼ 書き出しの形式の一覧（クリックで開く）
| 形式 | できること |
|---|---|
| まとめて保存（.zip） | デザインのファイルを1つにまとめて保存する |
| 送る・印刷するためのファイルにする | |
| PowerPoint（PPTX） | PowerPointで開けるファイルにする |
| Googleスライド | Googleスライドに送って開く |
| HTML | 1つのファイルだけで開けるWebページにする |
| ほかのツールへ送る | 次の15のサービスへ送る：Adobe Experience Manager、Adobe for Creativity、Adobe Journey Optimizer、Base44、Canva、Gamma、HubSpot、Hyperframes、Lovable、Miro、Netlify、Replit、v0、Vercel、Wix |
| Claude Codeへ引き継ぐ | Claude Code（コードを書くAI）に送り、続きを作る。パソコンのClaude CodeとWeb版の2つを選べる |
形式の一覧は『Claude Designを始める（エクスポートと共有）』より
書き出したら、使う前に講座名・日程・受講料・申込先を確かめてみてください。文字・数字・リンクの注意点はこちら
作ったデザインはあとからサイドバーの「アーティファクト」で開き直せます。
Claudeの使い方を、実際の画面を見ながら基本から学びたい方は、Claude実践マスター講座をご覧ください。
動画8時間4分とWebテキスト720ページ超えで、初期設定から実践まで順番に学んでいただけます。おかげさまで、累計800名以上の方に受講いただいています（2026年9月現在）。
Claude Designで思いどおりに仕上げるコツ5選
この章では、Claude Designのデザインを思いどおりに仕上げる5つのコツをご紹介します。5つのコツは、実際に試した結果をもとにまとめています。
① デザインの基本ルールで見直す
最初のコツは、できたデザインをデザインの基本ルールで見直すことです。Claudeが最初に作ったデザインは、整って見えても、伝えたい順番まで整っているとは限りません。
デザインの基本ルールとは、見る人に情報が伝わりやすくなるように、文字や写真の大きさと位置を決めるときの考え方です。強弱・近接・整列の3つで、次の点を見てみてください。
- 強弱：大事な情報ほど大きく、目に入りやすい場所に置く。大事な情報が一番目立っているかを見る
- 近接：関係のある情報は近くにまとめる。関係のある情報が離れていないかを見る
- 整列：文字や写真の端をそろえる。端がばらばらになっていないかを見る
強弱・近接・整列に「反復」を加えた4つの原則は、OK例とNG例つきで別の記事にまとめています。チラシデザインの基本はこちら
はるさんの申し込みページを、3つのルールで見直した結果です。
| ルール | 見る点 | 申し込みページで気づいたこと | 直し方と結果 |
|---|---|---|---|
| 強弱 | 大事な情報が 一番目立っているか | 講座名と申込ボタンは大きく目立っていた。講座の内容の見出しは英語（CURRICULUM）で、文字も小さかった | 見出しをコメントで「講座の内容」に変え、直接編集で文字を26から32に。どちらもすぐ変わった |
| 近接 | 関係のある情報が まとまっているか | 開講日・定員・受講料は並んでいたが、曜日と時間がなかった | チャット：開講・定員・受講料のすぐ下に「2027年1月9日開講・すべて土曜 10:00〜11:30」の1行を入れて。ほかは変えないで。1分以内に、その1行だけが入った |
| 整列 | 文字や写真の端が そろっているか | 写真の上の講座名・説明文・申込ボタンの左端はそろっていた | 直す必要なし |
実際に試した結果
- 直した部分：日程の1行、見出しの言葉と大きさ、一番上の写真の差し替え
mikimiki1か所を直すとほかの場所が変わることがあるので、直すたびに全体を見直すのがおすすめです。公開する前には、申込ボタンの行き先とClaudeが書き足した文章も確かめてみてください。
② 直す範囲で方法を選ぶ
Claude Designでデザインを直す方法は、チャット・コメント・直接編集の3つです。直したい範囲に合わせて選ぶのがおすすめです。
- チャット：チャットの入力欄に、直したいことを文章で頼みます。
- コメント：デザインの直したい場所をクリックして、指示を書いて送ります。
- 直接編集：文字などを選んで、右に出る「Properties」で大きさなどを自分で変えます。
操作の手順と実際に直した例は、使い方の章で画面つきで説明しています。ステップ4の手順はこちら
直したいことに合う方法は、次の表を参考にしてみてください。
| 直したいこと | おすすめの方法 | 例 |
|---|---|---|
| 配色や全体の配置を変えたい | チャット | 「全体を、くすみブルー系の配色にしてください」 |
| 1か所だけ変えたい | コメント | （申込ボタンを選んで）「もっと目立つ色にしてください」 |
| 少しだけ位置や大きさを整えたい | 直接編集 | 文字の大きさを数字で変える |
③ 直してほしい点を具体的に伝える
デザインを直してほしいときは、「どこを」「どうするか」を具体的に伝えるのがコツです。「もう少しおしゃれに」「もっといい感じに」だけでは、どこをどう直すのかが決まっていないためです。
たとえば「フォームフィールド間のスペースを8pxに縮める」のように伝えると、Claudeに必要なものが正確に伝わります。
具体的に伝えるコツは次の3つです。
- 場所の名前を出す（例：申込ボタン、受講料のすぐ上）
- 数字で伝える（例：今の1.2倍、18px）
- 1回に1つずつ頼む
以下は、そのまま使える頼み方の例です。数字は例なので、作っているデザインに合わせて変えてみてください。
| あいまいな頼み方 | そのまま使える頼み方 |
|---|---|
| 申込ボタンをもっと目立たせて | 申込ボタンを今の1.2倍の大きさにして、背景と違う色にしてください |
| もっと読みやすく | 本文の文字を16pxから18pxにして、行の間を文字の大きさの1.7倍にしてください |
| 日程が分かりにくい | 全4回の日程を表にまとめて、受講料のすぐ上に置いてください |
「どこを」「どうするか」を1つずつ伝えると、意図に近い結果になりやすくなります。
mikimiki今回のような具体的な指示文をすぐに使いたい方に、公式LINEで「Claude Designの指示文テンプレ30選」を無料でプレゼントしています。ご登録後、「こだわり」とお送りください。
指示文テンプレ30選の受け取りはこちら（公式LINE）
④ 迷ったら2〜3案を比べる
どんなデザインにするか迷ったら、2〜3案を出してもらって並べて比べるのがおすすめです。
別の案を頼むときは、今の案を残すように伝えておくと安心です。Claude Designにはまだバージョン履歴がないためです。
例文
今の案は残したまま、講師の写真を一番上に大きく置いた案と、商品の写真を一番上に置いた案を、別に2つ作ってください。
実際に試した結果
- かかった時間：約3分
- Claudeからの質問：なし
- 元の案：そのまま残った
- 講師の写真の案：淡いピンクベージュの背景に講師の写真を大きく置いた
- 商品の写真の案：マグカップの写真を全面に置き、講座名を重ねた
- ほかの部分：一番上以外は変えていないとClaudeから案内された
- 頼んでいない文字：商品の案に「スマホで撮影」が入った。チャットで外すように頼むと、50秒以内に外れた
3つを並べると、一番上の写真だけでページの印象が大きく変わることがわかります。
講師の人柄を伝えたいなら講師の案、作品の仕上がりを見せたいなら商品の案というように、目的で選ぶのがおすすめです。
mikimiki頼んでいない文字が入ることもあるので、別の案ができたら文字が正しいかも確かめてみてください。
⑤ 配色をまとめて変える
デザインの形ができたら、1回頼むだけで配色をまとめて変えられます。④と同じように今の案を残したまま頼むと、色の違いを見比べて選べます。
送った文
今の案は残したまま、配色だけを変えた案を2つ作ってください。
①くすみブルー系 ②グリーン系
実際に試した結果
- 完成までの時間：約2分40秒
- できたもの：くすみブルーとグリーンの案が別の枠として追加（元の案も残った）
- 色以外：写真・文章・レイアウト・スライダーは元の案と同じ（Claudeの案内）
1か所の色だけを変えたいときは、枠の横の調整アイコン（Tweaks）も使えます。
枠の名前の横にあるつまみの形のアイコンを押すと、右に「Tweaks」のパネルが開きます。色を選ぶか色の番号を入れると、その場で色が変わりました。
実際に試した結果
- 色が変わった範囲：告知投稿の1枚目のアクセントの色だけ（ほかの4枚は変わらなかった）
- Tweaksに出る項目：デザインによって違う可能性がある
※この章の例には、ステップ3でできた申し込みページを使っています。
依頼文の書き方で、デザインの仕上がりは変わります。
特典「Claude DesignでAIっぽくしない指示文テンプレ30選」は、現役Webデザイナーが厳選した指示文を、10ジャンル×3つずつまとめた資料です。
世界観・配色・文字・レイアウト・コピー・仕上げまで、コピペでそのまま使えます。頼み方を変えた前後の比べ方も載っています。
公式LINEご登録後、「こだわり」というキーワードをお送りください。
Claude DesignとCanvaを連携する方法
Claude Designで作ったデザインは、Canvaで開いて編集できます。
Canvaで開くと、素材や印刷、SNSへの予約投稿など、Canvaの機能を使って仕上げられます。作ったデザインを、そのまま配る・届ける所まで進められるのが、Canvaと連携する良さです。
Canvaと連携するとできること
Canvaで開くと、文字の書き換えや色の変更など、さまざまな編集ができます。ここでは、その中でもCanvaならではの3つを紹介します。
Canvaならではの3つ
- Canvaの素材を使う
- 印刷を注文する
- SNSに予約投稿する
① Canvaの素材を使う
Canvaには、写真やイラストなどの素材がたくさんあります。たとえば、いらすとやのイラスト約2万点と、カナヘイのイラストも使えます。いらすとやの素材の案内はこちら
手元にない素材を足したいときは、Canvaが便利です。
左の「素材」タブで「いらすとや」と検索すると探せます。Canvaのいらすとやのページはこちら
人物・動物・食べ物など、ジャンル別のおすすめのイラストは別の記事で紹介しています。Canvaのいらすとや解説はこちら
Claude Designで作った手順シートにも、いらすとやのイラストを入れられました。
いらすとややカナヘイの素材は、Canvaのデザインに入れれば商用でも使えます。ただし、素材だけを売ることはできません。カナヘイの素材は、販売や配布用のグッズにも使えません。カナヘイの素材の案内はこちら
② 印刷を注文する
Canvaでは、QRコードを足すなどの編集をしてから、そのまま印刷を注文できます。サイズや用紙の種類、部数を選ぶと、金額を確かめてから注文できます。
チラシや手順シートを紙で配りたいときは、編集から印刷の注文までCanvaの中で続けて進められます。
自宅のプリンターやコンビニなど、注文のほかの方法は別の記事で比べています。Canvaの印刷ガイドはこちら
③ SNSに予約投稿する（Canvaプロ）
Canvaプロでは、作ったデザインを日時を決めてInstagramなどに投稿できます。予約投稿を使うときは、Canvaと投稿したいSNSのアカウントを連携します。予約投稿の手順はこちら
以下は、作例2のInstagram告知画像をCanvaで開いて、予約投稿の日時を選ぶ画面まで進めた様子です。
mikimikiCanvaで仕上げるなら、動きのない告知画像や案内の1枚ものが向いています。フォームの見本のようにクリックして試すものは、Claude Designの中で確かめるのがおすすめです。
Claude DesignのデザインをCanvaで開いて編集する手順
以下は、Claude DesignのデザインをCanvaで開いて編集する手順です。
Canvaで編集するときの注意点
Claude DesignのデザインをCanvaで開くときは、次の点にご注意ください。今回試した手順シートと作例2で分かったことをまとめたので、Canvaと連携する際は参考にしてみてください。
ページの大きさが中身と合わないことがある
Canvaで開くと、Canvaの画面でページが中身より広くなり、右側などに余白ができる場合があります。
対処法：Canvaでページの大きさを中身に合わせましょう。
元のフォントで表示されないことがある
使っているフォントによっては、Claude Designの画面で、Sendを押した直後に案内が出ます。案内では、フォントがファイルに含まれず、オンラインのときだけ元の書体で表示されるとのことです。
対処法：案内が出たら、Canvaで書体を確かめておくと安心です。
そのまま開くとできる編集が限られる
そのまま開くと、Canvaの画面で種類が「コード」と表示される場合があります。このときは素材を足せず、選んだ部分の置き換えだけになりました。
対処法：素材を足したいときは、Tweaks（色を変えるパネル）を外してから開くのがおすすめです。デザインを複製して、チャットで次のように頼むと外せました。Tweaksの使い方はこちら
依頼文：この複製から、色の調整項目（Tweaks）を外してください。見た目は変えないでください。
Tweaksを外すと配置がずれることがある
Tweaksを外して開くと、Canvaの画面で番号の丸などの位置がずれる場合があります。
対処法：開いたら全体を確かめて、ずれた所をCanvaで直しましょう。
Canvaの使い方は別の記事で詳しく紹介しています。Canvaの使い方ガイドはこちら
Canvaをまだ使っていない方も、無料で始められます。Canva公式サイトはこちら
Canvaで本格的に編集したい方は、Canvaプロを30日間無料でお試しいただけます。背景透過やブランドキット、マジックリサイズなど、編集に使える機能が広がります。
Claude Designの料金と使えるプラン
Claude Designは、無料のFreeを含むすべてのプランで使えます。
Design専用の料金はありません（2026年11月時点）。ここではプランごとの機能と利用上限をまとめます。
対応プランとプランごとの違い
| 機能 | Free | Pro・Max・Ultra | Team・Enterprise |
|---|---|---|---|
| Claude Design | 使える | 使える | 使える（組織の設定に従う） |
| リンクでの共有 | 使えない | 使える | 使える（組織の設定に従う） |
| デザインシステム | 使えない | ベータ版で使える | ベータ版で使える（Enterpriseは管理者がオンにした場合） |
デザインシステムとは、ブランドの色・フォント・部品などのルールを登録して新しいデザインにも引き継ぐ仕組みです。
mikimikiデザインシステムがなくても、デザインは作れます。
会社のアカウント（Team・Enterprise）では組織の設定によって使える範囲が変わります。使えないときは組織の管理者に確認してみてください。
有料プランに入るか迷うときは、ほかのAIとの料金や得意な仕事の違いも判断の材料になります。Claude・ChatGPT・Geminiの比較はこちら
使える量の上限
Claude Designは、Claudeのチャットなどと共通の利用上限を使います（公式ヘルプ『Claude Designを始める』より）。
デザイン専用の枠はないため、何回作れるかは一律には言えません。
上限に達したらリセットされるまで待ちます。上限を超えて使える追加の利用（有料）を設定している場合は、そのまま続けられます。
mikimiki複雑な依頼や、やりとりを何度も重ねる作業ほど多く使います。まず1ページ・1枚から始めるのがおすすめです。
コードを書かずに、Webサイトを作って公開するところまで学べます。
Claude全体の使い方を学びたい方は、Claude実践マスター講座をご覧ください。
受講後もいつでも何度でも質問できて、講座の内容も定期的に最新の情報へ更新されます。料金は49,800円の買い切りで、月額のサブスクではありません。
Claude Designを使う前に知っておきたい注意点
Claude Designで作ったものを公開や印刷に使うときは、次の3つの点に注意が必要です。AIが作ったデザインは、見た目が整っていても、内容まで正しいとは限らないためです。
① 文字・数字・リンクの間違いに注意する
文字や数字、リンクの間違いに注意が必要です。AIの出力は正確でない場合があり、日時や申込先が違っていると、その誤りがそのままお客様に伝わるためです。使う前に次の5つを確かめましょう。
文字や数字の見方はステップ3で説明しています。スマホの文字の大きさとボタンの行き先は、実際にスマホで開いて押すと確かめられます。
Claudeが「仮です」と案内した文章やQRコード・URLが、そのまま残っていないかにもご注意ください。
② 写真やロゴの権利に注意する
写真やロゴは、ほかの人の権利に注意が必要です。作ったものが、ほかの人の権利を侵害しないことまでは保証されないためです。
ネットで見つけた写真や他社のロゴを使うときは、配布元の利用条件を見て、AIへの入力と公開に使ってよいかを確かめてみてください。自分で撮った写真でも、人が写っているときは掲載の許可を得ているか確認しておくと安心です。
作ったものを仕事で使うときの権利は、よくある質問で説明します。
③ 名前や連絡先などの情報の扱いに注意する
受講生やお客様の名前・連絡先は、扱いに注意が必要です。個人向けのプランでは、設定によって入力した内容が学習に使われるためです。
依頼文に書く前に、本当に入れる必要があるかを確かめるのがおすすめです。たとえば申し込みページの見本なら、この記事の作例のように仮の名前やメールアドレスで作れます。
会社で使う場合は、社内の決まりや契約の条件も確認しておくと安心です。
mikimiki学習に使うかどうかは、設定の「プライバシー」にある「AIモデルの改善を支援する」で選べます。学習の設定の説明はこちら
＼ 公式LINEでは、特典資料「Claude 初心者向け 全機能完全ガイド」を無料で配布中 ／
Claudeの機能を初心者向けにまとめた資料です。Claude Designのほかに、Claudeでできることも一通り知りたいときに、参考にしていただけます。
公式LINEご登録後、「ずかん」というキーワードをお送りください。
Claudeを使いこなすならmikimiki webスクール
ここまで、Claude Designの使い方をご紹介してきました。Claudeは、デザインのほかにも資料作りや作業の自動化など、さまざまな仕事に活かせます。
mikimiki webスクールの「Claude実践マスター講座」では、その使い方を基本から順番に学べます。
実際に受講された方からは、次のようなお声をいただいています。
50代・女性たとえばブログでは、以前は1日1記事ほどだったところ、現在では1日3記事ほど執筆できるようになっています。
少人数の会社なので、AIを活用することで、まるで社員が増えたような感覚があります。
ここからは、YouTube登録者37.9万人のmikimikiが解説するClaude実践マスター講座の特徴をご紹介します。mikimikiのプロフィールと著書の一覧はこちら
Webサイトやツールまで作れるカリキュラム
Claude実践マスター講座は、おかげさまで2026年9月現在で800名以上の方に受講いただいています。Claude Designで形のあるものを作りたい方に特に知っていただきたいのが、次の9章です。
9章 アーティファクトで Webサイト・アプリ・ツール を自由自在に作成（全15レッスンの一部）
- 9-1.アプリやWebサイトを作成できるアーティファクト機能とは？
- 9-3.アーティファクトで作成したデータを共有する手順
- 9-4.活用例①：簡単なWebサイト作成（テキスト指示のみ）
- 9-7.活用例④：簡単なクイズアプリの作成＜モデルによって違いが出るかも検証＞
- 9-9.インタラクティブなグラフを作成①棒グラフ
- 9-13.アーティファクト機能を活用してパワポ形式のスライド資料を作成する
この記事の作例のように文章で指示するだけで、Webサイトやクイズアプリなどをノーコードで作れます。Webに公開する手順までお伝えします。
基礎からAIエージェントまで順番に学べる講座内容
料金プランの違いや初期設定から、プロンプト設計や誤回答への対策まで体系的に学べます。営業や提案書づくり、議事録などの場面別に、そのまま使えるプロンプト集もご用意しています。
さらにClaude CoworkやClaude Codeなど、仕事を任せるAIエージェントの使い方まで扱っています。フォルダの整理や領収書からのExcel作成などを任せる方法は、別の記事で説明しています。Claude Coworkの使い方はこちら
全23セクション201レッスンを、カリキュラムに沿って順番に進められます。通勤や休憩などのスキマ時間にも学べます。
新しい機能も学び続けられる買い切り制の講座
Claudeは機能が次々に増えています。この講座は内容を定期的に更新しており、一度ご購入いただくと最新の内容を学び続けられます。11月3日にもClaude Coworkでスライド資料を作成する章を追加しました。
受講料は49,800円の完全買い切りで、追加費用や受講期限はありません。スマホ・パソコン・タブレットでご視聴いただけます。
講座の内容でわからない所は、受講後いつでも何度でも専用フォームからご質問いただけます。
講座の詳しい内容は、講座ページに載せています。Claudeをもっと仕事に活かしたい方は、ぜひのぞいてみてください。
公式LINEにご登録いただいた方限定で、無料の勉強会を月に2〜3回ほど開催しています。Claudeの最新の機能や情報もお伝えしています。まずは気軽に学んでみたい方も、ぜひご参加ください。公式LINEの登録はこちら
Claude Designでよくある質問
▶︎ 疑問を解消しながら、Claudeを基本から学びたい方は、Claude実践マスター講座をご覧ください。
まとめ
Claude Designは、Claudeのチャット画面でデザインを頼むだけで使える機能です。
無料プランを含むすべてのプランで使えて、申し込みページやInstagramの投稿・手順シートなどを同じチャットで続けて作れます。
何が作れてどこから始めればよいか迷ったときは、この記事の作例と基本の5ステップを順番にたどると、最初の1つを形にしやすくなります。
各章の要点を、以下の表にまとめました。章の名前を選ぶと、その章に戻って読み返せます。
| 章（選ぶとその章へ） | その章の要点 |
|---|---|
| 作れるもの | 申し込みページ／Instagramの投稿／手順シート／お悩み診断とチェックリスト／スマホ画面の見本 |
| 始める前の準備 | ① 設定でアーティファクトがオンか確かめる ② 作りたいものをメモにまとめる |
| 基本の5ステップ | 1. チャットでデザインを頼む 2. 質問が来たら答える 3. キャンバスにできたデザインを確かめる 4. チャット・コメント・直接編集で直す 5. 目的に合う方法で書き出す・共有する |
| 仕上げるコツ5選 | ① デザインの基本ルールで見直す／② 直す範囲で方法を選ぶ／③ 直してほしい点を具体的に伝える／④ 迷ったら2〜3案を比べる／⑤ 配色をまとめて変える |
| Canvaとの連携 | Canvaで開いて編集できる ① Canvaの素材を使う／② 印刷を注文する／③ SNSに予約投稿する |
| 料金とプラン | 無料プランを含むすべてのプランで使える／チャットなどと共通の利用上限の中で使う |
| 注意点 | ① 文字・数字・リンクの間違い／② 写真やロゴの権利／③ 名前や連絡先などの情報の扱い |
以下は、読み終えたあとに進めると良い順番です。
最初は、基本の5ステップに沿ってご自身の申し込みページを1つ作るのがおすすめです。
Claude Designの使い方【基本の5ステップ】はこちら
できたデザインが思いどおりでないときは、コツ5選の直し方が役立ちます。
Claude Designで思いどおりに仕上げるコツ5選はこちら
素材を足したいときや、印刷・SNSへの予約投稿まで進めたいときは、Canvaで開いて仕上げられます。
Claude DesignとCanvaを連携する方法はこちら
この記事の作例とコツは、mikimiki webスクールで実際に作って確かめた結果と、デザインの基本ルールをもとにまとめました。
mikimiki最初の1つができると、告知の投稿や案内の資料にも同じ流れで広げられます。まずはご自身の講座やお店の申し込みページを、1つ作ってみてください。
AIに"任せる"働き方へ！Claude実践マスター講座 ― 初期設定からAIエージェント構築まで完全網羅
Claudeの基本からAIエージェントまで体系的に解説
AI初心者から、業務で使いこなしAIエージェント時代を先取りしたい方まで、この1コースで学べる
・23セッション 201レッスン、講座時間は約8時間4分
・2026年9月現在800名以上の方が受講
・Claude本体・Cowork・Code・MCP連携まで完全網羅
・個人利用から副業・事業活用まで拡張できる体系設計
Claudeは、単なる業務効率化ツールの枠を超え、業務そのものを動かせる「AIエージェント」として進化しています。
本講座では、Claude本体を軸に、Claude Cowork・Claude Code・MCP連携・Artifacts・Skills機能などを横断的に活用し、基本から実践まで体系的に解説します。
単に使い方を学ぶだけでなく、プロンプト設計・思考フレームワーク・ハルシネーション対策・Projects機能による自社専用AI構築まで網羅的に扱います。
AIを「思考のパートナー」「自走するエージェント」「優秀な秘書」のように使いこなし、業務を任せられる状態を目指します。
会社員・フリーランス・経営層まで対応できる設計で、AIを”使う人”から”設計する側・任せる側”へ進化するための実践プログラムです。