·7 分で読めます

Stitch の画像アップグレード：Nano Banana 2.1 によるヒーロー画像とロゴ

Nano Banana 2.1 が Stitch に統合された後の画像素材ガイド：ヒーロー画像とベクターロゴのプロンプトテンプレート、マルチスクリーンでの一貫性の使い方、外部 Gemini API との価格帯の比較、そして既知の制限を解説します。

S
Stitch Prompt Team
Content Team
StitchAIUI Design

これまで Stitch で画面を生成するとき、画像素材（ヒーロー画像、イラスト、ロゴ）は多くの場合いったん外部ツールに書き出して個別に処理し、プロジェクトに貼り戻す必要がありました。

2026 年 10 月 6 日、Nano Banana 2.1 が正式にリリースされ、Stitch は当日に統合を発表し、2 つの用途を明確にしました。**Hero 画像（hero graphics）とベクター風ロゴ（vector-style logos）**です。つまり、画像素材とロゴを Stitch のワークフローの中で完結でき、ツールを行き来する必要がなくなります。

この記事は 1 つの具体的な問いに絞ります。Stitch のワークフローで、この 2 種類の素材をどう生成し、どうマルチスクリーンでの一貫性を保ち、どんな落とし穴を事前に避けるべきか。

注記：モデルの能力と価格は公開情報に基づきます。Stitch 内の具体的な入口やボタンの位置は、あなたのアカウント内の実際の UI をご確認ください。

1. 10 月 6 日、Stitch の画像エンジンが世代交代した

Nano Banana 2.1 は Gemini 3.6 Flash をベースに、3 つの方向で改善しています。

3 つの改善

  • ビジュアルデザインの品質：生成素材全体の構図と完成度が向上しました。
  • マスクによる部分編集：画面全体を描き直すのではなく、指定した領域だけを変更できます。
  • 被写体の一貫性：同じ視覚的主役を複数の画像で安定して保てます。

画面制作において、「被写体の一貫性」は最も価値のある項目です。同じプロダクトのイラストキャラクター、マスコット、プロダクトグラフィックを、複数ページの画像で一貫させられます。画像ごとに姿が変わることはありません。

2. Stitch での使い方：Hero 画像生成の実践

Hero 画像はファーストビューの顔であり、プロンプトで 3 つのことを明確にする必要があります。何を描くか、どんなスタイルか、文字をどこに置くか。

そのまま使えるテンプレート：

Generate a hero illustration for this landing page: abstract geometric shapes
in [brand colors], flat vector style, wide 16:9 crop, leaving negative space
on the left for headline text.

要点の分解：

  • [brand colors] はあなたのブランドカラーに置き換え、DESIGN.md のカラーパレットと揃えます。
  • 16:9 でモデルにクロップ比率を伝え、生成後に主役を切り落とすのを避けます。
  • negative space for headline text で見出し用の領域を確保し、画像とコピーがぶつからなくなります。

3. ベクター風ロゴ生成の実践とサイズ対応

ロゴ生成と画像生成の決定的な違いは「エンジニアリング上の制約」にあります。24px のナビゲーションバーでもはっきり見え、拡大してもぼやけない必要があります。

テンプレート：

Vector-style logo mark for a fintech app called [Name]: minimalist,
single-weight strokes, works at 24px, transparent-background friendly.

要点の分解：

  • single-weight strokes は等幅の線を強調するもので、ベクター風の核心的な特徴です。
  • works at 24px で小サイズでの可用性を明確にし、「遠目には格好いいが縮小するとぼやける」図形を避けます。
  • transparent-background friendly でモデルに単色背景を促し、後工程の切り抜きを容易にします。

4. マルチスクリーンの一貫性：参考画像 14 枚と 4 キャラクターの保真の使い方

Nano Banana 2.1 は最大 14 枚の参考画像の合成に対応し、うち 4 つがキャラクターの一貫性、10 が物体の保真の枠です。画面制作での使い方に翻訳すると：

  • メインビジュアルのイラストキャラクターを参考画像とし、以降の各画面の画像でそれを参照する。
  • 同じプロダクトスイート内で、3D やベクター素材の光源とマテリアルを揃える。
  • 部分的な修正が必要なときは、画像全体を再生成せずマスク編集を使う。

5. 外部で Gemini API を使って生成する場合との比較

バッチ処理やプログラム化された要件がある場合は、Gemini API を直接呼び出すこともできます。主要なパラメータの比較：

項目説明
モデル IDgemini-nano-banana-2.1
解像度1K／2K／4K、デフォルトは 1K
参考画像最大 14 枚（4 キャラクターの一貫性＋10 物体の保真）
Thinking レベルminimal／medium／high を設定可能
価格1K で約 $0.0336／枚、前世代からほぼ半減

選択の指針：Stitch の中で完結するなら Stitch（素材がそのままプロジェクトに入る）。バッチやスクリプト化が必要なら API。どちらも同じ世代のモデル能力を使います。

6. 既知の制限と回避方法

  • 1K では文字がぼやけることがある：画像内に重要な文字を組まないこと。見出しの文字は HTML/CSS で実装します。
  • 512px の小さい段階がない：最小が 1K なので、より小さいサイズが必要なら自分で縮小し、鮮明さを確認します。
  • アルファ透明の出力に非対応：ロゴに透明背景が必要な場合は、まず単色背景の版を生成し、それから切り抜き処理を行います。
  • ブランドの一貫性は規約次第：ブランドカラーをプロンプトに書く前に、DESIGN.md のカラーパレットが最終版であることを確認します。

7. よくある質問（FAQ）

Q1：Stitch で Nano Banana 2.1 を使うには追加料金が必要ですか？

素材生成は Stitch アカウントの枠組みに従います。具体的な課金と枠は公式をご確認ください。

Q2：生成したロゴはそのまま商用利用できますか？

まず人手で調整し、商標調査を行うことをおすすめします。生成結果はデザインの出発点として使えますが、著作権と商標のコンプライアンスはご自身で確認する必要があります。

Q3：生成した画像の文字がいつもぼやけるのはなぜですか？

画像モデルは低解像度での文字描画が苦手です。画面内の文字は実際の HTML/CSS で組み、画像には図形とイラストだけを載せてください。

8. まとめ

Nano Banana 2.1 は「画像とロゴ」を Stitch のワークフロー内部に取り込みました。Hero 画像がファーストビューの雰囲気を、ベクター風ロゴがブランドの記号を、マルチスクリーンの一貫性が素材の統一を解決します。これらを DESIGN.md のカラーパレットや CLI のワークフローとつなげれば、素材という工程はもう断点ではなくなります。

続けて読む：

← ← ブログに戻る