Enterで4時間でAI搭載コンセプトエクスプローラーを構築した方法

バックエンドの経験がないデザイナーがEnter.proを使って構築しましたEssence— あらゆる概念をその基本的な構成要素に分解するAIネイティブなキャンバスアプリ。アイデアから、AI統合、バイリンガルサポート、ゲーミフィケーション体験を備えた完全に動作する製品まで — わずか4時間で。

きっかけ

デザイナーとして、私はずっと一つの問いに魅了されてきました:創造性はどこから生まれるのか?

デザイン手法を学ぶほど、同じパターンが見えてきました:創造性はしばしば分解と再結合から始まります。何かを本質的な部分に分解し、それを新しい方法で再構築する。

そのアイデアがEssence— AIを活用した概念探索キャンバスにつながりました。任意の概念を入力すると、AIがそれを核となる要素に分解します。そして、それらの要素を再結合することで、新しいアイデアが生まれ始めます。

なぜEnterなのか

私はプロダクトデザイナーであり、フルスタック開発者ではありません。Essenceのアイデアには、困難に感じられるいくつかの要素が必要でした:

• インタラクティブなキャンバスドラッグ&ドロップ、ズーム、パンを備えた — FigmaやMiroのようなツールで見られる複雑なUI

• AI統合概念の分解と再結合のロジックを動かすための

• サーバーレスバックエンドAI APIコールを安全に処理するための

• デプロイ人々が実際に使えるようにするための

LLM APIへの接続は、ほとんどの非開発者を止めていました — APIキー、環境設定、認証ロジック。

EnterのAI Allを使うと、私はただ「Claude Sonnet 4.5を使って」と言うだけで、すべてを配線してくれました — バックエンドのEdge Functions、リクエストのフォーマット、エラーハンドリング。

Enter.proでは、インフラストラクチャに全く触れません。欲しいものを説明すれば、React、Supabase、Edge Functions、モデル統合を処理してくれます。私は「何を」「なぜ」にだけ集中します。

構築:4時間で5つのフェーズ

フェーズ1:基盤

頭の中でアイデアを整理し、一つの包括的なプロンプトにまとめてEnterに送りました。その要点は以下の通りです:

「Essence」というAIネイティブなキャンバス探索アプリを作成してください。これは軽量な思考ゲームです。コアメカニクス:ユーザーが任意の単語を入力すると、AIがそれを正確に2つのより原子的な概念に分解し、キャンバス上に絵文字+短い単語のノードとして表示します。分解ルール:常に正確に2つのノードを返す、各ノードは1つの絵文字+1つの短い単語、概念は各レベルでより本質的になるべき — 感情、動機、エネルギー、構造、関係、力、価値、欲望、葛藤のような次元に向かって分解する。ユーザーは任意の2つのノードを選択して1つの新しい概念に再結合することもできます。キャンバスは無限のドラッグ、ズーム、ダブルクリックで分解、複数選択で再結合をサポート。各分解は1ポイント、各再結合は2ポイントかかります。

このプロンプトを読んだ後、Enterが最初にしたことはAI機能を読み込み、次に私に直接尋ねました:「概念の分解と再構成にどのAIモデルを使用しますか?」利用可能なオプション — GPT-5.2 Pro、Gemini 3 Pro、Claude Sonnet 4.5 — をリストアップし、それぞれにコスト、速度、強みの注釈が付いていました。私はClaude Sonnet 4.5(指示の遵守と創造的タスクに優れている)を選び、EnterがAPI接続全体を自動的に配線しました。

数分後、完全なプロジェクト構造が準備できました — TypeScriptを使用したReact 18、ビルドツールとしてのVite、スタイリング用のTailwind CSS、@xyflow/reactをキャンバス用に、そしてClaudeのAPIに接続されたSupabase Edge Function。コアの分解と再結合のロジックは最初の試行で動作しました。

フェーズ2:AIロジックのチューニング

これはプロジェクト全体で最も重要で魅力的な部分でした。Essenceが楽しく感じられるか退屈に感じられるかは、完全にAI出力の品質にかかっています。最終的なコードは、AIロジックを3つの独立した関数に分割し、それぞれに慎重に作成されたプロンプト戦略を持っています。

問題:AIが「学術的」すぎた

