Claude Design 6月刷新：トークン爆食い問題を修正、Claude Codeと一気通貫へ

「コーヒーカップ一杯のあいだに、今週分のProトークンが全部溶けた」。ヤタリブログに投稿されたこの一文は、4月にClaude Designが公開されてから日本のユーザーが一斉に経験した問題を正確に表していた（ヤタリブログ, 2026年4月）。

PCWorldのレビュアーは数字を出した。単一のWebページプロトタイプを3バリエーション作っただけで、週次Pro使用枠の約80%が溶けた。25分で（VentureBeat, 2026年6月17日）。

Anthropicはこの問題を認識していた。6月17日、Claude Designの大型アップデートを発表した。トークン消費の削減、デザインシステム取り込み、Claude Codeとの双方向連携の3本柱だ。「デモ用おもちゃ」から「エンタープライズのデザイン基盤」へ。Anthropicの方向性はアップデートの内容から読み取れる。

4月リリース時の「トークン爆食い」問題の実態

Claude Designは4月17日、リサーチプレビューとして公開された。1週間で100万ユーザーを獲得し、話題性は申し分なかった（Anthropic, 2026年4月）。

しかし熱狂は早々に冷めた。Claude Designが使うトークンは、通常のチャットとは桁が違う。当時のClaude Designは、チャットやClaude Codeとは別の、より小さい独立したトークンプールを持っていた。設計の結果、$20/月のProユーザーは文字通り30分のセッションで週次上限に達する事態が続出した。

日本語でも声は上がった。「Claude Designが出た。試したいのに、Proプランの上限が怖くて触れない話」というnoteの記事タイトルが、多くの人の心境をそのまま言語化していた（note, 2026年4月）。プレゼンデザイナーのFUJIはXで「Claude Designのトークン消費速すぎると感じてる方、ある程度は回避できるかもです」と投稿し、テキスト優先・画像最小化のティップスを共有した（FUJI on X, 2026年）。

問題の構造は明確だった。視覚的な生成タスクはトークンを大量消費する。Opus 4.7ベースの推論が視覚要素ごとに走るため、3バリアントを生成すれば費用は3倍。デザインはイテレーション前提のプロセスだが、トークン上限が速すぎてイテレーションできない。機能の本質と制約が真っ向から衝突していた。

6月アップデートの3つの核心機能

1. デザインシステム取り込み（Design System Import）

最も影響が大きい機能追加だ。GitHubリポジトリ、デザインファイル、手動アップロードからデザインシステムを取り込み、以降の生成出力が自動的にそのシステムに準拠するようになった。

従来の問題はここにあった。毎回「フォントはXX、色は#XXXXXX、ボタンの角丸はXXpx…」とプロンプトに書かないとブランドから外れた出力が来る。デザインはすぐに”ChatGPTスタイル”の汎用UIになる。これが解消される。

エンタープライズ向けには管理者が1つのデザインシステムを「公式」として設定・ロックできる機能も加わった。全社でClaude Designを使っても統一されたブランドアセットが出てくる、という運用が現実になる（Fast Company, 2026年6月17日）。

2. コードラウンドトリップ（Code Round-Trip）

Claude Designがローカルコードベースを読み取り、既存コンポーネントやスタイルを把握した上でデザインを生成する機能だ。これがClaude Codeとの統合の核になる。

従来のデザインからコードへのハンドオフは「デザイナーがFigmaでデザイン → エンジニアがコードを書き直す」という手動プロセスだった。今回のアップデートでは、Claude Designで完成したデザインが「ハンドオフバンドル」として出力され、Claude Codeに渡すと実装が続行される。スクリーンショットの貼り付けや口頭での仕様説明は不要になる。

Claude Codeのターミナルで使える新コマンドは2つ。/designでClaude Designのプロジェクト作成・編集・同期、/design-syncでローカルコードベースのデザイントークンをClaude Designに送り込む。エンジニアがIDEを離れずにデザインの修正を指示できる（Engadget, 2026年6月17日）。

3. トークン消費の改善

最もユーザーが待っていた修正だ。Anthropicは2点の対応を実施した。

1つ目は技術的な最適化。ターンあたりの平均トークン消費量を「出力品質を維持しつつ大幅に削減」した（具体的な削減率は非公開）。エラー率も同時に下落した。

2つ目は構造的な変更。Claude Designのトークンプールが、チャット・Claude Code・Claude Coworkと共有のプールに統合された。以前は「Design専用の小さいバケツ」があって先に底をついた。今はバケツが1つになった。文字通り使い切るまで制限にぶつかりにくくなった（VentureBeat, 2026年6月17日）。

実務ワークフローの変化：デザイナーとエンジニアの境界

Claude Designのアップデートが示すのは機能追加だけではない。AnthropicはVentureBeatの取材に対し「Claudeを会話の相手から、実際の仕事が行われるシステムへの組み込みにする」という方針を明言した（VentureBeat, 2026年6月17日）。

4月のリリース時は「PMやマーケターがデザインを作れる」という文脈で語られた。今回のアップデート後は文脈が変わった。エンジニアが/designコマンドでデザインを操作し、デザイナーがClaude Designの出力をFigmaのデザインシステムと連携させる——役割の境界線が曖昧になりつつある。

実務でこの変化を最初に感じるのは、フロントエンド開発の「最初の一歩」だろう。新機能のプロトタイプを作るとき、以前はデザイナーにFigmaモックを依頼→待つ→受け取る→実装する、というシーケンスが発生した。今は/designでラフを出し、デザインシステムに準拠させ、そのままコードに落とす。デザイナーへのレビュー依頼は依然として必要だが、最初のループが大幅に速くなる。

Lenny’s Newsletterが指摘したように「Claude DesignはFigmaを殺さない。しかし上流のコンテキストを奪う」という表現が的確だ（Lenny’s Newsletter, 2026年）。

影の部分：まだ残る制限と懸念

公平のために制限も書く。

リアルタイムコラボレーションがない。 Figmaは複数人が同一キャンバスで同時編集できる。Claude Designはそれができない。デザインレビューやワークショップ形式の作業には向かない。

ベクター操作ができない。 Claude Designはコードをレンダリングするアーキテクチャで、ベクターのパス編集はできない。ロゴ作成・アイコン調整・印刷物制作はFigmaやIllustratorが依然として必要だ。

まだリサーチプレビュー段階。 製品版リリースのタイムラインはAnthropicから発表されていない。エンタープライズで本番運用するには、安定性の担保という面でリスクがある。

Proプランのトークン上限は根本的に消えていない。 構造的な改善はされたが、$20/月のProプランが週次上限を持つ事実は変わらない。ヘビーユーザーにはMax（$100〜$200/月）が現実的な選択肢になる（JAPAN AI ラボ, 2026年）。

関連記事

• Claude Design正式発表｜Figma株7%急落、PMとマーケがデザイナーになる日
• バイブコーディング入門｜AIに”雰囲気”で指示する開発手法の光と影【2026年版】
• コードを書くな、任せろ：2026年AIエージェント時代の開発者像
• Claude Code vs OpenAI Codex 徹底比較【2026年最新】

---

免責事項: 本記事の情報は2026年6月18日時点のものです。Claude DesignはリサーチプレビューのためAnthropicの判断により機能・料金・提供条件が予告なく変更される可能性があります。最新情報はAnthropic公式サイトでご確認ください。