【ITニュース解説】AI UI Design Without the Slop: Four Directions and a Choice

このニュース記事は、AIを使って開発したアプリケーションのデザインを、単に機能するだけでなく、使う人が「これは意図されたデザインだ」と感じるような高品質なものにするためのアプローチを解説している。特に、AIにデザインを任せる際の注意点とその克服方法、そしてエンジニアリングの視点からデザインをどう進めるべきかが示されている。

まず、プロジェクトは「ClinicLive」という予約管理アプリの開発から始まった。以前のフェーズでは、AIの助けを借りてアプリを動作可能な状態まで持っていくことに成功し、予約やチェックインなどの機能はきちんと動作していた。しかし、アプリの見た目はAIが生成した汎用的なテンプレートそのままで、個性や使いやすさへの配慮が欠けていたという課題があった。そこで、今回のシリーズでは、この「動く」アプリを「意図されたデザインを持つ」アプリへと進化させることに焦点を当てている。

デザイン作業を始めるにあたり、最初に行ったのは、現在のアプリのすべての画面を写真に撮り、記録することだった。これは、単に「変更前」の証拠を残すだけでなく、現状の問題点を洗い出すための有効なツールとなった。例えば、スマートフォンでの予約画面や、待合室に表示されるボード画面など、様々なデバイスサイズでの表示を撮影した結果、これらの画面はどれも開発者向けのテンプレートをそのまま使っているような印象で、ユーザー体験に配慮したデザインが不足していることが明らかになった。特に、予約画面には22個ものボタンが並び、どれも同じような見た目で、ユーザーがストレスを感じやすい状況だと指摘されている。

さらに驚くべきことに、この「写真撮影」という視覚的なアプローチを通して、コードレビューや自動テストでは見つからなかった2つの重要なバグが発見された。一つ目のバグは、待合室のボードに表示される「登録」リンクが、実際にはすでに削除されたページ（404エラー）へとつながっていたことだ。コード上ではリンク自体は有効なHTMLとして存在するため、テストでは検知されなかった。しかし、実際に画面に表示されているのを見れば、それが機能しないリンクであることは一目瞭然だった。二つ目のバグは、キオスク端末でデモ用の予約コードを入力しても「予約が見つかりません」と表示される問題だった。これは、デモ用の予約データが古くなり、有効期限が切れていたためだが、システムとしては「過去の予約」と判断し、正しく動作しているとみなされていた。これらのバグは、コードの内部的な正しさだけでなく、実際のユーザー体験や見た目の状況を確認することの重要性を示している。

なぜAIを使ったデザインが、このような個性のない「平均的な」見た目になりがちなのだろうか。記事では、AIに「見た目をきれいに、モダンに、プロフェッショナルにしてください」といった漠然とした指示を与えると、結果として誰もが目にするような、似たり寄ったりのデザインが返ってくると説明している。これは、AIが「最も可能性の高い続き」を予測して生成する仕組みによるものだ。漠然とした指示は、インターネット上に存在する無数のデザインの中から「平均的で無難なもの」を選び出すことをAIに求めてしまうため、個性のないデザインが量産されてしまうのだ。さらに、私たち人間側も「AIが作ったっぽい」という漠然とした感想しか抱けず、具体的な改善点をAIに伝えられないため、結局似たようなデザインを受け入れてしまうという悪循環に陥りやすい。この問題を解決するためには、AIへの指示の仕方を根本から変える必要がある。

その解決策として提案されているのが、「幅広く提案させ、狭く選ぶ」という手法だ。具体的なデザインを一つだけ求めるのではなく、まず「いくつかの異なるデザインの方向性」を提案させる。そして、その方向性が曖昧にならないよう、具体的な制約を与えることが重要だ。例えば、「このアプリの視覚的な方向性を4つ提案し、それぞれを明確に異なるものにしてください。各方向性には、名前、背景色・文字色・アクセントカラーをHEXコードで指定し、1つのフォントを選び、その方向性がどのような印象を与えるべきかを示す一行の説明を含めること。紫色のグラデーションやデフォルトのフォントは避けてください。まだCSSコードは不要で、方向性のみを提案してください」という具体的な指示を与える。