最初のバージョンが動作した後、AIの結果は意図せず笑えるものでした —「ハサミ」を入力すると「鋏状付属器」や「対称進化」が返され、「愛」を入力すると「神経伝達物質」や「量子状態」が出てきました。技術的には間違っていませんが、全く楽しくないし、直感的でもありませんでした。これは私が望んでいた体験ではありませんでした。

#1 修正:AIにペルソナを与える

重要なブレークスルーは、AIに明確なシステムロールを設定することでした —「あなたは分解アシスタントです」ではなく、**「あなたは楽しい分解ゲームです。複雑なものをシンプルな構成要素に変えましょう!日常的な言葉を使ってください。」**この一文だけで、出力スタイルが学術論文から遊び心のある会話へと完全に変わりました。

#2 修正:ポジティブな例+アンチパターン

ポジティブな例だけでは不十分で、AIが時折学術モードに戻ってしまうことがわかりました。そこで、良い例と悪い例を同時に含めました:

**良い例:**ハサミ → 🔪 刃 + 🔗 蝶番(蝶番でつながった2つの刃)コーヒー → ☕ お湯 + 🫘 豆(お湯+コーヒー豆)友達 → 👤 人 + 🤝 信頼(お互いを信頼する人々)夢 → 😴 睡眠 + 💭 想像力(眠っている間の想像力)悪い例(学術的すぎる):❌ 鋏状付属器、対称進化、神経伝達物質、量子状態

この「ポジティブとネガティブのコントラスト」により、AIは私が望んでいたトーンを非常に正確に理解しました:シンプルで、直感的で、人を笑顔にしたり「なるほど!」と思わせるようなもの。

#3 修正:3つの機能、3つの戦略

最終的なAIロジックは3つの独立した機能に分割され、それぞれに独自のプロンプト設計とパラメータ調整が施されました:

① 絵文字生成(generateEmojiForConcept):ユーザーが概念を入力すると、別のAI呼び出しがまず意味的に一致する絵文字を生成します。システムロールは「あなたは絵文字ジェネレーターです。JSONのみを出力します」に設定され、temperature は0.7(創造性より正確性)で、few-shot の例でガイドされます:石 → 🪨、火 → 🔥、愛 → ❤️。パース失敗時は、デフォルトの✨に適切にフォールバックします。

② 概念分解(decomposeConcept):中核機能。プロンプトはAIに「積み木のように分解する」よう導き、正確に2つのノード(絵文字+短い単語)と1文の説明を返します。Temperature は0.8に設定 — 絵文字生成より高く、より創造的な余地を持たせます。重要な設計判断:各リクエストにランダムシード(randomSeed)を注入し、同じ概念でも毎回異なる結果が得られるようにする — これにより探索に本当の「リプレイ性」が生まれます。

③ 概念再結合(recombineConcepts):最も創造的な部分。プロンプトは「ゲームのように考える」という枠組みで、想像力豊かな例を示します:水+火=蒸気♨️、小麦粉+火=パン🍞、人間+翼=天使👼、悲しみ+喜び=人生🎭。結果は「驚きがあり、洞察的で、少しユーモラスで、自明でない」べきです。多様性のために同じランダムシード技術を使用します。

#4 修正:ホバー説明でロジックを可視化

すべてのAI分解または再結合は、簡単なexplanationも返します。このテキストはノードに直接表示されません(インターフェースをミニマルに保つため)が、ノードのデータに保存されます。ユーザーがノードにホバーすると、エレガントな HoverCard が表示され、完全な推論チェーンが示されます:

• 分解されたノード(エメラルドラベル):🎭 ドラマ = 😢 対立 + 👥 登場人物、下に「ドラマは基本的に登場人物間の対立です」と表示

• 結合されたノード(バイオレットラベル):😴 睡眠 + 💭 想像力 = 💫 夢、下に「睡眠中の想像力は夢です」と表示

この設計により、情報の階層化が美しくエレガントになります — 表面的にはミニマルな絵文字カード、詳しく見るとAIの思考プロセス。

結果

これらすべてのチューニングを経て、AIの出力品質は劇的に変化しました:

