AIっぽいUIを卒業する。ノンデザイナーの設計5ステップ

AIに「洗練されたUIを作って」と頼むと、見栄えのよい画面は返ってきます。しかし、画面を増やすほどボタンの形が変わり、色が増え、操作の意味があいまいになることがあります。悪いのはAIではありません。AIが判断するための設計基準が渡されていないことが問題です。

この記事では、デザイン経験が多くない人でも、AIを使って一貫したUIを作るための順番を解説します。完成画面から始めるのではなく、原則を集める → ルールを決める → モノトーンで骨格を作る → 部品を定義する → AIで生成・検品するという5ステップで進めます。

最初に必要なのは、センスではありません。画面を一枚だけ選び、判断を言葉にすることです。

UIデザインの用語を知りたい方向けのWebサイトも作りました。

この記事で持ち帰れるもの

読み終えたときには、次の三つが手元に残ります。第一に、自分のアプリに必要なデザインルールを五つに絞る方法です。第二に、色や装飾の前に操作を確認するモノトーン・プロトタイプの作り方です。第三に、AIへ渡すべきプロンプトを「完成イメージ」ではなく「設計書」に変換する型です。

題材として、ここではタスク管理アプリの「今日のタスク」画面を使います。ただし、予約画面、SaaSの初期設定画面、ECの商品一覧などに置き換えても構いません。大切なのは、最初からアプリ全体を作らず、一画面でルールを検証することです。

【無料ウェビナーのお知らせ】

「なんかダサい」アプリのUIデザインを、
Claude Codeに直させる60分

1. AIっぽいUIは、なぜ生まれるのか

最初に完成画面を作ると、AIは与えられた情報の範囲で、その場にもっともらしい答えを出します。ところが、「利用者は誰か」「画面で達成したいことは何か」「もっとも重要な操作はどれか」「エラー時にどう見せるか」が決まっていないと、画面ごとに判断が変わります。

たとえば、最初の画面では青い角丸ボタン、次の画面では紫のピル型ボタン、さらに別の画面ではリンク形式のCTAが出てくる、といった状態です。どれも単体では不自然でなくても、アプリとして並べると統一感がありません。利用者は、毎回「これは押せるのか」「次に何をすればよいか」を考え直す必要があります。

この状態を避けるには、画面の装飾を増やすのではなく、AIより先に人が判断を置きます。具体的には、情報の順番、主CTA、余白の基準、使う部品、空状態・エラー状態です。これらが決まると、AIは自由にデザインする役割から、決められたルールを再現し、改善案を出す役割に変わります。

失敗例：「おしゃれにしてください」だけでは、検品できません