はじめに

アプリの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がもたらす、最も本質的な変化だと言えそうです。