はじめてのAI画像生成～ChatGPT, Google Gemini, Adobe Fireflyでファーストビュー画像を作ろう～
AI先生があなたの学習をサポートします。今なら無料のWeb/AI制作7講座が受講できます。 （限定100名、9月14日まで）
» 今すぐ無料講座をチェックする
画像生成ができるAI、めちゃくちゃ増えました。
お試しでプロンプトを入れて生成すると「おぉ…！」と思うのですが、1枚2枚適当に画像を作ってみるのと、実際の仕事に近い状況で画像を生成するのとでは、大きな差があります。
今回の記事では実際のお仕事に近い条件（縛り）を用意した状態で、ポピュラーな生成AIであるChatGPT, Google Gemini, Adobe Fireflyの３つを使い方から解説していきます。実際にWebデザインのお仕事で活用する際にも役立つ、各サービスの特徴が見えてきますよ。
今回使用する生成AI・画像生成の内容について
本記事では「ある程度デザインが出来ている状態のWebページに、テーマに沿った追加画像をAIで生成する」という、実際のお仕事に近いシチュエーションを想定して画像生成を試していきます。使用するのはWebデザイン×AIシリーズで度々登場している、架空の動物園サイトのWebページになります。
生成する画像について
ファーストビュー（カルーセル）のスライド２枚目。
舌を出しているキリンの顔が入っている画像部分を差し替えます。
以下のような想定で、3つの生成AIの基本の使い方をそれぞれ解説します。
- 2枚目のスライドでは「動物とのふれあいイベント」のイメージ画像を入れる
- 生成するのはPC用画像、画像は横長（アスペクト比 4：3）くらいで生成
- 画像のサイズ調整・スマホ向け画像作成は自分で行う
使い方確認を兼ねて画像を生成して、一番良かった画像に差し替えてみましょう！
どの生成AIを使う？
今回は、ChatGPT, Google Gemini, Adobe Fireflyの３を使っていきます。
無料かつWebブラウザ上で使用でき試しやすい、ポピュラーな生成AIである、2つの条件から決めました。
※プラン等により生成回数には限りがあります。
商用利用は可能か？
実際に仕事で使用するとなると、気になるのが「AIが生成した画像Webデザイン、商用Webページに使用して大丈夫か？」ですよね。
以下に各社の表用利用についてと利用規約・判断の参考になるリンク先をまとめました。
※生成AI自体や利用規約は時間とともに変りますので、各社の利用規約をご確認ください。
ChatGPT
利用規約の禁止事項に記述がないこと、以下の表記から商用利用や生成された画像の改変は問題ないと判断できます。
本コンテンツの所有権限 お客様とOpenAIの間において、適用法令で認められる範囲で、お客様は、（a）インプットの所有権限は保持し、（b）アウトプットについての権利を有するものとします。当社はアウトプットに関する権利、権原、及び利益がある場合、これらすべての権限をお客様に譲渡します。
ただし、同規約内には当社のサービスからのアウトプットの使用はお客様自身の責任
という表記も見られますので、生成された画像が著作権侵害にならないかはチェックする必要があります。
Google Gemini
Google Gemini で生成された画像も、商用利用・ビジネス利用は原則的には可能と考えられています。
ただし、この根拠はGoogleが発表している生成 AI の使用禁止に関するポリシー の中で、禁止事項として商用利用が挙げられていないこと。 商用利用が可能だと明確に言及もされておらずグレー寄りなことは否めませんので、気になる方は控えたほうが良いかもしれません。
また、生成された画像が使用しても問題ないものかを判断したうえで、使用する必要があります。
Adobe Firefly
今回使用する3つの生成AIの中で、最も安心してビジネスに使用できるのがAdobe Firefly。
ベータ版に搭載されているもの以外であれば、商用利用可能と明言されています。
一般に、生成AI機能からの出力は商業的に使用できます。ただし、アドビが生成AI機能のベータ版を商用利用できないと製品またはその他の場所で指定した場合、そのベータ版機能から生成された出力は個人使用のみを目的としており、商用利用することはできません。
https://www.adobe.com/jp/legal/licenses-terms/adobe-gen-ai-user-guidelines.html
また、Adobe社は生成した画像が法に触れるものにならないよう注意を払っているとのこと。「生成AIは微妙な部分が多くて怖い…」という場合は、最も安全性の高い画像生成AIと言えそうです。
Adobe Fireflyは、著作権や知的財産権を侵害するコンテンツを生成することがないよう開発され、安心して商用利用できるよう設計されています。
生成AIで画像を生成してみよう
では、三種類の生成AIで画像生成を試してみましょう。
ChatGPTの場合
まずはAIと言えば…くらい知名度の高いChatGPTで試してみましょう。
ChatGPTの画像生成には、OpenAIが開発した画像生成AI「DALL-E」が採用されています。
無料会員でもログインすると ツール > 画像を作成する が選択できます。
こちらを選択した状態で、作ってほしい画像の詳細（プロンプト）を入力します。
とりあえず、思いつくまま書いて試してみます。
様々な動物に触れることの出来る、動物園のイベントを考えています。
以下の条件で、イメージ画像を作成したい。
- 画像は横長長方形（アスペクト比 4：3）
- 写真のようなリアルな画像
- 画像内にテキストは入れない
- 子どもがライオンにタッチしているシーン
- ライオンにタッチする子どもを見守る両親
- 登場人物（子ども、両親）は日本人
スタイルは使いたいものが無ければ指定しなくてOK。
送信すると画像生成が始まり、しばらくすると生成された画像が表示されます。
うーん…。
横長長方形じゃないし、ライオンのサイズ感が変…ライオンが小さすぎますね。
こういう場合は、修正指示を追加で送ります。
正方形ではない画像を作ってほしい場合は、毎回指示に入れた方が良いです。
だいぶ良い感じになりました。
我々はWebデザイナーですから、多少の明るさ・色調などの調整は自分で直したほうが早くて綺麗にできる場合が多いです。GPTの画像生成、結構待ち時間長いんですよね。
イメージに近い画像が出来たら、ダウンロードして自分で調整しても良いでしょう。
画像のダウンロードは、生成された画像にマウスカーソルを重ねるとアイコンが出てきます。
◆ 参照する画像を添付することもできる
もしも「こんな感じの構図」というような参考画像がある場合は、その画像を添付して指示も出せます。
今回作りたいライオンにタッチ…なんて画像はないですが、似た感じのものをお試しで作成してみます。
画像元：unsplash.com
画像はドラッグアンドドロップで添付できます。
添付したような構図で、日本人の男の子と子供のライオンが並んでいる画像を生成してください。
■ 条件
- 横長の長方形（アスペクト比 4：3）で生成
- 写真のようなリアルな画像
- 画像内にテキストは入れない
- 男の子は日本人である
- ライオンは生後三か月くらい
- 男の子と子ライオンの大きさは、実際のサイズを考慮して変更する
わりと参考画像に忠実ではありますね。
場合により著作権等の問題もありますが、生成してほしい画像のイメージを事細かに文章化するよりかなり楽です。
ただ、ここからアレンジしていこうとすると…他のところも変わってしまうことがあるので注意です。
◆ Soraを使う場合
ChatGPTと紐づいているOpenAI製ツールに、動画生成AIのSoraがあります。
動画生成AIとは言われているんですが…実はSoraは画像も生成可能。
そして、画像生成であれば、無料会員（ChatGPT Free）でも1日3枚まで生成可能です。
ChatGPTのサイドバーからSoraに移動できます。
英語の画面が出てきますが、「Explore Sora」と書いてあるボタンを押せばOK。
画面下部にプロンプト入力＆生成内容を指定するボックスが表示されます。
それぞれのアイコンで指定できるのは以下のようなことです。
Soraも日本語に対応はしていますが、UIもまだ英語ですし…英語の方が精度は高めです。
英語かぁ…という方は、プロンプトをDeepLなどで翻訳するか、ChatGPTに作ってもらうと良いでしょう。私はよく良い感じの画像ができたときに、逆算的にGPTにプロンプトを考えてもらっています。
GPTが出してくれたプロンプト例を、必要に応じて修正します。
A realistic photograph of a Japanese family at a zoo.
The scene shows a young boy gently touching a 3-month-old lion cub,
while his smiling parents crouch nearby watching him closely.
The family is Japanese, wearing casual clothes,
with natural lighting and a warm, joyful atmosphere.
The composition is horizontal, aspect ratio 4:3,
with accurate proportions between the humans and the lion cub.
このプロンプトを、Soraのテキストボックスに貼り付けます。
（※aspect ratio 4:3はSoraのAspect ratioで近いものを選ぶので抜いています。）
Usernameの設定が出るので、あたりさわりのない名前を入れておきましょう。
画像生成が完了したら、上部のメニューバーに通知が表示されます。
映像生成専門だからか、英語プロンプトが効いたのか、ChatGPT上で生成した画像よりクオリティ高め。良い感じですね。
右上に表示されているアイコン、もしくはDキーを押してダウンロードしてください。
Google Gemini
次にGoogle Geminiを使ってみましょう。
Google Geminiで生成した画像には、右下に小さく透かし（ウォーターマーク）が入ります。
Googleアカウントでログインすると、下部でDeep Researchや画像（画像生成）などが選べるようになります。
ChatGPTの結果と合わせるために、ライオンは生後三か月設定に変えたプロンプトを送信します。
様々な動物に触れることの出来る、動物園のイベントを考えています。
以下の条件で、イメージ画像を作成したい。
- 画像サイズは横長長方形（アスペクト比 4：3）
- 写真のようなリアルな画像
- 画像内にテキストは入れない
- 子どもが生後三か月のライオンにタッチしているシーン
- 子どもの両親は、彼を微笑ましく見守っている
- 登場人物（子ども、両親）は日本人
- ライオンの大きさと、人間の大きさを忠実に再現してください。
承知しました…と出だけど、しばらく待っても画像が生成されない。
こういう時は、テキストでせっつくと生成開始してくれます。
いきなり良い感じの画像を作ってくれました。
生成させた画像にマウスカーソルを重ねると、ダウンロードができます。
せっかくなので、先ほどGPTに書いてもらった英語版プロンプトも入れてみます。
英語だといきなり画像生成が始まったうえに…生成完了までちょっと早いような。
生成された画像もめちゃくちゃ良い！
ただ…横長の指定は無視されましたね。
◆ 参照する画像を添付することもできる
Google Gemini も ChatGPT と同じようにドラッグアンドドロップで参考画像を添付できます。
ChatGPTと同じ画像・プロンプトで試してみました。
画像元：unsplash.com
添付したような構図で、日本人の男の子と子供のライオンが並んでいる画像を生成してください。
■ 条件
- 横長の長方形（アスペクト比 4：3）で生成
- 写真のようなリアルな画像
- 画像内にテキストは入れない
- 男の子は日本人である
- ライオンは生後三か月くらい
- 男の子と子ライオンの大きさは、実際のサイズを考慮して変更する
ChatGPTよりクオリティが高い。
更に追加で指示を入れると、そこだけ変えてくれます。素晴らしい！
◆ Google AI Studioを使う方も多い
実は上記の英語プロンプト、その後もサイズに対して指示を追加したのですが、元々Geminiの画像生成サイズが正方形のためか、私の英語力の問題か上手くいきませんでした。
Photoshopの生成拡張と組み合わせたら何とかなるので良いですけど…ちょっとモヤっとするなぁ、とか、更にクオリティの高い画像が欲しい…という場合はGoogle AI Studioの方で画像を生成するのがおすすめです。
Google AI Studioは、Googleが提供する生成AI開発者向けの実験・プロトタイピングツール。
ある程度は無料で（そしてブラウザ上で）Geminiや画像生成モデルImagenなどの最新モデルを試すことができます。
画像生成の場合は、Generate media > Imagen（記事作成時の最新版は4）を使う方が多いです。
↓ 同じプロンプトを送ってみた結果
Adobe Firefly
では最後、Adobe社の生成AIであるAdobe Fireflyを試します。
無料プランだと画像は25枚/月まで生成可能、Creative Cloud (CC)契約者はプランごとに毎月付与されるクレジットが使えます。
Adobe Firefly - テキストから画像生成
Chat GPT, Google Geminiのようなチャット画面とは異なり、左側に最初から設定パネルがあるのが特徴的です。
とりあえず今までと同じプロンプトを貼り付けて送信してみると…エラーになります。
もっと文章的に、生成してほしい画像を表現してみます。
写真のようなリアルな描写。動物園で6歳くらいの男の子が嬉しそうに子ライオンに触っているシーン。子どもの両親は、微笑ましそうに彼を見守っている。画像内の人間はすべて日本人であり、ライオンは生後3か月くらい。
画像内にテキストは入れず、ライオンと人間の大きさ（比率）を忠実に再現してください。
縦横比とコンテンツの種類を設定して送信。
プロンプトが認識されると、生成された画像が4つ表示されます。
個人的な体感で言いますと…Adobe Fireflyは当たり外れが結構激しい。
心霊写真みたいな画像や、プロンプトを無視した画像も結構出てきます。。
候補の中に良い画像があれば、選択してダウンロード。
ない場合は、再び「生成」を押して別の画像を生成します。
◆ Adobe Fireflyの難点、生成した画像の調整がしにくい
ChatGPTとGoogle Geminiは、一度生成された画像に対して「〇〇を変えて」という注文ができました。
Adobe Fireflyはこのように、AIに指示を出しながら画像を調整していくことができません。
生成された画像の左上に 編集オプション がありますが、例えば「類似の項目を生成」を選択しても独自判断でバリエーションが生成されるだけ。どこを変えてほしいなどの指示は入れられないですし、デモの場合は子ライオンがすべて犬に変えられてしまいました。大きさと色で判定されているのか…。
画像内要素や色などの変更は、Fireflyではなく、同社ソフトのPhotoshopと連携して「生成塗りつぶし」で対応しろということなのかもしれませんね。
ちなみに、 編集オプション > 構成を参照として使用 もあります。ただ、こちらも強度MAXにして実行しても「どこを参照したの？」という画像が出来上がってきます。うーん…。
作った画像を入れてみよう
これでChatGPT, Google Gemini, Adobe Fireflyで作った生成画像が出そろいました。 一番イメージに近い、もしくはファーストビューとして映えそうな画像を、素材HTMLのファーストビュー（スライダー）に入れ込んでみてください。
文字と重なる部分を作る場合は、Photoshopの生成拡張を使うと便利ですよ！
まとめ
全体的に見て、Google Geminiの画像生成が最もクオリティが高い結果になりました。 ただしGeminiの場合は右下に透かしが入るので、嫌な場合はChatGPTといったところでしょうか。
最初にご紹介した通り、著作権などの問題が気になる方は安全性の高いAdobe Fireflyが良いと思います。
今回はあまり良いところが無かったAdobe Fireflyですが、ベクター生成が出来たり、良くも悪くもAdobeっぽいグラフィカルな表現が得意だったりします。ある意味では個性が強いんですね。使いどころによっては役立つので、それぞれのアプリをいろいろな条件で試してみてください。
まずは無料で7講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
9月14日まで