生成AIをwebARコンテンツ開発に活用してみたーMagical Forest制作裏話
はじめに
Niantic Innovation Labs Programの一員に選ばれました✨
Designiumが、Niantic社をメンターとしてNiantic Innovation Labs Programの一社として選出されました。モバイルとヘッドセットに対応したwebARコンテンツを約10週間で8th wallで開発、制作することに!
そのプログラムで誕生したのが、現実とファンタジーの世界が混じった世界観を体験できる「Magical Forest」です。モバイル端末とMeta Questに対応していて、Webブラウザ上で簡単にARを体験できます。
Magical Forestについて
プレイヤーは魔法の本の住人である小人の妖精「Kobbito」と一緒に、現実社会に出現した魔法の森「Magical Forest」で、魔法の本から逃げ出した虫を探し出すミッションが与えられます。魔法の森では、Kobbitoが歩いた場所に芽吹く不思議な植物や、魔法のパワーを使えるスペルカードなどが登場。プレイヤーは日常空間にいながら、ARの力でファンタジーの世界に足を踏み入れることができます。
生成AIを活用した制作の裏話
Designiumではメンバーそれぞれが積極的にAIツールを試しています。この「Magical Forest」では実験的に、企画からデザイン素材の制作まで、AIツールを活用しながらプロジェクトを進めていきました。
この記事では、生成AIを活用した制作の裏話をデザイナーのkosuがまとめてみました。はじめにAIチャットサービス「ChatGPT」とブレストして企画を詰めてみた話、次にデザイナー目線での画像生成AI「Midjourney」の活用法、最後に音声生成AI「Eleven Labs」でのナレーションの制作について、それぞれ実例を通して紹介します!
Chat GPTとブレストして企画を詰めてみた
体験フローの軸と、ベーシックなプロトタイプで体験の一部(kobbitoが虫をつかまえる、森の中を歩く部分など)が実装された初期段階で、ストーリー設定と体験内容を肉付けしていきました。(Desginiumチームはプロトタイプを作るのがとっても早いです✨)
そこでアイデアを出すのに活用したのがChatGPT(GPT-4)です。
体験内容を考える
まずはChatGPTに体験内容を提示。そこから企画内容を膨らませて、虫を捕まえる以外に楽しめる要素を加えるためのアイデアを出してもらいました。
ChatGPTから出してもらった提案の一部はこんな感じです。
気になった項目の具体例をどんどん出してもらいます。
対話の返答を見て必要があれば質問に指示を追加したりしてアイデア出しを繰り返していきます。
何度か質問を繰り返すうちに、こんな感じのアイデアがChatGPTから提案されました。もちろんすべてが技術的に可能なものではないので、使えそうなものを選別して会話を誘導していきます。
アイテムを使用して虫を捕まえる「ARアイテムの組み合わせ」は体験に組み込めそうで魔法の世界観とも合っていたので、このアイデアに絞ってさらに具体例を出してもらいました。
具体的なアイテムが出てきたところで、開発担当者に技術的にどれが実装可能かどうかを相談しました。工数も判断材料に入れて、ChatGPTの案を元に下記の仕様方針を決定しました。
ストーリ背景を考える
次に、ストーリー背景をChatGPTと一緒に考えます。
方向性が気に入ったものをさらに具体的にしてもらいます。
提案された内容をそのままChatGPTに送って、どうしたらさらに魅力的なストーリーになるか聞いてみたりしました。その中でこんなアドバイスももらったりしました。
具体例を尋ねるとこんな返答がきました。
さらに質問を変えながら具体案をもらったり、魔法の森についての設定案を提案してもらったりしました。
質問の仕方を変えて、魔法の森の世界がなんだったら面白いですか?と尋ねてみたらこんな返答ももらいました。
自分では思いつかないような案が出てきて面白いです。
ストーリーのイメージがまとまってきたら、今までのやりとりで出てきたアイデア同士を組み合わせたり、仕様と辻褄が合うように手動で設定やストーリーを修正。最後にそれをchatGPTに共有して綺麗にまとめ直してもらいました。調整して出来上がったストーリー背景がこちらです。
まとめ
このようにして生まれた体験内容とストーリ背景を基盤に開発を進めていきました。これらを社内&Nianticからのフィードバックをもとに随時内容を修正調整して、最終的な体験が完成しました。
ChatGPTとブレストすることによって、一人では思いつかないようなアイデアをもらえて、さらに同時に自分の頭を整理しながら企画を詰めることができました。次の章からは、制作過程に移ります!
Midjourneyで生成した素材を活用してみた
ここからはデザイナー目線でMidjourneyで生成した画像をどうプロジェクトで活用したかを紹介していきます。
3Dテクスチャ編
ゲーム内では魔法の森でKobbitoと不思議な柄をした虫たちと出会うことができます。そのKobbitoのコスチュームと虫の柄をMidjourneyで生成して3Dモデルのテクスチャとして展開させました。
STEP 1. 画像生成
虫の柄
はじめは「Polka dots」という単語をプロンプトに入れて模様を生成してみましたが、パターンが細かかったり規則的で綺麗すぎて虫の模様として使用するには違和感があり、単語を変えたりして方向性を探りました。
また、「--no」 で生成画像内に含んでほしくないものを指定することができます。「insect surface pattern」というワードを使用しているからか、虫の手足のようなパーツが柄に出現することがあったのですが、「--no insect body」 を使用することでことで避けることができました。
最終的に「strong distortion dots」というワードを入れてから大分イメージに近づきました。生成AIを活用することで思ってもみない柄のパターンを出すことができて面白かったです。
Kobbitoの洋服もつくってみた
Kobbitoの洋服用にマーブル模様のテクスチャを作りたかったのですが、単に「Marble」の単語だけだと淡い感じの色合いであまり目立たちませんでした。マーブル模様をなにか別の言い換え出来るかをいろいろ試したら、「like a amoeba」で上手くいきました。このように、単語の言い回しで生成結果が左右されるので、言葉の発想力が必要になってくると思います。
STEP 2. 3Dモデルに反映
生成した画像を虫の3Dモデルに反映します。
今回の虫のモデルにおいては生成した画像をそのままテクスチャとして貼り付けることで多様な虫のビジュアルを作成することが出来ました。今回は使用しませんでしたが「-- tile」のプロンプトを使うとシームレスなテクスチャが作れます。
Kobbitoの場合は、そのままでは使えなかったのでUVに合わせて画像を切り貼りして編集する作業が必要でした。しかし、1から服のデザインを描き込んでビジュアルを作成する手間と比べると、格段に効率的でした。
スペルカード編
ChatGPT編で決めたアイデアのスペルカードのデザインに、Midjourneyで生成した画像を活用しました。
今回必要なアイテムの素材は下記の二つでした。
・まほうのきのこ:虫を惹きつけるきのこ
・まほうのライト:透明な虫が見えるようになるライト(実際のゲーム上のライトはKobbitoの後を漂いながらついてくる光の玉のような見た目をしています)
STEP 1. 画像生成
まほうのきのこ
まずは簡単そうなきのこからはじめます。初期は毒々しいきのこだったのが、いろいろなプロンプトを繰り返し試していく中で、最終的にゲームアイテム風のポップなきのこを生成することができました。
画像を1枚生成されるのにかかる待ち時間が地味にストレスだったので、1枚の絵の中に複数のアイテム画像が生成される「set items」や「game assets」を使用しました。↑の画像を見てもらえるとわかる通り、1回の生成できのこのデザインが選び放題なので効率的です。
素材として使用したい画像が決まったら、使用想定サイズに合わせて解像度をあげます。Midjourneyでは「Upscale」ボタンを押すことで、最大4096x4096pxまで解像度を上げられます。
まほうのライト
「まほうのライト」の方は思い描いているイメージがなかなか生成されず難航しました。ゲーム内のイメージとかけ離れないように浮いている球体のような見た目にしたかったのですが、「floating」という単語を使っても浮いているようには見えない見た目のアイテムばかりが生成されてしまいました。
また、ガラスや光っぽい表現が強いイラストは、画像から切り取って素材化するときに扱いにくいので避けることにしました。光の玉から連想する単語を試してみて、最終的に「crystal」という言葉を使って生成されたアイテムから光の玉っぽく見えそうなものを選出しました。
STEP 2. Photshopでレタッチ
生成されたきのことライトの画像を2つ並べると、きのこは3D風でライトは2Dという見た目の違いが気になったので、Photoshopでストロークなどのエフェクトをかけてテイストの違いを緩和させました。色味や明るさも調整して2つのアイテムが並んでも違和感ない見た目になるように調整します。このような細かい微修正はMidjourneyのプロンプトで調整するよりもPhotoshopで手動で編集した方が圧倒的に早く思い通りにできます。
STEP 3. デザイン追加
背景とテキストなどを追加して、スペルカードの完成です!
イラスト素材の色味は背景のカラーに合わせてさらに微調整しました。
キービジュアル編
次はキービジュアルです!この画像はMidjourneyで生成した素材にPhotoshopで要素を合成して制作しました。
STEP 1. 画像生成
まずはなんとなくラフイメージを頭の中で作ります。作りたいイメージは、魔法の森をKobbitoが探検しているような画像です。Kobbitoや植物はゲームで使われているデザインをそのまま使用したいので、背景の森をMidjourneyに生成してもらい、その上に3Dモデルから書き出した素材を合成することにしました。
初めは画像に花も含めていたのですが、合成するときに手間になりそうだったので、余計な要素のないシンプルな森を生成することにしました。また、横長の方が後々使いやすいので16:9比率の画像を生成するプロンプトを追加しました。
中央の部分に要素を合成するスペースが十分にあり、リアル過ぎないテイストのこちらに決定しました。
STEP 2. Photoshopで合成
次はPhotoshopで森の背景に要素を追加していきます。ゲームで使用しているKobbitoと植物たちの3Dモデルから書き出した画像をバランスを調整しながら足していきます。
それぞれの素材が馴染んでいなくて浮いてしまっているので、Photohopで個々の明るさや色味など調整し、全体のバランスを整えます。背景と合成した要素を馴染ませるために、全体の上からストロークフィルターなどを足して全体をなじませました。
余談ですが後ほど↑よりもさらに横に長い画像が必要になったり、今度は縦長の画像が必要になったりしたのですが、MidjourneyのZoom機能で生成した画像をさらに上下左右に拡張することができるので、背景の森の部分を追加生成して問題なく対応することができました。このような対応に直ちに対応できるのはAIツールの強みですね。
タイトルロゴ編
「Magical Forest」のタイトルロゴはMidjourneyで生成した画像をベクター化した素材を、部分的に使用して制作しました。
STEP.1 画像生成
Midjourneyはテキスト生成が苦手なので、下準備でテキスト部分のベースをIllustratorで作ります。
このテキストに、体験のキーである本と植物のモチーフを足したいと考え、その素材をMidjourneyで生成することにしました。
はじめはイラスト風のロゴが生成されましたが、「Flat」 や「Simple」、「Clean」といった単語を追加しながらフラットなロゴに改良していきました。色は単色のほうが後ほどベクター化するときに楽そうです。今回は画像の一部分しか使用しないので、全体の完成度よりもモチーフとして使いやすいパーツがあるかないかで判断して生成していきました。
いくつか素材として使えそうな画像が生成されたところで、これらの画像をベクター化してタイトルに使ってみたいと思います。
STEP.2 生成した画像をベクター化する
生成した画像をベクター化するために、今回はこちらのサイトを使用しました。画像をドロップするだけで、簡単にベクター化することができます。
ダウンロードした後にIllustratorで開くとパス化されているのが確認できました!必要に応じてパスを整えます。
この手順で複数の生成画像をベクター化して使用できそうなモチーフを取り出していきました。
STEP.3 テキストにモーチーフを合体させる
パス化したフォントにMidjourneyの生成画像から取り出したモチーフを足して全体のバランスを整えます。
テキストにも葉っぱモチーフを追加しました。こちらもMidjourneyの生成画像から取り出した葉っぱを使用しました。
STEP.4 Photoshopで仕上げ
テクスチャ、色付けなどはphotoshopで仕上げました。これで完成です!
Eleven Labsで音声を生成してみた
体験内のオープニングやエンディング部分などで、Kobbitoがプレイヤーに話しかける場面が度々あります。没入感を高めるためにも音声をつけたい!ということでナチュラルな読み上げ音声が生成できると話題のAI音声生成サービス、「Eleven Labs」で音声を生成しました。無料でも試せますが、商用利用する場合は有料プランにする必要があります。
今回は英語でのナレーションが必要だったので、英語のモデル音声からアクセントや声のトーンをもとに選びます。選んだモデルをベースに「Voice Setting」を調整しながら生成しました。声のモデルはデフォルト以外にも、メニューにある「Voice Library」から他のユーザーが生成したモデル音声を利用することもできます。
同じ設定にしていても生成ボタンで新しい音声を生成するたびにトーンが変わったりするので、同じ文章の音声を何個か続けて生成して比べみるのをオススメします。文章は一気に生成せず、細かくわけて生成したほうが調整がきき扱いやすいです。
また、時折AIの読み上げの区切り方やイントネーションが不自然だったりすることがあるのですが、単語の間に句読点やスペースを入れて再生成すると自然になることがあります。どうしても出だしの話し方に違和感が出てしまったときに、一文字目にスペースや改行を入れたら上手くいくことが度々ありました。
「History」から過去に生成したサンプル音声と設定を一覧で確認できるので、あとから過去に作った音声の設定を確認したいときに便利です。
最終的にどんな感じに出来上がったは、ぜひ音声をONにして「Magical Forest」を体験して確認してみてくださいね☺
まとめ
生成AIを活用するメリット
今回のプロジェクトを通して、普段なら自分の担当外の作業や外注する必要がある素材の制作もAIツールを活用することによって個人での制作が可能になりました。例えば、私はイラストの制作は得意ではない分野ですが、Midjourneyの画像生成を活用することで、今回のスペルカードのイラストの例のようにイラスト制作からデザインの仕上げまで全て一人で担当することができました。また、自分が直接指示(プロンプト)するので気兼ねなく様々なアイデアやテイストを試せることもポイントです。
課題
AIによって生成されたコンテンツは、スタイルやテーマの一貫性が不足している場合があります。例えば同じプロンプトを使用しても、再び同じものを生成することはできません。それゆえに、AIによって生成された作品は、微調整するのが難しく、細かいディテールにこだわり生成を続けると逆に時間がかかってしまいます。このような修正はPhotoshopなどのデザインツールに頼ることで、さらに効率的にAIを活用できると思います。
また、AIツールはプロジェクトの背景、目的、文化的要素、感情的なニュアンスなど全体的な文脈を完全に理解することは難しいです。AIの提案をコンテキストに合わせて調整したり適切な方向に導くことが不可欠になります。デザイン素材として使用する場合もプロジェクトの目的やメッセージに沿っているかを見極めて選択する必要があります。
おわりに
最後に、完成した「Magical Forest」の一部画面を紹介します。
Meta Questをお持ちの方はヘッドセットでの体験をおすすめします!
エンジニア募集中!
デザイニウムはWebAR ができるウェブエンジニア を募集中です💻話題のApple Vision Pro向けアプリをはじめとした、多彩なXRコンテンツの開発に携われる刺激的な環境です🤩✨テーマを持ってR&Dに取り組むことも歓迎しています。就業はフルリモートなので、全国どこからでも応募できます🏢
カジュアル面談も大歓迎です。ぜひご応募お待ちしています👍
この記事が気に入ったらサポートをしてみませんか?