Geminiで作った画像の文字をCanvaで直す方法|連携できない場合の手順も解説

Geminiで見出し画像を作ったあと、「一言だけ変えたい」「文字の大きさをそろえたい」と思うことはありませんか。

画像を作り直す前に、文字の周りの背景を見てください。ほぼ無地の背景なら、Canvaで同系色の図形と新しい文字を重ねて、見出しを差し替える方法があります。

今回は、Geminiの画像にある「AIで仕事を少しラクに」を、Canvaで「AIで仕事をもっとラクに」へ変更しました。背景の机とノートパソコンは、そのまま使っています。

Canvaで見出しを「AIで仕事をもっとラクに」へ変更した完成画像
Canvaで見出しを「AIで仕事をもっとラクに」へ変更した完成画像

この記事では、元画像の用意からCanvaへの取り込み、文字の調整、PNGの保存までを説明します。Geminiからの直接連携が見つからなかったときの進め方も、実際の検証結果をもとに整理しました。

検証日:2026年9月11日。PCブラウザで操作しています。画面の名称や使える機能は、アカウント・端末・提供状況によって異なります。

目次

先に確認:画像の文字を直す方法は2種類ある

CanvaにPNGをアップロードしただけでは、画像に描かれた文字が自動で文字入力欄になるわけではありません。今回の見出しも、背景と一体になった1枚の画像でした。

そこで、次の2つを区別しておくと迷いにくくなります。

方法行うこと今回の検証結果
Magic Layersで分ける1枚の画像から、文字や要素を編集できる形へ変換する入口は表示されたが、画像編集に必要なWebGLの案内で止まり、分離結果は未確認
図形と文字を重ねる元の文字を図形で覆い、その上に新しい見出しを入力するCanvaで編集し、完成PNGを書き出した

Canva公式は、Magic Layersを画像の文字や要素を編集可能な構成へ変換する機能として案内しています。ただし、この記事は日本語の自動分離が成功した実例ではありません。Canva公式:Magic Layersの紹介

これから説明するのは、実際に完成まで進められた「図形と文字を重ねる方法」です。 元の文字自体は消えず、図形の下に残ります。

この方法に向いている画像

  • 文字の周囲が、ほぼ無地の背景になっている。
  • 文字を覆っても、人物や商品などの大切な部分が隠れない。
  • 見出しの文言や文字サイズを変えることが目的。

逆に、写真・細かな模様・濃いグラデーションの上に文字があると、覆った四角形が目立ちやすくなります。その場合の別案は、記事後半で紹介します。

用意するものと、今回の利用範囲

用意するのは、Geminiで画像を生成できる環境、Canvaのアカウント、元画像のPNGまたはJPG、差し替えたい見出しです。すでに元画像があれば、次の生成工程は飛ばせます。

今回は、取り込み・図形と文字の追加・PNG出力まで、新たな有料プランや無料体験には申し込まずに進めました。すべてのアカウントで同じ条件になることや、Magic Layersを無料で使えることまで確認したわけではありません。

手順1:Geminiで元画像を作って保存する

今回Geminiに入力した指示はこちらです。

初心者向けのAI仕事術記事の横長見出し画像を1枚、実際に生成してください。説明文やHTMLではなく完成した画像を出してください。縦横比は16:9。見出しは正確に「AIで仕事を少しラクに」。左側に読みやすい大きな日本語の見出し、右側に明るい机とノートパソコンのイラストを置いてください。落ち着いた紺色・水色・白でまとめ、四辺には十分な余白を残してください。装飾は控えめに。指定した見出し以外の文字、ロゴ、料金、人の顔は入れないでください。
Geminiが生成した元画像。左に「AIで仕事を少しラクに」、右に机とノートパソコン
Geminiが生成した元画像。左に「AIで仕事を少しラクに」、右に机とノートパソコン

生成後は、見た目だけでなく、次の3点を確認します。

  1. 日本語が正しく読めるか。
  2. 指定していない文字やロゴが入っていないか。
  3. 保存した画像の寸法と、掲載先の比率が合っているか。

