投稿者: mimihokuro

「AIとチャットする」という体験が日常になってから、数年が経ちました。

最近では「AIエージェント」という存在が、私たちの仕事をより効率的にしてくれています。

かく言う私もデザイナーやマーケターとして働いていると、繰り返し行うような単純作業に時間を取られて「考える作業」に集中できない。そういう感覚、覚えがある方も多いのではないでしょうか。

そんな状況を変えてくれるのが、Geminiアプリに実装されたタスク処理型AIエージェントです。

2026年4月時点の日本国内における最新情報をもとに、この新しいツールが何者で、何をしてくれるのかを整理していきます。

GeminiのAIエージェントはいつから使えるようになったのか

日本でGeminiのタスク処理型AIエージェントが本格的に使えるようになったのは、2026年2月のことです。

それ以前もGoogle Workspaceとの連携はありましたが、今回の進化の核心は「指示を待つ」だけでなく、「自ら手順を組み立てて実行する」という自律性の高さにあります。

単なる会話相手だったGeminiアプリが、実務をこなすアシスタントへと変わった転換点と言っていいでしょう。

タスク処理型AIエージェントは何ができるのか

GeminiアプリのAIエージェントは、提示したゴールに対して、最適なツール（Google検索、Gmail、ドキュメントなど）を自ら選択して作業を完結させる機能を持っています。

たとえば「競合他社の最新情報をリサーチして、チームに共有して」と一言伝えれば、Geminiが裏側で検索を走らせ、内容を整理し、共有用ドキュメントを作成するところまで自動で行います。

スケジュール機能はあるか

現在のGeminiにはスケジュール機能が備わっており、「毎朝9時に昨日の市場トレンドを報告して」といった設定が可能です。

これは個人的に感動した機能で、例えば、毎日Geminiに関する記事をGoogleの公式ブログから自動で収集することで、新聞感覚で最新情報を見ることができます。

ただし、以下の制約は把握しておく必要があります。

• 定期タスクの最短サイクル： 現在の仕様では「24時間（毎日）」が最短
• リアルタイム性： 分単位・時間単位での自動実行は2026年4月現在も試験段階。基本的にはデイリーのルーチンワークが主な用途

レポートの出力先はどこか

Geminiがまとめたリサーチ結果やレポートは、デフォルトでは「Geminiとのチャット画面」に表示されます。実務で活用するなら、以下のツールへの出力指定が現実的です。

出力先

おすすめの活用シーン

Google ドキュメント

長文レポート、記事の下書き、構成案の作成

Google スプレッドシート

数値データの集計、競合リストアップ、価格調査

Gmail（下書き）

チームへの報告、ニュースレターの原案作成

Google Keep

クイックメモ、ToDoリストの更新

Google ドライブ

整理されたPDFやテキストデータの直接保存

これらを組み合わせることで、「作業の受け皿を用意する手間」そのものをなくせます。

今すぐ任せてみたい7のタスク例

私が実際に活用していたり、活用できそうなタスク例を7個挙げます。

1. 毎朝のトレンド収集： 特定のデザインキーワードに関する最新記事を3つ要約し、ドキュメントにまとめておく
2. 競合の価格・施策チェック： 特定の競合3社のサイトを毎日確認し、新着キャンペーンや価格変更をスプレッドシートに追記する
3. 打ち合わせの事前準備： カレンダーの予定を確認し、翌日の打ち合わせ相手の最近のリリース情報をKeepにメモする
4. SNSの熱量分析： 特定のハッシュタグやキーワードに関するポジティブ・ネガティブな反応を分析し、レポート化する
5. SEOの欠落要素チェック： 上位表示サイトと自社サイトを比較し、不足しているトピックをリストアップする
6. 議事録からのタスク抽出： ミーティングの書き起こしから、今日やるべきタスクだけを抜き出してKeepに保存する
7. 海外デザイン事例の紹介： 毎日夕方に海外デザインアワードの評価事例を1つ探し、日本語で解説してメール送信する

AI エージェントを使う上で必要な設定

エージェント機能を使い始めると、「Geminiアプリのアクティビティ」設定をオンにするよう案内されます。

参照：Google Gemini ヘルプ — Geminiアプリでのアクティビティの管理

