お馴染みの見た目です。白い背景。青いボタン。Interフォント。紫から藍色へのグラデーションがかかったヒーローセクション。角の丸みが同じで、かすかなドロップシャドウのかかったカード。左側にロゴ、右側に「使ってみる（Get Started）」ボタンがあるナビゲーションバー。

これまでに何度も見たことがあるでしょう。そして、あなたが初めてアプリを生成した瞬間、またそれを見ることになりました――ただ今回は、それがあなた自身のものでした。

これは現在、バイブコーディング（Vibe Coding）において最も検索されている一方で、最も回答が得られていない問いです。AIがこれまで見てきたものの平均値に見えるのではなく、あなたらしいものを作るにはどうすればいいのでしょうか？

答えは技術的な修正ではありません。説明の問題です。そしてこの記事が、その解決策を提示します。

私たちは、アイデアを持つ誰もが頭の中にあるものを形にできるよう支援するという使命を担っています。それには、自分らしさが表現されたものを作ることも含まれます。ですから、もしあなたが自分のアプリを見て「これで悪くはないけれど、他の誰かと同じものに見える」と思ったことがあるなら、ようこそ。この記事はあなたのためにあります。

この記事での私たちの目標はシンプルです。

なぜAIがデフォルトでジェネリック（一般的）な見た目になるのか、そして実際に何が起きているのか
デザインの背景知識がなくてもデザインを説明するために必要な語彙
Enter上で、ジェネリックなものから独創的なものへと昇華させるステップバイステップのプロセス

なぜAIはデフォルトで同じ見た目になるのか？

まず最初に、実際に何が起きているのかを理解しましょう。一度見てしまえば、もう忘れることはできません。

人工知能は存在するデータから学習します。「プロフェッショナル」や「クリーン」、「モダン」な見た目を構築するようAIに求めると、それはAIが学習してきたあらゆるプロフェッショナルでクリーン、かつモダンなインターフェースの統計的な平均値に手を伸ばします。その平均値には非常に特定の顔があります。青、白、Interフォント、角の丸いカード、影付きのカードです。

それは悪いデザインではありません。安全なデザインです。誰かを不快にさせることもなく、誰かを際立たせることもないデザインです。

AIは美学的な選択をしているのではありません。確率的な選択をしているのです。AIがこれまで見てきたすべてに基づいて、あなたが記述したものと最も一致する可能性が高いインターフェースを構築しているのです。そして、あなたの記述が「モダン」「ミニマル」「プロフェッショナル」のように曖昧な場合、返ってくるのはそれらすべてを組み合わせた平均値なのです。

すべてを変えるルールはこれです：曖昧な指示 → 一般的な出力。毎回、必ずそうです。

つまり、解決策はツールにあるのではなく、あなたがツールとどう対話するかにあります。

メンタルシフト：あなたがアートディレクターである

多くの人は、デザインにはフォント名、カラーコード、CSSプロパティなどの技術的な知識が必要だと考えています。これは誤った枠組みです。

メンタルシフトとはこういうことです。あなたはデザイナーではなく、アートディレクターなのです。アートディレクターはロゴを描いたりコードを書いたりしません。部屋に入ってムードボードを指差し、「このように感じてほしい。でも、もう少し温かみを。エッジを効かせて」と言うのです。デザイナーがその実行方法を考えます。

あなたはこのスキルを人生を通じて培ってきました。カフェに入ってすぐにその場所が「合っている」と感じたり、ウェブサイトを開いてすぐに「違う」と感じて3秒で閉じたりした時。あるいは「このデザインはやりすぎだ」「高級感がある」と感じた時――それがデザインリテラシーです。ただ、これまでそれを表現する手段がなかっただけなのです。

バイブコーディングは、その手段を与えてくれます。あなたの好みが問題なのではなく、その好みについての説明が問題なのです。そして、それは学習可能なスキルです。

一般的なものから独創的なものへ：ステップバイステップ

ここからが実践編です。アプリに独自のビジュアルアイデンティティを与えるための具体的なプロセスを案内します。最初の一言を入力するところから、確固たる独自の視点を持つ誰かが作ったような仕上がりにするまでの工程です。

