Genspark Design で、プロンプトからプロトタイプ、Web サイト、ポスターなどを生み出す方法をご紹介します。すべてを Canvas で調整し、Build it で実行可能なコードを出力できます。
2026/10/02 更新
概要
主な機能
トラブルシューティング
よくある質問
Genspark Design
Genspark Design とは?
Genspark Design は AI 搭載のクリエイティブスイートで、ざっくりとしたアイデアから、プロ仕様で本番投入できるデザインまでを —— すべて会話だけで —— 仕上げます。デザインソフトのスキルは一切不要です。
必要なものを平易な言葉で説明すれば、Genspark Design がコンセプト、レイアウト、配色、画像、インタラクティブ性まで担当します。プロトタイプを描くプロダクトマネージャーでも、イベントポスターを作るマーケターでも、ランディングページを構築する創業者でも、AI が重労働を引き受けつつ、主導権を握ったまま進められます。
- 作れるもの: UI プロトタイプ・Web サイト・ポスター・アニメーション・プレゼンテーション・マーケティングアセット・ドキュメント
- どんな人に向いているか: Figma や Canva の専門知識なしでプロ仕様のデザイン成果物が必要な、プロダクトマネージャー、マーケター、創業者、エンジニア、クリエイター。
- 今すぐ試す: Genspark Design を開きましょう。
クイックスタート
- 入力ボックスにデザインの内容を記述します。具体的に書いても、自由度を持たせても構いません。
- 必要に応じて、 + ボタンからコンテキストを添付します:Figmaファイル、スクリーンショット、GitHubリポジトリ、またはデザインシステム。
- 送信します。デザインはデフォルトで最高品質で生成されます。AIが確認のための質問をすることもありますが、すぐに生成を開始する場合もあるため、希望するサイズ、色、タイプ、スタイルは最初に含めておきましょう。