今回の出力は1024×572pxでした。「16:9」と指定しましたが、厳密な16:9ではありません。また、ノートパソコンの画面には、見出し以外の小さな「AI」が入りました。

指示に書いた条件と、実際に出力された結果は分けて確認しましょう。 今回はその背景を採用し、見出しの変更を試しました。

手順2:Canvaへ元画像を取り込む

Geminiから画像ファイルを保存したら、Canvaにログインして取り込みます。今回の画面では、ホームの「マジックレイヤー」から「画像を選択」→「アップロード」へ進み、元画像を選んで「エディターを開く」を押しました。

ここで編集画面が開いても、画像の文字が分離できたとは限りません。元画像全体が1つの画像として置かれている状態か、文字を個別に選べる状態かを確認してください。

今回、画像を選んで「編集」を開くと、「画像を編集するには、WebGLを有効にする必要があります。」と表示されました。そのため、自動分離の検証はここで止め、通常の図形と文字で仕上げる工程へ切り替えています。

Geminiに「@Canva」が出ない場合は?

Canva公式は、Geminiとの接続後に「@Canva」を使ってデザイン作成や編集を進める連携を案内しています。Canva公式:Google Geminiとの連携

一方、今回のGeminiアカウントでは、設定のアプリ連携一覧にCanvaが見当たりませんでした。同じ会話で「@Canva」を指定しても、Canvaの編集リンクではなく、Geminiの画像が返ってきました。

同じ状態なら、画像をいったん保存し、Canvaへ手動で取り込む経路で進められます。Geminiが画像を返したことだけを、Canvaとの連携成功とは判断しないでください。

なお、これは今回のアカウントで確認した結果です。「日本では使えない」「無料アカウントでは使えない」とまでは判断できません。

手順3:ページを複製して元画像を残す

編集を始める前に、Canvaのページを複製します。今回は1ページ目に元画像、2ページ目に修正後の画像を残しました。

比較用の元画像があると、文字の切れや、隠してはいけない背景まで覆っていないかを確認できます。操作を間違えても、元の構成を見直しやすくなります。

手順4:四角形で元の見出しを覆う

Canvaの「素材」→「図形」から四角形を追加し、元の見出しが完全に隠れる大きさへ広げます。

今回の元画像は、見出しの周りがほぼ紺色でした。四角形の塗りつぶしを背景に近い色にして、文字の輪郭や影が外側にはみ出さない位置へ調整しています。

このとき、右側のノートパソコンや植物まで隠さないようにします。色を合わせても境界が目立つ場合は、背景の模様や明るさに差がある可能性があります。

手順5:新しい見出しを入力して整える

追加した四角形に、次の見出しを2行で入力します。

AIで仕事を
もっとラクに

今回使った設定は以下のとおりです。自分の画像へそのまま当てはめる固定値ではなく、今回の1024×572pxの画像に合わせた実例として見てください。

項目今回の設定
図形の色#132e5b
図形の幅・高さ幅390px・高さ228.5px
図形の位置X:96、Y:160
フォントSource Han Sans JP
文字の色・太さ白・太字
Canvaの文字サイズ欄40
行間1.1
Canvaで図形と新しい日本語の見出しを配置している編集画面
Canvaで図形と新しい日本語の見出しを配置している編集画面

調整するときは、文字サイズを最大にするより、四辺に余白を残すことを優先します。「もっと」のように文字数が増える変更では、改行位置も見直してください。

元画像の背景には細かな質感があるため、単色の図形と完全に同じ見た目にはなりません。今回も背景を復元したのではなく、見出し部分を別の図形と文字で仕上げています。

手順6:編集したページだけPNGで保存する

Canvaの「共有」→「ダウンロード」へ進み、ファイルの種類をPNGにします。

元画像と編集後の2ページがある場合は、保存するページを確認してください。今回は「このページ(2)」を選び、編集後だけを書き出しました。

保存したPNGは、Canvaの編集画面とは別に開いて確認します。編集画面で問題がなくても、別のページを選んでいたり、掲載先の切り抜きで文字が欠けたりする可能性があるためです。