この設定が必要な理由は、エージェントが「過去に何を頼まれたか」「どんな文脈で動いているか」を記憶し、継続的にタスクを遂行するためです。

アクティビティ設定をオンにすることで、GeminiはあなたのWorkspace（メールやドキュメントなど）に安全にアクセスし、一貫性のある作業を実行できるようになります。プライバシーを担保しながらAIを「自分専用のアシスタント」として機能させるための、重要な前提設定です。

現時点でできないこと、そして今後の展望

2026年4月現在、Geminiアプリ単体ではまだ難しいことがあります。

• 外部SNSへの直接投稿： XやInstagramへの「投稿完了」までは、セキュリティと利用規約の関係で現時点では不可（下書き作成までが限界）
• APIのないサイトでの自動操作： ログインが必要なサイトでのボタン操作のような自動化はまだ不安定
• 高頻度タスク： 標準のスケジュール機能では最短でも1日1回という制約がある

ただし、これらは順次緩和される予定です。特にFigmaをはじめとする外部デザインツールとの直接連携や、音声トリガーによる複雑なタスクチェーンの実行は、近い将来の実装が期待されています。

まとめ

私たちはこれまで、情報を集めたり整理したりする「作業」に多くの時間を使ってきました。しかし本来の価値は、整理されたデータを見て「何を提案するか」「どんな形にするか」という判断と決断にあるはずです。

誰が行っても同じ結果になる処理はGeminiエージェントに任せ、生まれた時間をクライアントの課題に向き合うことや、新しいアイデアを考えることに使う。それは手を抜くことではなく、より人間らしい仕事に集中するための、合理的な選択です。

まずは明日、一つだけ小さなルーチンをGeminiに任せてみることから始めてみてください。

オススメは、追いたい情報の『朝刊化』です。

AIを活用したサイト制作は「指示出し」から「自動建築」のフェーズへ。

本業でECサイトの設計からコーディングまで一人で担うWebデザイナーの私が辿り着いた「Googleエコシステム最強の制作ワークフロー」を徹底解説します。

なぜ「Gemini」を選ぶのか？

現在、CursorやChatGPT、Claude Artifactsなど、多くのAIツールが存在します。

特にAIエディタの代名詞とも言える「Cursor」は強力ですが、現場で私がGeminiをメインに据える理由は、Googleの圧倒的な「連携力」と「コストパフォーマンス」にあります。

主要AIツールとの比較

ポイント: Cursorは非常に優れたエディタですが、プロトタイプを作る「Canvas」と、実装を行う「Antigravity」を一つのGoogleアカウント（一つのサブスク）でシームレスに行き来できる体験は、Geminiだからこそできる高速フローです。

制作効率を10倍にする「右脳と左脳」の役割分担

「右脳」を担うGemini Canvas：直感的なデザイン生成

Canvasの最大の武器は、「コードを書かずに、プレビューを見ながらデザインをこねくり回せる」点です。

• リアルタイム・スタイリング: AIが即座に反映し、プレビュー画面で確認可能。
• 曖昧な指示の具現化: 「もっと春らしく」「20代女性に刺さる配色で」といった感性的なオーダーを視覚化。
• デザインの「こねくり回し」: デザイナーが一番時間をかける「0→1」の試行錯誤を、数分という驚異的なスピードで回せます。

「左脳」を担うAntigravity：論理的な実装と自動建築

Googleが開発した次世代AI IDE「Antigravity」は、VS Codeをベースにしながらも、ディレクトリ構造を自律的に理解してくれるので、一度の指示で関連ファイルをディレクトリ内で探して編集してくれる優れたエディターです。

• Windows環境での親和性: WSL2やPowerShellを介した環境構築も、AIエージェントがコマンドを提案・実行してくれるため、環境構築のストレスが激減します。
• 構造化のプロ: Canvasで作った「一枚岩のコード」を、Next.jsのApp Routerに基づき適切にコンポーネント分割し、適切なディレクトリへ自動配置することもできます。

【実践】0から100まで駆け抜ける「4ステップ・ワークフロー」

ここからは、私がオススメする制作フローを詳しく解説します。

STEP 1：Geminiで「プロジェクトの設計書」を作る

