スクショではなく実コード
HTML、CSS、JavaScript — あなたのもの
各ページは本物のファイル。ダウンロードして編集し、エンジニアに渡せます。専用エディタへの囲い込みも、エクスポート料金もありません。
<section class="hero"> <h1>Stories in light.</h1></section>
Genspark Build — Preview
AI が自動でホームページを作成 そのまま公開まで。
AI に欲しいものを伝えてください。目の前でコードを書き、ファイルごとにライブプレビューが更新され、数分後には実際に公開できる本物のサイトが手元にあります。
テンプレートから開始：
作っているときの感覚
ワークスペース全体がプロンプトを中心に回る
左にチャット、中央にライブプレビュー、右にファイル。入力して、レンダリングを見て、続ける。
genspark.ai/agents?type=build_preview
Chat
フリーランスフォトグラファーのためのダークでエディトリアルなポートフォリオ。5 セクション、温かみのあるタイポグラフィ。
`index.html`、`about.html`、`/assets/styles.css` を作成中。ヒーローにフィルムグレイン効果を追加…
ファイル作成中
プレビューyoursite.pages.dev
Freelance photography
Stories in light.
ファイル
- index.html
- about.html
- work.html
- contact.html
- assets/styles.css
- assets/film-grain.svg
Genspark Build が選ばれる理由
モックアップを吐き出すだけのジェネレーターではない。
実際のファイルを書き、ライブプレビューで動作し、そのまま公開できる。
Claude 搭載
裏側は Claude Opus 4.7
Claude がサイトを構成し、ファイルを書き、プレビューがおかしいときは自分で修正します。
複数ページ対応
1 枚ページではなくサイト全体
Home、About、Works、Pricing、Contact。すべてまとめて生成されます。ナビゲーションは同期され、デザインシステムは全ページを貫きます。
ライブプレビュー
ファイルごとに描画される様子を見る
ファイルが書かれた瞬間にプレビューが更新されます。ビルドステップの待ち時間はなし。ホバー、アニメーション、レスポンシブブレイクポイントもライブで動きます。
ワンクリックで公開
Cloudflare Pages に公開
Build it をクリック。Genspark がプロトタイプを本物のプロジェクトに移し、Cloudflare Pages を接続し、公開 URL を返します。
アプリも作れる
今日はサイト、同じキャンバスでモバイルアプリも
ターゲットをサイトからアプリに切り替えれば、キャンバスは iPhone フレームに変わり、Build it は Dart コードの Flutter プロジェクトを返します。
実績のあるプロンプトから始める
みんなが作っているもの
これらは Genspark Build 内の実際のスタータープロンプトです。一つクリックすれば AI が続きを引き受けます。
プロンプトから本番まで
4 ステップ。ビルドパイプライン不要、学習コストなし。
01
説明する
1 文でも段落でも、やりたいことを書けば OK。曖昧な部分があれば AI は勝手に推測せず質問してくれます。
02
プレビュー
ファイルがツリーに現れ、プレビューがレンダリングします。コードが書かれている最中にアニメーションやブレイクポイントを触って確認できます。
03
微調整
キャンバス上の任意の要素を選んでインライン編集するか、AI にセクションの作り直しを依頼できます。スタイル変更は全ページに反映されます。
04
公開
Build it をクリック。プロトタイプは公開 URL 付きの Cloudflare Pages プロジェクトになり、すぐに共有できます。
2 つのターゲット、1 つのキャンバス
今日はサイト。ターゲットを切り替えれば、同じプロンプトからモバイルアプリになる。
キャンバスは両方のターゲットのプレビューを表示します——一方はブラウザ、もう一方はスマホフレーム。片方を選べば Build it が対応するプロジェクトを返します。
ターゲット：サイト
Cloudflare Pages 上の HTML / CSS / JS
- 本番と一致するよう同ドメイン iframe でプレビュー
- 署名付きプレビュー URL — 共有された人だけが開けます
- Build it のハンドオフで Cloudflare Pages に公開
ターゲット：アプリ
iPhone ライブプレビュー付き Flutter プロジェクト
- キャンバス上に iPhone デバイスフレームで表示
- モックではなく本物の Dart / Flutter コード
- 完全な Flutter プロジェクトへハンドオフして反復開発
あなたが知っている既存のサイトビルダーとの比較
新しい AI ホームページ作成ツールが正しくやっていること
ドラッグ＆ドロップ型ビルダー
Genspark Build
出発点
800 のテンプレートを探す
日本語で 1 文だけ
出力
プロプライエタリなブロックに閉じ込められる
編集できる HTML / CSS / JS ファイル
複数ページサイト
ページを 1 枚ずつ自分で追加
まとめて生成、ナビゲーションも同期
反復修正
ドラッグしてドロップの繰り返し
チャットで依頼、サイトが更新される
ホスティング
そのホストに縛られ、多くは有料
Cloudflare Pages か自前サーバー
モバイルアプリ対応
たいていなし
ターゲット切替 → Flutter アプリ
よくある質問
AI ホームページ作成は実際どう動くの？
チャットパネルでサイトを説明します。Claude Opus 4.7 がページ構成を考えてコードを書き、到着した順にプレビュー iframe がレンダリングします。納得できたら Build it をクリック。Genspark がすべてを公開 URL 付きの Cloudflare Pages プロジェクトにまとめます。ローカルのビルドツールは不要です。
Genspark Build は無料ですか？
Genspark Build は無料で試せ、サイトのプレビューも無料です。継続的な生成と Build it での公開は Genspark Plus / Pro プランに含まれます。無制限無料の提供はありません——各ビルドは実際のコンピュートを消費します。
これは AI ホームページビルダー、それとも AI サイトジェネレーター？
正直どちらでもあります。Genspark Build はプロンプトからサイトを生成し、その後も同じファイルを編集しながら反復します。コードが目の前で動いている時点で、ビルダーとジェネレーターの古い区別は意味を失います。
独自ドメインで公開できますか？
はい。Build it が最初から公開 URL 付きの Cloudflare Pages デプロイを作り、独自ドメインをそのデプロイに向けられます。別の場所でホスティングしたい場合はプロジェクトをダウンロードできます——標準的な Web コードなのでどこでも配信できます。
どんな種類のサイトを作れますか？
ランディングページ、SaaS のホームページ、ポートフォリオ、料金ページ、ダッシュボード、登録フロー、資料、オンボーディング画面。上のスタータープロンプトはモックではなく、Genspark Build が最初から最後まで実際に生成したものです。
モバイルアプリも作れますか？
はい。ターゲットをサイトからアプリに切り替えると、キャンバスは iPhone フレームに変わり、AI が Dart / Flutter コードを書き、Build it は Cloudflare Pages ではなく完全な Flutter プロジェクトを返します。
AI が書いたコードは自分のもの？
はい。ダウンロード、編集、フォーク、エンジニアへ引き継ぎ、すべて自由です。コードを囲い込む専用エディタもなく、エクスポート料金もありません。
Wix や Squarespace などのサイトビルダーとどう違う？
従来のビルダーはドラッグできるブロックを渡します。Genspark Build が渡すのはチャット欄です。あなたがサイトを説明し、AI がコードを書き、入力で微調整する——出てくるのは自分のものになる実コードです。