AI アプリ開発にプロのデザイン原則を取り入れる方法

今、簡単なアプリを作るのは容易い。だが vibe coding ツールが大量生産するアプリと、プロのチームが作ったアプリは、ひと目で違いがわかる。

実は、そうなる必要はない。

このブログでは、視覚的に本当に説得力のあるアプリを作るための方法を一つ紹介する。

もちろん、DIY のやり方も教えられる。デザインが美しいと思うアプリのスクリーンショットを何枚か拾ってきて、AI にデザインを実行可能な項目に分解させ、それを自分のアプリにそのまま持ち込む。ネット上には、アプリにそこそこのデザインを被せるためのチュートリアル、プラグイン、リソースが無数にある。

だが、それが独自で視覚的に優れたものを作る最良の道ではない。溢れかえる vibe coded アプリの中で抜きん出るには、polish が要る。

polish とは、粘り強さとセンスがデザインの科学と出会う瞬間のことだ。

Agentic design の限界

Agent は非常に具体的なデザイン作業、たとえばほとんどのデザインパターンやレイアウトの組み立てにおいて、どんどん強くなっている。特にテンプレートや既存のコードベースが使えるときはそうだ。だが、依然として正確に操るのは難しい。デザインはコードではないからだ。

とはいえ、チャット履歴を遡れば、AI が必死にコードを計算し、「ボタンをメインコンテナの端に揃えて」というあなたの言葉を実装に翻訳しようとしている様子がおそらく見られる。Agent には目がない。食材を用意して、鍋に全部放り込むことしかできない。出来上がりがぐちゃぐちゃのときもあれば、まったく問題なさそうに見えるときもある。だが、良いスープがそんなものではないことは誰もが知っている。

デザインの科学

視覚デザインは、抽象化を応用する科学だ。このテーマに関する本は数え切れない。デザインは芸術ではない。John Maeda（著名デザイナー／技術者）はこう言った。「デザインは問題の解。芸術は問題の問いだ」

誕生以来、デザインは一連の核となる原則に従ってきた。その原則はその後、多くの領域に応用されている……建築、印刷、庭園、絵画、インダストリアルエンジニアリング、そしてソフトウェアを含むその他多くの領域だ。「良いデザイン」という神話は捉えがたく、晦渋でありながら、あまりにも現実に感じられる。見ればわかる。

AI でアプリをデザインするための機能的フレームワーク

以下のチェックリストは、人が「ひと目見てわかる」と感じる性質を並べたものだ。私たちが視覚的に調和していると感じるものは、このリストのすべてを満たしている。

コントラストは要素同士を区別可能にする。サイズ、色、太さ、形の違いが階層を生み、視線を最も重要な場所へ導く。コントラストがなければ、すべての要素が等しく並び、何も際立たない。
階層は重要度に応じて読者を内容へ導く。見出しが本文より先に来て、主操作は副操作と違って見えるべきだ。サイズ、位置、色、太さが「まずここを見よ」と伝えている。
整列は秩序と関連性をもたらす。辺や軸を共有する要素は、互いに関係があり、意図的に配置されているように見える。整列がうまくいっているときは誰も気づかないが、欠けると途端に雑に見える。
近接は関連する項目をまとめ、無関係なものを引き離す。グループ間の余白が、何が一体なのかを目に伝える。枠もボックスも要らない。
反復（つまり一貫性）はまとまりを生む。同じ色、書体、形、間隔のパターンを繰り返し使えば、デザインは統一感を帯び、ユーザーもそのシステムを早く学べる。
バランスは視覚的な重みを画面全体に配分する。対称のバランスは安定してフォーマルに見え、非対称のバランスは動きを感じさせながらも、ちゃんと収まっている。どちらでもいい。崩れたレイアウトは居心地が悪い。
余白（ネガティブスペース）は内容に息をつかせる。それは空ではなく、活きており、デザインが上質で余裕があるように見えるか、窮屈に見えるかを決める。
統一は、すべての要素がそれぞれの場所に収まっているという全体の感覚だ。前のいくつかの原則が噛み合って動くときに自然と浮かび上がる。何も気まぐれに見えず、場違いなものもない。

これらをフレームワークとして、AI と一緒に批評し反復するために使う。残念ながら、「visual-design.md」のような単純な skill を書いても効かない。AI にはまだ目がないことを思い出してほしい。だがスクリーンショットを渡せば、このチェックリストに照らして自分の出力を批評し、修正させられる。

デザイン原則を AI 駆動のアプリデザインに適用する

以下は同じアプリの二つのデザインバージョンの例だ。V1 は Claude Code が上記の原則に基づくフィードバックを受ける前の出力で、V2 はフィードバックを受けた後の出力だ。

