Genspark Design

Genspark Design とは？

Genspark Design は AI 搭載のクリエイティブスイートで、ざっくりとしたアイデアから、プロ仕様で本番投入できるデザインまでを —— すべて会話だけで —— 仕上げます。デザインソフトのスキルは一切不要です。

必要なものを平易な言葉で説明すれば、Genspark Design がコンセプト、レイアウト、配色、画像、インタラクティブ性まで担当します。プロトタイプを描くプロダクトマネージャーでも、イベントポスターを作るマーケターでも、ランディングページを構築する創業者でも、AI が重労働を引き受けつつ、主導権を握ったまま進められます。

作れるもの： UI プロトタイプ・Web サイト・ポスター・アニメーション・プレゼンテーション・マーケティングアセット・ドキュメント

どんな人に向いているか： Figma や Canva の専門知識なしでプロ仕様のデザイン成果物が必要な、プロダクトマネージャー、マーケター、創業者、エンジニア、クリエイター。

主なメリット

• あらゆるデザインタイプを1つのツールで —— ワイヤーフレームから動くコードまで
• ブランドの一貫性を維持 —— 再利用可能な Design System（Figma、GitHub、またはアップロードしたアセットからインポート）で実現
• デザインを実行可能なコードとして出力 —— Build it でワンクリック

はじめに

前提条件

• Genspark アカウント（Free、Plus、または Pro）
• デザインソフト、コーディング知識、Figma の経験はいずれも不要

クイックスタート —— 5分で最初のデザインを作成

1. デザインを説明します —— 入力ボックスに、具体的にでも自由にでも好きなように記述します。
2. 任意でコンテキストを添付します —— + ボタンから、Figma ファイル、スクリーンショット、GitHub リポジトリ、または Design System を添付できます。
3. 送信します —— デザインはデフォルトで最高品質で生成されます。AI が明確化のための質問をすることがあります。回答して出力を調整してください。

ヒント： どこから始めればよいか分からない場合は、入力ボックスの下にある Popular Tasks の例をクリックしてください —— 編集してから送信できる、すぐに使えるプロンプトが入力されます。

コアコンセプト

主な用語

用語	意味
Canvas	デザインが存在し、編集される右側のパネル
チャットパネル	AI と対話する左側のパネル
Design System	保存されたブランドスタイル（配色、フォント、コンポーネント）で、すべてのデザインに自動適用されます
Tweaks	リアルタイムで微調整するためのライブパラメータコントロール —— 再プロンプト不要
Build it	デザインを実行可能な Web サイト、アプリ、またはコードの ZIP としてワンクリックで出力
Verifier	生成のたびに実行される自動品質チェック（合格 / 要修正）
Remix	共有されたデザインをコピーして、自分専用の編集可能なバージョンを作成

デザインタイプ

作りたいものを説明するだけで、AI が適切なタイプを自動的に選びます。

タイプ	最適な用途
プロトタイプ	インタラクティブなアプリ、UX フロー、SaaS ダッシュボード
スライドデッキ	ピッチデック、レポート、研修資料
ポスター	イベント、SNS、印刷アセット
動画 / Frame Movie	製品紹介、ロゴアニメーション、マルチショット広告
ワイヤーフレーム	低忠実度のレイアウト検討
フリップブック / ページ式ブック	ルックブック、ホワイトペーパー、技術マニュアル

機能 & 操作ガイド

デザインの作成

• ゼロから —— 説明を入力し、任意でコンテキストを添付して送信します。
• テンプレートから —— For You ギャラリーを閲覧 → デザインをクリック → Remix。
• 複数の方向性 —— 1つのプロジェクト内で複数のチャットを開きます（それぞれが独立したメモリを持ちます）。

プロンプトへのコンテキスト追加： 入力ボックスの + ボタンをクリックして、補足資料を添付します —— ローカルファイル、画像、ドキュメント、AI Drive のファイル、Figma ファイル、GitHub リポジトリ、過去のデザインへの参照、任意の Web ページから取得した Web 要素、保存済みの Skill や Design System など。事前に与えるコンテキストが多いほど、最初の生成が求めるものに近づきます。

Canvas 上での編集

ツール	使い方	最適な用途
Tweaks	スライダーとカラーピッカーをリアルタイムで調整	グローバルなパラメータ：配色、余白、テキスト
Comment	Canvas にフィードバックをピン留めし、まとめて送信	説明的なフィードバック（「ここを青に変えて」）
Edit	任意の要素をクリックし、パネルで編集	特定の1つの要素を変更
Draw	赤いブラシでスケッチ、または付箋を追加して送信	視覚的な指示：矢印、囲んだ箇所

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 / ZIP	実行可能なコードを生成。デザイン完了後に利用可能
Download	トップバーの Download Zip をクリック	デザイン完了後に開発者向けのハンドオフドキュメントを生成
PDF, PPTX, MP4, PNG, HTML, Canva	チャットで「[形式] でエクスポートして」と伝える	形式ごとのオプションが適用されます

共有 & コラボレーション

• 共有リンク —— トップバーの共有アイコン → リンクを知っている全員（公開）または制限付き（メール招待）。
• ロール —— 閲覧者 / 編集者 / オーナー。
• 複製 —— ファイルと会話を含むプロジェクトの完全なコピー。
• Add to Hub —— トップバーの ⋯ メニュー → 永続的なチームワークスペースのコンテキスト。

リファレンス

Canvas ツールバー

場所	コントロール
右上	Tweaks・Edit・Comment・Draw
トップバー	Present・Build it・Share・⋯ メニュー（ブックマーク, Add to Hub）
Canvas タブ	Design System・Design Files

トラブルシューティング & よくある質問

Q: Tweaks パネルが空です —— どうすればよいですか？

チャットで「これを調整可能にして」と伝えてください —— AI が自動的にコントロールを生成します。

Q: Build it がグレーアウトしています —— なぜですか？

Build it が有効になる前に、生成が完了している必要があります。タスクリストが完了するまでお待ちください。

Q: 変更を元に戻したいです。

何を元に戻したいかをチャットで AI に伝えてください —— 以前の状態に復元できます。

Q: Build it のコードはそのまま本番環境に使えますか？

そのまま動作しますが、デプロイ前に開発者にレビューしてもらってください —— 特に認証、データ保存、フォーム送信については確認が必要です。

Q: AI Slides とどう違いますか？

Genspark Design は完全なクリエイティブキャンバスです（Web サイト、アプリ、動画、ポスター、コード）。AI Slides は PPTX / Google Slides エクスポートを備えた、プレゼンテーション専用のツールです。ピッチデックならどちらでも使えます。プロトタイプ、ビジュアル、動画を作るなら、Genspark Design を使ってください。

Q: 頼んでいないものが生成されました。

プロンプトに詳細を追加してください。デザインタイプ、ターゲット層、サイズ、ビジュアルスタイルを指定してください。参考スクリーンショットを添付するのも有効です。Comment や Draw ツールを使って、変更が必要な箇所を正確に指し示してください。