いまのClaude Design、めちゃくちゃ使えるじゃん。
先日、Claude Code でコードを書いている合間に、ちょっとした営業資料を1本お願いしてみたんです。
そうしたら、色もフォントも、普段さわっているプロダクトとほぼ同じトーンで出てきた。
正直、一瞬手が止まりました。
Claude Design は、リリース直後にひと通りさわって、そのまま放置していました。 でも、この「プロダクトと地続きの資料がポンと出てくる」感覚は、個人的にこれまでのAIツールになかったもので、見方が変わりました。
tatsuki（@nobel_824）と申します。 中小企業向けに AI の活用サポートをしていて、Claude や Codex の業務導入を手伝いつつ、僕自身も毎日 Claude Code を走らせています。
この記事は、どちらかというと「普段コードをさわる人」向けの角度で書きます。
今回、Claude Designのおすすめ機能Design Systemの作り方をまとめたデザインシステムキットを作成しました。
この記事の最後で受け取れるようにしています。
なぜ「同じトーン」で出てきたのか
種を明かすと、事前に「デザインシステム」を設定してあったからです。
デザインシステムというと難しく聞こえますが、コードを書く人向けに言い換えると、
ブランドのルールを「設定ファイル」として先に渡しておく、みたいなものです。
色。フォント。見出しの形。余白。やってはいけないこと。
これを一度だけ書いておくと、以降は毎回それを読み込んでから資料を作ってくれる。
プロジェクトに CLAUDE.md を置いておくと、毎回同じ指示を打たなくて済む。あの感覚に近いです。
「ブランド版の CLAUDE.md を1枚だけ書いておく」と思うと、しっくりくるかもしれません。
これを渡しておくと、出てくる資料のトーンが毎回ブレない。
あとからページを足しても、最初の1枚と地続きのまま。
「いかにもAIが作った」感じの無難さも、薄れていきます。
いちばんおいしいのは /design-sync
ここからが、Claude Code を使う人だけが得する部分です。
Claude Code 側に /design-sync というコマンドがあって、
GitHub のリポジトリやローカルのコードから、色やフォントを含むデザインシステム一式を読み取って、そのまま Claude Design に渡せます（2026年6月のアップデート）。
つまり、すでに動いている自分のサービスのコードを食わせると、
そのサービスの色・フォントのまま、資料や LP のたたき台が出てくる。
資料と、実際のプロダクトの見た目がズレない。
カラーコードを手で書き写す作業も、まるごと消える。
ここが、地味にいちばん効きます。僕の環境では、ベータ版ですが普通に動いています。
※これは Claude Code（ターミナルやデスクトップアプリで使う別ツール）側のコマンドで、claude.ai/design のチャット欄には打てません。間違えやすいので注記しておきます。Claude Design 自体がまだベータ（Pro / Max / Team / Enterprise プラン向け）なので、プランによっては使えないこともあります。
放っておくと、AIは無難なほうへ寄る
逆に、何も渡さずに頼むと、どこかで見た無難なデザインで返ってきます。
毎回トーンが変わって、色もバラつく。
しかも Claude Design は、やり直すたびに枠を消費する仕組みでした。
海外では、直しを繰り返して30分で1週間分の枠を使い切った、という体験記まで出ています（PCWorld・2026年4月）。
6月のアップデートで枠まわりは改善されていますが、「やり直しを減らす工夫が、そのまま効く」構造は変わりません。
だから、最初にデザインシステムを1枚だけ作っておく投資が効くんです。
公式のガイドも、これを先に設定しておく前提で書かれています。
コードがなくても、同じ発想でいける
「自分のリポジトリなんてない」という人も、心配いりません。
コードの代わりに、手元のロゴやブランドカラー、会社サイトの URL（スクショでも構いません）を渡せばいい。そこから色やフォントを拾ってくれます。
コードがある人は、その部分が /design-sync で自動になる。差はそれくらいです。
あとは資料の中身を渡して、「このトーンで作って」と伝える。
仕上げは、固有名詞の表記ゆれや数字の桁を、自分の目でさっと見るくらいで十分です。最初から100点を狙わなくていい。文字サイズや色は、あとから Claude Design の中で直せます。
セミナースライドや提案資料はもちろん、社内向けの1枚サマリ、LP の叩き台まで。コードを書く合間に資料を量産する人ほど、この最初の1枚があとから効いてきます。
そのまま使えるキットを用意しました
とはいえ、ゼロから作るのは面倒だと思います。
なので、この記事の内容をそのまま再現できる「Claude Design デザインシステムキット」を用意しました。
記事で触れた「無難に寄る」「やり直しで枠が溶ける」を、先回りで潰すための中身です。
- 色・フォント・余白・部品・禁止リストを空欄で埋めるだけのブランド設定シート
- そのまま真似できる記入例
- セミナースライド用のテンプレ
- Claude Code に渡すときの考え方（/design-sync との合わせ方）
この記事の内容をそのままコピペで再現できる「Claude Design デザインシステムキット」を、LINE で無料配布しています。
▼LINE登録で「Claude Design デザインシステムキット」を受け取る
https://t.co/90omRA4UQ7
オプチャ（LINE のオープンチャット）に参加いただき、その後ノートに記載の公式LINEから
デザインシステム
と送っていただけると、特典を受け取ることができます。
※オープンチャット内ではキーワードの送信はお控えください
まずはテンプレをそのまま Claude Design に入れて、1枚だけ資料を作ってみるのがおすすめです。それだけで、デザインシステムを使う感覚がつかめると思います。
▼LINE登録で「Claude Design デザインシステムキット」を受け取る