❤️ Love → 👤 Person + 🤝 Trust (people who trust each other) ☕ Coffee → 🫘 Beans + ☕ Hot water (hot water meets coffee beans) 💭 Dream → 🔮 Imagination + 🔥 Desire (a burning vision of the future) 🔥 Fire + 💧 Water = ♨️ Steam 😴 Sleep + 💭 Imagination = 💫 Dream

すべての分解が「なるほど!」という瞬間を生み出し、すべての再結合が笑顔を引き出します。これがプロンプトエンジニアリングの力です — より多くのコードを書くことではなく、AIと対話する正しい方法を見つけることなのです。

フェーズ3:インタラクションの磨き上げ

ここからアプリが生き生きとしてきました:

• 1つのノードを選択 → 「分解」ボタンが表示— さらに分解する

• Shift + 2つのノードをクリック → 「再結合」ボタンが表示— それらを組み合わせる

• 任意のノードをダブルクリック → 即座に分解— 高速探索

• 処理済みノードにホバー → AIの推論を表示HoverCardで

また、軽量なゲーミフィケーション層も追加しました:20ポイントからスタートし(分解はコスト1、再結合はコスト2)、どのパスを探索するか考えさせる穏やかな制約を作ります。ポイントはローカルに保持され、いつでもリセットできます。

フェーズ4:UIデザインの磨き上げ

機能が動作するようになったので、次の焦点はEssenceを感じるのと同じくらい見た目も良くすることでした。

最初の主要なデザイン決定はタイポグラフィでした。グローバルフォントとしてBricolage Grotesqueを選びました — 幾何学的でモダンなサンセリフ体で、アプリをデフォルトのシステムフォント領域から即座に引き上げ、独特のブランドアイデンティティを与えました。

ノードカードのビジュアルは数回の反復を経ました。最終デザインは、柔らかなパステル背景(ランダムに割り当てられたamber-50、emerald-50、violet-50)を持つ大きな角丸長方形カード(rounded-2xl)に落ち着き、視覚的なアンカーとして大きな絵文字、下部に短い単語ラベルを配置しました。キャンバスは最終的にカラフルな付箋が散らばっているような見た目になりました:明るく、遊び心があり、すっきりしています。

入力ボックスはアプリの「第一印象」なので、最高の基準を持っていました。ここでEnterのEnter Components機能が本当に輝きました — 組み込みのAIコンポーネントライブラリで、検索、プレビュー、そしてワンクリックでコンポーネントを追加できます。検索バーに「ai」と入力して、claude-style-chat-inputという優雅にスタイリングされた会話型入力コンポーネントを発見しました。「+ Add to Chat」をクリックすると、Enterは自動的にそれをプロジェクトに統合し、既存のデザイン言語に合わせてスタイリングを適応させました。プレーンなHTML入力が即座に洗練された会話型入力体験に変わりました — 角丸ボーダー、柔らかな影、インラインボタンレイアウト — アプリのビジュアルアイデンティティと完璧に調和しています。

コンポーネントをゼロから書いたり、CSSをいじる必要はありません。Enter Componentsは高品質なUIをブロックのように組み立てることができ、Enterは自動的にスタイリングを調整して視覚的一貫性を維持します。

最後に、クイックスタートコンセプトカードのセット — ❤️ Love、💰 Money、⏰ Time、🌳 Tree、🎵 Music、💭 Dream — をウェルカム画面に傾けたカラフルなミニカードとして表示し、コールドスタートの障壁を下げて、ユーザーが何を入力できるかをすぐに理解できるようにしました。

フェーズ5:国際化

Essenceはグローバルな観客のために構築されているため、中英バイリンガルサポートはあると良い機能ではなく、必須でした。

しかし、国際化はUIテキストを翻訳するだけではありません。Essenceでは、AIの出力もユーザーが選択した言語に一致する必要があります — 中国語モードで「爱」を分解すると「人 + 信任」のような中国語の結果が返され、英語モードに切り替えて「Love」を分解すると「Person + Trust」が返されるべきです。これは、フロントエンドの言語切り替えがAIプロンプト層まで伝播する必要があることを意味します。

実装には、軽量な言語状態管理のためにZustandを使用しました。i18nシステム全体はこのように動作します:ユーザーが右上の言語切り替えをクリック → グローバル状態が更新 → すべてのUIテキストが即座に切り替わる → AI呼び出しが現在の言語パラメータを受け取る → プロンプトテンプレートが中国語版または英語版を選択 → AIの出力がユーザーの言語に自動的に一致します。言語設定はlocalStorageにも永続化され、次回訪問時にシームレスに復元されます。

