Claude Designでアプリを作って公開してみた

チャットで指示を出すだけで、WebサイトやアプリのUIプロトタイプが作れるAnthropic社のAIツール「Claude Design」。

本記事では、ツールの主な特徴や料金プランをはじめ、実際にアプリのプロトタイプを作成してWeb上に公開するまでの手順などについて解説していきます。

Claude Designとは？

Claude Designは、AI「Claude」を開発するAnthropicが2026年4月17日にリリースしたデザイン作成ツールです。

チャットで指示を出すだけで、WebサイトやアプリのUIプロトタイプ、スライドなどを作成できます。

Claudeの有料プラン限定の機能となっており、現在はPCのブラウザ版のみ対応しています。

Claude Designの特徴

それでは、Claude Designの具体的な特徴をみていきましょう。

• WebサイトやUIプロトタイプ、スライドなどが作れる
• チャットで会話しながらデザインを作れる
• Claude Codeと連携した本格的な開発

WebサイトやUIプロトタイプ、スライドなどが作れる

Claude Designの特徴は、作れるデザインの幅が広いこと。

例えば、以下のようなデザインを作成できます（一例です）。

• Software design（ソフトウェアの管理画面など）
• UI prototype（Webサイトやアプリの試作）
• Slide deck（スライド資料）
• Document（文書）
• 3D object（3Dオブジェクト）
• Web design（Webサイトのデザイン）
• Animation（アニメーション）
• Social post（SNS投稿画像）

チャットで会話しながらデザインを作れる

デザインやコーディングの専門知識がなくても、チャット欄に要件を入力するだけで、WebサイトやアプリのUIプロトタイプを生成できます。

「配色を暗くする」「セクションを折りたたみ式にする」といった生成後の修正も、テキストの指示のみで行えます。

また、チャットでの操作だけでなく、画面上の要素を直接クリックして配置を変更したり、テキストを編集したりといった手動での微調整にも対応しています。

Claude Codeと連携した本格的な開発

Claude Designで作成できるのは、画面デザインやプロトタイプといったUI部分のみであり、会員登録や決済などのバックエンド機能には対応していません。

本格的なアプリやWebサイトを構築する際は、同社のコーディングAI「Claude Code」へデザインデータを引き継ぎ、開発へと移行します。

また、6月のアップデートにより両ツールの双方向同期に対応しました。Claude Designからデザインを渡すだけでなく、Claude Code側で実装を進めたUIをClaude Designに戻して再編集することも可能です。

アプリのプロトタイプを作って公開してみる

それでは、実際にClaude Designを使ってみましょう。

今回は「東京の観光スポットを紹介するアプリ」のプロトタイプを作成し、Web上に公開してみたので、その手順について解説します。

STEP.1 プロンプトを入力する

まずはClaude Designにログインします。

画面下部にデザインの雛形（テンプレート）がいくつか並んでいるので、作りたいものに合ったものを選択しましょう。

ここでは、「UI prototype」を選択します。

（※UI prototypeとは、Webサイトやアプリの「完成イメージ図」のこと。いきなり作り始める前に、デザインやボタンの配置を視覚的に確認するための試作品のようなものです）

選択したら、どんなデザインを作りたいかプロンプトを入力します。今回は、以下のように入力してみました。

STEP.2 質問に答える

プロンプトを送信すると、プロトタイプを具体化するための質問が10個前後提示されます。

「ターゲット層」「スポットの数」「カテゴリ分け」といったUI設計に必要な項目が選択式で問われるため、順に回答します。

STEP.3 プロトタイプが完成

数分ほど待つと、プロトタイプが完成しました。かなりシンプルですが、今っぽいと言えば今っぽいデザインです。

なお、生成直後は画像が入っていなかったり、いくつか気になるポイントがあったりしたので、チャットから「画像を挿入して」などと追加指示を出してブラッシュアップしています。

STEP.4 気になった箇所を直接修正する

テキストの微調整など、手動でサクッと直したい場合は、画面右上の「EDIT」を選択します。

たとえば、「見どころ」という見出しの文言を変更したいとします。「EDIT」モードの状態で対象のテキストをクリックすると、そのまま直接文字の書き換えが可能になります。

今回は「見どころ」を消し、「スポット一覧」と打ち替えてみました。

STEP.5 そのままWebに公開してみる

せっかくなので、作成したプロトタイプをWeb上に公開してみます。

とはいえ、筆者はサーバーやデプロイ周りの知識に明るくありません。そこで、チャット画面でそのまま「「作成したプロトタイプを無料でWeb公開するための具体的な手順は？」という旨の質問を投げてみました。

