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

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

　最近では、エンジニアがデザインをAIで生成してそのまま実装に落とし込むケースが増えています。しかし、その際に直面するのは、見た目は整っているのにUI/UXが機能せず、サイトが想定通りに使われないという問題です。本連載ではそんなエンジニアのために、UXを改善するヒントを株式会社Faciloのフロントエンドエンジニアであり、ZEN大学客員講師を務める折原レオナルド賢が指南します。最終回となる第5回のテーマは、AIが生成したUIを「使われるUI」に仕上げるための調整力です。AIは、短時間で見た目の整った画面を生成できます。だからこそ、一見しただけでは気づきにくい使いにくさを見過ごしがちです。今回は、これまで取り上げた4つの観点を使い、AIが作った80点のUIを、ユーザーにとっての100点へ近づける方法を解説します。

AI生成UIの「操作できる」と「使える」の決定的な違い

　AIが生成したと一目でわかるページはかなり少なくなりました。日を追うごとにAIは進化し、情報を渡せば、カードやボタンを使った、見た目の整った画面をすばやく生成してくれるようになりました。

　では、下記のホテルの予約ページを見てみましょう。宿泊日、人数、客室、料金、朝食の有無、キャンセル条件など、予約までに確認すべき項目はたくさんあります。これはAIが作成した画面ですが、筆者から見れば100点満点中80点の出来です。

図1：ホテル予約ページの改善前UI

　ご自身でこのページを利用する場面を想像してみてください。よく見ると、どこか使いづらいと感じるのではないでしょうか。例えば、どのボタンが主要な操作なのかわからない、カードが多くてどこから見ればよいか迷うといった点です。また、入力後の状態が伝わらない、エラーが起きても原因の説明だけで次に何をすべきかが書かれていないといった問題もあります。データはそろい、レイアウトも破綻していないのに、目線の流れがうまく設計されていないのです。

　AIは、既存のパターンをもとに「それらしい画面」を作るのが得意です。一方で、利用できるデータをできるだけ画面に出し、「引き算」をしない傾向があります。どの情報が重要かは、誰が何のために画面を使うかによって変わるからです。特定のユーザーや業務の文脈を与えなければ、AIは優先順位まで判断できません。

　これはAIの能力を否定する話ではありません。AIが生成するUIは、すでに高い完成度を誇ります。ただし、「操作できる」ことと、迷わず疲れずに「使える」ことは別です。一見しただけでは気づきにくい差を見つけて埋める調整にこそ、人間のエンジニアが介在する価値があります。

データの取捨選択と画面に詰め込む情報量の限界

　本連載の第1回から第4回でも触れましたが、AIが生成した画面をエンジニアがそのまま採用してしまう理由の一つに、作り手は画面の内容をすべて把握している点が挙げられます。どのデータがどこから来て、どのボタンを押せば何が起きるかを理解しているため、情報が多くても認知負荷がかかりません。そのため、初めて使う人が何につまずくのかを想像しにくいのです。

　最近、あるエンジニアから筆者に「画面が見づらいので直してほしい」という依頼がありました。確認すると情報が隙間なく詰め込まれていたため、優先順位をつけて一部を削る提案をしました。しかし、そのエンジニアからは「すべての情報を出した状態で整理してほしい」との要望がありました。

　データを持っているならば出したいし、実装した機能なのだから見せたいという気持ちはわかります。エンジニアは無意識に、情報を多く出すことを優先しがちだからです。しかし、情報を一つも減らさないまま、配置だけで認知負荷を解消するには限界があります。

　情報を詰め込みすぎる傾向は、AIが生成するUIにも見られます。だからこそ、作った本人の「自分にはわかる」を基準にせず、ユーザー目線で見直す工程が必要になります。