ヒント: 何から始めればよいかわからない場合は、入力ボックスの下にある人気のタスクの例をクリックしてください。すぐに使えるプロンプトが入力されるので、送信前に編集できます。
コアコンセプト
主な用語
| 用語 | 意味 |
|---|---|
| Canvas | デザインが表示され、編集される右側のパネル |
| チャットパネル | AI と対話する左側のパネル |
| Design System | 保存されたブランドスタイル(配色、フォント、コンポーネント)で、すべてのデザインに自動適用されます |
| Tweaks | リアルタイムで微調整するためのライブパラメータコントロール —— 再プロンプト不要 |
| Build it | デザインを実行可能な Web サイトまたはアプリとしてワンクリックで出力 |
| Verifier | エージェントがバックグラウンドで実行できるオプションの品質チェック。修正すべき点が見つかった場合にのみメッセージが届きます |
| Remix | 共有されたデザインをコピーして、自分専用の編集可能なバージョンを作成 |
| 履歴パネル | プロジェクトの過去のバージョンの一覧 |
デザインタイプ
作りたいものを説明するだけで、AI が適切なタイプを自動的に選びます。
| タイプ | 最適な用途 |
|---|---|
| プロトタイプ | インタラクティブなアプリ、UX フロー、SaaS ダッシュボード |
| スライドデッキ | ピッチデック、レポート、研修資料 |
| ポスター | イベント、SNS、印刷アセット |
| 動画 / Frame Movie | 製品紹介、ロゴアニメーション、マルチショット広告 |
| ワイヤーフレーム | 低忠実度のレイアウト検討 |
| フリップブック / ページ式ブック | ルックブック、ホワイトペーパー、技術マニュアル |
Designが接続できるもの
Genspark Designには独自のツールセットがあります。GitHubへの接続、リポジトリの閲覧、ファイルのインポート、Figmaとの連携、Webページからの要素のキャプチャ、画像検索が可能です。次の2点に注意してください。
- リポジトリをコンテキストとして添付すると、エージェントはそのメッセージに限り、添付したファイルのスナップショット(フィルタリングと上限が適用された、小さなテキストファイルやコードファイル)を受け取ります。これはリポジトリ全体へのライブ接続ではなく、エージェントがコードを実行することもありません。
- ツールを使用すると(たとえばリポジトリからファイルをインポートすると)、それらのファイルがプロジェクトに取り込まれます。
本格的な開発環境でコーディング作業を行う場合は、Genspark Codeをご利用ください。
Designの料金
Genspark Designはクレジットで課金されます。
- クレジットのみ — 無料枠は対象外。 Genspark Designは、どのプランでも無料枠の対象外です。無料枠の対象については、メンバーシッププランをご覧ください。
- エージェントの作業量に応じて課金 — ページ単位や個数単位ではありません。 クレジットはエージェントがデザインを作成する過程で消費され、さらに画像・動画・音声の生成ごとに追加料金が発生します。そのため、大量の画像を依頼すると、プロジェクトの費用が高くなりやすくなります。
- 再試行や再描画にも再度費用がかかります。 変更の再実行や再描画は新たな生成として課金されるため、修正のやり取りを繰り返すと費用が積み重なります。
- 確認方法: アカウントで クレジット使用状況 → Design を開いてください。クレジットのカウント方法と課金の仕組みについては、クレジットガイドをご覧ください。
機能 & 操作ガイド
デザインの作成
- ゼロから —— 説明を入力し、任意でコンテキストを添付して送信します。
- テンプレートから —— For You ギャラリーを閲覧 → デザインをクリック → Remix。
- 複数の方向性 —— 1つのプロジェクト内で複数のチャットを開きます(それぞれが独立したメモリを持ちます)。
プロンプトへのコンテキスト追加: 入力ボックスの + ボタンをクリックして、補足資料を添付します —— ローカルファイル、画像、ドキュメント、AI Drive のファイル、Figma ファイル、GitHub リポジトリ、過去のデザインへの参照、任意の Web ページから取得した Web 要素、保存済みの Skill や Design System など。事前に与えるコンテキストが多いほど、最初の生成が求めるものに近づきます。
Canvas 上での編集
| ツール | 使い方 | 最適な用途 |
|---|---|---|
| Tweaks | スライダーとカラーピッカーをリアルタイムで調整 | グローバルなパラメータ:配色、余白、テキスト |
| Edit | 任意の要素をクリックし、パネルで編集 | 特定の1つの要素を変更。Edit は選択した要素を対象とし、簡単なテキストやスタイルの変更は通常そのまま直接反映されます。直接反映できない変更は新しいチャット生成として処理されるため、再度課金されたり、他の要素に影響したりする場合があります。 |
| Comment | Canvas にフィードバックをピン留めし、まとめて送信 | 説明的なフィードバック(「ここを青に変えて」) |
| Draw | 赤いブラシでスケッチ、または付箋を追加して送信 | 視覚的な指示:矢印、囲んだ箇所 |
編集時の安全策:作業内容を守る
よくある悩みは、ちょっとした変更のせいで、残しておきたかった部分まで描き直されてしまうことです。次のような習慣で防ぐことができます。
- 一度に変更するのは1つだけにしましょう。大きな作り直しを一度に行うより、小さく分けた編集のほうが結果を維持しやすくなります。
- 単一の要素には「編集」を使い、複数のメモをピン留めしてまとめて送信するには「コメント」を使いましょう。
- シンプルなテキストやスタイルの変更は通常、直接適用されます。多くの場合、再描画は発生せず、追加のクレジットもかかりません。
- 変更を直接適用できない場合や、レイアウト・構成の変更、新しい要素の追加の場合は、チャットによる生成として処理されます。この場合は再度課金され、他の要素にも影響する可能性があるため、続行する前に結果を確認してください。
- 大きな変更を加える前にはプロジェクトを複製し、気に入っているバージョンをそのまま残しておきましょう。
- 「履歴」パネルは閲覧専用です。以前のバージョンを表示できますが、そのバージョンに戻すことはできません。
Design System
- 入力ボックスの下にある Design System をクリックします → Create New。
- ブランドの説明を入力し、アセットをインポートします(Figma .fig / GitHub / コードベース / アップロードしたファイル)。
- AI が配色、フォント、コンポーネントを抽出します —— 確認して承認します。
- すべてのプロジェクトで再利用します。既存のデザインから Share メニュー → Create design system from this project で Design System を抽出することもできます。
エクスポート
| 出力 | 起動方法 | 用途 |
|---|---|---|
| Present | トップバーの Present をクリック | 全画面で再生。矢印キーでページ送り。スライドデッキでは Speaker Notes が使えます |
| Build it | Build it をクリック → Website / App | 実行可能な Web サイトまたはアプリ。生成物は Genspark Design 内に残ります。開発者へのハンドオフは別の手順です |
| ZIP(プロジェクトのソース) | Download をクリック(トップバーの Build it の隣にある専用ボタン。生成の実行中は無効) | プロジェクトのソースファイル。開発者向けのハンドオフドキュメントだけではありません |
| PNG | Export メニュー → Export image(ポスターデザイン) | ラスター画像 |
| PSD | Export メニュー → Export PSD(ポスターデザイン) | レイヤー付きの PSD。デザインのレイヤーごとに Photoshop のレイヤーが 1 つ作成されます。一部のエフェクトはラスタライズできない場合がありますが、その場合もそれらのレイヤーを除いてエクスポートはダウンロードされます |
| MP4 | Export 設定ダイアログ | 動画 |
| PPTX | チャットで「PPTX でエクスポートして」と伝える | 編集可能なスライド。スタイルは近似的に再現され、PowerPoint で表現できないエフェクトは省かれます |
| チャットで「PDF でエクスポートして」と伝える | ブラウザーの印刷ダイアログを通じて作成される、印刷に適したファイル |
PNG と PSD を含む Export メニューは、ポスターデザインで表示されます。PDF と PPTX の動作については、エクスポートの再現性とトラブルシューティングを参照してください。
エクスポートの忠実度とトラブルシューティング
- PDFはGensparkではなく、お使いのブラウザによってレンダリングされます。自動印刷のポップアップはブロックされることがよくあります。ポップアップを許可してから再度お試しいただくか、エージェントが投稿するダウンロードリンクをご利用ください。印刷設定によっては、背景色が反映されない場合があります。
- PPTXのスタイルは近似的な再現となりますが、これは想定どおりの動作です。複雑なエフェクト(グラデーション、フィルター、描画モード、カスタムシェイプ)はPowerPointのオブジェクトとして表現できないため、省略される場合があります。
- ベクター形式での出力には対応していません。SVG、Adobe Illustrator(.ai)、EPS形式でのエクスポートはできず、PSDはレイヤー付きのラスター画像となります。
- エクスポート結果が空白になる場合や失敗する場合は、もう一度お試しください。初回のレンダリングでは一部のアセットが読み込まれないことがあります。
共有 & コラボレーション
- 共有リンク —— トップバーの共有アイコン → リンクを知っている全員(公開)または制限付き(メール招待)。
- ロール —— 閲覧者 / 編集者 / オーナー。
- 複製 —— ファイルと会話を含むプロジェクトの完全なコピー。
- ハブに追加 —— トップバーの ⋯ メニュー → プロジェクトをハブに追加します。ハブは、永続的なコンテキストを持つチームの共有ワークスペースです。
- 公開リンクで公開される内容 —— 公開リンクを使うと、URL を知っている人なら誰でも、サインインなしでデザインとそのソースファイル、バージョン履歴、ダウンロードを閲覧できます。
- リンクの無効化 —— アクセスを遮断するには、プロジェクトを非公開(制限付き)に戻します。これにより、リンクを使用しているユーザーはアクセスできなくなります。
プロジェクトの管理
- デザインはデザインのホームページにある「マイデザイン」ギャラリーで確認できます。デザインをクリックすると再び開けます。
- プロジェクトのメニューから複製すると、自由に試せるコピーを残せます。
- 共有されたデザインをリミックスすると、編集可能な自分用のバージョンを作成できます。
- 「マイデザイン」ギャラリーでプロジェクトのメニューから名前の変更や削除ができます。プロジェクトの削除は元に戻せません。
クイックリファレンス
Canvas ツールバー
| 場所 | コントロール |
|---|---|
| 右上 | Tweaks・Edit・Comment・Draw |
| トップバー | Present・Build it・Download・Share・⋯ メニュー(ブックマーク、ハブに追加) |
| Canvas タブ | Design System |

