Raccoon AIの使い方｜コードなしでWebアプリを作ってそのまま公開する方法

2026.04.09
約5分

カテゴリ

生成AIツール

記事タイプ

解説・ガイド記事

レベル

初心者向け

タグ

AIエージェント, ノーコード, AIツール, Webアプリ開発, 使い方, ワークフロー自動化, Webアプリ構築, Raccoon AI, AIアプリ開発

Raccoon AIとは

Raccoon AIは、日本語で指示を出すだけでAIエージェントがさまざまなタスクをこなしてくれるワークスペースです。UIは日本語に完全対応しています。

中でもメインの機能がWebアプリの構築です。作りたいものを言葉で伝えると、AIがコードを書いてアプリを生成してくれます。特徴的なのは以下の点です。

ライブプレビュー: コードが書かれると同時に、画面右側でアプリの見た目がリアルタイムに更新される
ビジュアル編集: テキストや色、配置などをコードを触らずにUI上で直接変更できる
ワンクリック公開: 完成したアプリをボタン1つでネット上に公開。URLがすぐに発行される
コードの透明性: AIが裏で何をやっているか（ファイル操作、コマンド実行）がすべてリアルタイムで表示される

Webアプリ以外にも、リサーチ、スライド作成、データ分析、画像・動画生成、ドキュメント作成など幅広い機能を持っています。ツールの全体像はAIツールギャラリーのRaccoon AI紹介ページにまとめています。

この記事では、最も分かりやすいWebアプリ構築に絞って解説します。

画面下でラクーンのマスコットがちょこちょこ動いているのが地味にかわいいですね！

限定特典で使えるAce Maxとは

Raccoon AIには3つのAIモードがあります。

モード	利用条件	特徴
Ace Fast	無料プラン	高速だが機能は基本的
Ace Think	Plus以上	より深い思考、品質向上
Ace Max	Plus以上	最高品質。設計プラン提示、大コンテキスト

無料プラン（Ace Fast）でもアプリの構築・公開はできます。ただ、プロモコード「AIGALLERY」で有効になるPlus 5xプランではAce Maxが使えるようになります。

同じプロンプトで比較してみた

「イベント受付ページを作って」という同じプロンプトを、Ace Fast（無料）とAce Max（Plus 5x）の両方で試してみました。

Ace Maxでは、いきなりコードを書き始めるのではなく、まず設計プランを提示してくれます。 デザインスタイルを3つの方向性から選べて、ページに含めるセクションや機能も事前に確認できます。

完成品の違いはもっと明確です。

無料プランの「Ace Fast」で作ったイベント受付ページ

Plus 5xプランの「Ace Max」で作ったイベント受付ページ

	Free（Ace Fast）	Ace Max（プロモコードで利用可）
設計プラン	なし（すぐ生成開始）	デザイン方向性を3択で選べる
カウントダウン	なし	開催日までリアルタイム表示
タイムスケジュール	なし	8ステップの詳細表示
FAQ	なし	アコーディオン形式6問
ダークモード	なし	トグルで切替可能
アニメーション	なし	スクロールフェードイン

同じプロンプトなのに、出力の完成度がかなり違います。この記事ではAce Maxを使った操作を紹介していくので、ぜひプロモコードを適用してから進めてみてくださいね。

プロモコード「AIGALLERY」の使い方

Raccoon AIの決済画面には、デフォルトで50%OFFクーポン（KXMDUXMG）が自動適用されています。これを外してAIGALLERYコードに差し替えると、初月が完全無料になります。

ステップ1: アカウント作成 → アップグレード画面を開く

Raccoon AI公式サイトでアカウントを作成し、画面上部の「Upgrade」をクリック。Plus 5xを選んでください。

ステップ2: デフォルトの割引コードを削除する

決済画面に進むと、右下の「割引」欄にKXMDUXMG（50%OFF）が自動で入っています。このままだと月額$19.50になります。

この割引コードの横にある✕ボタンをクリックして削除してください。

ステップ3: AIGALLERYコードを入力して適用

「割引コード」欄にKXMDUXMGの代わりに「AIGALLERY」と入力し、「適用」を押します。

