アプリのデザインが「AI スロップ」に見えるのを防ぐ方法

AI はアプリ開発において驚くほど優秀になっていますが、問題はどれもテンプレートのような、極めてありきたりな見た目になってしまうことです。

同じ角丸のカード。

同じ淡いグラデーション。

同じダッシュボードレイアウト。

コンセプトのない、どこにでもある UI 。

そこで私は、そうした「いかにも AI っぽさ」を避けるためだけに、アプリのインターフェースを再設計する Claude Code スキルを作りました。

コンセプトから始まる

Claude に「クリーン」「ミニマル」「プレミアム」といった指示を出す代わりに、このスキルはまずそのアプリに本当に合ったビジュアルコンセプトを見つけることから始めます。

ランニングアプリなら、陸上競技のトラックを中心に据えることができます。

睡眠アプリなら、村が静かに眠りについていくような雰囲気にできます。

植物アプリなら、切り絵のような見た目にできます。

イタリア語学習アプリなら、ナポリのトランプカードからモチーフを借りてくることも可能です。

このコンセプトが、タイポグラフィ、レイアウト、カラー、イラスト、モーションの土台になります。

目的は、汎用的な UI パターンからデザインするのをやめ、確かなアイデアから出発することです。

最初のデザインでは決めない

AI デザインにおける最大の問題の一つは、あまりにも早く方向性を確定してしまうことです。

プロンプトを与えると一つの方向性が出力され、その後すべてがその最初の答えを中心に組み立てられてしまいます。

このスキルは、まず 3 つの異なる方向性を模索することを Claude に強制します。

それらを比較した上で初めて、一つを選んで進めます。

たったこれだけで、最終的な成果物の予測不可能さが格段に増します。

そして自分の仕事をチェックする

画面のデザインができると、Apple のフォントを使って実際の iPhone 解像度でレンダリングされます。

その後、別の批評プロセスで、AI が生成した UI にありがちな兆候を探します。

汎用的なコンポーネントパターン、弱い階層構造、一貫性のない余白、繰り返されるカード、不要なグラデーション、プロダクトというよりテンプレートのように感じるレイアウトなどです。

少しでもありきたりに感じれば、もう一度手直しが加えられます。

ワークフローは次の通りです：

コンセプト → 方向性の模索 → デザイン → レンダリング → 批評 → 改善。

目的は「より美しい AI デザイン」ではありません。AI が魅力的なインターフェースを作れないからこれを作ったわけではないのです。

AI にはそれができます。

問題は、「魅力的であること」と「他と違うこと」は別物だということです。

AI が生成したアプリの多くは単体で見れば洗練されていますが、10 個並べてみると、どれも同じプロダクトのように感じ始めてしまいます。

上の画像はすべて、それを避けるために作られたものです。

違うアプリは、違う世界のように感じられるべきです。

つまり、このスキルの役割はこういうことです：

AI デザインのスピードを活かしつつ、「AI が作ったっぽい」仕上がりにならないようにすること。