生成AIツールは実際Web制作の現場でどう活用できるのか？

生成AIとは

生成AIとは、学習機能を駆使しテキストや画像、動画などのコンテンツを生成できるAI（人工知能）です。ジェネレーティブAIとも呼ばれています。従来のAIはパターン化された行動を活用し予測や特定、自動化を目的に活用されるのに対し、生成AIは学習した内容を活かして、新しいコンテンツの生成や創造を目的としているのが特徴です。

近年リリースされた代表的な生成AIに、「ChatGPT」と「Adobe Sensei」があります。それぞれの生成AIの特徴について解説します。

特に有名な「ChatGPT」

「ChatGPT」とは、アメリカのOpenAI社がリリースしたテキスト生成AIです。プロンプトと呼ばれる、フォームに入力した文字列を送信するとAIが内容を解析し、自動的にテキストで答えを返します。プロンプトは、ある事柄に関する質問へ回答するのはもちろん、翻訳、物語やプログラミングコードの生成、文章の校正にも対応可能です。

従来のテキスト生成AIよりも高精度で結果を返せるのがChatGPTのすぐれた点ですが、間違った知識や回答を返すこともあります。

制作の現場ではお馴染みの「Adobe Sensei」

「Adobe sensei」とは、Web制作やデザインなどのクリエイティブに欠かせないツールをリリースしているAdobe社のAI技術です。Adobe senseiに蓄積された学習機能を活用し、PhotoshopやIllustratorでの作業の簡略化、効率化につながっています。特にAIの作業の精度は年々上がっています。ただしAdobeのバージョンが異なるツールやシステム同士でデータのやり取りを行う場合、互換性が低く正確なデータのやり取りができないという問題があります。

WebサイトのコーディングでChatGPTを役立てた実例

Webサイト制作では、デザイナーの作ったラフをホームページとして起こす「コーディング」という作業が必要です。近年ではアニメーションを取り入れた動きのあるWebサイトが主流のため、ホームページの実装は時間を要するようになりました。

ChatGPTはプログラムのコード生成も可能です。ChatGPTをWebサイト制作のコーディングに活用した実例を紹介します。

実例:ボタンアニメーションの実装

以下のボタンアニメーションを実装するコーディングをChatGPTで生成した事例です。

「画面の右端に設置」「ボタンを押すとふわっとメニューが出る」「メニューはボタンの上に表示」「メニューが出ている間は、ボタンの表示は×になり、押すとメニューが消える」

ChatGPTが出力したコードでできたボタンアニメーションが以下の通りです。

See the Pen Button by Chat GPT by onionnews (@onionnews) on CodePen.

ChatGPTはコーディングの補助として最適

Web制作のコーディングの補助としてChatGPTを活用した実例もあります。たとえば前述のように動きのあるアニメーションを実装するためのコーディングだけでなく「CSSでかわいい装飾を作りたい」などの敢然としたデザインのコーディング生成も可能です。コードの検索や記述をする時間を省略できるため、コーディング作業の効率化につながります。現在制作しているものに対する「動きを付けたい」「色を変えたい」といった要望にも対応可能です。

【結論】ChatGPTだけではコーダーの代わりまでとはいかない

ChatGPTはWebサイト制作のコーディング作成も可能ですが、すべてのコーディングをChatGPTに任せることはできません。たとえばChatGPTが生成したコードを入れても期待通りの動きにならない、デザインが予測していたものと違った、といった場合もあります。

コーディングには専門的な用語や知識も必要です。ChatGPTはあくまでコーディングの補助的な作業に使うにとどまっていると言えるでしょう。

画像編集に革命！PhotoshopやIllustratorでの生成AIの活用

AdobeのPhotoshopやIllustratorには「Adobe Sensei」が搭載されているため、PhotoshopやIllustratorを画像生成AIとして活用することも可能になりました。たとえばPhotoshopには、テキストで指示した画像を作り出せる「生成塗りつぶし」が新機能として搭載されています。

PhotoshopやIllustratorでの生成AIの活用実例を解説します。

PhotoshopでのAI生成の実例