AIに丸投げするのではなく、最初にCONTEXT.mdという詳細な設計書を作らせるのが成功の8割を決めます。

• 内容の緻密化: 技術スタック（Next.js, Tailwind, Framer Motion等）の指定、ディレクトリ構成のルール、カラーパレットの16進数指定までをこの1ファイルに集約させます。
• AIへの制約: 「このルールを逸脱するな」という強い指示を書き込むことで、後の工程での「AIの勝手な解釈」を防ぎ、制作の一貫性を保ちます。

STEP 2：Canvasで「ビジュアル」を仮確定

設計書を元に、Canvas内で動くプロトタイプを作成します。ここでは「構造」よりも「見た目」を完璧にすることに集中します。

• 1ファイルに集約: Canvasは単一ファイルでのプレビューが得意なため、あえてコンポーネント分割せず「Visual.tsx」という巨大なファイルにすべて記述させます。
• 対話型修正: 「ヘッダーのロゴを左に寄せて」「スマホの時だけこの要素を非表示にして」といった微調整をプレビューを見ながら繰り返し、理想のビジュアルを確定させます。

直接コードを編集するほうが早い、軽微な修正が発生することもあります。その場合、わざわざプロンプトで指示すると逆に効率が悪いので、STEP3が完了した後に修正するのも手です。

STEP 3：Antigravityで「自動建築」を開始

ここが一番の快感ポイントです。用意した「設計書」と「Visual.tsx」をAntigravityに読み込ませます。

• 自律的なプロジェクト初期化: npx create-next-app からライブラリの npm install まで、AIがコマンドを生成します。コマンドの実行承認をポチポチ押すだけで、目の前でプロジェクトの骨組みが出来上がっていきます。
• コンポーネントの解体と再構築: AIがVisual.tsxを解析し、Header.tsxやHero.tsxといった部品に切り分け、設計書で指定したフォルダへ自動的に収納していきます。人間がコピペを繰り返す時代は終わりました。

STEP 4：AIエージェントによるデバッグと仕上げ

自動構築が終わった直後の「あと一歩」を、対話形式で詰めていきます。

• 局所的エラーの解消: 「画像のパスが通っていない」「Lucide Reactのアイコン名が間違っている」といった細かい不備を、Antigravityのチャットで指摘して直させるか、直接修正します。
• レスポンシブの最終調整: 実機やブラウザのデベロッパーツールで確認し、気になる箇所の微調整をAIに依頼。この「仕上げ」の精度が、プロの仕事としてのクオリティを左右します。

【実例紹介】AIと作った次世代プロトタイプ

さて、ここまで大きな制作の流れをご紹介しました。

今度は、この後ご紹介するGemやプロンプトでどんなものが作れるのか、イメージを用意しました。

それぞれCanvasで作成したときのイメージを共有リンクとして貼り付けてあるので、全容をご覧ください。

例1. 可愛らしいインテリアECサイト

20～30代女性をターゲットとしたインテリアECサイトをCanvasで作成しています。

例2. 堅実なシステム開発会社のコーポレートサイト

シンプルな構成ですが、カウントアップを加えた遊び心のあるトップページになっています。

例3. スタイリッシュなデザイナーのポートフォリオサイト

シンプルかつスタイリッシュなビジュアルに余白を大きく設けたデザイナーらしさのあるページです。

例4. モダンなエンジニアのポートフォリオサイト

フリーランスとしてWeb制作会社から高単価案件を獲得するためのプレゼンテーションツールをイメージ。

実装力をアピールするような演出とスタイリッシュさが目を引くデザインになっています。

このポートフォリオのメインビジュアルには、高度なアニメーションを実装できるThree.jsを指定して作成させています。

mimihokuro

ライブラリを指定して実装も簡単にできて、かつクリエイティブなサイトが作れてしまうのは驚きでした。

それでは、ここからサンプルページを作成したプロンプトと流れをご紹介します！

現場で即戦力になる「専用Gem」と「秘伝のプロンプト」

これまでの解説でフローの重要性は理解いただけたかと思います。

しかし、一番の壁は「AIにどう指示すれば、高品質な設計書が出てくるのか？」という点ではないでしょうか。

