Building a simple app is easy now. But the gap between apps spawned by vibe coding tools and apps made by professionals is visibly obvious. It doesn’t need to be. In this blog we’ll share a structure that will help you ship apps that are visually compelling. Of course we could give you the DIY method: go take some screenshots of apps you think are beautifully designed, ask AI to deconstruct the design into actionable items, and start baking the same designs into your app. There are countless tutorials, plugins, and resources out there to help you incorporate a reasonably nice design for your apps. But that is not the best way to build something unique and visually impressive. To stand out in the crowded landscape of vibe coded apps you need polish. Polish is when persistence and taste meet the science of design.
エージェント型デザインの限界
Agents are getting good at very specific design tasks like assembling most design patterns and layouts, especially when templates and existing codebases are available. But they remain hard to steer. Because design is not code. And yet, if you inspect your chat you’ll probably see AI crunching code trying to translate what you meant by "align button to the main container edges". Agents don’t have eyes. They can only prepare the ingredients and toss them all in the pot. Sometimes the output is a disaster. And sometimes the output looks totally fine. We all know that there is more to a great soup.
AIはテンプレートや既存のコードベースがある場合、デザインパターンやレイアウトを組み立てるなど特定の作業は得意になってきました。しかし、操作が難しいままです。デザインはコードではありません。チャットの履歴を見れば、AIが "align button to the main container edges" のような指示を解釈してコードを生成しようと躍起になっているのがわかるでしょう。エージェントには目がありません。材料はそろえられても、鍋に放り込むまでしかできません。時には結果がひどく、時には見た目は問題なさそうに見えますが、優れたスープにはそれ以上の要素が必要です。
デザインの科学
Visual design is a science of applied abstraction. There are so many books on the matter. Design is not an art. John Maeda (famous designer/technologist) said "Design is a solution to a problem. Art is a question to a problem". Since its beginning, design has followed a set of core principles that have been applied to many domains ever since….architecture, print, landscaping, drawing, industrial engineering, and many more including, software. The myth of “good design” is elusive, cryptic, and yet so tangible. You know it when you see it.
視覚デザインは抽象化を応用する科学です。多くの書籍がそのことを扱っています。デザインは芸術ではありません。John Maeda は「デザインは問題に対する解決策であり、アートは問題に対する問いである」と述べています。デザインは始まり以来、建築、印刷、造園、製図、プロダクトエンジニアリング、そしてソフトウェアを含む多くの分野で適用されてきた一連の基本原則に従っています。「良いデザイン」という神話はつかみどころがなく謎めいていますが、実際には非常に実感できるものです。見ればわかります。
AIでアプリをデザインするための機能的フレームワーク
ここで示すのは、人が「それだ」と感じるときに見ている視覚的な特性の一覧です。視覚的に調和しているものは、以下の各項目を満たしています：
- Contrast（コントラスト）：要素を識別しやすくします。サイズ、色、ウェイト、形状の違いが階層を作り、目を引くポイントを作ります。コントラストがなければ、すべてが同列に競合し、何も目立ちません。
- Hierarchy（階層）：コンテンツを重要度順に案内します。見出しが本文より先に来る、主要アクションが二次的なものと見た目で区別されるなど。サイズ、位置、色、ウェイトが「ここを先に見てください」と示します。
- Alignment（整列）：秩序と関連性を生み出します。辺や軸を共有する要素は関連しているように感じられ、意図的に見えます。強い整列は目に見えないものですが、不在だとすぐにだらしなく見えます。
- Proximity（近接）：関連する項目をグループ化し、無関係なものを分離します。グループ間の余白が境界線なしに何が一緒にあるかを示します。
- Repetition（反復）/Consistency（一貫性）：色・フォント・形状・間隔のパターンを再利用すると、デザインに統一感が生まれ、ユーザーはシステムを速く学べます。
- Balance（バランス）：ビジュアルウェイトを構成全体に配分します。左右対称のバランスは安定感とフォーマルさを与え、非対称は動的だが解決された印象を与えます。バランスが取れていないと違和感があります。
- White space（余白／ネガティブスペース）：コンテンツに呼吸する余地を与えます。単なる空白ではなく能動的な要素で、デザインをどれほど高級に、落ち着いて、あるいは窮屈に感じさせるかを決定します。
- Unity（統一感）：すべての要素が一体であるという全体的な感覚。ほかの原則がうまく機能するときに現れ、何も場違いに感じません。
これらをAIとの批評・反復のチェックリストとして使ってください。残念ながら、"visual-design.md" のような単純なスキルを作るだけでは十分ではありません。AIには目がない（まだ）ことを忘れずに、スクリーンショットを与えてこのチェックリストに基づく批評を要求し、出力の改良を重ねてください。
AI駆動のアプリデザインへの原則適用（例）
以下は同じアプリに対する2つのデザイン例です。V1は上の原則に基づくフィードバック前の Claude Code 出力、V2はフィードバック後のものです。各原則がどのように働くかを見てみましょう。
Contrast（コントラスト）
- V1: 最初のカードのモノクロ画像が、柔らかく暖かなヒーロー画像とトーン的に衝突しています。色やサイズが多すぎて、明確なハイコントラストの焦点がなく、目がナビゲーションに引っ張られます。
- V2: コントラストを外科的に使っています。暗く雰囲気のある背景に白い "Book now" のピルが一つだけ置かれ、クリック可能に見える唯一の要素として視線を集めます。ナビのオレンジの "Home" インジケータは鮮烈なブルーではなく穏やかな暖色で、主要CTAの注意を奪わずに状態を示します。
Hierarchy（階層）
- V1: ワードマーク、タグライン、ロケーション、"Our Experiences"、カードタイトルが同じレベルで競合しており階層が不明瞭です。
- V2: はっきりした三段階の階層を確立しています：
- ヒーロー画像 + タグライン + Book now
- "Experiences" セクションラベル
- 個別カード（名前と価格）
ユーザーの目は上から下へ、ビジネスが望む順序（雰囲気 → 転換 → ブラウズ）で動きます。
Alignment（整列）
- V1: 整列に関して大きなミスはありません。シンプルなUIでコンテナはひとつ、横軸は2つ。Claudeの仕事は良好です。
- V2: 同じ整列構造を維持しています。
Proximity（近接）
- V1: タグラインとロケーションがワードマークの下でヒーロー写真の上に詰め込まれており、三つの情報がほとんど余白なくスタックされています。カード群に入る導入も狭く窮屈です。
- V2: 役割を分離しています。ヒーローはブランドとムードを伝え、Experience は下に押し下げられ、ブラウズモードへの遷移が楽になります。
Repetition（反復）
- V1: サンセリフのワードマーク、本文の異なるウェイト、青いアイコン、オレンジのアクセントテキスト、カードのモノクロ写真処理といった具合に混在しており、複数の独立したデザイン決定が混ざっているように読めます。
- V2: システムを作っています：同一の書体ファミリ、丸みのあるピル形状の一貫、暖かいオレンジを唯一のアクセントカラーとして使用、そしてフルカラー写真を通して統一しています。
Balance（バランス）
- V1: 下重心でアンバランス。巨大でテキストが密集したカードが下2/3を支配し、ヒーローが切り詰められて見えます。視線が沈みます。
- V2: 非対称のバランスをうまく使っています。ヒーロー画像が上部で存在感を持ち、CTAが中央の視覚的支点となり、横スクロールの2つのカードが下部を支えます。上下に意図的にウェイトを分配しています。
White Space（余白）
- V1: 最大の問題点。ほとんどすべてのピクセルが働いていて（あの変なトップオフセット以外は）、写真上のテキスト、密なカードスタック、4アイコンのナビがあり、窮屈に感じます。ウェルネスブランドにとって望ましいイメージとは逆です。
- V2: デザインに呼吸する余地を与えています。ロゴ周り、CTA周り、セクションラベルとカード間のネガティブスペース。その空間自体がブランドの約束：回復、落ち着き、呼吸の余地です。
Unity（統一感）
- V1: テンプレートにコンテンツを流し込んだだけのように感じます。
- V2: 意図的に感じられます。ナイトタイムのヒーロー、暖かいオレンジのアクセント、丸いピル、水平スクロールのカード、一貫したマージンといったすべての選択が同じアイデア（静かでプレミアムな自然体験）を強化しています。統一感は別個の手法ではなく、他の七つの原則が合致したときに得られるものです。
ユーティリタリアンなAIデザインに注意
エージェントは非常に実用本位になりがちで、無味乾燥なUXにつながる機能に注力しがちです。エージェントの出力はシンプルなベースとして扱い、その上に人間の味付けを加えていくことをおすすめします。例えば初期の予約フローはかなり素っ気なく、チェックアウト中に予約内容のリキャップを入れるだけでも魅力が増します。
AIデザインはシンプルだが、装飾が重要
無味乾燥なAIデザインで妥協してしまう危険性は、埋もれてしまうことです。多くの人がアプリを出せるこの世界では、差別化するためのデザインのニュアンスが必要です。AIと一緒にデザイン作業をするのは難しいかもしれませんし、人がアートディレクションをするのも難しいです。これらの視覚デザイン原則は、その反復的な会話のための語彙です。ぜひ試してみて、結果を教えてください！