AIが作ったUIはなぜ「使いづらい」のか？ 「操作できる」と「使える」を分けて、100点に引き上げる「4つの評価観点」

AIの出力に“デザインの視点”をプラスする ──エンジニアのためのUX改善入門　第5回

AIとの協働プロセス ──「任せる」のではなく「問い直させる」

　生成AIを活用したUI制作は、「生成して終わり」ではなく、「レビューして直す」までを一つの工程と捉えます。流れは次の通りです。

• 主要なユーザーと、その画面で達成したい目的を明確にする。
• AIに画面を生成させる。
• シグニファイア、フィードバック、UXライティング、情報設計の順に見直す。
• 気になった箇所をAIに問い直し、修正させる。
• 最後に、ユーザーが迷わず目的を達成できるかを人間が判断する。

　再指示を出すときは、最初から正確な改善案を提示できなくても構いません。例えば、「このボタンはわかりづらくありませんか」「このエラーメッセージで、ユーザーは次に何をすればよいかわかりますか」と問いかけてみてください。違和感のある箇所に少し疑問を投げかけるだけでも、AIは「フィードバックがない」「次の行動を示す文言がない」といった理由を挙げ、修正案を提示してくれます。

　ただし、「もう一度レビューしてください」と繰り返すと、AIは次々に別の改善点を挙げてきます。1か所を改善すれば別の部分がわかりづらくなるというトレードオフもあり、レビューが際限なく続きかねません。そこで、確認範囲を4つの観点とユーザーの目的に絞ります。AIに完璧さを求め続けるのではなく、合格基準を人間が与えるのです。

人間が責任を持つべき「必須問題」とは

　テストに例えるなら、シグニファイア、フィードバック、UXライティング、情報設計という4つの観点は、合格点を取るために落としてはいけない「必須問題」です。ここは人間が責任を持って確認する必要があります。一方、色合いや余白など、4つの観点を損なわず、ユーザーの目的にも影響しない細かな調整は、さらに完成度を高めて点数に差をつける「応用問題」に当たります。こうした部分は、まずAIに実装を任せてもよいでしょう。

　いきなり100点を目指してすべてを人間が決めるのではなく、まず必須問題を押さえ、そのあと必要に応じて応用問題で点数を伸ばしていくイメージです。もちろん、色や余白が視認性や操作性に影響するのであれば必須問題に含まれます。線引きの基準は「デザインか実装か」ではなく、「ユーザーの目的達成に関わるかどうか」です。

　調整によって何かを諦めなければならないときも、ユーザー視点に立ち返ります。例えば、銀行のシステムでは明細をすべて確認したい人もいます。しかし、サイトを開いた直後の画面で、残高や主要な操作よりも先に全明細を同じ比重で見せてしまうと、別のユーザーは迷ってしまいます。誰がどの場面で使う画面なのかを定めれば、優先すべきものが見えてきます。

　デザインとは、ある目的に特化させることでもあります。情報を減らせば判断材料が減り、すべて出せば認知負荷が上がります。どちらが常に正しいとは言えません。トレードオフにおける最終的な判断は、AIではなく、ユーザーと業務の文脈を知る「人間」が行うのです。

図3：図1のホテル予約ページを見直した改善後UI

AI生成UIを総点検するためのプロンプト例

　最後に、AIが生成した画面を見直すためのプロンプトを紹介します。画面を生成した直後だけでなく、機能追加や修正を重ねたあとの総点検にも活用してみてください。

プロンプト例

　このUIは、AIが生成した画面です。見た目が整っているかではなく、ユーザーが迷わず目的を達成できるかを基準に確認してください。

　確認したい観点は、次の4つです。

　・シグニファイア

　主要アクションが、操作すべき対象として直感的に伝わっているか。

　ボタンやリンクは押せるものとして見えるか。

　アイコンだけに依存せず、押すと何が起きるかを予測できるラベルがあるか。

　・フィードバック

　操作直後、処理中、成功時、失敗時の状態がユーザーに伝わるか。

　反応がない、止まっている、押せていないと誤解される余地がないか。

　・UXライティング

　ボタン、エラー、補足文、空状態の文言が、ユーザーの次の行動を支援しているか。

　システム都合の説明ではなく、ユーザーが何をすればよいかわかる表現になっているか。

　・情報設計

　情報の優先順位が整理されているか。

　主要情報と補助情報が混在し、認知負荷を上げていないか。

　主要アクションの導線を妨げる要素がないか。

　このプロンプトで得た指摘をそのまま採用するのではなく、主要なユーザーと利用目的に合致しているかを確認してください。AIが挙げた改善案同士が衝突した場合、優先順位を決めるのは人間です。

この記事のまとめ

• AIはUI制作のスピードを大きく上げ、70～80点の画面をすばやく作成できる。
• 「使われるUI」にするには、4つの観点で見直し、ユーザーの文脈に合わせて調整する必要がある。
• これからのエンジニアには、作る力だけでなく、見直す力が求められる。

　AIにUIを作成させることと、UXの知識を身につけることは対立しません。むしろ、UIを理解しているエンジニアほど、AIに対してどこを問い直し、何を任せるかを的確に判断できます。AIは作る工程を強力に手伝ってくれますが、誰のために何を作るかを決めるのは人間です。

　生成された画面を「要件を満たしている」で終わらせず、「毎日使っても迷わないか」「ユーザーの負担にならないか」ともう一度見直してみてください。そのひと手間が、AIが作った80点のUIを、そのユーザーにとっての100点に近づける大きな一歩になるのです。