Anthropicが開発するAIコーディングツール「Claude Code」に、UIデザインを直接扱える「/design」コマンドが追加されました（現在はリサーチプレビュー段階）。コードを書くためのツールにデザイン機能が入ってきたという話は、一見エンジニア向けに聞こえますが、実際には「自分でアプリ画面を作りたいけどコードは書けない」という30〜40代の会社員にとっても関係のある動きです。この記事では、この機能が何をするものなのか、自分の仕事にどう使えるかを整理します。
Claude Codeの「/design」コマンドとは何か
Claude Codeはもともと、ターミナル（コマンドラインと呼ばれる黒い画面）上でAIと会話しながらコードを書けるツールです。エンジニアが使うイメージが強いですが、今回追加された「/designコマンド」は、そのClaude Codeの中に「Claude Design」というアートボード機能を呼び出せるものです。アートボードとは、デザインツールでよく使われる「作業用キャンバス」のこと。FigmaやIllustratorで使う「画面上でパーツを並べて編集する」あの感覚に近いものを、Claude Code内で実現しようとしています。
これまでClaude Codeでは、「このボタンを赤くして」とテキストで指示すれば、AIがコードを書き換えてくれるという流れでした。今回の機能が加わると、視覚的なアートボード上でUI（ユーザーインターフェース、つまりアプリや画面の見た目）を確認しながら、直接編集できるようになります。コードと画面の行き来が減り、「見た目を確認しながら作る」という作業がよりスムーズになるわけです。
なぜこのタイミングで出てきたのか
ここ1〜2年で、AIを使ってWebサービスや社内ツールを自分で作ろうとする非エンジニアが増えています。「ノーコードツール」と呼ばれるサービスが普及し、コードを書かなくてもアプリが作れる環境は整ってきました。ただし、AIに文章で指示してコードを生成させる方法では、画面の見た目を細かく調整するのが難しいという課題がありました。「もう少し右に寄せて」「フォントを少し大きく」といった微調整を、テキストの指示だけで伝えるのは手間がかかります。
Anthropicがこのタイミングで「/design」を出してきた背景には、コーディングAIの競争があります。GitHubのCopilot、CursorといったAIコーディングツールが相次いで機能を拡張しており、Claude Codeもデザイン領域に踏み込むことで差別化を図っています。エンジニアだけでなく、デザイナーや企画職の人が使えるツールにしていく方向性は、ChatGPTの使い方ガイドでも触れたAI全体の「間口を広げる」流れと一致しています。
非エンジニアの会社員にとって何が変わるか
具体的なシナリオで考えてみましょう。たとえば、40代の事業企画担当者が社内向けの報告ダッシュボードを作りたいとします。これまでは「エンジニアに依頼する」か「ExcelやGoogleスプレッドシートで代替する」しか選択肢がありませんでした。Claude Codeと「/design」を使えば、アートボード上でグラフの配置やボタンの色を確認しながら、AIと会話してUIを仕上げることができます。エンジニアへの依頼が不要になるわけではありませんが、「まず自分でたたき台を作る」というステップが現実的になります。
もう一つ例を挙げると、30代のマーケティング担当者がキャンペーン用のランディングページを作るケースです。外注すると数万円かかる作業が、Claude Codeで自分でたたき台を作れれば、発注コストを抑えながら修正の回数も減らせます。デザインの微調整をアートボード上で直感的に行えることで、「テキストで指示してはコードを確認する」という往復が減り、作業時間が短縮できます。
ただし、現時点ではリサーチプレビュー段階です。本番環境で使うには安定性の確認が必要で、複雑なUIや大規模なシステムには向いていない可能性があります。「試してみたい」という段階であれば今から触れる価値はありますが、業務の重要なシステムに使うには、もう少し機能が固まってからの方が安心です。
「/design」コマンドを使う前に知っておきたいこと
Claude Codeはブラウザだけで動くツールではなく、基本的にターミナルからインストールして使うものです。この点で「ちょっとハードルが高い」と感じる方もいるでしょう。以下に、現時点での状況を整理します。
| 項目 | 現状 |
|---|---|
| 提供形態 | リサーチプレビュー（一般公開前の試験段階） |
| 利用条件 | Claude Codeのサブスクリプションが必要 |
| 対象ユーザー | 主にClaude Codeを既に使っているエンジニア・開発者 |
| 機能の安定性 | まだ開発中のため変更・制限あり |
| 日本語対応 | 現時点では英語UIが中心 |
この表を見ると、今すぐ非エンジニアが日常業務で使うには少し早い段階です。ただ、「リサーチプレビュー」というのはAnthropicが一般公開に向けてフィードバックを集めている段階を指します。正式リリースまでに数ヶ月かかることが多く、その間に機能が改善・拡張されていきます。
プロンプトの書き方を工夫することで、AIへの指示精度が上がります。プロンプトエンジニアリングガイドを参考にしながら、「どんな画面を作りたいか」を具体的に言語化する練習をしておくと、いざ使い始めたときにスムーズです。
AIツールの「デザイン機能」はどこへ向かうか
Claude Codeの「/design」は、コーディングツールとデザインツールの境界線が薄れていく流れの一部です。Figmaも最近AI機能を強化しており、「デザインする」「コードにする」「調整する」という3つのステップが、一つのツールの中で完結する未来が近づいています。
この流れで注目したいのは、「誰が作るか」という問いが変わってきている点です。これまでWebサービスの画面を作るには、デザイナーとエンジニアの両方が必要でした。AIがその橋渡しをするようになると、企画や営業といった職種の人が「自分でたたき台を作って、専門家に仕上げてもらう」という分業が現実的になります。
AIを使って副業や社内改善に取り組みたい方にとっては、こうしたツールの進化が直接チャンスにつながります。AI副業ガイドでも整理しているように、自分でUIを作れるスキルは、受注できる仕事の幅を広げる要素の一つです。
まとめ
Claude Codeの「/designコマンド」は、コードを書くツールにデザイン編集の機能を組み込んだ新しい試みです。現時点ではリサーチプレビュー段階のため、すぐに業務で本格活用するには早い部分もありますが、「非エンジニアでもUIを自分で作れる」という方向への流れは確実に進んでいます。今すぐ触れてみるか、正式リリースを待つかは使い方次第ですが、「こういう機能が出てきた」と知っておくだけで、半年後の選択肢が変わってくるかもしれません。
