参考リンク
Geminiに関する参考資料
公開されているガイドに記載された、Geminiでデザインを行うためのチュートリアル、ドキュメント、ウォークスルーです。
Gemini 
OpenDesign OpenDesign で
Gemini と
デザインする。
OpenDesignでGemini CLIを使ってインターフェースをデザインする方法：参照としてのホワイトボードの写真、ルールブックとしてのGEMINI.md、ブリーフからレビュー済みファイルまでの運用ダッシュボードタスク1件、そして始める前に知っておくべき限界。
ブリーフからインターフェースへ01 / Gemini
アイデアを持ち込むのはあなたです↗
「ホワイトボードの写真から
読み取れるダッシュボードへ。」
このGeminiガイドへの3つの入り口
Geminiでどこから始めるかを選ぶ
Gemini によるデザインタスクの一例
Gemini によるデザインタスク：ブリーフからインターフェースまで
1つのタスクを最初から最後まで示します。渡すブリーフと制約、戻ってくる成果物、そして完了前に行うべきチェック内容です。以下のインターフェースは本ページ用に作成した説明用の例であり、実際に記録された Gemini の実行結果ではありません。
1設計ブリーフと制約条件
ブリーフ添付のホワイトボード写真から運用ダッシュボードを設計してください。ヘッドライン数値4つ、週次ボリュームチャート、インシデントのキューを含みます。デスクトップでは1画面、スマートフォンではスクロール可能なサマリーとします。
- デザインシステムOpenDesignのペーパーキャンバス：Albert Sans、グリーンのアクセント1色
- ブレークポイント1440pxデスクトップと390pxモバイル、横スクロールなし
- インタラクション日付範囲、インシデントフィルター、キュー内のキーボード操作
- 出力安定した
data-od-idフックを持つ、自己完結型のHTMLファイル1つ
2作業分担：あなた、Gemini、そして OpenDesign
- あなた
ブリーフを作成し、デザインシステムを選択し、受け入れ基準を定義します。
- Gemini
レイアウトを計画し、HTML、CSS、JavaScriptを書き、要求に応じて修正します。
- OpenDesign
デザインシステムとスキルを提供し、プレビューをレンダリングし、すべてのバージョンをプロジェクト内のファイルとして保存します。
- レビュー
ビジュアルの階層構造、8pxグリッドに基づく間隔、両方のブレークポイント、そしてすべてのインタラクションが、引き渡し前にチェックされます。
3Gemini成果物：1440pxと390pxのOperations Dashboard
4ハンドオフ前のレビュー
レイアウト
グリッドとスペーシング
4枚のカード、チャート、キューはすべて同じ 8px グリッドを共有しており、1440px でも 390px でも重なりはありません。
階層
視覚的階層
ヘッドライン数値が最初に読まれ、次にチャート、そしてキューが続きます。アクセントカラーは1本のバーと1つの重大ピルに使われています。
レスポンシブ
モバイルレイアウト
1行あたり2つの数値、その下にチャート、キューはリスト形式です。日付範囲はシートに折り込まれます。
インタラクション
インタラクションの確認
範囲を切り替え、重大度でフィルターし、キューを矢印キーで移動します。
適合性
Gemini が適するタスクと、適さないタスク
Gemini が適している場合
- マルチモーダルなスクリーンショット→UI変換。 高度な画像理解により、参照画像をレスポンシブなマークアップに変換し、結果を画像と照合して確認します。
- 1M-tokenのコンテキスト。 デザインシステム全体、コンポーネントライブラリ、参照セットを一度に収めることができるため、出力は実際のプリミティブを再利用します。
- GEMINI.md + MCP。 コンテキストファイルに規約が記述されており、Figma MCPサーバーが実際のデザインコンテキストをコードに取り込みます。
- オープンで無料で始められます。 Apache-2.0で、Googleアカウントによる充実した無料プランがあり、Gemini API経由のBYOKにも対応しています。
別のワークフローを選ぶべきケース
- 編集可能なベクターファイルが必要な場合。 成果物はHTMLであり、編集可能なデザインドキュメントではありません。必要なアセット形式については、別のベクターワークフローをご確認ください。
- 参照も制約もない場合。 デザインシステムや例がないと、出力は一般的な見た目になりがちです。まずブリーフを書いてください。
- このエージェントに必要な認証情報がありません。 必要なもの: Google アカウント（無料プラン）または Gemini API キー（ご自身のキーを使用）。OpenDesign は認証情報を提供・代行しません。
- チームが Antigravity や Claude Code を使用している場合。 それらのエージェントには専用ページがあります。ワークスペースは同じですが、セットアップが異なります。関連エージェントをご覧ください。
互換性
Gemini を始める前に必要なもの
このガイドでは、OpenDesignデスクトップアプリを通じて接続されたGeminiを扱います。公開情報の確認日: 2026年9月6日。
対応範囲Gemini（Google提供）
Gemini CLIは、Googleが提供するオープンソース（Apache-2.0）のターミナルAIエージェントです。コードベースを読み込み、ファイルを編集し、コマンドを実行し、Webから情報を取得し、Google検索を用いて回答の裏付けを行います。このページはOpenDesignを通じてGeminiでインターフェースを設計することについて説明しており、Gemini自体のインターフェースについてのものではありません。OpenDesignのセットアップ手順に、利用可能なエージェントの一覧が記載されています。
アカウントと認証Googleアカウント（無料プラン）またはGemini API
Googleアカウント（無料プラン）またはGemini APIキー（BYOK）。GoogleアカウントまたはGemini APIキー（BYOK）で認証してください — 認証情報はお使いのマシン上に保持されます。このページでは、クォータや価格について保証するものではありません。
システムとバージョンデスクトップアプリまたはソース
デスクトップビルドについてはダウンロードページをご確認ください。ソース版クイックスタートに記載されているNode.jsおよびpnpmの要件は、ソースから実行する場合に適用されるものであり、デスクトップパッケージのインストールには適用されません。互換性のある最小Geminiバージョンについては、ここでは確認されていません。
接続確認成功の目安
インストールされたバージョンに表示される接続手順に従い、小さなタスクを実行してください。Geminiがそれを処理し、成果物が開くことを確認してください。ダウンロードのみでは、動作する接続が確立されたことにはなりません。
デスクトップアプリから始める
3ステップで行うGeminiのセットアップ
まずダウンロードし、インストールしたバージョンに応じたGeminiのセットアップを完了させ、その後小さな結果を確認してください。この方法に従うために、OpenDesignをソースからビルドする必要はありません。
- 1
OpenDesignデスクトップアプリをダウンロードする
お使いのコンピューターに合ったパッケージを選び、インストールしてアプリを開いてください。
OpenDesignをダウンロードチェックポイントデスクトップアプリが開きます。すでにインストール済みの場合は、次のステップに進んでください。再度ダウンロードする必要はありません。 - 2
Gemini接続の準備
インストールされたバージョンに記載されているGeminiの手順に従ってください。GoogleアカウントまたはGemini APIキー（BYOK）で認証してください — 認証情報はお使いのマシン上に保持されます。
Gemini CLI のドキュメント# 1. Install Gemini CLI (Node 20+) npm install -g @google/gemini-cli # or run without installing: npx https://github.com/google-gemini/gemini-cli # 2. Start it in your project and authenticate on first run cd your-project gemini # sign in with your Google account, or set GEMINI_API_KEY公開されているガイドのGeminiセットアップ手順に基づいています。最新のコマンドについては、ベンダーのドキュメントをご確認ください。
チェックポイント想定しているエージェントとアカウントを確認してください。利用できない場合は、大きなタスクを試す前に互換性を確認してください。 - 3
小さなGeminiタスクを1件実行する
全体のループを判断できるよう、1回の修正を含む小さなブリーフを使用してください。
スターターブリーフプロフィールフォームと保存確認を備えた設定画面を作成してください。私のデザインルールを使用し、デスクトップとモバイルの幅で確認してください。
チェックポイント結果を開き、保存状態をテストして、具体的な変更を一つ依頼してください。生成されたファイルはレビューの始まりであり、終わりではありません。
ソースから OpenDesign を実行するには、代わりに技術クイックスタートをご覧ください。
Geminiの設計ワークフロー
Geminiの設計ワークフロー（5ステップ）
同じ運用ダッシュボードのタスクを、ブリーフから検証済みファイルまで追った例です。各ステップでは、あなたが提供するもの、Gemini が行うこと、OpenDesign が提供するもの、そしてあなたが確認する内容を示します。
- 1
デザインブリーフ
平易な言葉で3〜6行。対象ユーザー、画面の役割、対象プラットフォームを明記します。
- あなたブリーフを書きます。参考となるスクリーンショットがあれば添付します。
- Geminiブリーフとプロジェクトの指示ファイルを読み込み、不明な点があれば質問します。
- OpenDesignプロジェクト、プロンプトサーフェス、成果物の種類に応じたスキルを提供します。
- 確認ブリーフに受け入れ基準が記載されていることを確認します。生成後よりも今のうちに追加する方がコストを抑えられます。
- 2
デザイン制約
デザインシステムと少数の厳格なルールです。これがブランドに沿った出力と、ありふれた見た目とを分ける要因になります。
- あなたデザインシステムを選び、ブレークポイントと必須のコンポーネントを指定します。
- Geminiコードを書き始める前に、DESIGN.mdのトークンとポスチャールールをコンテキストに読み込みます。
- OpenDesignデザインシステムライブラリを提供し、選択したものをスキルテンプレートに紐付けます。
- 確認トークンがブランドに合っているかを確認します。アクセントカラーは1色、フォントと角丸の値が適切であることを確かめます。
- 3
インターフェースを生成する
Geminiは、レイアウト、スタイル、インタラクション、安定したフックを含む自己完結型のHTMLファイルを作成します。
- あなた待つか、確認の質問に答えます。設定することは何もありません。
- Geminiセクションを計画し、HTML・CSS・JavaScriptを記述し、ファイルを実行して不具合を修正します。
- OpenDesign成果物をプロジェクトフォルダに保存し、プレビュー用にインデックスを作成します。
- 確認ここではまだ何もありません。ファイルはソースではなく、レンダリングされた状態で評価します。
- 4
プレビュー
ファイルは、指定した幅で OpenDesign 内にレンダリングされます。ここでデザインが判断されます。
- あなた幅を切り替え、インタラクションをクリックして試し、要素にコメントを残します。
- Geminiプレビューへのコメントを読み込み、次の改訂を準備します。
- OpenDesignプレビューをレンダリングし、コメントや編集用に
data-od-idターゲットを公開します。 - チェック階層構造、コントラスト、390px でのオーバーフロー、フォーカス状態、そしてアクセントカラーが控えめに使われているかを確認します。
- 5
修正と検証
プレビュー内の要素を指し示して変更を依頼します。修正はすべて新しいファイルとして作成され、既存のものが黙って上書きされることはありません。
- あなたコメントを依頼に変換し、タスクが完了したかどうかを判断します。
- Gemini変更をその場で適用し、ファイルを再実行します。
- OpenDesignバージョンを並べて保持し、完了時に画像または HTML をエクスポートします。
- チェック変更された部分のみを再確認した後、各ブレークポイントでページ全体を一度確認します。
リソース
Geminiの設計リソース
制限事項
Geminiの制約、手動チェックとフォールバック
- 対象範囲このページはOpenDesignに接続されたエージェントとしてのGeminiを扱うものであり、Geminiのすべての機能を網羅するものではありません。
- 利用制限利用制限とコストは、使用する認証情報（Googleアカウント（無料枠）またはGemini APIキー）によって異なります。このページは無料枠についての保証をするものではありません。
- ネットワークローカルのプロジェクトファイルであっても、推論がオフラインで行われるとは限りません。機密性のある入力を共有する前に、エージェントのプロバイダー設定とデータポリシーを確認してください。
- 出力は HTML です成果物は HTML ファイルであり、ベクター形式のデザインファイルではありません。
- 手動レビューアクセシビリティ、実際のコンテンツ、ブランドとの整合性、インタラクションの正しさは、プレビューであなたが確認します。エージェントによる自己チェックは、あくまで一次チェックとして扱ってください。
- フォールバックエージェントが利用できない場合やタスクが失敗した場合は、インストールされているバージョンの接続手順と認証を確認してください。設定を変更する前に、エラーと最後に成功した成果物を保存しておいてください。
よくある質問
GeminiとOpenDesignに関するよくある質問
Gemini CLIは本当にデザイン作業ができるのですか？
できます — 美的なスキル、デザインシステム、そしてコンテキスト内の実際の参照画像があれば、Gemini CLIは本番品質のレスポンシブなUIを生成できます。強力なマルチモーダルモデルにより、出力を参照画像と照合して検証できます。そうしたコンテキストがなければ一般的な見た目に陥りがちであり、その差をOpenDesignが埋めます。
Gemini CLIでデザインするのに費用は必要ですか？
必要ありません — Googleアカウントでサインインすると、かなり手厚い無料枠が利用できます。また、Gemini APIキー（BYOK）を持ち込んだり、Vertex AIを使用することもできます。いずれの場合でも、OpenDesignは認証情報を中継することはありません。
Gemini CLIが特にデザインに適しているのはなぜですか？
2つの理由があります。1つは、そのモデルが強力なマルチモーダル性を持ち、参照スクリーンショットをよく読み取れる点です。もう1つは、1M-tokenのコンテキストによって、デザインシステムと参照セット全体を一度に保持できる点です。両方とも有用ですが、それでもセンスはあなたが用意するデザインシステム、スキル、参照画像から生まれます。
フロントエンドデザインにはGemini CLIかClaude Codeか？
どちらも強力です。Claude Codeはコードベースを踏まえた具体的なデザイン判断で知られており、Gemini CLIの強みはマルチモーダルな理解力と巨大なコンテキスト、そして無料枠です。多くのチームは両方を使用しており、OpenDesignではデザインワークフローを変えずにエージェントを切り替えられます。
Gemini CLIをFigmaに接続するにはどうすればよいですか？
~/.gemini/settings.jsonのmcpServersにFigma MCPサーバーを追加してください。これによりGeminiはコンポーネント、変数、レイアウトデータといった実際のデザインコンテキストを取得できるようになり、生成されるコードが近似ではなく元のデザインと一致するようになります。
Geminiで最初のデザインタスクを始める
まずは小さなタスクから始めて往復のやり取りを確認し、その後に本番のブリーフを持ち込んでください。ご自身の環境に合ったオプションを選択してください。このページは環境を自動検出しません。