Photoshopの「生成塗りつぶし」を活用した事例です。画像や写真に物足りなさがあるときや、希望通りの写真素材が見つからないときに、任意の場所にテキストを入力すると、内容に応じて画像を生成してくれます。

たとえば以下の写真の右の空白部分に、雰囲気に合ったドライフラワーの置物を付け加えたい場合は

空白部分を選択し「ドライフラワー　飾り　俯瞰」と入力します。その結果、以下の画像が出力されました。

ただドライフラワーの置物が追加されただけでなく、下地や写真の色味との兼ね合いもしっかり考慮され、違和感のない画像として生成されています。まだ何もない状態から希望に沿った完璧な画像生成は不可能であるものの、「ある要素を付け足す」「不要な要素を削除する」といった作業には十分対応できます。

Illustratorにも生成AIが搭載！使ってみました

画像生成AIの機能はIllustratorにも搭載されています。Illustratorの生成AIの活用例を紹介します。

まず、以下のAdobeから提供されたサンプルの画像を使用します。

画像内の指定した範囲に「焚き火、キャンプ、パソコンで仕事をする人」とテキストで入力します。すると、その絵のテイストに合ったイラストを出力してくれます。

3パターンほどイラストを出力してくれるので、複数のバリエーションから画像や雰囲気に合うものを比較して選ぶこともできます。ただし追加されたイラストは遠目で見る分には問題はなさそうに見えるものの、拡大してみると荒い部分もあります。

たとえば足が3本になっていたり、作業するテーブルの下に焚き火があり実際には危険でありえない状況となっていたりと、細かい部分ではまだ実用レベルには達していないことが分かります。

けれども大雑把な部分はAIで出力し、細かい部分は自分の手で修正や調整加えるなどで十分活用できます。また、より細かいテキストを指定すれば制度の高い画像の生成ができる可能性があるため、選択範囲のプロンプトを記述する能力が求められるようになるかもしれません。これはIllustratorやPhotoshopだけでなく、ChatGPTを活用する際にも同じことが言えるでしょう。

【結論】2023年時点ではChatGPTだけではWebデザイナーの代わりまでとはいかない

IT技術の進歩により、生成AIは飛躍的に進化を遂げました。今回はプロンプトによる画像生成でAIを活用したため、一部にはAI特有の粗が目立つ箇所もありました。けれども、「一部を足す」「不要なものを削除する」といった作業の精度は高く、画像のクリエイティブの面で生成AIを活用すれば、作業の効率化につながると言えるでしょう。

結論として、AIは機械学習によって蓄積した情報を活用し、何かを組みたてて作るのは得意でも、0から何かを作り出す創造的なことは苦手です。そのため、文章や画像を新しく作成する場合、人間と同等の作業と出来栄えを求めるのは難しいと言えるでしょう。便利なツールであることは間違いないため、生成AIは人間がより良いものを作っていくための補助的な位置づけと言えます。

Web制作の現場における生成AIツールについて：まとめ

代表的な生成AIの概要と、実際に生成AIをWeb制作や画像制作に活用した実例を紹介しました。生成AIは膨大な情報の蓄積と活用による機械学習を得意としています。そのため、Web制作の面でも生成AIが活用されることも増えました。ただし、生成AIのみで0からホームページを作ったり、改修したりといったことはできません。先ほど紹介したWebサイトのコーディングの生成や画像の生成も、あくまで補助的な役割を果たすに過ぎないでしょう。

生成AIは、例えるなら「とても真面目でテストの点は良いが、想像力と応用力に欠けるアシスタントを雇っている」感覚と言えるかもしれません。今後生成AIの技術はより進歩していくものの、細やかな配慮、臨機応変、クライアントの意向の読み取り、暖かなコミュニケーションなどは、人間にしかできません。生成AIはWeb制作の補助的な役割は果たせるものの、実務レベルではまだまだメインのクリエイターの代わりにはなり得ないと言えるでしょう。Web制作にはまだまだ人の手が必要です。

これからホームページの制作やリニューアルを検討している場合には、オニオン新聞社の運営する「チームNext!」にぜひご相談ください。チームNext!では、生成AIをはじめとした新たなテクノロジーも取り入れながら最大限の成果につながるホームページやランディングページを制作してきた実績があります。ぜひお気軽にご相談ください。