トラブルシューティング
Tweaks パネルが空です —— どうすればよいですか?
チャットで「これを調整可能にして」と伝えてください —— AI が自動的にコントロールを生成します。
Build it がグレーアウトしています —— なぜですか?
Build it は生成が完了すると有効になります。生成の実行中は無効になっており、また、すべてのデザインタイプで利用できるわけではありません。タスクリストが完了するまでお待ちください。それでもグレーアウトしたままの場合は、そのデザインタイプが Build it に対応していない可能性があります。
頼んでいないものが生成されました。
プロンプトに詳細を追加してください。デザインタイプ、ターゲット層、サイズ、ビジュアルスタイルを指定してください。参考スクリーンショットを添付するのも有効です。Comment や Draw ツールを使って、変更が必要な箇所を正確に指し示してください。
実行が失敗する、フリーズする、または空白で返ってくる
次の手順を順番に試してください:
- プロジェクトを再読み込みし、実行が実際に完了しているか確認してください。キャンバスの表示がチャットより遅れることがあります。
- もう一度依頼してください。新しい実行には新たに料金が発生します。
- 再試行する前に、プロジェクトを複製してクリーンなコピーを残しておきましょう。
それでも解決しない場合は、プロジェクトのリンクを添えて報告してください。プロジェクトを開き、「共有」をクリックして、[email protected] を「閲覧者」として招待します。
エクスポートが見つからない、空白になる、または開けない。
- メニューに表示されない: 一部の形式はデザインの種類によって異なります。PNG と PSD を含むエクスポートメニューは、ポスターデザインで表示されます。
- PDF または PPTX の問題: エクスポートの忠実度とトラブルシューティングを参照してください。
- 形式がロックされている: エクスポートの利用可否はプランによって異なる場合があります。
その他の既知の問題と解決方法については、「よくある問題」を参照してください。
よくある質問
変更を元に戻したいです。
Genspark Design にはワンクリックで元に戻す機能はありません。履歴パネルには以前のバージョンが表示されますが、閲覧専用です —— 確認はできますが、ロールバックはできません。AI に元に戻すよう依頼すると、新たに課金対象の生成が開始され、以前の状態が正確に再現されない場合があります。変更は一度に一つずつ行い、残しておきたいバージョンになったらプロジェクトを複製してください。
Build it のコードはそのまま本番環境に使えますか?
そのまま動作しますが、デプロイ前に開発者にレビューしてもらってください。
AIスライドとどう違いますか?
Genspark Design は完全なクリエイティブキャンバスです(Web サイト、アプリ、動画、ポスター、コード)。AIスライドは PPTX / Google Slides エクスポートを備えた、プレゼンテーション専用のツールです。ピッチデックならどちらでも使えます。プロトタイプ、ビジュアル、動画を作るなら、Genspark Design を使ってください。
デザインを商用利用できますか?
Genspark Design は、個人利用および商用利用の両方を想定して設計されています。所有権、商用利用、および作成可能なコンテンツについては、当社のポリシーで定められています。
1か所だけ編集を依頼したのに、デザインの他の部分まで変わったのはなぜですか?
小さな編集(テキスト、色、スタイル)は、デザインに直接反映されます。大きな編集(レイアウト、構造、新しい要素)はプロンプトとしてAIに送られ、AIがその部分を再構築するため、依頼した以上の変更が加わることがあります。安全に作業するには、変更は一度に1つずつ行い、単一の要素には「編集」を使い、大きな変更の前には「複製」を行ってください。
採用しなかった編集や、失敗した生成に課金されたのはなぜですか?
Design では、採用した結果ではなく AI が行った作業に対して課金されます。そのため、破棄した再描画や再試行でもクレジットが消費されます。開始前にブロックされた生成のクレジットは、自動的に返金されます。
AIに再生成させずにデザインを編集できますか?
部分的には可能です。シンプルなテキストの編集やスタイル/Tweaksの編集は直接適用され、再描画は行われず、クレジットも消費されません。完全な手動編集モードや要素のロック機能はありません。それ以外の編集はすべて、AIによる生成として処理されます。
PDFや印刷用のエクスポートがデザインと一致しないのはなぜですか?
PDFのエクスポートはブラウザの印刷ダイアログから行われるため、お使いの印刷設定に従います。また、ブラウザはデフォルトでポップアップをブロックしたり、背景色を省いたりします。PPTXは近似的な再現となります。PowerPointではすべての効果を表現できないためです。いずれのエクスポートも、デザインの完全な複製ではありません。
共有リンクでは何が公開されますか?
公開リンクを使うと、URLを知っている人なら誰でも閲覧できるようになります。
プランには何が含まれていますか?また、プロモーションでクレジットは消費されますか?
Design はすべてのプランで利用でき、クレジットのみで利用できる機能です。無料枠の対象外です。
Design では GitHub リポジトリやスーパーエージェントが使えるツールを利用できますか?
はい。Design は GitHub、Figma、Webキャプチャ、画像検索に対応しています。GitHub を連携すると、継続的に使えるリポジトリツールが利用可能になります。一方、+ からリポジトリを添付した場合は、小さなファイルのスナップショットがそのメッセージにのみ添付されます。どちらの場合も、Design はコードを読み取るだけで、実行はしません。
生成される画像の枚数を制御するにはどうすればよいですか?
上限や承認ステップはありません。Design が生成する画像の枚数を判断するため、依頼した枚数より多く生成されることがあります。正確な枚数を指定し、まずは少数のサンプルセットから始めて、方向性が決まったら残りを依頼してください。これらはプロンプトでの指示であり、強制される制限ではありません。
より見栄えの良い出力を得るには?
送信する前に、デザインシステムを指定し、参考画像やFigmaファイルを添付して、デザインの種類、サイズ、スタイル、対象者を説明してください。「コメント」や「描画」を使って変更したい箇所を正確に示し、要素を1つずつ調整していきましょう。