YOICHIRO
こんにちは！突然ですが、Webデザインで使う画像素材（イラストや背景画像など）を探すのに滅茶苦茶時間が掛かっていませんか？今日はWebデザインで使う画像素材を、これまでの画像素材サイトから探してくる方法ではなく、Googleの画像生成AIを使って生成することでWEBデザインの作成をより効率化する方法について、分り易くご紹介します。Ｗｅｂデザイン・ブログのバナー・ＳＮＳのヘッダーなど、応用が利く方法なので、Webデザイナーの方以外の方で生成AIに興味がある方も、是非最後まで読んでみて下さい。
「画像探しの旅」に無駄な時間をかけるのはやめよう！
これまで広告バナーやホームページのＦＶ、その他ブログのアイキャッチ画像やＳＮＳのヘッダーなどをデザインを作る時に、「使える画像探し」に途方もない時間を使い、気が付いたらAdobestockで1枚の素材を探すのに1時間くらい時間を掛けてしまったことってないでしょうか？他にも画像素材サイトから、ページ内で使う画像のイメージはなるべく統一させたいのですが、色々なサイトから拾ってきた画像やイラストを取捨選択して使っていくと、トンマナが違っていたりして、ページ内のイメージがちぐはぐになり、すごく素人臭くなってしまいます。かといって、同じイメージの物で探そうとすると、いくら探しても見つからない…そこで素材探しを断念してしまうことは無いでしょうか？実は、これまでＷｅｂデザインをするうえで、一枚の画像を選ぶのに、デザインをする人は、膨大な時間を使ってきていました。そして、それは今も多くの方が同じように沢山の時間をかけ、一枚のデザインを仕上げる為に、画像探しの旅を行っております。もうこんな無駄な時間を使うのはやめたいですよね！！
前置きが長くなってしまいましたが、今日は「画像が見つからない」「同じイメージの画像が見つからない」といったWebデザイナーのジレンマをAIの力を使って解決する方法についてお伝えしたいと思います。最近私はこの方法を使うことで、これまでの「画像探し」に掛かる時間がおそらく1/10以下になったと思っています（正確に測ったわけでは有りませんが…）。さらにこちらの方法は無料で使えますし、使い方さえ覚えれば、滅茶苦茶応用が利きます。さて早速ですがその方法をお伝えしていきます。
その前に、是非こちらの記事の内容がちょっとでも為になりましたら、是非SNSやブログ等で紹介してくださいね！！またメンションを付けて拡散してくれたら、なるべく私の方でも取り上げさせて頂きます。
結論、Web画像素材は「探す」よりAIで「作る」方が早いっていう話
最初に結論から申し上げると、これから私が説明する方法は、Webデザインで使う画像素材を従来の方法で素材サイトから『探す』のでは無く、AI画像生成技術を使って『作る』方法です。近年AIの技術がものすごくハイスピードで進化しており、特に画像生成や動画生成の技術というのは、1年前と今では桁違いにレベルアップしています。そして使い方も簡単になっています。今ではAIを使って簡単な呪文（プロンプトという）を入力するだけで、誰でも簡単に画像を生成することが出来る様になっています。
例えば、『PCを操作している女性の画像』が欲しかったら、プロンプトを入力するだけで以下のような画像を生成することが出来ます。
他にも、例えば『京都の祇園で舞子さんがこちらを振り向いているポーズ』の画像が欲しかったら、そのようにプロンプトを入力するだけで、以下のような画像を生成することが出来ます。
これまで、このようにシーンを指定したかったり、人物の指定をしたかったり、服装の指定（色や形含む）をしたかったり、ポーズの指定をしていしたかったり、デザインの目的とスペースに合わせた画像を選定する為には、途方もないくらいの時間が掛かっていたのですが、今では生成したい画像のプロンプトを指定するだけで、あっという間にデザインに使える画像素材を『作る』ことが出来ます。さらに例えば、下の画像の様に一枚目のAIで生成したデザインにコピーを載せて、バナー広告を作ることが出来ます。
架空のWebデザイン講座の広告バナーですが、こちらＡＩで画像生成するのに5分程度、そのあとテキストを入れるのに5分、計10分くらいで作成しています。今回は画像生成の話がメインなので、バナーのコピーの載せ方といった話はしないのですが、あっという間にデザインを一つ作ることが出来ます。これまで、この『ＰＣを操作している女性』を探すのに使っていた時間やコストを、ＡＩを使えば一瞬で削減することが出来ます。もちろんこのAI生成画像を使えば、広告バナー以外にも、ブログのアイキャッチ画像やイラスト生成、SNSの投稿画像など、色々な画像を作ることが出来ます。
さて、それでは次の章から実際に僕が良く使っているAI画像生成ツールの紹介と使い方のレクチャーをしていきます。
おススメ画像生成ツール、Google『ImageFX』
今私が個人的に一番お勧めする画像生成ツールがGoogleが開発した『ImageFX』です。ImageFXは、最新のAI画像生成ツールで、テキストプロンプトを基に高品質な画像を生成することができます。このツールは、特に初心者でも簡単に操作できる直感的なインターフェースを備えており、Googleアカウントを持っていれば誰でも無料で利用可能です。これまでAIで画像生成が出来るツールを色々と触ってきましたが、複雑な環境構築等は不要で、簡単なプロンプトの入力だけで、高品質な画像を無料で作ることが出来るので、かなり革命的なツールだと思います。
先日ネイルサロンのHPを制作していた際に、トップページのFVに、大手の資〇堂のHPの様にFVで女優の画像を使って『ネイルを綺麗にすると、この女優さんの様に綺麗になりますよー』ということをビジュアルで伝えられるようにしたいなーと思い、FVの背景画像としていい素材が無いかをいつも通りAdobeStock（https://stock.adobe.com/jp/）の無料画像の中で良い画像が無いかなーと探していたのですが、中々日本人で、ネイルをしているのが分かる写真で、さらにFVなので、テキストが入るコピースペースがある画像、という風に探していくと、欲しい画像が見つからずに、困ってしまいましたが、このImageFXで、ネイルをしている日本人女性を生成したら、一発で下の画像のようなイメージにピッタリの画像を生成することが出来、一瞬で問題解決をすることが出来ました。
Google画像生成AI『ImageFX』の使い方
では、早速ImageFXの使い方を説明します。
まずは、以下の『ImageFX』のサイトにアクセスします。
https://aitestkitchen.withgoogle.com/ja/tools/image-fx
Googleのアカウントでログインが出来るので、ボタンをクリックしてログインします。
※もしGoogleのアカウントが無い方は作成してください。
作製が出来たら、下の画像のページになります。
左側の入力欄に、プロンプトを入力します。
今回は試しに、『Man walking around town（街を散歩する男性）』と入力します。※プロンプトは英語で入力します。翻訳はGoogle翻訳やchatGPTを使ってください。プロンプトの入力が出来たら、右下のボタンを押します。
そうすると、下の画像の様にプロンプトで入力した画像が生成されます。外人のおじさんが街で散歩している画像が4枚生成されました。
気に入った画像が生成されたら、画像をホバーすると出てくるダウンロードアイコンをクリックすれば、自分のPCに画像をダウンロードすることが出来ます。
基本的な『ImageFX』の使い方は以上です。
プロンプトを入力→生成ボタンを押す→欲しい画像をダウンロード。
3ステップだけなので、とても簡単ですね。
実務での使い方（より詳細はプロンプトの入力）
次に、具体的にどのように実務で使えるのかということを説明していきます。先ほどのプロンプトはすごくざっくりとしていたので、今度は実務でも使える様にプロンプトをより詳細に入力してい行きます。
プロンプトはなるべく詳細に入力（ImageFXにどういう画像を生成したいか伝える）した方が、より精度の高い画像を生成することが出来るので、今回は、例えば、実務で、ホストが渋谷で花束とスーツケースをもって歩いているシーンの画像が欲しくなっと仮定して、先ほどの『街を散歩する男性』を、もっと細かくプロンプトを指定してあげます。
例えば、今回は以下の様に、
『A young Japanese man in his 20s with long blonde hair, wearing a white tuxedo, walking through the streets of Shibuya. He is holding a bouquet of roses in his left hand and carrying a suitcase in his right hand. The vibrant urban backdrop of Shibuya, with bustling crowds, neon signs, and modern architecture, creates a striking contrast to his formal attire. The scene captures a mix of elegance and city life.（20代、白いタキシードを着た金髪のロングヘアの日本人男性が、渋谷の街を歩いている、左手にバラの花束を持ち、右手にはスーツケースを持っている）』
というようにより詳細なプロンプトを入力して生成してみます。
そうすると以下の金髪のホストが片手にバラの花束、片手にスーツケースをもった画像が生成されました。（どんなシーンだｗ）
左上の画像をダウンロードするとこんなイメージとなります。
ぶっちゃけ今回のシーンはどうでもいいのですが、見て頂きたいのはかなり入力したプロンプトに忠実にかなり精度の高い画像が生成出来たと思いませんか？これまでAIで画像を生成すると、中々ここまでクオリティの高い画像を生成するのは難しかったです。特に人物の画像を生成すると、どうしてもAIで生成したのが分ってしまう画像だったり、手先がおかしくなったりと使い勝手が難しかったのですが、このImageFXは、これから初めてAIを使う方でも、簡単に使えるので、Webデザイン以外でも、何かWebで画像が必要となったときに、画像を探すのではなく、自分で使いたい画像をImageFXを使って生成する様にしたら、これまでWeb画像を探すのに使っていた時間をかなり短縮できると思います。
更に驚きの修正機能
更にImageFXの驚きの機能を紹介します。それは、先ほど生成した画像の、例えば、今は左手にスーツケースを持っているのですが、スーツケースを消したい時や、スーツケース以外の物に修正したいときに、修正をおこなうことが出来ます。そちらのやり方についてご説明します。
まずは、編集したい画像をホバーして出てくる画像を編集するボタンを押します。
そうすると、以下の画面に切り替わるので、ブラシで画像の編集したいエリアを塗りつぶします。
今回はスーツケースを消してみたいと思うので、スーツケースをブラシで塗りつぶし、プロンプト欄にスーツケースを消す、というプロンプトを英語で入力して、生成ボタンを押します。
そうすると、編集が始まり、以下のように左手にはスーツケースを持っていない画像が生成されました。このように、追加で画像を編集することが出来るので、様々なことが出来る様になってきます。
まとめ
いかがだったでしょうか？今回は画像生成AIの『ImageFX』を使ってWeb画像を生成する方法について説明させて頂きました。今回は基本的な生成方法についてでしたが、プロンプトを色々と研究すれば、もっといろいろな画像を生成することが出来る様になります。自分自身これまでWeb画像を探すことに、滅茶苦茶時間を使っていたので、今回のAI生成画像ツールの『ImageFX』を使って、同じようにWeb画像探しの旅に無駄な時間を掛けていた方の時短になれば嬉しく思います。
現在色々なAIツールが出てきているので、こういった便利なAIツールをこれからもどんどん紹介していこうと思いますので、もしよかったらTwitterのフォローやブログのフォローを宜しくお願いいたします。
ではまた！