そこで、私が実務で磨き上げた「設計サポート専用Gem」と、コピペで使える「プロンプトサンプル」を公開します。

STEP 1：Canvasで「最強の設計書」を作る

この最初のステップで「設計書（CONTEXT.md）」をどれだけ緻密に作れるかが、後のクオリティを左右します。

ただ、非デザイナーや「実はデザイン苦手なんよ・・・」というデザイナーの方にも安心で便利な設計書作成サポートGemをご用意しています。

前述しましたが、できるだけGeminiに伝える情報に高い粒度を保たせるために、Geminiは一つ一つ丁寧にヒヤリングします。そのため、無料プランで使うとすぐにレート制限に達してしまう可能性が高いので、有料プランで使うのがオススメです。

レート制限が気になるよ、という方は、以下の指示書（プロンプト）サンプルを希望に合わせて調整して、 CONTEXT.mdというマークダウンファイル（指示書）を作らせてください。

ジャンル別に3つの実例を用意したので、作りたいものに近いものを選んでみてください。

パターンA：インテリアECサイト（B2C）

▼ プロンプト例（Canvasに入力）

以下の要件定義に基づき、Webサイト構築のための詳細な設計書（CONTEXT.md）を作成してください。
出力内容は、開発AIが迷わず実装できるレベルまで詳細化してください。

【1. プロジェクト基本要件】
・サイトの種類: インテリアECサイト「トップページ」
・ターゲット: 20代〜30代の一人暮らしを始める女性（仕事で忙しいが、部屋にはこだわりたい層）
・技術スタック: Next.js (App Router), Tailwind CSS, Lucide React, Framer Motion
・レスポンシブ対応: 完全レスポンシブ必須（スマホ・タブレット・PC）。モバイルファーストで設計すること。

【2. デザインシステム定義】
・カラーパレット:
　・Primary: <em>#F5EBE0 (やわらかいベージュ系)</em>
　・Secondary: <em>#D1FAE5 (淡いミントグリーン)</em>
　・Accent: <em>#E5B1B1 (くすみピンク)</em>
　・Text: <em>#374151 (チャコールグレー)</em>
・フォント: Noto Sans JP (本文), Montserrat (見出し)
・UIルール:
　・角丸: rounded-lg (少し丸みを帯びた形状)
　・シャドウ: shadow-sm (控えめで上品な影)
　・余白: ゆったりと取る (Tailwindの gap-8, py-16 等を活用)
　・ブレークポイント: Tailwind標準 (sm, md, lg, xl) を使用し、デバイスごとに最適なレイアウトを定義すること。

【3. セクション構成と機能要件】
1. Hero: 画面いっぱいのスライダー。キャッチコピー「私らしい、春の部屋。」。CTAボタン配置。スマホでは画像比率を調整。
2. Category: 「ソファ」「テーブル」「照明」等のアイコンナビゲーション。横スクロールまたはグリッドで表示。
3. Concept: ブランドメッセージ。背景に薄いテクスチャ画像を使用。
4. New Arrivals: PCでは4カラム、スマホでは2カラムのグリッド。
5. Ranking: 1〜3位のランキング表示。王冠アイコン付き。
6. Instagram: グリッドレイアウトで画像表示。
7. Newsletter: メールアドレス入力フォームと登録ボタン。

【4. ディレクトリ・コンポーネント設計】
・ディレクトリ構成: Next.js App Routerの標準構成（/app）。
・コンポーネント分割ルール:
　・共通パーツは /components/ui (Button, Card等)
　・セクション単位は /components/sections (Hero, Features等)

【出力形式】
上記を整理し、エンジニアへの実装指示書として使えるマークダウン形式（CONTEXT.md）で出力してください。

パターンB：IT企業コーポレートサイト

▼ プロンプト例（Canvasに入力）

以下の要件定義に基づき、Webサイト構築のための詳細な設計書（CONTEXT.md）を作成してください。

【1. プロジェクト基本要件】
・サイトの種類: システム開発会社のコーポレートサイト
・ターゲット: 企業のDX担当者、IT部門の責任者（信頼感と技術力を重視）
・技術スタック: Next.js (App Router), Tailwind CSS, Lucide React
・レスポンシブ対応: 完全レスポンシブ必須。ビジネスマンが移動中にスマホで見ることも考慮。

