飽きさせないUXを目指したインタラクティブコンテンツ「おえかきギャラクシー」の開発プロセス：中編

こんにちは。
普段はFigmaでWebやUIのデザインをしつつ、UnityやBlenderを使った3Dコンテンツ制作も行っているKONDOです！

今回は、社内プロジェクトとして取り組んだインタラクティブコンテンツ「おえかきギャラクシー」で行った、生成AIを使ったビジュアル素材づくりについて書いてみようと思います。

たたき台づくりで
大活躍する生成AI

まずは、タッチデバイスに表示させるタイトル画面の制作に生成AIを活用してみます。
飽きさせないUXのためにもビジュアル面はしっかり作り込みたいところです！

生成AIも今となっては仕事をする上でなくてはならない存在です。
実際に使ってみると思い通りにはいかないことも多いですが...質より量とスピードが必要な場面においては、もはや人間はAIに敵いません😎

早速ChatGPTに生成プロンプトを相談しつつ、GeminiとNanoBananaを使い下記のプロンプトで叩き台を生成していきます！

おえかきギャラクシーというアプリのタイトル画面を作って！

サイズ: 1365px × 768px
スタイル: 明るく、かわいい手描き風のイラスト。子供向けで楽しげな印象。色鉛筆やクレヨンタッチで仕上げる。
テーマ: 宇宙空間をモチーフにしたお絵描き画面のタイトル背景。

詳細:
- 背景は深い宇宙空間のようなブルー～パープル～ブラックの美しいグラデーション。
- 中央に広い白抜きスペースがあり、その輪郭は星雲をイメージしたふんわりとした曲線の形状で、淡いブルーとパープルのライン。
-タイトルは「おえかきギャラクシー」
- 周囲にはカラフルでかわいくデフォルメされたロケット、UFO、宇宙飛行士、小惑星、土星や火星風の惑星、流れ星、星座を散りばめる。
- 色鉛筆や鉛筆を宇宙風にネオンカラーやメタリック調で描き、画面の周りを飾る。
- 全体に小さな星のキラキラや光のアクセントをつけて、楽しさとワクワク感を表現する。

絵はすごくかわいいですが...🪐
これは恐らく現世とは異なる次元からやってきた自社プロジェクト「お疋かきギッIクスィ」のタイトル画面ですね...
タイトルのあまりの存在感に気を取られてしばらく気がつきませんでしたが、全体的に絵のディテールが細かすぎるのも気になります。

Stable Diffusion2.0でプロンプトガチャを回していたときを思うと、自然言語でのやり取りからこんな画像を一発で出力できるのは衝撃的なことなのですが...慣れってこわいですね。
引き続きGeminiと会話しつつ、もっとシンプルになるように修正を試みます。

だめでした。デフォルメを依頼したはずですが、圧倒的な描き込みを誇る「お疋かきギッノタスイ」のタイトル画面が次元のはざまから出てきてしまいました。
求めているのは「お疋かきギッノタスイ」ではなく「おえかきギャラクシー」のタイトル画面なので、根本的なアプローチを変えてみます。

その名も
“完成させない”AI活用術？

絵の質に関しては申し分ないのですが、指示が思い通りに反映されず調整は難航...
考え方を変えて「透過素材と背景を別で書き出して手動でレイアウトする」方針に転換してみましょう。

一発で完成品を狙うのではなく、素材づくりに徹してもらう作戦です。

NanoBananaはコンテクスト維持には定評がありますが、 裏を返せば一度生成した結果を頑なにキープし続けるという頑固さを持っているように感じます。
これは、まだ詳細な方向性が決まっていないフェーズで、生成結果を確認しながら修正を重ねたい場合にとても相性が悪い特性です。

各社の生成モデル自体はどれもすばらしい能力を持っていますが、個性があるので使い分けが必要ですね！
使用するモデルをChatGPT×DALL·E 3に変更し、まずはタイトルなしの背景画像を生成。

おぉー！ すごい！ いきなりいい感じ！😳
素材単体の生成に使う方法はかなり有用そうです。

このまま詰めていくのもありですが...ここで一度立ち止まり、UXに思いをめぐらせるのが我々アスタスタ...👓✨

ディスプレイの“外側”を意識したデザイン

「おえかきギャラクシー」は、プロジェクターで投影した映像に“インタラクトして遊ぶ”ことを前提にしたコンテンツなので、体験環境は必然的に照明を落とした薄暗い空間になる。
没入感をつくるうえでは理想的な一方で、画面設計では注意が必要になります。

たとえば、タッチデバイスのタイトル画面に「白背景」を使用した場合、暗い空間では想像以上にまぶしく感じるはずです。

デバイス側の輝度設定での対処も考えられますが、画面のカラーリングは、暗所での使用を前提に、デザインの時点で考慮しておくのがベターですよね。

白背景を削除して、とてもいい感じになりました！✨

このように、時にはデジタルディスプレイを飛び出してユーザーのリアルな体験を想像してみる。

外見上の美しさだけでなく、体験の気持ちよさを追求していくのがアスタスタのデザイナーの仕事でもあります🎨

最終的には宇宙空間のみの背景画像を生成してもらい、切り抜いたオブジェクトを手動でレイアウトしていくことにしました！
デザイナーと生成AIとのコラボレーションですね🤖

タイトル画像も、単体の素材として生成したらスムーズに完成！

Photoshop上でこれらの素材を組み合わせてレイアウトしたものが↓こちらです！

満足のいく仕上がりになりました！👍
AI主導になりすぎず、明確な完成イメージを共有して素材を用意してもらいつつ、方向性はデザイナー側がしっかり握っていく。
今回の制作を通して、デザイナーと生成AIの理想的な関係性について考えることができました。

生成AIが本格的なUIデザインまでこなしはじめた今日このごろ...

人間のデザイナーとしては、機能やビジュアルを成立させるだけでも日々精一杯ですが...その先にあるユーザーや顧客にどんな時間をすごしてもらいたいか。というイメージ。
その理想を実現するためには、人間の実体験や想像力がまだまだ必要になると感じています。

これからも、めまぐるしく進化する生成AIや新技術をうまく実務に取り入れながら、人間ならではの+αの遊びごころやこだわりを大切にしていきます✨