「本当に誰でも」AIとの会話だけでアイデアをアプリに Claude Designは手取り足取り助けてくれる：生成AIお悩み相談室（5）（1/3 ページ）
自然言語で指示するだけでアプリケーションを作成できるツールが増えています。それでも「どう指示すればいいか分からず試せていない」という人のために、今回は積極的に助け船を出してくれるClaude Designを使ってアプリ作りを体験してもらいます。
本連載では、生成AIを業務や日常にどう役立てるか、筆者が実際に手を動かして試した経験を活用して紹介しています。今回は、Anthropicのビジュアル制作ツール「Claude Design」を使い、ふと思い付いたアプリのアイデアを会話だけで動くモックアップにし、最後は自分のスマホで日常的に使えるアプリにまで育てていく流れを体験してもらいます。
今回の記事の対象読者は次の通りです。
- アイデアはあるが、形にする手段を持っていないビジネスパーソン、企画・マーケティング担当者
- デザイナーやエンジニアに依頼する前に「こんな感じ」を動くもので見せたい人
- プログラミングは初心者だが、自分でもアプリを作ってみたい人
- 生成AIの実務活用に興味がある全ての人
なお、本稿の内容を手元で試すには、Claudeの有償プラン（Pro、Max、Team 、Enterpriseのいずれか）の契約が必要です。
はじめに
皆さんは、雑談の中で「こんなアプリがあったら便利なのに」と思いついたことはありませんか？ そして、そのアイデアはその後どうなったでしょうか。
多くの場合、行き先は次の3つのどれかだと思います。
- そのまま忘れてしまう
- 企画書やスライドにまとめてみたものの、口頭説明と簡単なイメージ図では操作感が伝わらず、反応がいまひとつ
- エンジニアやデザイナーに依頼しようとするが、見積もりの段階で「ちょっとした思い付き」には見合わないコストだと気づく
アイデアを動くものにするまでの距離が遠すぎることが、アイデアそのものを諦めさせてしまうわけです。
思い付いたことを日本語で伝えるだけで、実際に触って動かせるアプリが目の前に現れたら便利だと思いませんか？ その有力な選択肢の一つが、今回紹介する「Claude Design」です。
本稿では、筆者が同僚から受けた実際のリクエストを題材に、アイデアを伝えてから約30分で、動くモックアップを完成させ、次にそのアプリを自分のスマホで日常的に使えるようにするところまでを、実際の操作の流れに沿って紹介します。なお、Claude Design自体にはアプリを公開する機能がないため、最後の「スマホから開けるURLにする」部分だけは、外部の無料サービスを使います。
Claude Designとは
Claude Designは、Anthropic Labsが提供するビジュアル制作ツールです。2026年4月17日にリサーチプレビューとして公開され、執筆時点ではβ版として提供されています。テキストで要望を伝えると、アプリのモックアップ、スライド、ランディングページなどを生成してくれます。Claude Pro/Max/Team/Enterpriseプランで追加契約なしに利用できます。
「会話からWebアプリを作る」サービス自体は「v0」や「Lovable」など先行例がありますが、筆者が実際に使ってみて特徴的だと感じたのは次の点です。
- 作る前に、選択式のヒアリングで要件を一緒に固めてくれる 曖昧な思い付きを投げても、いきなり的外れなものが出来上がるのではなく、「誰が使うのか」「どんな機能が欲しいのか」をタップで答えるアンケートUIがその場で生成される
- デザイン案を複数パターン並べて提案してくれる 雰囲気の異なる案を見比べて選べるため、デザインの言語化が苦手でも方向性を決められる
- 完成したアプリをエクスポートできる アプリをHTMLファイル一式としてエクスポートし、Claudeの外に持ち出せる
開発者であれば「Claude Code」のようなコーディングエージェントで同等以上のものを作れますが、環境の準備や動作権限の管理といった点で、非開発者にはハードルが高いのが実情ではないでしょうか。ブラウザ上の会話だけで完結するClaude Designは、チャットAIとコーディングエージェントの間を埋める位置付けのツールと言えます。
なお、本稿の内容は執筆時点（2026年7月）に筆者が試した結果に基づきます。Claude Designはβ段階のプロダクトのため、画面構成や機能が今後変わる可能性がある点はご了承ください。
準備するもの
- Claudeのアカウント（Pro、Max、Team、Enterpriseのいずれか）
- Webブラウザ
- 30分ほどの時間
これだけです。ソフトウェアのインストールも、プログラミングの知識も不要です。
趣味のアプリを作ってみる
アイデアのきっかけ
今回の題材は、筆者が同僚から受けたこんなリクエストです。
お酒を飲むのが好きで、酒造やブルワリーに行くのを趣味にしているんだけど、訪問したかどうかの管理ができるアプリがあったら嬉しいかも！ 写真も整理したいし、酒造の方に聞いた話もメモしたいんだよね。
要件定義と呼ぶにはあまりに漠然としていますが、Claude Designに渡すにはこれで十分です。むしろ、この漠然とした状態のまま渡せることに価値があります。実際にやってみましょう。
1. 思い付きをそのまま伝える
Claude Designは、ブラウザでhttps://claude.ai/designにアクセスするか、Claude（https://claude.ai）にログイン後、サイドメニューの「デザイン」をクリックすると開けます。開くと「What will you design today?」という入力画面が表示されます。テンプレートから「Prototype」を選択し、先ほどのリクエストをそのままの文章で入力して送信ボタンをクリックします（図1）。
ポイントは、機能一覧や画面構成を自分で考えて書く必要がないことです。「〜だと嬉しいかも！」「〜なんだよね」という話し言葉のまま投げられます。
なお、筆者が試した後にもテンプレートの追加などの改善が続いています。執筆時点で今回の例を試すなら、「Mobile app design」を選ぶのがよいでしょう（図1は筆者が試した時の画面です）。このように随時改善が入っていくのは、ライブサービスの良いところですね。
2. 選択式のヒアリングに答える
送信すると、Claudeが要件を解釈し、アプリの仕様やデザインの方向性を詰めるためのヒアリングUIを画面上に生成してきます。文章で質問攻めにされるのではなく、選択肢をタップして答えていく形式のため答えやすいです。
今回は次のように回答しました。
| 質問 | 回答 |
|---|---|
| 対象デバイス | スマホ（iPhone） |
| 記録したい場所の種類 | 日本酒の酒蔵、クラフトビールのブルワリー、ワイナリー、蒸留所、バー・角打ち |
| 欲しい機能 | 訪問済み／未訪問の一覧、飲んだお酒の記録、都道府県の制覇率 など |
| メモの内容 | 訪問時の感想、テイスティングノート |
| 写真の扱い | 訪問ごとのアルバム |
| 行きたい場所リスト | 必要（訪問済みと未訪問を管理） |
| コレクション要素 | スタンプラリー的な楽しさ、バッジ・称号が欲しい |
| アプリの雰囲気 | クラフト感（ブルワリーっぽいレトロ感） |
| デザイン案の提案数 | 2、3案見たい |
なお、対象デバイスは筆者のスマホに合わせて「iPhone」と答えましたが、出来上がるのはブラウザで動くWebアプリなので、Androidでも同じように使えます。
回答は全てタップで完了し、所要時間は2分ほどでした。このヒアリングが優れているのは、「都道府県の制覇率」「バッジ・称号」のように、元のリクエストには含まれていなかったが言われてみれば欲しい機能を、選択肢の形で先回りして提示してくれる点です。仮に選択肢の中にぴったりのものがなかったとしても、並んだ選択肢を眺めること自体が「本当に欲しいもの」を思い付くきっかけになります。要件を引き出すインタビュアーの役割まで担ってくれるわけです。
3. テイストの異なる3案から選ぶ
回答を送信すると、Claudeがデザインシステムの定義とUIの構築を進めていきます。今回は10分ほどの生成時間で、雰囲気の異なる3つのモックアップが並列で提示されました。
1. 和モダン「酒印帳」（1a） 御朱印帳をモチーフにした、落ち着いた和風テイスト
2. クラフト「呑み旅」（1b） ステッカーやチケット風のあしらいを取り入れた、暖色系のカジュアル・レトロテイスト
3. ミニマル「蔵ログ」（1c） iOS標準UIベースの、シンプルで見やすさ重視のテイスト
それぞれの案は単なる画像ではなく、拡大したりスクロールしたりして確認できる実際の画面です。デザインの好みを言葉で説明するのは難しいものですが、並んだ実物を比較して「これがいい」と選べるのは、デザイナーから複数の完成イメージを提示されたときの体験に近いものがあります。
4. ベースを決めて、対話で磨き込む
3つの案を見比べて、今回は雰囲気の合っていた2案目の「呑み旅」をベースに選びました。ベースの指定に大げさな指示は要りません。チャット欄に送ったのは次の一文だけです。
全面的に1bをベースに作り込んでください。飲兵衛らしく親しみやすいデザインが気に入りました。
「1b」は2番目の案に振られていた番号です。また、このアプリの想定ユーザーとしてお酒好きの人を思い浮かべていたため、「飲兵衛」と表現してみました。このように気に入った理由を一言添えているのは、その後の作り込みの方向性をくみ取ってもらうためです。すると5分ほどの再構築を経て、「＋」ボタンからの記録追加フロー、「行きたい」場所の詳細表示、記録データと連動して動くバッジ・地図・統計といった機能がClaude側の判断で組み込まれ、「訪問済み／行きたい」をタブで切り替えられる一覧画面、訪問した都道府県が色付けされる日本地図、ステッカー風のバッジコレクション画面を備えたマルチ画面のモックアップが完成しました。
5. 実際に触って確かめる
ここが従来の「企画書＋画面イメージ」との決定的な違いですが、生成されたモックアップはその場で実際に操作できます。試しに新規の訪問記録を追加してみます。
1. 画面下部の「＋」ボタンをタップして記録用のモーダルを開きます
2. 訪問先に「山下酒造」を入力し、評価（★5段階）と聞いた話のメモを入力します
3. 「スタンプを押す！」ボタンをタップします
すると、登録した「山下酒造」の詳細画面が開き、「評価」「写真枠」「聞いた話」のメモが記録されていることが確認できました。さらにバッジ画面を開くと、訪問数のカウントや実績ゲージが自動で更新されています。画面下部のナビゲーションで「一覧」「地図」「バッジ」を切り替えても、全ての画面が登録データと連動して動きます。
ここまでで、最初のプロンプト入力から約30分です。「口頭では伝わらなかったアイデア」が、同僚にスマホ画面を見せながら「こういうことだよね？」と確認できる状態になりました。
Copyright © ITmedia, Inc. All Rights Reserved.