【2. デザインシステム定義】
・カラーパレット:
　・Primary: #0F172A (深いネイビー、知性と信頼)
　・Secondary: #3B82F6 (テックブルー)
　・Background: #F8FAFC (清潔感のある白グレー)
・フォント: Noto Sans JP (本文), Inter (英数字)
・UIルール:
　・角丸: rounded-sm (シャープでビジネスライクな形状)
　・ナビゲーション: PCはヘッダーメニュー、スマホはハンバーガーメニューに切り替え。

【3. セクション構成と機能要件】
1. Hero: オフィス風景の動画背景＋「技術で、未来を実装する。」。
2. News: 最新のお知らせ3件。
3. Service: 「Web開発」「アプリ開発」「コンサルティング」の3本柱。
4. Strengths: 数字で見る実績。カウントアップアニメーション。
5. Case Study: 導入事例のロゴスライダー。
6. Contact: 大きな電話番号とお問い合わせフォームへの誘導。

【4. ディレクトリ・コンポーネント設計】
ディレクトリ構成: 一般的なNext.js構成。

パターンC：デザイナーのポートフォリオサイト（クリエイター）

▼ プロンプト例（Canvasに入力）

以下の要件定義に基づき、Webサイト構築のための詳細な設計書（CONTEXT.md）を作成してください。

【1. プロジェクト基本要件】
・サイトの種類: Webデザイナーのポートフォリオサイト（トップページ）
・ターゲット: 制作依頼を検討中のクライアント、採用担当者
・技術スタック: Next.js (App Router), Tailwind CSS, Framer Motion

【2. デザインシステム定義】
・カラーパレット:
　・Base: #FFFFFF (白)
　・Text: #1A1A1A (ほぼ黒)
・フォント: Noto Sans JP (本文), Playfair Display (英語見出し)
・UIルール:
　・余白: 極めて広く取る。スマホでは適切な余白に調整。
　・線: 1pxの極細線を使い、グリッド感を強調

【3. セクション構成と機能要件】
1. Hero: タイポグラフィ重視。ふわっと現れるアニメーション。
2. About: 簡潔なフィロソフィーとプロフィール。
3. Works: 制作実績をグリッド（PC: 2カラム, SP: 1カラム）で表示。
4. Skills: 使用可能ツールをシンプルにリスト化。
5. Contact: SNSリンクとシンプルなフォーム。

【4. ディレクトリ・コンポーネント設計】
・コンポーネント分割ルール: WorkCard, SkillBadgeなどの粒度で分割。

プロンプトを実行して出力された「設計書」の内容を精査します。
これがこのプロジェクトの「憲法」になります。

これがあるだけで、後の工程でのAIの「勝手な判断」や「デザインのブレ」を徹底的に防げます。

ちなみに上記で紹介したプロンプトはあくまで例なので、より具体的な構想やルールがあればより詳細に書くことでクオリティーを高められます。

STEP 2：Canvasで「見た目だけの完成品」を作る

次に、STEP 1で作った「設計書」を元に、Canvasでデザインを作ります。 ここでの最大のポイントは、「設計書のデザイン要件は守るが、ファイル分割ルールは一旦無視する」ことです。

▼ デザイン作成のコツ Canvasに対しては、以下のように指示します。

設計書（CONTEXT.md）の要件（デザインシステム、セクション構成）に基づいて、サイトのデザインを作成してください。

【条件】
・ReactとTailwind CSSを使用すること。
・重要: 設計書で定義したディレクトリ構成は一旦無視し、すべてのコードを1つのファイル（Visual.tsx）にまとめて記述すること。
・コンポーネント分割はしないでください。ベタ書きで構いません。
・最重要: 完全なレスポンシブ対応（モバイルファースト）にしてください。Tailwindのプレフィックス（md:, lg:）を必ず使用してください。

ここでは、STEP 1で決めた世界観と、「スマホで見ても崩れないこと」を完璧に再現することだけに集中してください。

STEP 3：Antigravityで「合体＆自動建築」

ここが最大の山場であり、一番気持ちいい瞬間です。