何かを入力する前に――語彙を構築しよう

デザインにデザイン学位は不要ですが、正しい言葉は必要です。以下に大きな効果をもたらすカテゴリーを挙げます：

ムードワード ― 製品が全体的にどのような雰囲気であるべきかをAIに伝えます。「プロフェッショナル」ではなく、例えば：エディトリアル、ラフ、温かい、臨床的、遊び心、構造的、大胆、映画的、控えめ などです。これら一つひとつが、まったく異なる視覚的方向性を生み出します。

参照する業界 ― 一部の業界には強力で一目で認識できる美学があります。試してみてください：建築事務所、ファッション誌、金融ターミナル、医学雑誌、高級ホテル、独立系書店 AIに製品がこれらのような雰囲気を持つべきだと伝えることで、参照すべき一貫した世界観を提供できます。

コントラストと重み ― どれくらいの視覚的緊張感が必要ですか？ 高コントラストかソフトか？重厚なタイポグラフィか軽いか？密集かゆったりか？ これらの選択は、どんな色よりも「雰囲気」を定義するのに役立ちます。

タイポグラフィの方向性 ― 特定のフォント名を挙げる必要はありません。知っておくべきは「セリフかサンセリフか」です。セリフ体（新聞や本で見られるような、文字の端に小さな水平の線があるフォント）は、確固とした、文学的な、信頼できる印象を与えます。サンセリフ体（装飾がなくクリーンな、多くのテック製品で見られるフォント）は、モダンで直接的な印象を与えます。どちらを望むかを知るだけで、製品の性格全体が変わります。

ステップ1 — Enter上に既にあるものから始める

プロンプトを一行も書く前に、Enterの中には視覚的な方向性を見つけるための最短の道筋があります。

ホームページで、チャット入力欄の下を見てください。「テンプレート」と「コンポーネント」という2つのタブがあります。

テンプレートは、Enterコミュニティによって構築された、すぐに使える完全な出発点です。それぞれが異なる美学の世界を持っています。大胆なエディトリアルレイアウト、ダークなゲーミングインターフェース、クリーンな音楽プラットフォーム、ミニマルなコースプレゼンテーション。これらは意図的に異なって見えます。どれをコピーするか探すのではなく、どれに自分が反応するかを見るために閲覧してください。

その「反応」こそが情報です。大胆な黒と緑のテンプレートを見て「少し攻撃的だが、この自信は好きだ」と思えば、自分が求めているものについて具体的な何かを理解したことになります。音楽アプリを見て「余白は好きだが、もっと真面目な感じが必要だ」と思えば、それがあなたのブリーフ（指示書）の形成の始まりです。

コンポーネントはもう一段深く掘り下げます。カード、ナビゲーションバー、ヒーローセクション、料金表といった個々の構成要素で、それぞれが既にデザインされています。特定のコンポーネントがタイポグラフィや間隔をどのように処理しているか気に入れば、それを他のすべてをまとめる際のアンカーポイントとして使用できます。

重要なのは「閲覧し、反応し、気づいたことを書き留める」ことです。「これがいい」といった曖昧な評価ではなく、具体的に書きましょう：

「見出しが大きく、本文が小さいのが好き。アクセントカラーが1色だけで、あとは白黒で構成されているのがいい。要素間の余白が十分にあり、詰まった感じがしないのが心地よい。」

これらの観察結果こそが、あなたのブリーフです。さらに踏み込むなら、外部の参照先（ウェブサイト、アプリ、雑誌など）で、製品に持たせたい感覚を体現しているものを1つか2つ見つけてください。それらへの反応をノートに追加します。これで、取り組むべき確かな土台ができました。

ステップ2 — 具体的なプロンプトを書く

チャットを開き、収集したすべてを盛り込んだプロンプトを書きます。一般的なブリーフと具体的なブリーフの違いは以下の通りです：

一般的な例: 「モダンでプロフェッショナルなデザインの個人ポートフォリオサイトを作って。」

