はじめに
アプリのUI設計は、一般的に次のようなプロセスで進みます。
- 要件定義
- ワイヤーフレーム作成（Figmaなど）
- レビュー・修正
この流れは、どうしても一定の時間とスキルが要求されます。
特に「要件を固めてからツールに落とし込む」という順序が、設計の初速を遅らせる要因になりがちです。
しかし Claude Design を使うと、このプロセスが大きく変わります。
👉 簡単なプロンプトからUI設計がスタートし、AIとの対話の中で要件がさらに具体化されていく
今回は実際に、電子書籍アプリのホーム画面UIを設計してみて、その体験を検証しました。
Claude Design とは
Claude Designは、テキストプロンプトからUI・スライドなどのデザインを生成するAIツールです。
主な特徴は以下の通りです。
- プロンプトベースでUI設計ができる
- 不足している要件をAI側が質問で補完してくれる
- 複数パターンのUIを同時に生成して比較できる
👉 設計の起点が「ツール操作」ではなく「言語（プロンプト）」に変わるのが最大のポイントです。
実際に使ってみる
まず Claude Design を開き、プロトタイプ名を入力したうえで Wireframe モードを選択して作成します。
プロジェクトが作成されたら、チャット欄に以下のような簡単なプロンプトを入力します。
電子書籍アプリのホーム画面UIを設計してください。
■ 目的
ユーザーが読みたい本をすぐ見つけて購入・閲覧できる
■ ユーザー
20〜50代、スマホ中心
■ 行動
・おすすめ閲覧
・ランキング確認
・続きから読む
・検索
■ 制約
・スクロール中心
・情報量は多いが迷わせない
・サムネイル重視
■ UI要素
・上部検索バー
・カルーセル（おすすめ）
・ランキングリスト
・「続きから読む」セクション
・タブバー
■ アウトプット
・画面構成（セクション分け）
・ユーザー視線の流れ
・改善ポイント
項目別に整理してはいますが、Figmaでワイヤーを描き起こすための詳細な仕様書と比べると、これでも十分「簡単なプロンプト」のレベルです。
レイアウト、余白、視線誘導、案の数など、具体的な指示は一切含んでいません。
AIが残りの要件を引き出してくる
このプロンプトを投げても、すぐにUIが生成されるわけではありません。
Claude Designはまず、次のような質問を投げ返してきます。
- ワイヤーフレームは何案作成するか？
- 「続きから読む」機能の優先度はどの程度か？
- ジャンル構成はどうするか？
- レイアウトの方向性（情報密度・スクロール量）は？
ポイント
プロンプトに書ききれていない細部を、AIが質問で補完してくれる構造になっています。
「何をどこまで決めればよいか分からない」状態でも、質問に答えるだけで要件が揃っていきます。
回答していくだけでUI案が完成
質問に順番に回答していくと、最終的に複数のUI案が生成されます。
今回生成されたのは、以下の4パターンでした。
| 案 | コンセプト | 特徴 |
|---|---|---|
| A | ビッグ・リジューム型 | 「続きから読む」を大判ヒーローで最上段に配置 |
| B | タイムライン型 | 「今日 / 今週 / 今月」の時間軸タブで履歴・新着を整理 |
| C | ジャンル・ディスカバリー型 | ジャンルグリッドを常時表示し、探索・発見を重視 |
| D | フィード型 + 続きFAB | 縦スクロールフィード + フローティングボタンで継続読書も確保 |
👉 複数案を一気に比較できるのが、紙やFigma手作業との大きな差です。
「どれが良さそうか」を短時間で議論できる状態に持ち込めます。
使ってみて分かった3つのメリット
① 要件定義をAIがリードしてくれる
人間側で決めきれていない「抜け・漏れ」を、AIが質問で補完します。
簡単なプロンプトのまま放置されがちな細部を、AIが対話で埋めてくれる構造です。
👉 設計の抜け漏れが構造的に減る
② UI設計の初速が圧倒的に速い
ワイヤーフレーム相当のアウトプットまで、数分で到達します。
👉 叩き台作成のコストがほぼゼロになる
③ 比較前提で設計を進められる
複数案が並列で出るため、
- どの方向性が良いか
- どこを改善すべきか
を即座に判断できます。
👉 設計の議論が「作る」段階から「選ぶ・磨く」段階へと前倒しされる
注意点（ここは押さえておきたい）
一方で、Claude Designの出力を「そのまま実務に投入できる」わけではありません。
現場で使う際は、以下の2点に注意が必要です。
① KPIが曖昧なままだと、弱いUIになりやすい
電子書籍アプリ一つ取っても、最適なUIは目的によって変わります。
- 売上最大化 → 購入導線・レコメンド強化
- 回遊率向上 → ジャンル探索・新着訴求
- 継続率改善 → 「続きから読む」最優先
ここはAIが自動で判断してくれる部分ではありません。
KPIの定義と優先順位は、人間側で明確にする必要があります。
② 汎用的なUIになりやすい
今回の出力も、
- 他の読書・動画・ニュース系サービスでも成立しそうな構成
- プロダクト独自の差別化要素は弱い
という傾向が見られました。
プロダクト固有の世界観・差別化設計は、依然として人間側の役割です。
実務での使い方（推奨フロー）
以上を踏まえると、現場での使い方は次のフローがおすすめです。
- Claude Designでワイヤー案を高速生成する
- 良い案を1〜2個に絞り込む
- 改善プロンプトでブラッシュアップする
- Figmaに落として、プロダクト固有の要素を注入する
👉 「叩き台生成ツール」として位置付けるのが、最も費用対効果が高い使い方です。
まとめ
Claude Designによって、UI設計の進め方は次のように変わります。
| Before | After | |
|---|---|---|
| 起点 | 人間が設計 → ツールで作成 | AIが設計 → 人間が判断 |
| 初速 | 要件定義〜ワイヤー化で数時間〜数日 | 数分で叩き台が出る |
| 役割 | 作る | 選ぶ・磨く |
特に今回体験して印象的だったのは、
👉 簡単なプロンプトから設計が始まり、AIとの対話で完成していく
という流れそのものでした。
設計者・エンジニアの役割は、今後さらに
「作る」から「選ぶ・磨く」へ
とシフトしていくと感じます。
叩き台を自分で描き起こす時間を、判断とブラッシュアップに再配分できる。
それがClaude Designがもたらす、最も本質的な変化だと言えそうです。