Canvasで作った「設計書（STEP 1のCONTEXT.md）」と「デザインコード（STEP 2のVisual.tsx）」の2つを用意し、一つのディレクトリに入れたら、Antigravity（エディタ）で該当のディレクトリを開きます。

Antigravityのチャット欄に、この2つのファイルを読み込ませます（「@（メンション）」でファイル名を選択してください）。

その状態で、以下のプロンプトを投げてください。

▼ 自動建築プロンプト（Antigravityに入力）

あなたはシニアフロントエンドエンジニアです。
現在のディレクトリは空です。以下の2つの資料を元に、プロジェクトを0から構築してください。

【入力資料】
1. 設計書: CONTEXT.md（技術スタックと構成ルール）
2. デザイン: Visual.tsx（見た目の正解データ）

【タスクフェーズ】
1. 環境構築
・CONTEXT.md の技術スタックに基づき、Next.jsプロジェクトの初期化コマンドを実行してください。
・TypeScript, Tailwind CSS, ESLint は有効にしてください。
・必要なライブラリ（Lucide React, Framer Motion等）をインストールしてください。

2. 実装
・初期化されたプロジェクトに対し、CONTEXT.md で定義されたディレクトリ構成を作成してください。
・Visual.tsx のコードを適切に分割し（Header.tsx, Hero.tsx 等）、各ファイルに配置してください。

【実行指示】
まずはフェーズ1（環境構築）のコマンドを提案・実行し、完了後にフェーズ2（実装）へ進んでください。

これを送信すると、AIは「設計書」というルールに従って、デザインコードという「素材」を切り刻み、適切なファイルに自動で振り分けてくれるので、人間がエディタを行き来してコピペする必要はゼロです。

環境構築のプロセスでは、いくつかのコマンド実行が必要で、構築完了までノンストップで実行できれば良いのですが、Antigravityではセキュリティのため、コマンド実行前に「承認」ボタンのクリックが必要になります。

承認をポチポチと押して見守るだけで、環境構築からファイルの整理整頓まで全てAIがやってくれます。

STEP 4：AIエージェントで仕上げる

自動構築が終わったら、最後に「エンジニア」としての仕上げです。 おそらく、自動構築直後は「画像のパスが通っていない」とか「リンクが空っぽ」といった細かい不備があるはずです。

ここは、AntigravityのAIエージェント（チャット）を使って、対話形式で詰めていきます。

• 「ヘッダーのロゴ画像が表示されていないので、public/images フォルダを作ってダミー画像を配置し、パスを通して」
• 「商品カードをクリックしたら、商品詳細ページ（/products/[id]）に遷移するようにリンクを修正して」
• 「スマホで見た時、ハンバーガーメニューが開かないバグを直して」

このように、全体構造ではなく「局所的な修正」にフォーカスして指示を出すのがコツです。

ここまで来れば、Gitでコミットしてデプロイするまであと一歩です。
※ここではGitでのコミット、デプロイの方法については割愛します。

サイトが完成してデプロイできたらお祝いしましょう！🎉
お疲れ様でした！

さていかがでしたでしょうか？

「サイトを作りたいけどデザインがなぁ・・・」と悩んでなかなか前に進めなかった方は、ぜひぜひ、この手順を試してみてください。
「今までの苦労は何だったんだ…」ってなること間違いなしです！

Googleが発表したGeminiの『Nano Banana（ナノバナナ）』ですが、凄まじい精度で画像を生成してくれ、中には「Photoshopいらない！」なんて声も聞きます。

恐らくこの記事を読みに来てくれたあなたも、すでにNano Bananaを試して画像生成を楽しんでいると思います。

そんなNano Bananaですが、「Pro」モデルへの継続的なアップデートにより、文字の描画精度や構図の理解力はかつてない次元に達しています。

Webデザイナーとして、あるいはブロガーとして、アイキャッチ（サムネイル）制作のフローがガラリと変わったのを感じている方も多いのではないでしょうか。

でもNano Bananaで画像を作っている中で、こんな問題に出会ったことはありませんか？

「16:9で指定したはずなのに、微妙にサイズが合わない……」 「プロンプトに書いたのに、なぜか正方形になってしまうことがあるのはなぜ？」