具体的な例: 「個人ポートフォリオサイトを作って。独立系建築スタジオのサイトのような、ミニマルでゆったりとした、自信に満ちた雰囲気がほしい。背景は黒、テキストは温かみのあるクリーム色、アクセントカラーは落ち着いたテラコッタ色。メインの見出しには縦長のセリフ体フォントを、その他はすべてクリーンなサンセリフ体を使用して。レイアウトは非対称にして、すべてを中央揃えにしないで。ヒーロー画像ではなく、強い一言のテキストで始めて。ナビゲーションは最小限にして、ほとんど見えないくらいにして。」

同じアイデアでも、結果はまったく異なります。後者のブリーフは、あなた自身が独自の視点を持って構築するため、独自の視点を持つものが生成されます。ステップ1で気づいたことはすべて、これに直接反映されます。 --> 初回のブログ記事でさらに詳しく：バイブコーディングガイド：技術知識のない創業者へ | Zero to Hero | Enter

ステップ3 — 重みの8割を占める3つの決定を行う

さらにシンプルにするなら、以下の3つの決定が「独創的か、ジェネリックか」を決定づけます。

カラーパレット。 背景色1つ、テキストカラー1つ、アクセントカラー1つ。具体的に指定してください――オフホワイト、ニアブラック、深いフォレストグリーン――それだけで、製品はすぐに独自のアイデンティティを持ち始めます。AI生成デザインの多くが犯すミスは、5色も使ってしまうことです。そのどれもが微妙にずれているのです。

タイポグラフィ。 見出しに1つのフォント方向性、本文に1つ。できれば、セリフ体とサンセリフ体を1つずつ選んでください。有名である必要はありません。相互に調和を感じられれば良いのです。エディトリアルなもの、テクニカルなもの、温かみのあるものなど、AIにリクエストすれば、それに適したフォントを選択してくれます。

間隔（スペーシング）。 窮屈よりもゆったりとした間隔が、ほぼ常に勝ります。何かが安っぽかったり窮屈に見えるなら、最初の修正は要素間の余白を増やすことです。「より呼吸ができるように、ホワイトスペースを増やして、カード内部のパディングを増やして」と伝えてください。すぐにその違いがわかります。

ステップ4 — 最後の20%のためにビジュアルエディターを使う

すべてのビルドには、変更を記述するよりも直接修正するほうが早い段階が訪れます。セクション間の間隔が2ピクセルだけ狭い。ボタンの色は合っているが、少し彩度が高すぎる。見出しサイズを少しだけ小さくする必要がある。

ここでEnterのビジュアルエディターがダイナミクスを変えます。要素をクリックし、オプションを確認し、フォントサイズ、色、間隔、レイアウトを直接調整します。別のプロンプトを書いたり、再生成を待ったり、何かを修正しようとして他の場所を壊したりすることなく調整できます。

記述フェーズとクリックフェーズは連動します。AIは80%を素早く達成させ、ビジュアルエディターは最後の20%を正確に処理します。ワークフローは「テンプレートの閲覧 → 方向性の記述 → 生成 → クリックで微調整 → 公開」となります。

ステップ5 — 公開して新鮮な目で見る

満足できる状態になったら、公開しましょう。

Enterは即座にライブURLへデプロイします。そのリンクをスマートフォンで開き、机から離れて、見知らぬ人のような目で見てください。作った本人としてではなく。

一つだけ自問してください。「これは独自の視点を持つ誰かが作ったように見えるか？」もし「はい」なら、完了です。もしそうでないなら、何が欠けているのかが今ならわかるはずです。戻って、不足している部分を説明し、微調整してください。

それがループです。繰り返すたびに速くなります。

シリーズの次回予告

あなたは今、なぜジェネリックな現象が起きるのか、そしてどうすれば回避できるのかを正確に理解しました。次のビルドは、あなたらしい見た目になるはずです。

次回は、さらに一歩深く掘り下げます。デザインも大事ですが、人々が実際に使いたいと思うものを構築することはまた別物だからです。創業者が見た目を整えた後によく犯す最大のミスについて話します。それは「間違ったものを美しく構築してしまうこと」です。正しい課題を見つけるにはどうすればいいか、構築前に検証するにはどうすればいいか、そして出荷する価値のあるものを届けるにはどうすればいいかについて解説します。

それでは、またお会いしましょう。