Claude Designとは？何ができて、FigmaやCanvaとどう違うのか
会話しながらビジュアルを作る仕組み
室谷代表取締役Claude Design、名前だけ聞くとデザインツールそのものに見えるんですけど、実体はClaudeとのチャットでビジュアルを作る機能なんですよね。デザインだけでなく、インタラクティブなプロトタイプ、ワンページャー、スライドあたりまで届く。
テキトー教師DotAI 認定講師現場でよく聞くのが「チャットとキャンバスが並んで動く」という感覚ですね。会話しながら生成物がその場に出てくるので、指示と結果の往復が速いんですよ。
室谷代表取締役流れも素直で、作りたいものを説明して、キャンバスに出てきたものを確認して、またチャットで直す。スクリーンショットやコードベースを材料として渡せるので、渡す情報が多いほど出力が寄ってきます。
テキトー教師DotAI 認定講師最初に戸惑うのが「何を渡せばいいのか」なんですよね。既存デザインのスクショでも、複製したいスライドでもいいので、まず1枚投げてみるのが早いです。
アーティファクトから使うテンプレートのひとつ
室谷代表取締役位置づけとしては、アーティファクトから使えるテンプレートのひとつ、という整理が近いんですよね。チャットの「出力>デザイン」から入る形も同じものを指しています。
テキトー教師DotAI 認定講師アーティファクト自体を知らないと、そこで一回止まるんですよ。会話の副産物として画面が出てくる、あの仕組みの一種だと思えば繋がります。
室谷代表取締役詳しくはClaude Artifactsとは？使い方・できることと2026年9月の仕様変更で解説しています。デザイン専用の別プロダクトが増えたというより、Claudeの出力形式が広がったイメージに近い。
テキトー教師DotAI 認定講師なるほど。だとすると「まずClaudeを普通に使える状態にする」が前提になるんですね。
Figma・Canvaとの違いは初稿の速さと仕上げの分担
室谷代表取締役FigmaやCanvaとの違いは、ここを外すと誤解されるんですよ。ゼロから初稿を出す速さはClaude Designが強くて、精密な微調整や大人数での同時編集はFigma側が依然として強い。
住み分けの話なんですよね。
住み分けの話なんですよね。
テキトー教師DotAI 認定講師たしかに。現場感覚で言うと「1枚目の手前」が一番しんどいので、そこを会話で埋められるのは大きいです。
室谷代表取締役制作の初速って、経営目線だと損切りの速度なんですよ。案を早く形にできると、違う方向に気づくのも早くなる。
エクスポートもPDF、PPTX、Google Slides、スタンドアロンHTML、.zipまで用意されていて、Canvaなどに送って仕上げる道も残ってます。
エクスポートもPDF、PPTX、Google Slides、スタンドアロンHTML、.zipまで用意されていて、Canvaなどに送って仕上げる道も残ってます。
テキトー教師DotAI 認定講師全部ここで完結させようとすると、細かい調整で疲れるんですよね。「初稿はこちら、詰めは専門ツール」で分けた方が気楽です。
「Claude Design」が指す2つの別物を先に整理しておく
室谷代表取締役それと、同じ名前で紛らわしいものが2つあるので先に整理しておきましょう。ひとつは今話したClaudeの中の機能。
もうひとつは claude.ai/design のスタンドアロン版です。
もうひとつは claude.ai/design のスタンドアロン版です。
テキトー教師DotAI 認定講師ここが混ざったまま調べると、情報が食い違って見えるんですよ。前提が違う記事を並べて読んでしまうので。
室谷代表取締役スタンドアロン版は2026年12月14日で終了が決まっていて、デザインシステムの移行が必要になります。その手順は次の章で詳しくやります。
テキトー教師DotAI 認定講師先に「自分が使うのはどっちか」を押さえておくと、この先の話がすんなり入りますね。
claude.ai/designは2026年12月14日で終了——今すぐ確認したい移行手順
終了するのは旧スタンドアロン版で、Claude内のデザイン機能はこれからも続く
claude.ai/design 移行手順(4ステップ)
- 01Designタブを開くClaudeのサイドバー下部にある「Design」タブを開く
- 02Move team design systemsをクリック表示されるバナーの「Move team design systems」をクリックする
- 03Let Claude clean it upで整理移行されたデザインシステムに出るバナーで、必要に応じて整理する
- 04アーティファクトとして参照移行後はClaude Codeを含むあらゆるチャットからアーティファクトとして参照できる
室谷代表取締役まず前提を揃えておきたいんですけど、claude.ai/designのスタンドアロン版が2026年12月14日で終了します。ただ、終わるのはその旧スタンドアロン版だけで、Claudeの中のデザイン機能そのものはこれからも続くんですよね。
テキトー教師DotAI 認定講師たしかに、そこが一番誤解されやすいところで。初めて触る人は「デザイン機能が使えなくなる」と受け取ってしまうんですよ。
室谷代表取締役だからサービス終了ではなくて、引っ越しなんです。ただし引っ越し先で使い続けるには、こっちで手を動かす必要がある。
テキトー教師DotAI 認定講師しかも既存プロジェクトは12月14日まで残るので、猶予があるように見えて忘れやすいんですよね。
サイドバーのDesignタブからデザインシステムを移行する手順
- Claudeのサイドバー下部にある「Design」タブを開く
- 表示されるバナーの「Move team design systems」をクリックする
- 移行されたデザインシステムに「Let Claude clean it up」バナーが出るので、必要に応じて整理する
- 移行後は、Claude Codeを含むあらゆるチャットからアーティファクトとして参照できる
室谷代表取締役手順自体はこの4ステップで、正直そんなに重くないんですよ。移行そのものより、気づかないまま12月14日を迎える方がリスクなんですよね。
テキトー教師DotAI 認定講師現場でよく聞くのは「どこから移行すればいいのか分からない」という声で。サイドバー下部の「Design」タブが入り口なので、まずそこを開くところからですね。
室谷代表取締役うちの場合はデザインシステムをチームで共有しているので、誰か1人がやれば終わる話ではないんですよ。担当を決めて、移行できたことを確認するところまでセットにした方がいい。
移行後はClaude Codeを含むあらゆるチャットで使えるアーティファクトになる
テキトー教師DotAI 認定講師移行して終わりではなくて、移行すると使い勝手が変わるんですよね。各デザインシステムがアーティファクトになって、Claude Codeを含むあらゆるチャットから呼べるようになる。
室谷代表取締役これは地味に大きい。プロジェクトごとに設定をやり直す手間が減るので、制作の立ち上がりのコストが下がるんですよ。
テキトー教師DotAI 認定講師室谷代表取締役あと「Let Claude clean it up」のバナーが出るので、移行したらそのまま放置せず、一度クリックして整えておくと以降の出力が安定します。
移行を忘れると保持期間の経過で削除される可能性がある
室谷代表取締役ここが一番怖いところで。組織に保持期間の設定があると、移行したデザインシステムをその期間誰も開かないと、永久に削除される可能性があるんですよ。
テキトー教師DotAI 認定講師しかもデザインを使うだけでは「開いた」扱いにならないのが罠で。最初に戸惑うのがまさにここなんですよね。
室谷代表取締役経営目線で言うと、デザイン資産が消える事故はコストに直結します。移行作業そのものは一瞬でも、忘れたときの損失の方が大きいんです。
テキトー教師DotAI 認定講師なので12月14日を待たずに、今週中に移行を済ませてしまうのが安心ですね。
Claude Designは無料でも使える？プランごとの違いと使用量の考え方
Free・Pro・Max・Ultra・Team・Enterpriseの対応状況を整理する
プラン別のClaude Design対応状況
| プラン | Claude Design本体 | デザインシステム（ベータ） |
|---|---|---|
| Free | ○ | × |
| Pro / Max / Ultra / Team | ○ | ○（デフォルトでオン） |
| Enterprise | ○（2026年10月15日にデフォルト有効化） | △（管理者が有効化するまでオフ） |
室谷代表取締役最初に一番聞かれるところから。Claude Design、2026年11月時点だとFreeプランでも使えるんですよ。
追加契約も追加料金もなしで、既存のサブスクリプションの範囲内でそのまま動きます。
追加契約も追加料金もなしで、既存のサブスクリプションの範囲内でそのまま動きます。
テキトー教師DotAI 認定講師そこ、まだ「有料プランじゃないと使えないですよね」と確認されることが多くて。少し前の情報を見て来られる方が多いんだと思います。
整理するとこうですね。
整理するとこうですね。
| プラン | Claude Design本体 | デザインシステム（ベータ） |
|---|---|---|
| Free | 使える | 対象外 |
| Pro / Max / Ultra / Team | 使える | デフォルトでオン |
| Enterprise | 使える（2026年10月15日にデフォルト有効化） | 管理者が有効化するまでオフ |
室谷代表取締役2026年の春から秋くらいに書かれた解説は「Pro以上が必要」で止まっているものが多いんですよね。今は無料でも触れるので、試すときのハードルはかなり低いです。
無料プランでどこまで作れるかは、Claude Designの使い方と料金｜無料プランでどこまで作れるかのほうでもう少し具体的に整理してます。
無料プランでどこまで作れるかは、Claude Designの使い方と料金｜無料プランでどこまで作れるかのほうでもう少し具体的に整理してます。
追加料金はかからない。使用量はClaude全体の共通プールから消費される
室谷代表取締役で、実務だとここが一番効くんですけど。デザイン専用の割り当てがあるわけじゃなくて、Claude Codeなんかと同じ使用制限のプールから引かれるんですよね。
テキトー教師DotAI 認定講師たしかに。ここを知らないと「デザインだけなら別枠でしょ」と思ったまま作業して、気づいたら制限に当たっていた、という順番になります。
室谷代表取締役大きなコードベースを読ませたり、複雑なものを何度も反復させると普通に減ります。上限に当たったらリセットまで止まる。
使用クレジットを有効にしていれば続けられますけど、そこで原価は発生するので、うちみたいな会社だと「誰が何に消費しているか」を一度眺めたほうがいいんですよね。
使用クレジットを有効にしていれば続けられますけど、そこで原価は発生するので、うちみたいな会社だと「誰が何に消費しているか」を一度眺めたほうがいいんですよね。
テキトー教師DotAI 認定講師以前はデザイン用に別の週次割り当てがあったらしいんですが、今はプランの共通制限に統合されているそうです。だから感覚としては「Claude全体の残量を気にする」で合ってます。
デザインシステムは別のベータ機能。プランによって初期設定が違う
室谷代表取締役もう一個まぎらわしいのがデザインシステムのほうで。あれはClaude Design本体とは別扱いのベータ機能なんですよ。
テキトー教師DotAI 認定講師初めて触る人が一番つまずくのがそこで。「無料で使えると聞いたのに、デザインシステムの項目が見当たらない」となるんですよね。
室谷代表取締役ベータの対象はPro、Max、Ultra、Team、Enterpriseです。Freeは対象外なので、本体と分けて考えたほうがいい。
Pro以上なら最初からオンになっています。
Pro以上なら最初からオンになっています。
テキトー教師DotAI 認定講師設定の場所はSettings > Capabilities、表示されない場合はSettings > Design systemsの「Manage」から、とのことです。画面の出方が環境で変わることがあるので、公式ヘルプを横に置きながらのほうが確実です。
Enterpriseは管理者の有効化が必要という落とし穴
室谷代表取締役Enterpriseだけ挙動が違います。2026年10月15日にデフォルト有効化されたんですが、それ以前はオーナーが「組織設定 > アーティファクト」で有効化する必要がありました。
デザインシステムも同じで、管理者がオンにするまでオフのままです。
デザインシステムも同じで、管理者がオンにするまでオフのままです。
テキトー教師DotAI 認定講師現場でよく聞くのが「隣のチームは使えているのにこっちだけ出ない」というやつで。だいたい権限か設定の話なんですよ。
室谷代表取締役組織で契約している場合、使えない原因が機能側じゃなくて設定側、というパターンは結構あります。経営目線で言うと、ライセンス料を払っているのに設定がオフで誰も使っていない状態が一番もったいないんですよね。
テキトー教師DotAI 認定講師まず管理側に「アーティファクトの設定、オンになっていますか」と確認するのが早いですね。
Claude Designの始め方——5つの入り口と最初にやること
入り口は5つ、まずは会話の続きから
テキトー教師DotAI 認定講師最初に整理しておきたいのが、どこから開けばいいのかという点なんですよ。入り口は5つあります。
- 会話の中で「このプロポーザルからワンページャーを作成して」のように依頼する、またはメッセージボックスの「出力」からデザインを選ぶ
- アーティファクトタブでデザインテンプレートを選ぶ
- Claude Code内で/designコマンドを使う、またはClaude Codeにデザイン化を頼む
- iOS/Android版のClaudeアプリから開く
- claude.ai/designのスタンドアロン版（2026年12月14日で終了）
室谷代表取締役で、日常的に使うなら1番なんですよね。別画面に移らず、会話の文脈をそのまま持ったままデザインに入れる。
テキトー教師DotAI 認定講師初めて触る人は「専用ツールを立ち上げる」イメージを持ちがちなので、そこが一番のギャップなんですよ。
室谷代表取締役5番はもう終了が決まってるので、今から始める人は入り口にしない方がいいですね。移行の話は別のところで。
アーティファクトタブと、Claude Codeからの入り方
室谷代表取締役2番目のアーティファクトタブも見逃せなくて。ここにデザインのテンプレートが並んでるので、ゼロから話し始めるより早いことが多いんですよ。
テキトー教師DotAI 認定講師アーティファクトの仕組みが分かってないと、そこだけ唐突に見えるんですよね。テンプレートの1つとして選ぶ感覚なんですよ。
詳しくはClaude Artifactsとは？使い方・できることで解説しています。
詳しくはClaude Artifactsとは？使い方・できることで解説しています。
室谷代表取締役Claude Code側から入るルートもあって。/designコマンドで、ローカルのコードベースをそのまま見にいかせられる。
既存のコンポーネントを前提にデザインが始まるので、後から合わせる手間が減るんですよね。
既存のコンポーネントを前提にデザインが始まるので、後から合わせる手間が減るんですよね。
テキトー教師DotAI 認定講師コードを書く人にとって「デザインだけ別世界」にならないのが大きいですね。
スマホでも開けるが、共有設定はPCで
室谷代表取締役4番目のスマホアプリですけど、これ動きとしては面白くて。出先で「ここだけ直したい」という場面で効くんですよね。
テキトー教師DotAI 認定講師ただ、共有設定の変更はWeb・デスクトップのみなので、そこは最初に知っておいた方がいいです。スマホだけで完結させようとして詰まる人がいます。
室谷代表取締役なので現実的なのは、PCで始めて作って、確認だけスマホでやる形。工数で言えば、移動中にレビューできるだけで手戻りの待ち時間が減るので、そこは素直に効きます。
使い方の手順——プロジェクト作成から生成確認まで
プロジェクトを作り、デザインシステムをアタッチする
プロジェクト作成から生成確認までの手順
- 01依頼またはテンプレートから開始会話で「この提案書からワンページャーを作って」と依頼、またはメッセージボックスの「出力」→「デザイン」を選ぶ。アーティファクトタブのデザインテンプレートから新規開始も可
- 02プロジェクトを作成組織のデザインシステムは自動で継承される。個人ならブランドアセットのアップロードは不要
- 03デザインシステムをアタッチ/インポートGitHubリポジトリ、デザインファイル、そのままのアップロード、Claude Codeの /design-sync でローカルコードベースから取り込む、の4通り。持っていない人は飛ばしてOK
- 04コンテキストを足す既存デザインのスクリーンショット、競合製品、ワイヤーフレーム、複製したいスタイルのスライドやドキュメント、コードリポジトリのリンク。情報が多いほど出力が良くなる
- 05プロンプトを具体化目標・レイアウト・コンテンツ・誰に見せるかの4点を具体的に書く。曖昧だとレビューの言葉も曖昧になる
- 06キャンバスで生成結果を確認方向性が違えば2〜3案を出して比較。「現在の内容を保存して、まったく異なるアプローチを試してください」で別案へ移行可能
まずは入り口からプロジェクト作成まで、順番にこうなります。
- 会話の中で「この提案書からワンページャーを作って」のように依頼する、またはメッセージボックスの「出力」から「デザイン」を選ぶ
- アーティファクトタブでデザインテンプレートを選ぶ場合は、そこから新規に開始する
- プロジェクトを作成する（組織のデザインシステムは自動で継承される。個人ならブランドアセットのアップロードは不要）
- デザインシステムをアタッチまたはインポートする（GitHubリポジトリ、デザインファイル、そのままのアップロード、Claude Codeの /design-sync でローカルコードベースから取り込む、の4通り）
テキトー教師DotAI 認定講師最初に戸惑うのが、どこから作り始めるかという点なんですよね。会話から頼むか、アーティファクトのテンプレートから入るか。
どちらでも同じ着地点に来ます。
どちらでも同じ着地点に来ます。
室谷代表取締役プロジェクトを作った時点で、組織のデザインシステムが自動で継承されるんですよね。ここは地味に効く仕様で。
テキトー教師DotAI 認定講師そうなんです。だから2つ目のハードルはアタッチの工程で、既存のリポジトリやデザインファイルを持っている人はそこで繋ぐ。
持っていない人は飛ばして進んでも大丈夫です。
持っていない人は飛ばして進んでも大丈夫です。
室谷代表取締役この一手間、チームで使うほど効くところで。色やコンポーネントの定義を毎回プロンプトで説明し直すの、普通に無駄なんですよ。
最初に一回渡しておく方が、以降のやり取りが短く済みます。
最初に一回渡しておく方が、以降のやり取りが短く済みます。
スクリーンショットやコードなどコンテキストを足すほど出力が良くなる
テキトー教師DotAI 認定講師次が一番差が出るところです。既存デザインのスクリーンショット、競合製品、ワイヤーフレーム、複製したいスタイルのスライドやドキュメント、コードリポジトリのリンク。
情報が多いほど出力が良くなると案内されています。
情報が多いほど出力が良くなると案内されています。
室谷代表取締役材料を先に渡すほど、こちらの好みを言語化する手間が減るわけですね。デザインシステムのインポート品質もソース素材の質に依存する、というのは現場感覚として納得です。
テキトー教師DotAI 認定講師逆に、乱雑なコードベースや不完全なファイルを渡すと、その乱雑さがそのまま出ます。初めて触る人は「とりあえずプロンプトだけ」で始めがちなんですけど、そこは我慢して材料を入れた方が近道ですね。
室谷代表取締役仕様の共有が薄いまま開発を走らせて手戻りするのと同じ構造なんですよね。前工程を削ると、後工程で必ず払うことになる。
プロンプトは目標・レイアウト・コンテンツ・相手を具体的に書く
室谷代表取締役デザイナーでなくても書ける前提になっていて。目標、レイアウト、コンテンツ、誰に見せるか。
この4つを具体的に埋めるだけで変わります。
この4つを具体的に埋めるだけで変わります。
テキトー教師DotAI 認定講師公式の例が分かりやすくて、「地域と製品ラインのフィルター付きで月間収益を表示するダッシュボードを作成してください」とか、「ヒーローセクション、コード例、価格設定を含む新しいAPIプロダクト用のランディングページを構築してください」とか。ここまで書くと別物になります。
室谷代表取締役反対に「いい感じのページを作って」だと、出てきたものに対して「なんか違う」しか言えなくなるんですよ。指示が曖昧だと、レビューの言葉まで曖昧になる。
テキトー教師DotAI 認定講師情報が足りなければClaude側から質問してくれます。ただ、最初から4点を埋めておく方が往復は減りますね。
生成結果をキャンバスで確認して、次の一手を決める
テキトー教師DotAI 認定講師出てきたらキャンバスで確認して、次の一手を決める。方向性が違うなと思ったら、2〜3案を出してもらって比べるのが早いです。
室谷代表取締役案を並べてもらうの、意思決定のコストで考えるとかなり合理的で。1案で延々悩むより、3案から選ぶ方が速いんですよね。
テキトー教師DotAI 認定講師あと「現在の内容を保存して、まったく異なるアプローチを試してください」と伝えると、今のプロジェクトを保存した上で別案に移れます。バージョン履歴の機能自体はまだないので、この一言が効きます。
室谷代表取締役保存を挟めるかどうかで、試す時の心理的ハードルが変わるんですよ。壊すのが怖いと、人は動かなくなるので。
作ったデザインを直すには？チャット・インラインコメント・直接編集の使い分け
構造から変えるならチャットで依頼する
デザイン修正3系統の使い分け
チャット
- 骨格・構造から変える
- カラースキーム変更など説明が要る変更
- セクションの追加・並べ替え
- 「なぜ変えたいか」まで伝えられる
- 往復回数がそのまま工数になる
インラインコメント
- 一部分の修正
- コンポーネント単位で対象を絞る
- 全体への影響を避けたいときに有効
- 反映されない既知の挙動あり→同内容をチャットに貼ると通る
室谷代表取締役生成されたデザインを直す方法、大きく3系統あるんですよね。まず骨格から変える系はチャットです。
「カラースキームをより暗く、よりミニマルにしてください」みたいに、説明が要る変更は言葉で頼むのが結局いちばん速い。
「カラースキームをより暗く、よりミニマルにしてください」みたいに、説明が要る変更は言葉で頼むのが結局いちばん速い。
テキトー教師DotAI 認定講師現場でよく聞くのは、いきなりキャンバスを触ってレイアウトごと崩しちゃった、というパターンです。セクションの追加や並べ替えもチャットの方が意図が伝わりますね。
室谷代表取締役ここ、往復の回数がそのまま工数になるんですよ。一発で意図が通ると制作コストの桁が変わってくる。
だから最初の指示は具体的に書いた方がいい。
だから最初の指示は具体的に書いた方がいい。
テキトー教師DotAI 認定講師たしかに。「なぜ変えたいか」まで書けるのがチャットの強みですね。
キャンバスを触るだけだと、理由が伝わらないんですよ。
キャンバスを触るだけだと、理由が伝わらないんですよ。
一部分の修正はインラインコメントで対象を絞る
テキトー教師DotAI 認定講師逆に「このボタンのパディングを大きくしてください」みたいなコンポーネント単位の修正は、キャンバスの該当部分をクリックしてインラインコメントを置く方が狙いが外れません。
室谷代表取締役なるほど、対象を絞れるわけですね。全体に影響が出るのを避けたいときに効く。
テキトー教師DotAI 認定講師ただ、コメントが反映されないことがあるんですよ。これは既知の挙動で、同じ内容をチャットに直接貼ると通ります。
回避策として覚えておくといいです。
回避策として覚えておくといいです。
室谷代表取締役それは知らないと詰みますね。原因を探してハマる時間が一番もったいない。
位置やサイズの微調整はキャンバス上で直接いじる
室谷代表取締役数ピクセルの話はもう手で触った方が早いですよね。AIに頼むと待ち時間の方が長くなる。
テキトー教師DotAI 認定講師ドラッグでの移動、サイズ変更、配置はそのままキャンバスで。矢印キーなら1px単位、Shiftを押しながらだと10px単位で動かせます。
Cmd/Ctrl+Zで元に戻せます。
Cmd/Ctrl+Zで元に戻せます。
室谷代表取締役全部AIに任せる、じゃなくて、どこは手でやるかという割り切りが要るんですよね。
テキトー教師DotAI 認定講師あと新しいテキストレイヤーやアートボードの追加はマウスかトラックパッドが必要で、キーボードだけだと足りないです。Claudeに頼めば追加してくれますけど、そこは手の方が早い場面が多いです。
別案を試すときの頼み方と、バージョン履歴の現状
テキトー教師DotAI 認定講師方向性をまるごと変えたいときは「現在の内容を保存して、まったく異なるアプローチを試してください」と伝えるのが定石です。保存した上で、会話の中で前の版を参照できるようになります。
室谷代表取締役バージョン履歴の機能はまだ無いんですよね。
テキトー教師DotAI 認定講師はい、そこは現状の制約です。だから「保存して」の一言を添えるのが大事で、上書きされると手で戻すしかなくなります。
室谷代表取締役機能で解決していない部分は運用でカバーする。これ、ツール全般に言えることですね。
書き出し・共有・Claude Code連携——作った後にどうつなぐか
書き出せる形式と、送り先の広さ
室谷代表取締役前の章で直し方の話をしたので、次は出口の話なんですけど。プロジェクト画面の右上に「エクスポート」ボタンがあって、そこから .zip ダウンロード、PDF、PPTX、Google Slides、スタンドアロンHTMLに落とせるんですよね。
テキトー教師DotAI 認定講師ここで止まる人が多いんですよ。「作るところまでは行くのに、で、どこに持っていくんですか」という感じで。
室谷代表取締役送り先もかなり用意されていて、Canva、Miro、v0、Replit、Netlify、Vercel、Wix、HubSpot、Gamma、Lovable あたりに直接送れます。Adobe系のツールも入ってます。
受託の現場だと、この先の作り直し工数が消えるのが一番デカいんですよ。
受託の現場だと、この先の作り直し工数が消えるのが一番デカいんですよ。
テキトー教師DotAI 認定講師提案書をPDFで出して終わり、じゃなくて、そのままCanvaで仕上げるとか、Netlifyに置いてURLにする、まで一本道で行けるんですね。
共有はデフォルトで非公開——権限はどこで変えるか
室谷代表取締役共有、デフォルトは非公開になってます。ここは地味に大事で、クライアントワークだと「勝手に外から見える状態になってたら困る」という話になるので。
テキトー教師DotAI 認定講師最初にそこを確認する人は多いです。「作ったものは誰が見られるのか」を先に知りたい、と。
室谷代表取締役「共有」から閲覧・コメント・編集の権限を設定する形ですね。ただiOS/Androidアプリだと共有設定は変更できないので、そこはWebかデスクトップで、という整理になります。
テキトー教師DotAI 認定講師スマホで作って、共有の設定だけPCで、という流れになりがちですね。
/design-syncと/designで、コードと往復する
室谷代表取締役ここが本題で、Claude Codeとの連携なんですよ。/design-sync でコード側のデザインシステムを読み込ませると、制作が既存コンポーネントから始まる。
で、固まったらClaude Codeに渡す、と。
で、固まったらClaude Codeに渡す、と。
テキトー教師DotAI 認定講師逆方向もあるんですよね。/design でデザインをコードベースに取り込む。
最初に触る人は「デザインから実装への一方向」だと思い込んでることが多いんですが、両方ある。
最初に触る人は「デザインから実装への一方向」だと思い込んでることが多いんですが、両方ある。
室谷代表取締役2026年6月に双方向同期のアップデートがロールアウトされた、という報告も出てます。デザイン→コード→デザインを回せるようになったのは実務だと効くんですよ。
実装してみて分かったズレを、デザイン側に戻せるので。
実装してみて分かったズレを、デザイン側に戻せるので。
テキトー教師DotAI 認定講師注意点と、結果が良くなるコツ
まだ「できないこと」を先に押さえる
室谷代表取締役まず制限の話からなんですけど、バージョン履歴機能はまだなくて、前の状態に戻したいときは「現在の内容を保存して、まったく異なるアプローチを試して」と伝えて、会話の中で以前のバージョンを参照する形なんですよね。複数人での同時編集もまだ基本的な段階で、確実には動かないことがある・・・
テキトー教師DotAI 認定講師そこ、最初に知らないとけっこう焦るんですよ。現場でよく聞くのは「さっきの状態に戻したい」で手が止まるパターンですね。
こまめにエクスポートしておくのが保険になります。
こまめにエクスポートしておくのが保険になります。
室谷代表取締役経営目線で言うと、レビューに出す前に一度書き出しておくだけで手戻りのコストが全然違うんですよ。あと削除の操作、プロパティパネルのレイヤーリストで押すと「キャンバス上で選択されているもの」に作用するので注意で。
テキトー教師DotAI 認定講師たしかに。行を消したつもりが別のものが消えるやつで、初めて触る人はだいたい一度は通ります。
重いリポジトリと、コメントが出ないとき
テキトー教師DotAI 認定講師非常に大きいリポジトリを渡すと、ラグったりブラウザ側で問題が出たりするみたいです。あとインラインコメントがページに表示されないことがあって、その場合はコメントビューを開けば確認できます。
室谷代表取締役チャットアップストリームエラーが出たときは、同じプロジェクト内で新しいチャットタブを開くと解決することがある、と。これは覚えておくと助かりますね。
テキトー教師DotAI 認定講師そうなんですよ。コメントが反映されないときは、同じ内容をチャットに直接貼るのが知られている回避策です。
入り口が別なので、片方だけ通らないことがあるんですね。
入り口が別なので、片方だけ通らないことがあるんですね。
室谷代表取締役あとデザインシステムのインポート品質は素材に依存するので、乱雑なコードベースや不完全なファイルはそのまま出力に出ます。入り口で何を渡すかを選ぶのが一番効くんですよね。
キーボードでできる操作、マウスが要る操作
テキトー教師DotAI 認定講師操作は大きくこう分かれます。
| 操作 | キー |
|---|---|
| 領域（トップバー・キャンバス・プロパティパネル）の移動 | F6 / Shift+F6 |
| アートボードのタイトルへ / 選択 / 内部のレイヤーへ | Tab / Space / Return |
| アートボード・レイヤーの移動 | 矢印キー（Shiftで10px単位） |
| レイヤーの並べ替え | Option + 矢印 |
| 複製 / 削除 / 元に戻す | Cmd(Ctrl)+D / Delete・Backspace / Cmd(Ctrl)+Z |
| プロパティパネルの開閉 | Cmd(Ctrl)+\ |
室谷代表取締役ここで引っかかるのが、新しいテキストレイヤー・アートボード・シェイプ・メモの追加はマウスかトラックパッドが要る点なんですよ。キーボードだけでは完結しない。
テキトー教師DotAI 認定講師ただ、Claudeに頼めば追加できますからね。キーボードだけで作業したい人は「ここにテキストレイヤーを追加して」と会話で投げる形になります。
室谷代表取締役アクセシビリティ周りの情報が手薄なのは、この手のツール共通の弱点でもあるんですよね。キー割り当ての一覧は公式にあるけど、支援技術でどこまでカバーされるかは公式の最新情報を見た方が確実です。
結果が良くなるコツと、レビューの頼み方
室谷代表取締役出力の質を上げるコツはシンプルで、完全なデザインシステムをインポートすること。あとはシンプルな核から始めて段階的に複雑さを足していく方が、最初から全部盛るより安定します。
テキトー教師DotAI 認定講師フィードバックの粒度も効きますね。「正しく見えない」ではなく「フォームフィールドの間を8pxに縮めて」みたいに具体的に言う。
デザインシステムのコンポーネント名を名指しで指定するのも現場で効くやり方です。
デザインシステムのコンポーネント名を名指しで指定するのも現場で効くやり方です。
室谷代表取締役レスポンシブが要る範囲、モバイル・タブレット・デスクトップのどこまで見るかは早めに伝えた方がいい。方向性で迷ったら2〜3案を出してもらって比べるのが早いんですよね。
テキトー教師DotAI 認定講師最後に、Claudeをジェネレーターじゃなくコラボレーターとして扱うのが一番大きいです。アクセシビリティやコントラスト比、情報階層のレビューを頼むと、作る側と見る側を分けられる。
この辺は人が見落としやすいところなので、頼み方として持っておくと強いですよ。
この辺は人が見落としやすいところなので、頼み方として持っておくと強いですよ。
よくある質問
Q1. スマホやタブレットからでも使えますか？
テキトー教師DotAI 認定講師最初に戸惑うのがそこなんですよ。現場でよく聞くのは「出先でちょっと直したい」なんですけど、細かい編集は画面が広いほうがやりやすいのは確かですね。
室谷代表取締役そうなんですよね。確認はスマホ、作り込みはPC、みたいに役割を分けると余計なストレスがない。
時給で考えると、小さい画面で粘ってる時間が一番もったいないんですよ。
時給で考えると、小さい画面で粘ってる時間が一番もったいないんですよ。
テキトー教師DotAI 認定講師たしかに。見るだけ・微修正は手元で、レイアウトを動かすのは席に戻ってから、が現実的だと思います。
Q2. 日本語が入ったデザインもちゃんと作れますか？
室谷代表取締役ここ気になる人多いと思うんですけど、日本語の扱いってどうなんですか。
テキトー教師DotAI 認定講師現場感覚で言うと、フォント次第で見え方が変わるので、最初に日本語入りの見本を一つ作って確認するのが早いですね。英字前提のまま組むと、文字の詰まりが窮屈に見えることがあります。
室谷代表取締役なるほど。日本語は文字数が増えがちなので、ボタンや見出しの余白が想定より足りなくなるんですよね。
そこは生成後に必ず見るポイントですね。
そこは生成後に必ず見るポイントですね。
Q3. 作ったデザインの権利や商用利用はどう考えればいい？
テキトー教師DotAI 認定講師ここは断言できないので、公式の利用規約を確認してもらうのが前提になります。そのうえで現場では、社外に出す前に社内のルール担当に一度通すようにしてますね。
室谷代表取締役経営の側から言うと、権利の確認を後回しにすると一番高くつくんですよ。使う前に一度チェックしておけば、その後の意思決定が速くなる。
テキトー教師DotAI 認定講師たしかに。素材やフォントを別で持ち込んだ場合は、そちらの条件も別に見る必要がありますから、そこは分けて考えるといいですね。
Q4. デザインの経験がなくても使いこなせますか？
室谷代表取締役これ、非デザイナーの人にどこまで勧めていいのか迷うんですよね。中の人的には。
テキトー教師DotAI 認定講師初めて触る人は、完成形を作ろうとするところで止まりがちなんですよ。まず「たたき台を出してもらう」と割り切ると動き出せます。
室谷代表取締役つまり、ゼロから作るのではなく、直す前提で出してもらう、と。レビューのコストが下がるなら、人を増やさずに回せますからね。
テキトー教師DotAI 認定講師そうそう。言葉で指示を出すのが得意な人ほど、立ち上がりは早い印象です。
Q5. プランを変えたり解約したとき、作ったデザインはどうなりますか？
テキトー教師DotAI 認定講師ここは公式の案内で確認してほしいところなんですけど、現場では「残る前提で考えない」ようにしてます。必要なものは書き出して手元に置く。
室谷代表取締役それ、運用でカバーするのが正解なんですよね。大事な画面は書き出して共有ドライブに置く、を習慣にしておけば、プラン変更で慌てない。
テキトー教師DotAI 認定講師たしかに。あと、誰がどのプロジェクトを持っているかを一覧にしておくと、引継ぎのときに助かります。
まとめ
室谷代表取締役というわけで、Claude Design、触ってみる価値は十分あるんですよね。ただ、claude.ai/design が12月14日で終わるのは決まってることなので、そこだけは先に予定に入れておいてほしい。
テキトー教師DotAI 認定講師たしかに。始めるのと同時に「終わる日」をカレンダーに入れておくのが、一番失敗しないやり方だと思います。
室谷代表取締役あとは、いきなり大きな案件で使わないこと。小さい画面を一つ作って、直して、書き出す。
その一周を回してから範囲を広げるのが、ROI 的にいちばんきれいなんですよ。
その一周を回してから範囲を広げるのが、ROI 的にいちばんきれいなんですよ。
テキトー教師DotAI 認定講師現場感覚で言うと、最初の一周を一緒にやると、その後の伸びが全然違いますからね。まずは手元の一枚からで十分です。