今回は、Nano Banana Proがなぜ「お茶目なズレ」を生じさせるのかという技術的背景から、アスペクト比コントロールの正攻法、そして特定の条件下で役立つ補足知識までを徹底解説していきます。

アスペクト比コントロールの「正攻法」：思考モードを活用する

現在のNano Bananaにおいて、「思考モードによるプロンプト指定」によってアスペクト比をコントロールできるようになりました。

自然言語でアスペクト比を指定するだけで、**「ある程度」**指定のアスペクト比で生成してくれます。

• 有効なプロンプト例:
  • 「アスペクト比を16:9にして、ブログのアイキャッチ用に生成して」
  • 「YouTubeのサムネイルサイズ（16:9）の横長で」
  • 「ポートレート（9:16）の縦長構図で」
• 思考モードの特性: プロンプト内の比率指示を深く解釈し、指定された数値を実現するために最適なキャンバスサイズを数学的に導き出します。比率をプロンプトでコントロールしたい場合は、「思考モード」を選択してください。

逆に言うと、「高速モード」ではプロンプトだけでアスペクト比をコントロールすることはできません。

プロンプトだけでコントロールしたい場合には「思考モード」はマストなのです。

実証データ：なぜ「16:9」で指定してるのに「ズレる」のか

先程、指定したアスペクト比に対して忠実ではなく「ある程度」と言ったのも、実はプロンプトで「16:9」と指定し、思考モードで実行しても、実際に出力される解像度は厳密な16:9（1.777…）ではありません。

以下は私が調べた、指定したアスペクト比に対する実際の比率を簡単にまとめた表です。

なぜ最新のAIが、私たちの指示を「微妙にズラして」くるのでしょうか？ そこには、AI特有の数学的なロジックが存在します。

AIの「職人気質なこだわり」：64ピクセル・グリッド

Nano Banana Proの画像生成エンジンは、画像を「一繋ぎの面」としてではなく、「64ピクセル（もしくは128ピクセル）単位」の小さなブロック（タイル）を並べて構築しています。

というのも、AIは「端数が出る中途半端なブロック」を処理するのを嫌います。

無理にサイズを合わせようとすると画質が低下したり、境界線にノイズが走ったりするため、AIは「最高画質」を維持できる、最も近い 2752px (64×43) を自動的に選んでしまうのです。

「ズレ」を味方につける運用方法

この微細なズレを前提とした上で、Webデザイナーの私が実践している実務的な運用方法をご紹介します。

1. 「セーフエリア」を意識して生成する
   プロンプトに「被写体を中央に配置し、周囲に十分な余白（negative space）を空けて」と記述します。これにより、AIが出力する 1.79 という比率を、後に 1.77（16:9）へ切り抜いても、重要な要素が欠ける心配がなくなります。
2. Canvas機能での微調整
   生成された画像に対して、Canvas上で「左右を少し描き足して比率を整えて」と指示（アウトペインティング）を出すことで、元のクオリティを維持したまま、より理想に近い比率へ近づけることができます。
3. Windows標準ツールやPhotoshopでの仕上げ
   出力される 2752×1536 という解像度は非常に高精細です。これをWindowsの「フォト」アプリ等で開き、16:9（1.77）にトリミングして書き出します。Nano Bananaを使うとついてくる「ウォーターマーク」もフォトの「生成消去」機能で結構キレイに消してくれます。

【おまけテクニック】「高速モード」でアスペクト比コントロールする意外な方法

基本的には「思考モード」でのプロンプト指示でアスペクト比調整は解決しますが、「アスペクト比の確保のためだけに思考モードを使うのは生成クレジットがもったいないなぁ・・・」と思った方のためのTipsも紹介しておきます。

実は「高速モード」を選択している場合、プロンプトの比率を指定しても反映されません。

ですが、あるテクニックを使うと高速モードでもある程度の比率をコントロールすることができます。

このテクニックは、Gemini 2.5の時代から検証されているもので、YouTubeチャンネル「Nano Banana Aspect Ratio Issue & Fix」で紹介された手法を参考にしています。

※注意：この手法は、「高速モード」でのみ機能する手法です。論理的指示が優先される思考モードでは効果がありません。

