PR 本ページにはプロモーションが含まれています。
この記事を読むと、GeminiとWebflowやAdobeをつなぎ、チャットでWebサイトの制作や更新を進める方法がわかります。画面操作や専門用語が不安な方でも、この手順通りに確認すれば大丈夫です。
実際に試すと、最初の壁は「接続設定の場所」と「どのアプリに指示しているかの指定」です。ここを確認できれば、文章の整理や小さなデザイン修正は、普段の言葉で相談しやすくなります。
Googleは2026年9月23日、GeminiのConnected Apps（外部サービスとGeminiをつなぐ機能）を拡大すると発表しました。Adobe、Picsart、Squarespace、Webflowなどが対象として案内されています。ただし、表示される機能や利用できる地域、アカウントの種類は変わる場合があります。
GeminiとWebflow・Adobeの連携でできること
最初にできることを知ると、自分の作業に役立つか判断しやすくなります。Connected Appsは、Geminiを相談相手にするだけでなく、接続したサービスの作業をチャットから進めるための機能です。
- Webflow：サイトのビジュアルデザイン（見た目の設計）、レスポンシブレイアウト（画面幅に合わせて表示を変える設計）、CMS（記事や商品などの情報を管理する仕組み）の内容、構造要素（見出しや画像などページを構成する部品）、CSSプロパティ（文字色や余白など見た目を指定する設定）などを扱えます。
- Adobe：画像やデザインなどのクリエイティブ作業を、Geminiとの会話と組み合わせて進める使い方が考えられます。実際に使える操作は、Adobe側のアプリやアカウントによって異なります。
- Squarespace：Webサイト制作サービスの操作を、Geminiのチャットと組み合わせて進められます。
- Picsart：画像編集などのクリエイティブ作業とGeminiを組み合わせて使えます。
実際に使うと、Geminiがすべてを一度に完成させるというより、「変更案を考える」「対象を見つける」「作業を進める」アシスタントとして役立つ場面が多いとわかります。最後の確認や公開は、人が担当する前提で使いましょう。
従来のやり方や他のAIツールとの違い
これまでのWeb制作では、企画を考え、Webflowなどの管理画面を開き、目的のページや設定を探してから文章やデザインを変更していました。初心者が最初につまずくのは、作業そのものより「どの画面を開けばよいか」がわからない点です。
- 従来の管理画面操作：細かな設定を直接確認できますが、メニューや専門用語を覚える必要があります。
- GeminiのConnected Apps：目的を自然な文章で伝え、対象の確認や変更を会話から進められます。ただし、変更前後の確認や公開判断は必要です。
- 一般的な文章生成AI：文章案やコード（Webページを動かすための記述）は作れますが、接続していないサービスの画面を直接変更することはできません。
- WebflowやAdobe単体のAI機能：そのサービス内の作業に強い一方、複数のサービスをまたいだ相談は別々に行う必要があります。
たとえば「スマートフォン表示で見出しが詰まっている」と相談した場合、Geminiでは原因の候補や修正方針を会話で整理できます。一方、細かな余白を数値で調整したいときは、Webflowの編集画面を直接開いた方が早いこともあります。会話が得意な作業と、画面を見ながら行う作業を分けるのがコツです。
初心者向け：Connected Appsを使う手順
設定は一度にすべて覚えなくて大丈夫です。最初はテスト用ページや公開前の記事を使い、小さな修正を1つだけ依頼しましょう。画面の名称や位置は、Geminiのバージョン、地域、アカウントによって異なる場合があります。
- Geminiを開き、設定画面へ進む
Geminiの画面左下にあるプロフィール画像、またはメニューアイコンをクリックします。表示されたメニューから「設定」や「接続アプリ」を選びます。スマートフォンでは、画面上部のメニューアイコンをタップしてから設定を開く場合があります。
- 接続アプリの一覧を確認する
設定画面の「接続アプリ」「Connected Apps」「アプリ」などの項目を開きます。Webflow、Adobe、Squarespace、Picsartなどの名前が表示されているか確認します。最初の壁は、アプリ名が見つからないことです。その場合は、提供地域、言語、Googleアカウントの種類、段階的な提供状況を確認してください。
- 使いたいアプリの接続ボタンを押す
利用したいアプリの右側にある「接続」「Connect」などのボタンをクリックします。Googleアカウントや接続先サービスのログイン画面が表示されたら、使うアカウントを選びます。会社のアカウントを使う場合は、管理者の許可が必要になることがあります。
- 許可する内容を確認する
接続確認画面では、読み取りや編集など、どの操作を許可するかを確認します。権限（サービス内で操作できる範囲）が広すぎると感じたら、いったん中止して会社のルールや管理者に相談しましょう。必要なアプリだけを接続し、使わなくなったアプリは設定画面から見直します。
- 新しいチャットで対象アプリを指定する
接続後、Geminiで新しいチャットを開きます。入力欄の「@」やアプリ選択ボタンが表示される場合は、そこからWebflowやAdobeを選びます。表示されない場合は、入力文の最初に「Webflowで」「Adobeで」と書きます。アプリ名を指定しないと、Geminiへの一般的な相談として処理されることがあります。
- 小さな作業を依頼する
最初は「トップページの見出し構成を確認してください」「公開前の記事の重複した見出しを整理してください」のように、対象と目的を1つに絞ります。「いい感じにして」だけでは結果を判断しにくいため、「見出しは3つまで」「スマートフォンで読みやすく」「画像は変更しない」など条件を加えます。
- 提案内容と変更範囲を確認する
Geminiが示した内容を読み、対象ページ、変更箇所、文章、画像、リンク、レイアウトを確認します。変更前の画面を保存したり、スクリーンショット（画面を画像として保存したもの）を残したりすると、元に戻したいときに比較しやすくなります。
- プレビューで表示を確認する
公開前にプレビューを開き、パソコン表示とスマートフォン表示の両方を見ます。見出しの折り返し、画像の切れ方、リンク先、ボタンの位置を確認します。問題がなければ、サービス側の公開ボタンを人が押します。
実際に使うとどうなる？最初につまずきやすいポイント
実際に試すと、自然な文章で依頼できる便利さの一方、指示の範囲が広いと確認に時間がかかります。最初は「1ページの1か所だけ」を指定する方が、結果を見比べやすく安心です。
よくあるミス1：アプリを指定し忘れる
「見出しを直して」とだけ入力すると、Geminiが一般的な文章案を返す場合があります。「@Webflowを使って、トップページの見出しを確認して」のように、アプリ名、対象、作業を1文に入れましょう。
よくあるミス2：編集と相談を混同する
「改善案を出して」と「実際に変更して」は別の依頼です。変更したくないときは「変更せず、問題点だけ教えてください」と書きます。変更したいときは「変更前に対象箇所を説明し、確認を取ってから進めてください」と指定すると安全です。
よくあるミス3：パソコン表示だけ確認する
レスポンシブレイアウトは、画面幅によって文字や画像の配置が変わります。パソコンで問題がなくても、スマートフォンでは見出しが2行になったり、ボタンが画面外にはみ出したりします。両方の表示を確認してください。
よくあるミス4：WebflowとAdobeの役割を混同する
WebflowはサイトのページやCMSを管理するサービス、Adobeは画像やデザインなどを扱うサービスという違いがあります。画像そのものを調整したいのか、Webページ上の画像の配置を直したいのかを分けて伝えましょう。
よくあるミス5：変更前の状態を残さない
変更履歴（過去の状態を確認できる記録）が使えるサービスでも、元の文章や設定を別に控えておくと安心です。ブラウザのキャッシュ（ブラウザが一時的に保存する手元のメモ帳のようなデータ）が残り、変更が表示されないこともあります。その場合は再読み込みして確認します。
依頼文の例：そのまま使える形
次のように、アプリ、対象、目的、条件を順番に書くと伝わりやすくなります。
- 「@Webflowで、トップページの見出し構成を確認してください。見出しは3階層以内にし、文章は変更せず問題点だけ教えてください」
- 「@Webflowで、公開前の記事のスマートフォン表示を確認してください。画像とリンクは変更せず、文字が読みにくい箇所を挙げてください」
- 「@Adobeで、Webサイトのトップ画像に使う明るい配色を3案考えてください。画像を変更する前に、それぞれの違いを説明してください」
- 「@Webflowで、修正対象をトップページのボタンだけに限定してください。変更前の内容を説明してから作業してください」
料金と利用条件を確認する
費用を考えるときは、Gemini側と接続先サービス側を分けて確認します。今回の公式情報では、すべての接続アプリに共通する一律料金は示されていません。
- Gemini側の利用プランやGoogleアカウントの条件を確認する
- Webflow、Adobe、Squarespaceなど接続先の契約状況を確認する
- 国、言語、個人アカウントか組織アカウントかを確認する
- 接続設定の画面に、利用したいアプリや機能が表示されるか試す
- 試用や無料枠がある場合も、使える回数や機能を公式案内で確認する
「無料ですべて使える」とは断定できません。会社で使う場合は、契約だけでなくデータの扱い、管理者の承認、利用ログ（誰がいつ操作したかの記録）の有無も確認しましょう。
向いている人・向いていない人
向いている人
- Webflowの画面操作に不安があり、まず作業内容を言葉で整理したい人
- 社内サイトの記事更新やページ修正を担当している人
- CMSの整理やデザインの確認にかかる時間を減らしたい人
- 複数のツールを行き来する前に、作業手順を相談したい人
- AIの提案を確認しながら、公開前のチェックを自分でできる人
向いていない人
- 変更内容を確認せず、完全な自動公開だけを期待する人
- 社外秘情報や顧客情報を、会社のルールを確認せず入力したい人
- 細かなデザインを数値単位で完全に管理したい人
- 利用地域やアカウントの条件を確認せず、すぐ使えると思っている人
細かな余白やCSSを直接調整する作業では、通常の編集画面の方が早い場合もあります。Geminiは「考える、探す、整理する」作業に使い、最終的な調整は各サービスの画面で行うと無理がありません。
安全に使うための注意点
便利な連携ほど、接続するサービスと権限の確認が大切です。業務で使う場合は、便利さだけでなく管理方法も決めておきましょう。
- 必要なアプリだけを接続し、使わなくなったら設定から解除する
- 公開前に文章、リンク、画像、スマートフォン表示を人が確認する
- 顧客情報、個人情報、社外秘データは会社のルールを確認してから扱う
- 対象ページ、変更範囲、守る条件を依頼文に書く
- テスト用ページで試し、本番ページには小さな変更から反映する
- 接続できない場合は、地域、言語、アカウントの種類、提供状況を確認する
よくある質問
Webflowの専門知識がなくても使えますか？
基本的な依頼は自然な文章で入力できます。ただし、レイアウト（部品の配置）やCSSの変更結果を確認するため、画面幅、見出し構造、リンクなどの基礎は少しずつ覚えると安心です。
Connected Appsはすぐに全員が使えますか？
提供は順次展開です。公式ヘルプに対象アプリが掲載されていても、地域やアカウントの条件によって表示されない場合があります。
GeminiだけでWebサイトを完成できますか？
制作や更新を支援できますが、完成品質を自動で保証するものではありません。表示確認、文章の事実確認、画像の権利確認、公開前の承認は人が担当しましょう。
会社のWeb担当者が使うときは何を決めればよいですか？
最初にテスト用ページで試し、依頼文のテンプレートと確認項目を共有します。接続アプリと権限の管理担当、公開前に承認する担当者、問題が起きたときに元へ戻す方法も決めておくと運用しやすくなります。
まとめ：今日からできることは小さな修正を1つ試すこと
GeminiのConnected Appsによって、WebflowやAdobeなどの作業をチャットから相談し、進める選択肢が増えました。従来のように複数の画面を行き来する負担を減らし、初心者や社内担当者でも作業の入口を作りやすくなります。
ただし、最初からサイト全体を任せるのではなく、対象ページと変更範囲を絞ることが大切です。実際に使うと、指示を具体的にするほど結果を確認しやすくなり、修正のやり直しも減らせます。
今日からできることは、Geminiの設定を開き、接続アプリの一覧を確認することです。接続できる状態なら、テスト用ページで「変更せずに問題点だけ教えてください」と依頼してみましょう。
最初の一歩は、WebflowやAdobeで小さな作業を1つ選び、変更前後を見比べることです。安全確認を続けながら、自分の業務に合う指示の出し方を見つけていきましょう。
関連記事
- AdobeがGeminiとClaudeに対応｜チャットから画像・PDF・デザインを編集
- Webflow、AIコードコンポーネントの視覚編集とエージェント用指示書生成に対応
- Google AIプランにSheets canvasとGemini Sparkが追加、表計算作成とWeb作業をAIに委任
参考・公式情報
Googleの公式ブログ、Geminiの公式ヘルプ、Webflow・Adobeなど各サービスの公式案内を確認してください。Connected Appsの提供状況、料金、利用条件は更新される可能性があります。
📦 Amazonで関連商品を探す
GeminiからWebflowやAdobeを操作する方法｜Web制作初心者向けに使い方を解説をAmazonで探す
