デザインモード

クリエイティブなワークフローに最適なエンジンを選ぶ。

Stitch は単一の AI モデルではなく、デザインエンジンのスイートです。

生成設定には Design Mode セレクターがあります。これらを単なる「バージョン違い」ではなく、それぞれ専門特化したツールと考えてください。速度のために作られたもの、純粋な創造性のためのもの、そして深いロジックと推論のためのものがあります。

Thinking with 3 Pro

最適な用途: 複雑なロジック、深い推論、「本番」候補。

これは重量級です。Gemini 3 Pro を搭載し、このモードは速度よりも推論を優先します。プロンプトの意味を「考え抜く」ため、生成に少し時間がかかります。ナビゲーションがどう流れるべきか、階層が何を意味するか、色がどう相互作用するか。

複雑なダッシュボードやニュアンスの多いランディングページを構築しているなら、ここが居場所です。待つ価値はあります。ピクセル単位で正確なロジックが返ってきます。

Redesign(Nano Banana Pro)

最適な用途: 古いアプリのモダン化、スタイル実験、雰囲気ベースのワークフロー。

Redesign エージェントは Vibe Design の最良の相棒です。古びたインターフェースに特定のデザイン美学を適用するのが得意です。

スタイルワードバンク

Redesign エージェントは具体的なアートディレクションのキーワードで力を発揮します。「かっこよくして」と言う代わりに、次のカテゴリの用語を組み合わせて、独自の視覚言語を定義してみましょう。

レイアウトと構造

  • Bento Grid: モジュール式のボックス型、カードベースのレイアウト。明確な区画でコンテンツを統一感のあるグリッド階層に整理します。
  • Editorial: ハイファッション誌の雰囲気。大きなセリフ見出し、ゆとりのある余白、非対称な画像配置。
  • Swiss Style: 客観的に明快。グリッドシステム、サンセリフ書体(Helvetica 系)、左揃えテキストに大きく依存。
  • Split-Screen: 明確な垂直分割。ソリッドカラーブロックと全面画像を組み合わせることが多い。

質感と奥行き

  • Glassmorphism: 半透明、背景ぼかし(backdrop-filter)、繊細な白いボーダー。「すりガラス」。
  • Claymorphism: 柔らかく膨らんだ 3D 形状と内側の影。親しみやすく、触感がある。
  • Skeuomorphic: リアルな質感(革、紙、金属)と物理スイッチのようなコントロール。
  • Grainy/Noise: グラデーションにフィルムグレインやテクスチャを重ね、「デジタル」な光沢を抑え温かみを加えます。

雰囲気と時代

  • Brutalist: 生々しく、磨かれていない、システム標準フォント、高コントラスト、硬いエッジ。「ダサかっこいい」。
  • Cyberpunk: ダークモード、ネオンアクセント(シアン/マゼンタ)、グリッチ効果、テック感のあるインターフェース。
  • Y2K: 90 年代末〜2000 年代初頭の楽観主義。クローム質感、バブル文字、明るいブルーとピンク、ピル型ボタン。
  • Retro-Futurism: 80 年代シンセウェーブ。夕日、ワイヤーフレームグリッド、VHS 美学、光るライン。

色とコントラスト

  • Duotone: UI 全体が 2 つの対照的な色(とその濃淡)で構成されます。
  • Monochromatic: 単一のベース色相(例:「エレクトリックブルーの濃淡」)で統一感のあるブランドらしい外観に。
  • Pastel Goth: 柔らかくミルキーなパステルカラーと、鋭い黒のタイポグラフィとボーダーの組み合わせ。
  • Dark Mode OLED: ダークグレーではなく真の黒背景(#000000)。高コントラストと映えを最適化。
PROMPT
ActionRedesign this dashboard.
StyleUse a modern Bento Grid layout.
DetailsDark mode background. Use the Inter font for the headers.

2.5 Pro

最適な用途: 高忠実度の HTML と A/B 比較。

Gemini 2.5 Pro は非常に高品質なコードとデザイン忠実度を生み出します。Thinking with 3 Pro でプロンプトを生成し、まったく同じプロンプトを 2.5 Pro で実行して、アイデアに対する 2 つの異なるハイレベルな解釈を見比べるのがよく有効です。

Fast

最適な用途: 迅速なワイヤーフレームと Figma エクスポート。

初期スケッチを直接 Figma にエクスポートして手動で磨き上げることが主な目的なら、Rapid モードは互換性のために最適化されています。

原文: https://stitch.withgoogle.com/docs/learn/design-modes/

本ページは Google Stitch 公式ドキュメントの翻訳です。原文の著作権は Google LLC に帰属します。本サイトは独立した非公式の翻訳です。