合計が$0.00に変わり、ボタンが「注文を送信」になれば適用完了です。

自動課金が心配な方へ: クレジットカードの登録は必要ですが、決済後にすぐ「更新を停止」しておけば、1か月後に自動で課金されることはありません。まず1か月試してみて、続けたいと思ったら更新を再開すればOKです。

>> Raccoon AIにプロモコード「AIGALLERY」で登録する

Ace MaxでWebアプリを作る流れ

ここからは、Ace Maxを使ってWebアプリを作って公開するまでの全体の流れを説明します。コードを書く場面は一切ありません。

ステップ1: アイデアを入力する

Raccoon AIにログインしたら、「Webアプリ」モードを選んで、作りたいものを日本語で入力します。

「こんなページが欲しい」を普通の言葉で書くだけでOK！

右下でエージェントが「Ace Max」になっていることを確認してください。

ステップ2: AIが設計プランを提案してくれる

入力を送ると、Ace Maxはまず設計プランを提示してくれます。

デザインの方向性を確認

カラーパレットやフォントの候補が表示され、好みに合わないものはここで変更を指示できます。

実装する機能の一覧

どんな機能を実装するかも事前に確認できます。問題なければ「構築を開始」で次へ進みます。

作る前にこうやって確認・調整ができるので、「出来上がったら思っていたのと違った」を減らせます。

ステップ3: リアルタイムでコードが生成される

「構築を開始」を押すと、AIがコードを書き始めます。

左側にはAIが実行しているファイル操作やコマンドがリアルタイムで表示され、右側にはライブプレビューが同時更新されます。アプリが少しずつ出来上がっていく様子を見ながら待てます。

また、こういったAIサービスでは途中でエラーがよく発生しますが、エラーもAI自身が検知して修正してくれます。実際にフォントのビルドエラーが発生しましたが、自動で修正されました。

何をやっているかがブラックボックスにならないのもRaccoon AIの特徴です！

ステップ4: ワンクリックでネット上に公開する

アプリが完成したら、右上の「公開」ボタンを押すだけです。

「本番環境に公開」→「今すぐ公開」で、数十秒後にURLが発行されます。SSL対応や高速表示の設定も自動なので、外部サーバーを借りたりドメインの設定をしたりする必要はありません。

Raccoon AIの中だけで「作る→公開する」が完結するのが、このツールの一番の強みです。

ステップ5: コードをダウンロード・保存する

作ったアプリのソースコードはいつでもダウンロードできます。

コードをダウンロードするときは、プレビュー画面左上の「ファイル」マーク→「ダウンロード」の順にクリックしてください。

実際にRaccoon AIで作ったWebアプリの紹介

ここからは、上の流れで実際に3つのアプリを作った結果を紹介します。どれもプロンプトを入力してRaccoon AIとやり取りしただけで、コードは一切書いていません。

例1: セミナーのイベント受付ページ

イベントの受付ページを自前で用意しようとすると、Googleフォームだとデザインの自由度がほぼないし、イベントプラットフォームは手数料がかかる。Web制作会社に頼めば5〜10万円で数週間かかります。

そこで今回は、Raccoon AIを使って自分好みのデザインでフォーム付きの受付ページを作成・公開してみました。

入力したプロンプト

セミナーのイベント受付ページを作ってください。以下の要件でお願いします：
- イベント名「AI活用セミナー2026」
- 開催日時：2026年5月15日（金）14:00〜16:00
- 会場：東京都渋谷区・オンライン同時開催
- 定員：50名
- 参加費：無料
- 申込フォーム付き（名前、メールアドレス、参加形式の選択）
- モダンで清潔感のあるデザイン
- レスポンシブ対応

できたもの

ブルー系の落ち着いたデザインで、申込フォーム、定員管理、スケジュール、注意事項まで全部入りのページが完成しました。

実際にネット上に公開され、本番URL（https://blazing-roaming-frog.flyingraccoon.tech）が発行されています。ぜひアクセスしてみてくださいね。

例2: フリーランス向け見積書ジェネレーター

