機能
アイデアを公開できるアプリにするための機能がそろっています
作りたいものを説明するだけ。Supacodeが本物のコードを書き、チャットの横で動かし、変更をすべてバージョンとして保存し、ワンクリックで公開します。現在使える機能を紹介します。
01 · 作成
チャットで作る
やりたいことを普段の言葉で伝えてください。Supacodeが作業を組み立て、ファイルを書き、結果を確認します。
HTML・React・Next.js
用途に合った構成で本物のコードを書きます。軽快なHTMLサイト、操作できるReactアプリ、複数ページとサーバー処理を持つNext.jsアプリに対応します。
構成の自動選択
どれを選べばよいか迷ったら「自動」のままに。説明の内容からSupacodeが選びます。
作成・計画・質問
「作成」は変更を加えます。「計画」は先に手順を提案します。「質問」はコードを変えずにプロジェクトについて答えます。
スクリーンショットやファイルを添付
手書きのラフ、スクリーンショット、ロゴを添付できます。AIが画像を見て、それをもとに作成します。
音声入力
ホームの入力欄のマイクで、アイデアを話して入力できます。
実行前に費用を表示
依頼ごとに必要なクレジットを実行前に表示します。自動修正が失敗した場合、そのクレジットはお返しします。
チェックと修正
作成のたびにSupacodeが結果を確認します。プレビューでエラーが出たら、「問題を修正」カードからワンタップでAIに修正を依頼できます。
02 · プレビュー
動かしながら直す
作成中のアプリはチャットの横でそのまま動くので、いつでも実物を確認できます。
ライブプレビュー
変更が反映された瞬間に確認し、そのまま次の依頼ができます。
Next.jsを実際の環境で実行
Next.jsのプロジェクトはクラウドのサンドボックスでホットリロード付きで動くため、ページやサーバー処理を本番と同じように確認できます。
全画面プレビュー
アプリを単独のページで開き、訪問者と同じように試せます。
コードを直接編集
「コード」タブでどのファイルも自分で編集でき、入力中に文法をチェックします。手動の編集もバージョンとして保存されます。
03 · バージョン
すべての変更がバージョンに
気軽に試せます。作ったものが上書きされて消えることはありません。
自動で履歴を保存
AIの応答や手動の編集のたびに、プロジェクト全体をバージョンとして保存します。
ワンクリックで元に戻す
イメージと違ったら、チャットから直前の変更を取り消せます。
復元の前にプレビュー
以前のバージョンを先に確認してから、プロジェクト全体または1つのファイルだけを復元できます。
名前付きチェックポイント
「リニューアル前」のように大事なバージョンに名前を付けて、すぐに見つけられます。
どのバージョンもダウンロード
どのバージョンも.zipでダウンロードでき、そこから新しいプロジェクトを始めることもできます。
最近削除した項目
削除したプロジェクトは30日間「最近削除した項目」に残り、元に戻せます。
04 · 画像
画像・写真・手持ちのファイル
最初の作成から、内容に合った画像で完成度の高いサイトになります。
AI画像
Google Geminiでアプリ用の画像を生成できます。プランごとに1日の上限があり、費用は送信前に表示されます。
ストックフォト
内容に合ったPexelsの無料写真を作成時に使えます。
アップロード
画像、動画、音声、PDF、フォント、テキストファイルをプロジェクトに追加できます。ファイルは中身が形式どおりかを確認します。
自分のブランド
ロゴをアップロードして、ヘッダー、ファビコン、共有画像に使うよう依頼できます。
05 · テンプレート
テンプレートやリミックスから始める
Supacodeチームが作った完成度の高いアプリや、コミュニティが共有したプロジェクトから始められます。
公式テンプレート
ランディングページ、ネットショップ、ダッシュボード、チャットアプリなど。SupacodeでHTML・React・Next.jsで作られています。
自分用にする
テンプレートや公開プロジェクトをワンクリックで自分のアカウントにコピーし、チャットで自由に変更できます。
公開ギャラリー
構成やカテゴリでギャラリーを検索でき、準備ができたら自分のプロジェクトも共有できます。
いいねと共有
気に入ったプロジェクトに「いいね」し、どのプロジェクトページもリンクで共有できます。
06 · 公開
ワンクリックで公開
サーバーの準備なしでサイトを公開できます。
専用のアドレス
公開したサイトには your-name.supacode.app のようなアドレスが付き、HTTPSで配信されます。
あとから名前を変更
アドレスはあとから変更でき、古いアドレスは30日間新しいアドレスへ転送されます。
更新と巻き戻し
もう一度公開すると更新され、以前のバージョンを公開したり、サイトを非公開にしたりできます。プロジェクトはそのまま残ります。
検索エンジン対策
公開したページにはタイトル、説明文、共有用タグが付きます。Reactのサイトは事前にレンダリングされ、検索エンジンが内容を読み取れます。
サーバーが必要なアプリ
サーバー機能を使うアプリは、「公開」メニューからご自身のVercelアカウントにデプロイできます。
07 · 連携
コードもアカウントもあなたのもの
Supacodeは標準的なコードを書くので、どこへでも持ち出せます。
GitHubへプッシュ
GitHubと連携して、プロジェクトのコードを自分のリポジトリにプッシュできます。
Supabaseと連携
自分のSupabaseプロジェクトをつないで、本格的なデータベースとログインを使えます。データベースの変更はマイグレーションとして書かれ、承認した場合にのみ実行されます。
Vercelへデプロイ
サーバー機能のあるアプリを、ご自身のVercelアカウントでホストできます。
08 · プライバシー
初期設定で非公開
プロジェクトとチャットはあなたのものです。
非公開のプロジェクト
プロジェクトは公開または共有するまで非公開です。チャットの履歴が公開されることはありません。
作品をAIの学習に使いません
AI提供者は有料APIで利用しており、その規約ではデータを学習に使えません。Supacodeも学習には使いません。
トラッカーなし
必要なCookieのみを使います。広告・分析用のCookieや第三者のトラッカーはありません。
2段階認証
メール、Google、GitHubでログインでき、2段階認証の追加や最近のログイン履歴の確認は設定から行えます。
データのダウンロードと削除
設定からいつでも全データを.zipでダウンロードしたり、アカウントを削除したりできます。
あなたの言語でSupacodeを
サイト、作成画面、ヘルプセンターは翻訳されています。各ページ下部のメニューから言語を切り替えられます。
近日公開
独自ドメイン
公開サイトに独自ドメインを接続する機能は完成しており、現在テスト中です。有料プランに含まれる予定です。
FAQ
よくある質問
Supacodeでは何が作れますか？
WebサイトとWebアプリです。ランディングページ、ポートフォリオ、飲食店や小規模ビジネスのホームページ、ネットショップ、予約アプリ、ダッシュボード、チャットアプリなどを、HTML・React・Next.jsのコードで作れます。
コードの所有権は誰にありますか？
法令で認められる範囲で、作成・アップロードしたものはあなたのものです。どのバージョンも.zipでダウンロードでき、自分のGitHubリポジトリにプッシュすることもできます。
無料で始められますか？
はい。Freeプランでは毎日無料のクレジットがもらえます。各プランの内容は料金ページをご覧ください。
どの構成を選べばよいですか？
シンプルで軽いサイトならHTML、操作の多いアプリならReact、複数ページとサーバー処理があるアプリならNext.jsです。迷ったら「自動」のままにしてください。
データベースやログイン機能も作れますか？
はい。自分のSupabaseプロジェクトと連携してください。Supacodeはデータベースの変更をマイグレーションとして書き、承認後にのみ実行します。
プロジェクトがAIの学習に使われることはありますか？
ありません。利用しているAI提供者はAPIの規約上データを学習に使わず、Supacodeも使いません。
最初のアプリを今日作りましょう
アイデアを説明すれば、形になっていく様子をその場で確認できます。依頼ごとの費用は実行前に表示されます。