この記事について
この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。
emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。
生成塗りつぶしとは
生成塗りつぶしとは、2023年6月に発表されたPhotoshopの新機能です。
発表された当初は［ジェネレーティブ塗りつぶし］という呼び方をされていましたが、この記事の執筆時点では［生成塗りつぶし］という名前に変更になっています。
この新機能はPhotoshopデスクトップ(Beta)版でのみ使用できる機能なので、通常版のPhotoshopとは別にBeta版のダウンロードが必要です。
Photoshopデスクトップ(Beta)版のダウンロード方法
Photoshop（Beta）アプリを入手のリンク先からダウンロード可能です。
生成塗りつぶしでできること
今までも周囲の画像を参考に塗りつぶすことができる［コンテンツに応じた塗りつぶし］がありましたが、生成塗りつぶしとの違いはどこでしょうか。
［コンテンツに応じた塗りつぶし］は、［コピースタンプツール］のように同じ画像内の別の部分をコピーして選択した部分を塗りつぶしますが、［生成塗りつぶし］では生成したい内容をテキストプロンプトで指示して塗りつぶすことができます。
そのため、指定した内容で生成されたもので塗りつぶされるので、周囲と関連のないものの描画も可能です。
テキストプロンプトで指示しない場合は周囲に合わせて生成された内容で塗りつぶすこともできるので、画像の端がもう少しあったら…など足りない部分を拡張した描画もできます。
生成塗りつぶしはWeb制作の現場で実際に使えるのか
生成塗りつぶしでできることを見る限りとても便利そうですが、そこで気になるのが、Web制作の現場で実際に使えるのかです。
2023年6月現在では、生成塗りつぶしはPhotoshopのBeta版でのみ使用できる機能ですので、商用には使用できません。
では、Beta版ではなく正式に使用できるようになったときにWeb制作の現場ではどのような使い方ができるのでしょうか。使えそうな場面と使う際に注意が必要な場面を生成塗りつぶしの使用方法も併せて解説します。
Web制作の現場で使用する時に使えそうな場面
何もない状態から素材を作成する
実際にWeb制作で使えそうな場面として、「何もない状態から素材を作成する」場合にとても便利なのではないか。と思います。
素材を探さなくても自分のイメージしているものをテキストプロンプトで指示して素材を作成できます。実際に以下の例で生成してみます。
- 夜景
- 和紙テクスチャ
夜景
背景で使用できるような夜景の画像を生成してみます。
今回はアートボードのサイズは1920×1080pxで作業を進めていきます。
生成したい範囲を選択します。今回は［ウィンドウ］＞［すべてを選択］します。
アートボードの下にコンテキストタスクバーが表示され、［生成塗りつぶし］ボタンが表示されます。
［生成塗りつぶし］ボタンをクリックして、以下のようなダイアログボックスが表示された場合はガイドラインを確認し、［同意する］を選択して次に進みます。
コンテキストタスクバー内のプロンプト入力エリアに生成したい内容を英語で入力します。
入力したら［生成］ボタンをクリックして生成されるのを待ちます。
※追記: この記事を執筆された後、Adobe Fireflyは日本語のプロンプトに対応したと発表がありました。しかし実際の挙動を見ると、日本語を単語に分割して英語に直訳しているようで、意図しないものが生成されることもあります。
現時点では、日本語のプロンプトをそのまま入力するのではなく、DeepL翻訳 などで自然な英語に翻訳してから入力した方が精度の高いものが生成できる場合が多いようです。
一度で生成される画像は3つのバリエーションがあり、プロパティパネルでプレビューで確認できます。
コンテキストバー内でもプレビューの確認が可能です。
イメージとちょっと違う。もう少し違うバリエーションも見てみたい。という場合はこのまま［生成］ボタンをクリックするとさらに3つのバリエーションの画像が生成されます。
また、指示内容を変更をして生成も可能です。
プロンプトの入力エリアの「night view」を「night sky」に変更して生成してみました。
プロパティのバリエーションの部分に生成された夜空の画像が追加になり、コンテキストタスクバーでも枚数が増えたことを確認できます。
生成された画像は別レイヤーで作成されます。
和紙テクスチャ
Webサイトのセクションの背景やバナーの背景などで使用できるような素材も、生成塗りつぶしで作成できます。
前述の夜景と同様にコンテキストタスクバーに生成したい内容を英語で入力します。
「beige color washi paper」
3つのバリエーションの和紙の画像が生成されました。
写真素材の不要な部分を消す
そのほかに使えそうなものとして、写真素材にある不要な部分を消す場合です。
ベンチに座っている人物を消す
画像から消したいものがある場合は、消したいものを選択し、プロンプトを指定せずに［生成］ボタンをクリックします。
選択時は、人物の部分を丁寧に選択するよりも、馴染ませたい部分も含んだ状態で選択する方がうまく生成されます。
生成された3つのバリエーションを見ると、ベンチの背もたれの金具がなくなっていたり、奥の木々の部分など細かい部分に違いがあるのがわかります。
生成によってなくなってしまった金具も、別レイヤーとなっているので、元の素材写真にある金具をコピースタンプツールを使ってブラシで追加できます。
使用した素材（Adobe Stock無料素材）
作成者 Pixel-Shot：Young man relaxing on wooden bench in park
壁から蔦の葉を消す
石壁の隙間に埋もれながら生えている蔦の葉も、生成塗りつぶしで簡単に消すことができます。
前述のベンチに座っている人を消す時と同様に、蔦の部分だけ綺麗に選択するよりも、蔦と馴染ませたい部分を選択します。
蔦の部分がなくなり、蔦が生えていた部分の石壁が生成されました。
生成された3つのバリエーションを見ていくと、少しずつ石のサイズや色が違っています。
使用した素材（Adobe Stock無料素材）
作成者 ChenPG：wall with green moss background
Web制作の現場で使用する時に注意が必要な場面
いくつか生成塗りつぶしを試したところ、商用利用可能となった場合にWeb制作の現場で利用するには注意が必要だと感じました。
何もないところから素材を生成したり、写真素材にあったものを消したりと便利な生成塗りつぶしですが、実際に試してみると、消した部分で生成されているところは、それっぽくなじむように塗りつぶされています。
このことから、以下の場合は実際のWeb制作で使用しない方がよいのでは。と考えます。
- 支給された人物写真の頭や腕が切れているのを補填したい
- 支給された建物や製品などの写真が途中で切れている
上記のような場面で生成塗りつぶしを使用すれば、それっぽく生成されるので要望は叶います。
しかし、支給された写真に対して生成塗りつぶしを使用してしまうと、それっぽく仕上がるだけで、実際とは違うものを生成したことになります。このことがWebサイトの内容が信用できない。ということにも繋がるかもしれません。
また、何もないところから生成して素材として使用する場合でも、注意が必要です。
例えば、
- 店舗や会社のWebサイトに存在しない街並みの画像を使用していた
- 生成した画像が既にある写真や素材とあまりにも似てしまっていた
など、実際にある店舗の周辺の景色が違っていると、不信感に繋がることがあるかもしれません。
生成塗りつぶしの機能はPhotoshopの正式版に採用される時が楽しみですが、以上のことを踏まえて利用することが必要です。