コントラスト

V1 では、上部に並ぶ数枚のカードのモノクロ写真と、柔らかく温かみのある hero 画像が、色調の上でぶつかり合っていた。色数が多く、サイズも不揃いで、視線をナビゲーションへ導くような高コントラストの焦点も存在しない。

V2 はコントラストをここぞという一点に絞っている。白い「Book now」のピル型ボタンが、暗く雰囲気のある背景の上に置かれている。ページ上で唯一クリックできそうに見える要素であり、視線は自然とそこへ落ちる。ナビゲーションのオレンジ色の「Home」インジケーターは、エレクトリックブルーではなく温かく静かで、現在の状態を示しながら、上部のメイン CTA の注意を奪わない。

階層

V1 の階層は崩れている。ワードマーク、タグライン、場所、「Our Experiences」、そして体験カードのタイトルが、すべて同じくらいの注意を奪い合っている。

V2 は明確な三段階の階層を築いた。(1) hero 画像 + タグライン + Book now、(2)「Experiences」セクションラベル、(3) 名称と価格を伴う各カード。視線が上から下へ移動する順序は、まさにビジネスが本当に望む順序だ。雰囲気、コンバージョン、そして閲覧。

整列

整列について、V1 は特に大きなミスをしていない。これほどシンプルな UI なら、コンテナが一つ、側軸が二本しかない。よくやった、Claude！ V2 も整列の構造は変えていない。

近接

V1 では、タグラインと場所が hero 写真上のワードマークの下にひしめき合い、三つの情報が固く積み重なって息継ぎの隙間もない。そのあとは唐突で窮屈なつなぎから、密集したカードへと直接流れ込む。

V2 は役割を分けた。hero がブランドと情緒を伝える。体験は下へ押しやられ、閲覧モードへの移行がなだらかになった。

反復

V1 はサンセリフのワードマーク、別のウェイトの本文、青いアイコン、オレンジの強調テキスト、カード上のモノクロ写真処理を混在させていた。読んでいて、それぞれ別々に下された設計判断の寄せ集めに感じられる。

V2 は一つのシステムを築いた。単一のフォントファミリー、統一された丸みのあるピル形状、唯一のアクセントカラーとしての温かいオレンジ、そして全体を貫くフルカラーの写真。

バランス

V1 は上が軽く下が重く、左右も釣り合っていない。文字の詰まった巨大なカードが下三分の二を占め、hero は途中で切れたように見える。視線が下へ沈む。

V2 は非対称のバランスをうまく取っている。メインビジュアルが上部の支配的なスペースを占め、CTA が中央で視覚的な支点となり、横スクロールする二枚のカードが下部を重くなりすぎずに支える。重さは上から下へ配分され、どの部分にも意図がある。

余白

これが最大のアップグレードだ。V1 では（上部の不可解なずれを除けば）すべてのピクセルが働かされていた。文字は写真の上に圧し掛かり、カードは隙間なく積まれ、ナビゲーションにはアイコンが四つ詰め込まれている。全体が雑然としており、健康ブランドがまさに与えるべきでない印象だ。

V2 はデザインに息をさせている。ロゴアイコンの周り、CTA の周り、セクションラベルとカードの間。この空間そのものがブランドの約束だ。回復、静けさ、呼吸できる余地。

統一

V1 はテンプレートに中身を流し込んだだけのように見える。V2 はどこも意図的だ。夜のメインビジュアル、温かいオレンジのアクセント、丸みのあるピル、横スクロールするカード、一貫した余白——その一つひとつが同じ一つの考えを強めている。静かで、上質で、自然に根ざした体験。統一は単独の手法ではない。残り七つの原則が互いに噛み合ったとき、自然に現れるものだ——右側がまさにそうなっている。

功利的な AI デザインに警戒する

AI agent は往々にして非常に功利的で、機能だけを見て作る。その結果が、生気のない UX だ。私の提案は、agent の出力を単純な土台として扱い、その上に拡張していくことだ。たとえば最初の予約フロー UX はごく簡素だったが、決済の全過程で予約情報を繰り返し見せれば、ずっと魅力的になる。

退屈なAIデザインに甘んじていては、際立つことはできない。誰もがアプリを作れる今の世界では、なおさらだ。あなたの作品を量産型のAIアプリから引き離すには、デザイン上の微妙な違いが要る。

AIと一緒にデザインするのは難しいことがある。人間がアートディレクションを担うのも同じくらい難しい。ここで挙げた視覚デザインの原則は、その往復の対話に必要な語彙だ。

試してみて、どうだったか教えてほしい。