今回は提案された「Cloudflare Pages」を使用し、指示通りにファイルをドラッグ＆ドロップするだけで、数分程度でWebへの公開が完了しました。

【補足】本格的なWebサービスに育てたいときは「Claude Code」へ

今回はClaude Designだけで公開まで完結しました。ただ「会員登録やログイン機能をつけたい」「決済を導入したい」といった本格的なWebサービスに育てるとなると、Claude Designだけでは対応しきれません。

そこで出番となるのが「Claude Code」です。

Designはあくまで“見た目”を作るツールなので、本格的な開発フェーズに入ったらCodeへ移行する、という使い分けになります。

こんなものも作ってみた

続いて、毛色の違うものもいくつか試しに作ってみました。

スライド

スライドの作成手順は先ほどのプロトタイプと同様で、テンプレートから「Slide deck」を選び、プロンプトを入力してAIからの質問に答えるだけです。

今回は例として「2026年の生成AIツール比較に関するスライド」を指示しました。以下が生成された表紙のデザインです。

デザイン自体は悪くないものの、掲載されるテキストの情報量が少なく、内容はかなり浅め。このまま実用的な比較資料として使うには、大幅な加筆修正が必要となります。

スライド生成に関しては、以前紹介したGensparkの方が優れている印象を受けます。今回のテーマとの相性もあるかもしれませんが、少なくとも一発で実用レベルの資料を作るのは難しそうです。

なお、作成したスライドはPDF、HTML、PowerPoint形式での書き出しに対応しています。

3Dオブジェクト

続いては、3Dオブジェクトの生成です。

使い所としては、「こんな形の家具やパッケージを作りたい」というアイデアを、平面の絵ではなく、立体でぐるぐる回して共有したい時などでしょうか。

まずは、ハートをモチーフにした椅子の手書きのラフ画を添付し、「この3Dオブジェクトを作って」と指示してみました。

完成したのがこちら。

背もたれこそハート型になっていますが、元のラフ画の雰囲気からはかなり離れてしまいました。

「手書きだから難しかったのかな？」と思い、今度は実在する有名な建造物なら正確に描写できるか検証。「東京タワーを作って」と指示してみます。

こちらも少し微妙な結果に。赤と白の配色でパッと見はそれっぽいですが、よく見ると展望台の形や骨組みが全く別物になっています。

筆者の指示の出し方が悪かった可能性もありますが、スライド機能と同様、3Dオブジェクトも現時点ではまだ実用レベルには届いていない印象。今後のアップデートに期待です。

Claude Designの料金プラン

Claude Designには単体の料金プランはありません。Claudeの有料プランに標準搭載されている機能のため、いずれかの有料プランを契約していれば追加費用なしで利用できます。

※無料のFreeプランでは利用できません。

上位プランになってもDesignの機能自体は変わらず、違うのは使える上限枠が増えるだけです。個人利用であれば、まずは最安のProプラン（月額$20）からで十分でしょう。

実際、筆者も現在Proプランを使っていますが、利用枠がリセットされた状態からなら、アプリのプロトタイプを2つくらい作れるかなという印象でした（もちろん、内容や修正回数によって変動します）。

Claude Designの注意点

最後に、Claude Designの注意点をみていきましょう。

内容は必ず自分でチェックする

この記事を読んでくださっている方には言うまでもないかもしれませんが、AIのハルシネーション（もっともらしい嘘）には注意が必要です。

クライアントに提出する資料や、公開するページに使う場合は、内容を必ず自分で確認してから世に出しましょう。

ベータ版のため、仕様が変わる可能性がある

Claude Designは2026年7月現在、ベータ版という位置づけです。今後のアップデートで機能や画面が変わる可能性があります。

実際、4月のリリース時は「リサーチプレビュー」だったものが、6月のアップデートでベータ版へと移行しています。

利用枠はClaude全体と共有

Claude Designの利用枠は独立しておらず、通常のチャットやClaude Code、Coworkと同じ枠から消費されます。

デザインを使いすぎると、5時間制限に引っかかる、ということが起こり得るので注意しましょう。

まとめ

AIの進化によって、デザイナーやエンジニアでなくても、簡単なWebサイトやアプリなら作れる時代になりました。実際、今回のプロトタイプも、筆者はコードを一行も書いていません。

もちろん、クライアントに納品できる品質なのか、不具合が起きたときの責任は誰が持つのか。素人が作ったものに関しては、そういった課題はまだ残ります。

なお今回紹介したのは、Claude Designでできることのごく一部。ほかにもさまざまな用途に対応しているので、興味が湧いた方はぜひこの機会に触ってみてはいかがでしょうか。