このようにHEXコードで色を明示させることで、AIは曖昧な表現ではなく、具体的な色の組み合わせを提案せざるを得なくなる。また、「CSSはまだ不要」とすることで、実際にコードを生成する前に、人間がその方向性を評価・判断する余地が生まれる。この手法で実際にAIが提案した4つの方向性（「Calm Practice」「Swiss Health」「Night Shift」「Friendly Paper」）は、それぞれ異なるコンセプトと配色、フォントを持っていた。筆者はその中から、クリニックに適した温かみがあり、視認性の高いフォント「Atkinson Hyperlegible」を採用した「Calm Practice」を選択した。このフォントは、低視力者向けに開発されたもので、文字の形がはっきりと区別できるよう設計されており、不安な患者や高齢者、遠くから画面を見る人にとって非常に読みやすいという配慮がなされている。

しかし、ここで人間による「最終的な修正」が入った。選んだ「Calm Practice」が、実は筆者自身が過去に手がけた別のプロジェクトのデザインと非常に似ていることに気づいたのだ。AIは「一般的なAI生成デザインとは異なる」という指示には忠実に従ったが、筆者個人の過去の作品に関する知識は持っていないため、結果として「似ていない」はずが「似ていた」という状況が起こってしまった。この経験から得られた教訓は、AIに「独自性のあるデザイン」を求める際には、AIがアクセスできない情報（例えば、自分のポートフォリオの色使いやデザイン傾向）を人間が事前に伝える必要があるということだ。

この気づきを受けて、「Calm Practice」の良さ（落ち着き、明るさ、アクセシビリティ）は維持しつつ、自身の過去作とは異なる、よりクールなトーンでデザインを再構築し、「porcelain & petrol」という新しいデザイン方向性を確立した。具体的な背景色、文字色、アクセントカラーなどがHEXコードで詳細に定義され、ダークモードにも対応できるように計画された。特に、選ばれたフォント「Atkinson Hyperlegible」は、この新しいデザインでも引き続き採用され、クリニックを利用する人々の状況を考慮したアクセシビリティへの強いこだわりを示している。

今後のデザイン改善の計画も、エンジニアリングプロジェクトとして戦略的に進められる。まず第一に「見た目よりも基盤」という考え方で、デザインを始める前に強固な土台を築く。具体的には、デザインの要素（色、フォント、間隔など）を管理するための「デザイントークン」システムを構築する。これにより、すべてのデザイン要素が一元的に管理され、後から変更があっても効率的に全体に反映できるようになる。さらに、既存のCSSフレームワークを削除しながらも、そのクラス名や構造を維持することで、既存のページが壊れることなく新しいデザインシステムへ移行できる工夫がなされる。また、キオスクやボードのような特定の用途の画面は、余計な操作ボタンやナビゲーションがない「専用端末」として設計し、前述の404エラーリンクのような構造的な問題を解決する。

第二に、各画面をそれぞれのユーザー体験の観点から個別に設計する。スマートフォン用画面、タッチ操作のキオスク画面、遠くから見る待合室のボード画面、専門的なスタッフ用画面など、それぞれの用途や使われ方に合わせて最適なUI・UXを追求していく。これは、汎用的なデザインテンプレートでは対応しきれない、きめ細やかなデザインを実現するための重要なアプローチである。

AIの利用にかかる費用は非常に安価である一方、最も価値ある発見は、人間の直感や過去の経験から生まれた「他のプロジェクトと似ていないか？」というシンプルな疑問から得られたと記事は結んでいる。これは、AIは強力なツールであるものの、最終的な判断や深い文脈理解には人間の役割が不可欠であることを示唆している。

今回のデザイン改善シリーズは、現在のアプリの「ありのままの姿」を起点とし、デザイントークンシステムの構築、ダークモード対応、そして各画面に特化したUX設計へと進んでいく。この一連のプロセスは、単に見た目を良くするだけでなく、持続可能で高品質なUIデザインを実現するための、エンジニアリングとデザインの融合されたアプローチを学ぶ良い機会となるだろう。