その方法というのが、**「希望の比率で作成した、真っ白（または真っ黒）な画像を最後にアップロードする」**という画期的なテクニックです。

この何もない「白紙画像」を、いわばサイズを指定するためだけの「ダミー画像」として利用することで、元画像の比率に関係なく、出力結果を理想に近いアスペクト比へと導くことができます。

コピペで使える「ダミー画像」活用プロンプト

それでは、実際にダミー画像を使ってNano Bananaのアスペクト比をコントロールする手順を見ていきましょう。

Step 1: ダミー画像の準備

まず、Windowsの「ペイント」や任意の画像編集ツールを使い、希望するアスペクト比の画像を作成します。今回は16:9の横長画像を目指すので、例えば「1600x900px」などでキャンバスを作成し、真っ白なまま保存します。

サイズを1600x900pxとしていますが、あくまで比率合わせのためのサイズ指定なので、このサイズで生成されるということではありません。

Step 2: 画像のアップロード

次に、Nano Bananaのプロンプト入力画面で、以下の順番通りに画像をアップロードします。

1. 1枚目: メインで使いたいコンテンツの画像（比率は問いません）
2. 2枚目（最後）: Step 1で作成したダミー画像（16:9の白紙）

この「順番」が非常に重要です。

複数の画像をまとめて選択すると意図しない順序になる可能性があるので、一つずつアップロードすることをオススメします。

Step 3: アスペクト比を反映するためのプロンプトをコピー＆ペースト

最後に、以下のプロンプトをコピーして、プロンプト入力欄に貼り付けてください。これは「1枚目の画像の内容を、2枚目の画像の比率に合わせて再描画してください」と具体的に指示するものです。

画像1の内容を画像2の上に再描画し、画像1の縦横比が画像2と一致するようにコンテンツを追加して調整してください。同時に、画像2の内容は完全に削除し、その縦横比だけを維持してください。空白の領域が残らないようにしてください。

この手順を踏むことで、Nano Bananaは1枚目の画像の本質的な内容を維持したまま、2枚目のダミー画像が持つ16:9に近いアスペクト比で再生成してくれるはずです。

このプロンプトは元の画像を希望の比率に拡張するイメージです。例えば、元の画像が正方形で生成したい画像が16:9の横長の場合、横方向に足りない部分を補足しようとします。
トリミングしたい場合はプロンプトを調整する必要があります。

補足：画像をトリミングしたい場合

先程はメイン画像を「拡張して」希望の比率に近いサイズにしていましたが、逆にメイン画像の一部を「削って（トリミング）」生成することもできます。

その場合には以下のプロンプトを使ってみてください。

画像1の内容を画像2の上に再描画し、画像1の縦横比が画像2と一致するようにコンテンツの上下を削除してトリミング調整してください。同時に、画像2の内容は完全に削除し、その縦横比だけを維持してください。空白の領域が残らないようにしてください。

こんな感じにできます。

プロンプトだけで生成した画像

白紙画像を使ってトリミング生成した画像

そのままトリミングしたわけではありませんが、元画像の上下が削られ、希望の比率に近い画像を生成することができました。

あくまで「おまけ」のテクニックですが、大量のバリエーションを高速に生成したい時などに役立つことがあります。

まとめ：AIの「クセ」を理解して最高の1枚を

Nano Banana Proにおけるアスペクト比のコントロール。それは「完璧な指示」を出すことだけではなく、「AIの仕組みを理解して一歩歩み寄る」ことでした。

• メインは「思考モード」での自然言語による比率指示。
• 「64pxの制約」による微細なズレは、後からトリミングで整えるのが正攻法。
• 「白紙画像」ハックは高速モード限定の補助的なテクニック。

今回ご紹介した方法は、ブログのアイキャッチ画像やWebサイトのバナー、SNS投稿用の画像など、特定のサイズが求められるクリエイティブ制作において絶大な効果を発揮します。

ぜひ、あなたの作品作りにこの方法をお役立てください。

※なお、本記事で紹介している内容は、執筆時点の情報と筆者の実験に基づいています。生成AIの仕様は変更される可能性があるため、必ずしも同様の結果が得られることを保証するものではありません。