見積書を作るのに、毎回Excelテンプレートを探して手打ちしていませんか。freeeなどのSaaSを使う手もありますが、月額費用がかかります。

Raccoon AIなら、自分専用の見積書ツールを作ってそのまま使えます。

入力したプロンプト

フリーランス向けの見積書ジェネレーターを作ってください。以下の要件でお願いします：
- 自分の情報（名前、屋号、住所、メール）を入力する欄
- クライアント情報（会社名、担当者名、住所）を入力する欄
- 見積項目を追加できる（項目名、数量、単価 → 小計が自動計算）
- 消費税（10%）を自動計算して合計を表示
- 見積番号と発行日が自動で入る
- PDFっぽいプレビューが表示されて、そのまま印刷できる
- シンプルでプロフェッショナルなデザイン

できたもの

左側に入力フォーム（見積番号の自動生成、発行日、自分の情報、クライアント情報、銀行口座）、右側にリアルタイムプレビュー（見積書フォーマット、品目テーブル、消費税10%自動計算、合計表示）が並ぶレイアウト。印刷/PDF出力ボタンやテンプレート保存機能まで付いていました。

例3: カフェのメニュー＆注文ページ

お店のホームページを外注すると10万円以上かかることも珍しくありません。食べログだけに頼ると自分でデザインを変えられないし、Wixなどのツールは使い方を覚えるのに時間がかかります。

Raccoon AIなら、お店の雰囲気に合ったメニューページが数分で完成します。

入力したプロンプト

小さなカフェ向けのメニュー＆注文ページを作ってください。以下の要件でお願いします：
- 店名「SAKURA COFFEE」
- カテゴリ別のメニュー表示（ドリンク、フード、デザート）
- 各メニューに写真（プレースホルダーでOK）、商品名、説明、価格
- テイクアウト注文フォーム（商品を選んで数量を指定、合計金額を自動表示）
- 営業時間・アクセス情報のセクション
- おしゃれで温かみのあるカフェっぽいデザイン
- スマホで見やすいレスポンシブ対応

できたもの

和モダンなデザインで、ヒーローセクションには「温かみのある時間を、一杯に。」のコピー。メニューカード（桜ラテ ¥580、抹茶ラテ ¥620など）に数量選択とカートボタンが付いており、営業情報のセクションもきちんと含まれていました。

上のプロンプトはそのままコピーして使えます。プロモコード「AIGALLERY」を適用済みなら、Ace Maxで同じ品質のアプリがすぐ作れます。

他にも色々なWebアプリを作れるので、ぜひ実際に試してみてくださいね！

> Raccoon AIを無料で試す（プロモコード「AIGALLERY」でPlus 5xが1か月無料）

Raccoon AIは他のAIツールとどう違う？

「AIでアプリが作れるツール」や「AIエージェント」は他にもあります。Raccoon AIがどこに位置するのか、整理してみます。

アプリ構築ツール（Bolt.new / Lovable / v0）との比較

	Raccoon AI	Bolt.new	Lovable	v0 by Vercel
アプリ構築	○	○	○	△（UIコンポーネント中心）
構築前の設計プラン確認	○	✕	✕	✕
ビジュアル編集	○	✕	○	✕
サービス内で公開	○（ワンクリック）	○	○	△（Vercel連携）
コードの透明性	○（全過程が見える）	△	△	△
アプリ以外の機能	○（リサーチ・スライド等）	✕	✕	✕
無料プラン	○	○	○	○

Bolt.newやLovableはアプリ構築に特化しています。Raccoon AIはアプリ構築に加えてリサーチやスライド作成もできる汎用ワークスペースで、構築前にAIが設計プランを提案してくれるのが独自の特徴です。

AIエージェント（Manus / Genspark / Skywork）との比較

	Raccoon AI	Manus	Genspark	Skywork
Webアプリ構築	○（メイン機能）	○	○	○
ビジュアル編集	○	○	○	○
サービス内で公開	○	○	○	○
リサーチ	○	○	○	○
作業の透明性	○（全コマンド表示）	△	○	○
途中で軌道修正	○（リアルタイム介入）	△	○	○