AIでアプリを作って公開する方法をご案内します。
はじめての方でも、このページを見れば始められます。
AIに「こんなアプリがほしい」と日本語で伝えるだけで、AIがコードを自動生成します。生成されたコードをBlueにアップロードすれば、すぐにWebアプリとして公開できます。
あなたに合った方法を選んでください。
Blueの中だけで完結。プロンプトを入力すればそのまま公開できます。迷ったらまずこれ。
ChatGPTやClaudeなど、普段のAIとの会話でコードを作り、Blueにアップロードして公開。
Claude Code や Codex が、コード生成からBlueへのデプロイまで自動で行います。
3つの方法を比較して、自分に合ったものを選びましょう。
| 方法 | 特徴 | おすすめの人 |
|---|---|---|
| AI Build おすすめ | Blueの中だけで完結。プロンプト入力→即公開 | 気軽に試したい方・シンプルなアプリ向け |
| チャットAI（ChatGPT・Claudeなど） | AIとの会話でコードを作り、Blueにアップロードして公開 | はじめての方・特別なツールなしで始めたい方 |
| AIエージェント（Claude Code・Codex） | 高度なアプリを作成、APIキーで自動デプロイ | より本格的なアプリを作りたい方 |
ChatGPT・Claude・Gemini などの普段お使いのAIとの会話でアプリのコードを作り、Blueにアップロードして公開する方法です。特別なツールのインストールは不要で、ブラウザだけで始められます。
普段お使いのチャットAI（ChatGPT、Claude、Geminiなど）に、作りたいアプリを伝えます。
AIが生成したコードをファイルとして保存します（例: index.html）。ファイルが複数ある場合はフォルダにまとめてZIPファイルに圧縮します。
ファイルが1つだけの場合も、ZIPに圧縮してください。OSのファイルマネージャーで右クリック→「圧縮」で作成できます。
Blueにログインしてコンソール（/console）を開き、ZIPファイルをアップロードします。アプリがURLつきで公開されます。
ポイント: チャットAIは直接Blueにデプロイすることはできないため、生成されたコードを手動でアップロードする手順になります。しかし、特別なツールをインストールする必要がなく、最も多くの方が始めやすい方法です。
Claude Code（Anthropic）や Codex（OpenAI）は、AIが自分でアプリを作って公開までしてくれるツールです。より高度で複雑なアプリを作りたいときに向いています。
Claude Code や Codex のデスクトップアプリを起動します。
作りたいアプリの内容を自然な言葉で伝えます。AIがファイルを自動で作成します。
生成されたコードをBlueに公開します。2つの方法があります:
方法A: コンソール（/console）からZIPファイルをアップロード（チャットAIと同じ手順）
方法B: APIキーを使った自動デプロイ — AIエージェントがBlueのAPIを使って自動的にデプロイします。AIエージェントにBlueのデプロイキーを渡せば、コード生成から公開まですべてAIに任せることができます。
APIデプロイの技術詳細は AI-Ready ドキュメント をご覧ください。
Blueの中だけで完結する、最も気軽な方法です。プロンプトを入力すれば、そのまま公開できます。ただし、現時点ではシンプルなアプリ（1ページで完結するHTMLなど）向けです。
Blueにログインし、AI Build ページにアクセスします。テンプレートとプロンプト入力欄が表示されます。
作りたいアプリの説明を自然な言葉で入力します。日本語でも英語でもOKです。
コードが生成されたら「デプロイ」ボタンをクリック。アプリがURLつきで公開されます。
Consoleの「Showcase画像」と「Showcaseアイコン」は、BlueのトップページとShowcaseでの掲載表示専用です。ブラウザータブのファビコンやSNS共有時の画像は、アプリ自身のsource codeとassetsで管理します。
画像はAI Buildの添付またはWork assets（Asset Library）へアップロードし、使うファイル名と用途をAI Buildへ伝えられます。ファビコンはアプリbundleへ含めてHTMLの<head>から参照してください。OGP画像は原則1200×630で用意し、公開URLから取得できる絶対URLをog:imageへ設定します。
公開前にog:title、og:description、og:url、og:image、twitter:cardも確認してください。存在しない画像URLは設定しません。
<link rel="icon" type="image/png" href="/assets/favicon.png">
<link rel="apple-touch-icon" href="/assets/apple-touch-icon.png">
<meta property="og:type" content="website">
<meta property="og:title" content="App name">
<meta property="og:description" content="App description">
<meta property="og:url" content="https://example.com/">
<meta property="og:image" content="https://example.com/assets/ogp.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/assets/ogp.jpg">Blueでは、APIキーなどの値をプロンプト・ログ・公開URLに出さずにアプリへ渡せます。
Settings > Secrets にAPIキーを保存し、AI Buildには使う環境変数名だけを伝えてください。公開後のアプリでは Python の os.environ["KEY"] や Node.js の process.env.KEY から読めます。
ZIPのルートに .env、.env.local、.env.development、.env.production がある場合、Blueは有効なキーをアプリ環境変数としてアップロード時に取り込みます。PORT、HOST、PATH、NODE_OPTIONS、PYTHONPATH などの実行環境を変えるキーはBlueが管理します。
形式は KEY=value または export KEY=value のシンプルな行に対応します。アプリ環境変数は最大50個、各ルート .env ファイルは50KBまで読み取り、未対応の名前やBlue管理キー・ランタイム起動キーはスキップします。
.env などのドットファイルはアプリ用プロキシで遮断されます。デプロイ警告には機密ファイル検出や取込件数が出ることがありますが、値そのものはログや警告に表示しません。
推奨: 長く使うAPIキーは Settings > Secrets で管理してください。既存のローカルアプリを移す場合や、小さな連携を試す場合はZIP内の .env も利用できます。