【保存版】ノンデザイナーのためのアプリUI設計5ステップ（プロンプト付き）

「AIでアプリは作れた。でもUIが微妙」を卒業する

Claude CodeやCodexを使えば、プログラミング経験が少なくてもアプリを作れる時代になりました。

そう指示するだけで、画面が表示され、ボタンが動き、タスクを追加できるところまでAIが作ってくれます。

しかし、完成した画面を見て、こんな違和感を覚えたことはないでしょうか。

• 動くけれど、UIがどこか微妙

• きれいだけど、AIで作った感じがする

• どこを押せばよいのかわかりにくい

• カード、角丸、グラデーションが多すぎる

• 「もっとモダンに」と頼んでも、別の“それっぽいUI”になる

• 修正したいが、AIにどう伝えればよいかわからない

原因は、プロンプトの書き方だけではありません。

多くの場合、AIにUIを作らせる前に、画面の目的、情報の優先順位、デザインルール、部品、評価基準が決まっていないことが原因です。

今回は、Apple、Google、SmartHRの公開ガイドラインやデザインシステムの考え方を参考に、ノンデザイナーでも実践できる「アプリUI設計5ステップ」を紹介します。

見出し画像はAIで生成しました。
プロンプトは下記の記事に掲載中。
毎日プロンプトは増えていきます。

まずは、完成UIを見てください

今回作ったのは、モバイル向けタスク管理アプリ「Focus」です。

ユーザーがアプリを開いてから3秒以内に、次の3つを理解できる画面を目指しました。

• 今日やるべきこと

• 現在の進捗

• 次に行う操作

完成UI

完成画面では、今日のタスク、進捗、タスク追加をひとつの画面に整理しています。

さらに、完成画面だけでなく、色、文字、余白、ボタン、タスク項目などを再利用するためのコンポーネントライブラリも作成しました。

コンポーネントライブラリ

見た目のよい画面を一度作るだけなら、AIに何度か生成させれば成功するかもしれません。

しかし、次の画面でも同じ品質を再現するには、完成画面の裏側にあるルールと部品が必要です。

AIに一発で作らせると、なぜ微妙になるのか

最初に、次のような短い指示でタスク管理アプリを作ってみました。

モダンでおしゃれなタスク管理アプリを作ってください。

今日のタスク、進捗、カテゴリ、タスク追加ボタン、
ボトムナビゲーションを表示してください。

AIは、数分で見栄えのする画面を作ってくれます。

しかし、よく見ると問題が残っていました。

一発生成したUIの5つの問題

1．すべてがカードになっている

進捗、フィルタ、タスク、案内など、ほぼすべての情報が角丸のカードに入っています。

すべてが同じ強さで区切られるため、どこが重要なのかわかりにくくなります。

2．強調する色が多すぎる

進捗、カテゴリ、優先度、ボタン、ナビゲーションなど、複数の場所に強い色が使われています。

主役が多すぎて、ユーザーが次に行う操作を判断できません。

3．ユーザーより、画面の装飾が優先されている

大きな挨拶、グラデーション、装飾アイコンなどが目立ち、本来確認したい「今日のタスク」が下へ追いやられています。

4．画面ごとに部品が作られている

同じ役割のボタンやタスク項目でも、サイズ、余白、角丸、色が少しずつ異なります。

一画面では気づきにくくても、画面が増えるほど一貫性が失われます。

5．通常以外の状態がない

完成画面は作られていても、次の状態が設計されていません。

• タスクがない

• 読み込み中

• 通信に失敗した

• 入力内容に問題がある

• タスクを削除する

• 操作を取り消す

アプリは、正常なデータが表示されている時間だけで構成されているわけではありません。

問題は、AIのデザインセンスではない

AIは、指示されていない部分も埋めながら画面を完成させます。

画面の目的が定義されていなければ、一般的なダッシュボードを参考にします。

情報の優先順位がなければ、すべてをカードで整理します。

強調する場所が決まっていなければ、複数の場所に色や装飾を加えます。

部品が決まっていなければ、画面ごとに新しい部品を作ります。

つまり問題は、AIに作らせたことではありません。

AIが判断するための基準を、人間が用意していないことが問題です。

そこで、完成UIを一発で作らせず、5つのステップに分けます。

AIでアプリUIを作る5ステップ

今回使用するのは、次の5ステップです。

1. 言葉で目的とコンテキストを決める

2. モノトーンで情報の優先順位を作る

3. デザイントークンでルールを決める

4. コンポーネントと状態を定義する

5. AIで生成し、基準に沿ってレビューする

AppleとGoogleからは、現代的なUIの階層表現や操作性を参考にします。

SmartHRからは、ユーザーの時間、言葉とコンテキスト、一貫性、使用性、継続的な運用という考え方を学びます。

[PR]

参考にするもの 今回取り入れる考え Apple コンテンツ中心、明確な階層、十分な操作領域、節度あるマテリアル Google 色・形・サイズ・文字・モーションによる明確な強弱 SmartHR 言葉とコンテキスト、使用性、一貫性、継続的な改善

固有の画面をコピーするのではなく、なぜその設計が必要なのかを参考にします。

STEP 1　言葉で目的とコンテキストを決める

デザインというと、色、フォント、角丸などから考えたくなるかもしれません。

しかし、最初に決めるのは見た目ではありません。

最初に決める5つのこと

• 誰が使うのか

• どのような場面で使うのか

• 何を完了したいのか

• 最も重要な情報は何か

• 最も重要な操作は何か

SmartHRのデザイン原則には、次の考え方があります。

• ユーザーの時間は有限だ

• コンテキストを大切にしよう

• 言葉からはじまるデザイン

今回の画面目的を、次の1文にしました。

この1文があると、画面に必要なものと不要なものを判断できます。

大きな挨拶や装飾は、本当に必要なのか。

カテゴリはタスク名より目立つ必要があるのか。

画面上に複数の強いボタンが必要なのか。

見た目の好みではなく、画面の目的から判断できるようになります。

目的と情報を整理するプロンプト