投稿者 投稿日: カテゴリー AIニュース
Anthropic は2026年8月18日、Claude Code に画面モックアップを作る /design コマンドを追加しました。
コードを書く前にターミナル上で複数のUI案を並べ、気に入ったものを選んでそのまま実装へ進む。The Decoder が2026年8月18日に報じた内容によれば、Claude Code の /design コマンドはアーリープレビューとして公開され、claude update を実行するだけで使えるようになります。自社ECのLPや商品ページを社内で改修している事業者にとって、デザイン工程の外注判断が変わりうる更新です。本記事は、EC支援19年・5,000社超の実績を持ち、AI導入支援は2023年から提供する株式会社オルセル（うるチカラ運営）が解説します。
/designコマンドで何ができるのか
結論として、/design は「実装前にUI案を複数枚まとめて出す」ための機能です。使い方はシンプルで、/design a few options for {機能名} のように書くと、Claude が複数のドラフトをアートボードとして生成します。そこから気に入った案を1つ選び、手直しして、そのまま実装ステップへ進む流れになります。
技術的に重要なのは、既存のコードベースを読んだうえで案を出す点です。開発者の Nate Parrott がX上で紹介した内容では、Claude が現在のUIスタイルに合わせてモックアップを作り、共有可能な Artifacts として出力するとされています。ゼロから汎用的なデザインを描くのではなく、いま動いているサイトの世界観に寄せた案が出てくるということです。
エディタとプロンプト周りの仕組みは、既存の Claude Design から持ち込まれ、Claude Code に直接組み込まれた形になります。ただし現時点では、生成したデザインは実装ステップへ引き継がれるものの、保存は手動で行う必要があると報じられています。アーリープレビューという位置づけである点は押さえておくべきです。
日本のEC事業者にとっての3つの論点
第一に、デザイン修正の初速が変わります。Shopify や自社EC でテーマを触っている事業者の場合、これまでは「こういう見た目にしたい」を言葉やラフで伝え、デザイナーがカンプを作り、実装へ渡すという3ステップを踏んでいました。/design はこの前半2つを圧縮します。既存のCSSやコンポーネントを読んだうえで案が出るため、実装できないデザインが上がってくる無駄も減らせます。
第二に、社内の合意形成コストです。EC の現場では、カート導線やLPのファーストビューを変える判断が、店長・マーケ担当・経営者の三者で止まりがちです。案が1枚しかないと議論は「良いか悪いか」になりますが、3案並べば「どれが近いか」に変わります。共有可能な Artifacts として出力される点は、この用途と相性が良いはずです。
第三に、外注の切り分けです。誤解しないほうがよいのは、これはデザイナーの代替ではなく、たたき台生成の高速化であるという点です。ブランドの世界観設計や、購買心理を踏まえた導線設計は依然として人の仕事です。一方で「バナーの並びを4パターン見たい」「フォームのレイアウト違いを比較したい」といった量産的な検証は、社内で回せる範囲が広がります。外注費をどこに残すかの線引きを、あらためて引き直す機会になります。
なお、楽天市場や Yahoo!ショッピングのように、モール側がHTMLやCSSの記述範囲を制限しているプラットフォームでは、生成したUIをそのまま反映できるとは限りません。モール店舗の場合は、まず自店舗のガイドラインで許容される範囲を確認したうえで使うのが安全です。
初動として何をすべきか
まずは claude update を実行して、手元の環境で /design が動く状態にすることです。そのうえで、いきなり本番のトップページに使うのではなく、影響範囲の小さいページ、たとえば特集ページやキャンペーンLPの1本で試すのが現実的です。
次に、社内で「何を判断したいか」を先に決めておくことをおすすめします。3案出したところで判断基準がなければ好みの議論になります。CVR を上げたいのか、離脱率を下げたいのか、回遊を増やしたいのかを先に決め、その観点で案を選ぶ運用にすると、生成の速さが成果につながります。
最後に、保存が手動である点を運用ルールに落とし込んでおくことです。アーリープレビュー段階の機能は仕様変更が起こりえます。気に入った案が出た時点でスクリーンショットなり Artifacts のリンクなりを残す習慣をつけておけば、後戻りのコストを抑えられます。
まとめ
Claude Code の /design コマンドは、既存コードベースの見た目に合わせたUI案を複数枚、ターミナル上で生成できる機能です。日本のEC事業者にとっては、デザインのたたき台づくりと社内合意形成を速める道具として使えます。デザイナーの置き換えではなく、検証回数を増やすための機能だと捉え、影響範囲の小さいページから試すのが現実的な入り口です。
参考文献
- The Decoder｜Claude Code gets a /design command that lets developers create UI mockups right in the terminal
- Nate Parrott｜X（/design の挙動についての投稿）
- The Decoder｜Anthropic’s Claude Design turns chatbot conversations into prototypes, slide decks and marketing assets
※うるチカラでは、生成AIの導入支援から運用最適化まで、貴社のEC事業に合わせたカスタマイズ提案を行っています。無料相談（30分）も実施中ですので、お気軽にお問い合わせください。
https://uruchikara.jp/contact/
引用元: The Decoder
【監修】齋藤竹紘（株式会社オルセル代表 / 19年・5,000社のEC支援実績）
株式会社オルセル代表取締役 / うるチカラ編集長。19年・5,000社以上のEC支援実績を持ち、楽天市場・Amazon・Yahoo!ショッピング・Shopify・Shopee越境ECの実装ノウハウを保有。AI×ECに関する書籍を3冊執筆。「現場で使えるAI実装」を一次情報として発信しています。
この記事を読んだ人は、こんな記事も読んでいます
