AIっぽいUIの正体は「全部目立つ」だった。デザインルールをSkills化して分かったこと
生成AIにUIを作らせると、完成度は高いのになぜか「AIが作った感」が残ることがあります。
その原因を分析して、主に以下の4つではないかと考えました。
- アウトラインが多い
- グラデーションが多い
- 不要な枠・カードが多い
- アイコンの種類・表現が多い
そこで今回は、この知見を単発のプロンプトで終わらせず、UIデザインのルールとしてSkills化してAIに渡してみました。
結果、UIはかなり変わりました。
ただ、実際にBefore / Afterを比較して気づいた一番重要なポイントは、もっと根本的な部分でした。
Before：すべての要素が「俺を見て」と言っている
まず改修前がこちらです。
Before
一見すると、それなりに作り込まれています。
ダークテーマ、青いアクセント、角丸、アウトライン、アイコン、カード、背景の装飾……。
問題は、全部が目立っていることです。
例えばチケット詳細画面だけでも、
「戻る」「共有」「削除」にそれぞれ大きな枠があり、チケットにも枠があり、その下の情報にも枠があり、アルバムにも枠があり、未入力情報にも枠がある。
さらに青いボタンや色付きアイコンまで存在します。
つまり、情報の重要度に関係なく、UIコンポーネントが均等に自己主張している。
これこそが、今回見つけた「AIっぽさ」の大きな原因でした。
After：「何を目立たせないか」を決めた
そこでSkillsでは「もっとオシャレにする」のではなく、何を目立たせないかをルール化しました。
After
例えば、
- 枠は「囲う必要がある」場合だけ使う
- アイコンは意味を補完するときだけ使う
- 装飾目的のグラデーションを使わない
- 同じ階層の情報を過剰にカード化しない
- 主役以外のUIは意図的にコントラストを落とす
- 色・余白・文字サイズで情報の優先順位を作る
といった判断基準を持たせています。
ポイントは 「○○禁止」というルールだけではない ことです。
「アウトライン禁止」と書けば、確かに枠は消せます。
でも、それだけでは良いUIにはなりません。
重要なのは、
その装飾が、ユーザーの視線を奪うだけの価値を持っているか？
という判断基準までAIに渡すことでした。
AIにデザインさせるなら「足し算」より「引き算」を教える
ここが今回、一番大きな発見でした。
AIは「ここを目立たせて」は得意です。
色を付ける。
枠で囲む。
影を付ける。
アイコンを置く。
ボタンを大きくする。
手段はいくらでも持っています。
一方で難しいのが、「ここは目立たなくていい」を判断すること。
放っておくと、重要度70の要素も30の要素も、それっぽく装飾してしまいます。
その結果、全部が目立って、逆に何も目立たないUIが完成します。
だからSkillsに入れるべきなのは、単なるデザインパターン集ではなく、
「何を作るか」ではなく「何を作らないか」を判断する基準。
ここまで定義すると、AIが生成するUIの質が一段変わりました。
プロンプトを書くより「判断基準」を資産化する
今回の改修で、AIコーディングに対する考え方も少し変わりました。
毎回、
「もっとシンプルに」
「AIっぽさをなくして」
「モダンなUIにして」
とプロンプトを工夫するよりも、
良いUIを判断するための基準そのものをSkillsとして持たせる。
一度定義すれば、別画面を作るときにも同じ思想を再利用できます。
これはかなり強いです。
AI時代のデザインシステムは、色や余白、コンポーネントを定義するだけでは足りないのかもしれません。
「なぜそれを目立たせるのか」「なぜこれは目立たせないのか」という判断ロジックまでAIに渡す。
Before / Afterを比較して、そこがUIを「AIが作った画面」から「意図を持って設計された画面」へ変えるポイントだと感じました。