Claude Designを試してみた｜プロンプト1つでインタラクティブなデモが完成

AnthropicがリリースしたClaude Designを試してみました。
「プロンプトを入れるだけでUIデモが作れる」という触れ込みでしたが、実際に使ってみると想像以上の完成度でした。
今回はその使用感をレポートします。

デモ

今回作成したデモは以下の画面から試すことができます。是非、お試しください。

https://www.grandream.jp/services/line/demo

Claude Designとは

Claude Designは、claude.aiのサイドバーから使えるデザインツールです（Beta）。
プロンプトを書いて送信するだけで、インタラクティブなUIプロトタイプが生成されます。外部ツール不要でブラウザ上で完結します。

使ってみた：LINEミニアプリのデモを生成

今回のお題は「アパレル/コスメD2CブランドのLINEミニアプリ」のインタラクティブデモ。
ホーム・ショップ・会員証・クーポン・マイページの5画面を持つ仕様です。

プロンプトを貼り付けて送信すると、十数分程度で生成が完了。
左にチャットパネル、右にスマートフォンフレーム内のアプリ画面が表示されます。

生成結果：各画面をチェック

ホーム画面

会員名・会員ランク・ポイント残高・次のランクまでのゲージ、「近くの店舗の在庫を見る」導線まで再現されています。

ショップ画面

カテゴリ切替（レディース/メンズ/コスメ/雑貨）、商品カード、お気に入りトグルが動作します。
画像はGPT-Image-2の精度が高いので、ChatGPTで後ほど作成し、埋め込むようにします。

商品をタップすると詳細画面へ遷移。カラー・サイズ選択、オンライン在庫と店舗在庫の2系統表示、カート追加まで一気通貫で動きます。

カートでは受取方法（配送/店舗受取）の選択とポイント利用トグルも実装済み。

会員証（My Card）画面

デジタル会員証カード、QRコード（CSS/SVGで描画）、プラチナ会員特典一覧が表示されます。

クーポン画面

ランク別・バースデー・友だち紹介・購入回数達成など4種のクーポンが表示されます。

マイページ

「オンライン購入と店舗購入が統合された注文履歴」もきちんと再現されています。

---

便利な機能3つ

Mark up：画面に直接コメントしてClaudeに送る

画面上の要素を選択して「Mark up」からコメントを入力すると、「Send to Claude」でそのまま修正指示が送れます。
「クーポンのデザインを高級感あるデザインにして」と送ったところ、すぐに反映されました。

修正後の画面がこちら。クーポンのデザインが洗練されました。

Comments：コメントでチーム間レビュー、さらに修正まで行える

画面上の要素を選択して「Comments」からコメントができます。
チームメンバーも招待できるので、Figmaのようにチーム間でレビューを行いながら開発可能。
さらにコメントをプロンプトとし、修正を行えます。

Edit：色・フォントなどをパネルから直接編集

「Edit」から、デザインの細かいパラメーター（色・フォント・余白など）をGUI操作で変更できます。
Figmaのようにコードを触らずにビジュアル調整が可能です。

Share / Export / Send to

右上の「Share」から3つの操作が可能です。

• Share link：リンク共有（Private/公開を選択）

• Export：PDF・PowerPoint・ZIP・Standalone HTMLで書き出し

• Send to：Claude Code・Canvaなど外部ツールに直接送信。Vercelなどの他ツールとの連携も追加可能。作成したデザインをClaude Codeに送信し、Claude Code側で機能開発を行うことが可能です。

まとめ

Claude Designの使用感をまとめると、以下のとおりです。

• 生成速度が速い：複雑な仕様でも短時間で動くデモが完成
• 完成度が高い：タブ切替・カート・クーポン使用など主要インタラクションがすべて動作
• 反復が簡単：Mark upで画面に直接コメント → 即修正のループが直感的
• 連携が広い：Standalone HTML書き出しやClaude Code連携でそのまま実装につなげられる

「クライアントへの提案デモを素早く作りたい」「実装前にUIのイメージを共有したい」といった用途に特に向いていると感じました。

まだBetaですが、実用レベルに達しています。ぜひ試してみてください。

今回作成したデモは以下の画面から試すことができます。是非、お試しください。

https://www.grandream.jp/services/line/demo