書き出し後のチェックリスト

  • 見出しが「AIで仕事をもっとラクに」になっている。
  • 元の文字や影が、図形の外に残っていない。
  • ノートパソコンなど必要な背景が隠れていない。
  • 文字が小さな表示でも読み取れる。
  • ブログのアイキャッチや一覧表示で、文字が切れていない。
  • 次回も修正できるよう、Canvaの編集データを残している。

今回書き出したPNGは1024×572pxです。掲載先が厳密な16:9を求める場合は、例えば1024×576pxなど、その比率のキャンバスで配置を調整します。ブログ側で切り抜かれる場合も、記事ページと一覧ページの両方で確認してください。

うまくいかないときの確認表

困ったこと確認する点・次に試すこと
画像の文字をクリックしても入力できない1枚の画像として取り込まれている可能性があります。文字を自動分離できているか確認し、未分離なら図形と新しい文字で差し替えます。
Geminiの連携一覧にCanvaがない今回も同じ状態でした。画像を保存して、Canvaへ手動で取り込みます。
WebGLを有効にするよう表示される今回は画像編集機能の検証を止めました。利用中のブラウザ環境を確認する必要があります。この記事ではWebGLを有効化して解消した実証はしていません。
覆った四角形が目立つ背景の色だけでなく、模様・影・グラデーションを確認します。無理に同化させず、見出し用の帯としてデザインするか、文字なし背景を用意する方法を検討します。
元の文字の端が残る文字の影も含めて覆うよう、図形の位置と大きさを調整します。
文字が図形に収まらない文字サイズ・改行・行間・図形の幅を順に見直します。
保存した画像を後から文字だけ編集したいPNGでは追加した文字も1枚の画像になります。文字の修正は保存済みのCanvaデザインで行います。

新しく作るなら「背景」と「文字」を分ける設計もできる

これから画像を作る段階なら、Geminiには背景だけを頼み、見出しを最初からCanvaで入力する設計も考えられます。後で文字を変える予定があるなら、元の文字を隠す作業を減らせます。

下は、そのための指示例です。今回の完成画像を作った指示ではなく、次に試すための例です。

ブログの見出し画像に使う横長の背景を作ってください。
右側に明るい机とノートパソコンのイラストを配置してください。
左側の約半分は、後で見出しを載せるための広い紺色の余白にしてください。
全体は紺色・水色・白でまとめてください。
文字、数字、ロゴ、透かし風の装飾は描かないでください。

この場合も、文字らしい模様が入っていないか、生成後の確認は必要です。

見出し画像を完成させたら、本文の確認へ

今回の実例では、GeminiからCanvaへの直接連携と画像の自動分離は確認できませんでした。それでも、ほぼ無地の背景を生かし、図形と編集可能な文字を追加して見出しを差し替えられました。

まずは自分の画像で、文字の周囲が無地か、覆っても必要な絵が隠れないかを確認してみてください。条件が合えば、元の背景を生かして仕上げる方法として使えます。

「手順は分かったけれど、文字の大きさや配置まで整える時間がない」という方には、ブログ・noteの見出し画像制作サービスも用意しています。記事タイトルや本文・要約をもとに、見出し画像の制作をご相談いただけます。

BUYMAや楽天の商品画像でも、同じ手が使えます。AIで作った画像の文字が微妙に違う、というのは商品ページを作っていると頻繁に起きるので。

参照した公式情報

  • Canva「Canva expands design creation inside Google Gemini and AI Search」:Geminiとの連携の公式説明。ページ上の公開日表示なし、2026年9月11日確認。公式発表を読む
  • Canva「Introducing Magic Layers, bringing creative control to AI content」:Magic Layersの機能説明。ページ上の公開日表示なし、2026年9月11日確認。公式発表を読む

掲載画像は、今回Geminiで生成した元画像、Canvaで編集した完成画像、実際の編集画面です。公式の機能説明と、この環境で確認できた結果を区別して記載しています。

画像制作をもっと効率化したい方へ

この記事で使ったような画像制作・編集ツールは、実際に試したものを中心にNEXITASで比較していきます。NEXITASでは、実際に使った手順や検証結果をもとに、関連ツールの使い方・比較記事を追加していきます。

AI×ブログ・SNSの実例をまとめて見る →

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

CAPTCHA


目次