Enterでは、これらすべてを実現するのに必要だったのは1つの説明だけでした:「右上に言語ボタンで中英切り替えを追加。すべてのUIテキスト、AIプロンプト、AI出力は選択された言語に基づいて自動的に切り替わるようにする。」Enterは状態管理からプロンプトテンプレート分岐、ローカル永続化まで、パイプライン全体を一度に構築しました。

これは重要な教訓も証明しました：i18nは早期に組み込むほど良い。すべての機能が完成するまで国際化を待つと、プロンプト全体にハードコードされたテキストが散在し、すべてのコンポーネントにUI文字列が組み込まれていることに気づくでしょう — そして後付けは苦痛です。初日から多言語アーキテクチャを構築すれば、その後は翻訳コンテンツを追加するだけです。

---

Essenceの特別な点

分解：すべての見えない構造を見る

任意の単語を入力してください。AIはそれを正確に2つの原子的概念に分解します — それぞれに意味的な絵文字と1文の説明が付きます。そして続けてください。それらもさらに分解します。目の前で概念ツリーが成長するのを見てください。

🎭 Drama → 😢 Conflict + 👥 Characters 😢 Conflict → ⚡ Tension + 🎯 Goals 👥 Characters → 👤 Person + 💬 Story

再結合：古いものの原子から新しいアイデアを創造する

キャンバス上の任意の2つのノードを選択 — まったく異なるブランチからでも — それらを組み合わせます。AIが驚くべきつながりを見つけます。

🔥 Fire + 💧 Water = ♨️ Steam 😴 Sleep + 💭 Imagination = 💫 Dream 👤 Person + ✈️ Wings = 👼 Angel

考えるだけでなく、遊ぶ

20ポイントシステムは抽象的な探索を遊び心のあるゲームに変えます。すべてのクリックは選択です。どのブランチを探索しますか？どの原子を組み合わせますか？これは好奇心のためのサンドボックスです。

技術スタック — Enterによって組み立てられた

私はこれを手動で設定していません。Enter.proが私の説明と反復的なプロンプトに基づいて完全なスタックを組み立てました。

学んだ教訓

1. 二層プロンプティング、二つのマインドセット

EnterでAIアプリを構築することは二つの同時進行の会話です：Enterと話すことはフルスタックエンジニアと協力するようなもの — 明確な要件が必要；アプリ内のClaudeと話すことはクリエイティブパートナーと協力するようなもの — 感情的なガイダンスと例ベースの教育が必要。両方の層を正しく理解することが真の技術です。

2. AIにルールだけでなく個性を与える

システムロールを「あなたは概念分解アシスタントです」から「あなたは楽しい分解ゲームです」に変更したことで、出力スタイル全体が一文で変わりました。ルールは形式を制約し、個性は質を定義します。

3. ポジティブな例 + アンチパターンは長い説明に勝る

✅ Scissors → Blade + Hinge ❌ Pincer appendages, Symmetrical evolution, Neurotransmitters

これらの3行は100語以上の言葉が伝えられる以上のものを伝えます。ポジティブ-ネガティブのコントラストは最も過小評価されているプロンプトエンジニアリング技術です。

4. ランダムシードは探索型プロダクトに再プレイ性を与える

同じ概念が毎回異なる結果をもたらします — 今日は「Love = Person + Trust」、明日は「Love = Vulnerability + Courage」。ランダムシード + temperature 0.8は品質を維持しながら多様性を最大化します。探索型プロダクトの生命線は「毎回何か新しいもの」です。

5. 制約が遊びを創造する

20ポイントシステムは目的のないクリックを戦略的な探索に変えました。古典的なゲームデザインの原則：意味のある選択には限られたリソースが必要。

6. 正しいバイブコーディング：一度に一つのフェーズに集中する

基盤が最初 → 次にAIの個性 → 次にインタラクションの洗練 → 次にビジュアルデザイン → 次にi18n。各フェーズは一つの次元に焦点を当て、Enterとの会話をシャープに保ち、出力を予測可能にします。

🔗 Enterで自分で構築する： enter.converge.ai