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

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

今回ご紹介するのは、社内プロジェクトとして取り組んだインタラクティブコンテンツ「おえかきギャラクシー」の開発プロセスとUnityの試行錯誤の記録です。

「おえかきギャラクシー」とは

プロジェクターとタッチデバイスを使った体験型のインタラクティブコンテンツです。壁に投影された宇宙空間に、自分で色を塗った3Dモデルを送りこんで飛びまわる様子を鑑賞できます🎨

エントランスや休憩所などで長時間映しておくような用途を想定しているので、ユーザーが何度でも楽しめるようなコンテンツにしたい...。シェーダーやスクリプトで「飽きさせない体験」をいかにデザインするか、工夫しながら制作を進めました🚀

飽きずに見られる背景演出

投影する宇宙空間の背景ですが、ただ「宇宙の絵を映してるだけ」ではありません！👀
Unityのシェーダーグラフを駆使して、長時間ぼーっと眺めていられるような工夫をけっこう細かく詰めこみました。

宇宙空間のシェーダー

ノードのレイアウトはこんな感じ。星の数や色はシェーダーグラフで動的に制作。
中でも、星のちらつきにはこだわりました！空気の澄んだ冬の寒い日に星空を見上げると星がチカチカ瞬いているときありますよね？あれが好きでシェーダーで再現したくて挑戦してみました✨

具体的には、2つのノイズマップを互いにスクロールさせて加算で重ね、明度が一定以上になったピクセルだけをRemapで抽出しています。
ノイズマップや明滅パターンはランダムに動き続けるので、冬の星空のように見ていて飽きないシェーダーになりました。（宇宙空間に光を屈折させる大気は存在していないので、明滅するのは本当はおかしいですが...演出ですね！）

地球のシェーダー

今回の背景の主役となる地球🌏
球体の法線とディレクショナルライトの内積を求めて、昼と夜2種類のテクスチャが動的にクロスフェードするシェーダーを作成しました。

地球オブジェクトはゆっくりと自転していて、光が当たっていない夜半球には都市の灯りが浮かび上がります。
さらにフレネル効果で大気を表現。成層圏がうっすら光るように調整しました。角度によって時間ごとに大きく表情が変わるので、見るたびに新しい印象があります。

まとめ

前編ではシェーダーにフォーカスをあててみました。
細部にこだわりつつも、どの表現も「なんとなくキレイ」で終わらせないように気をつけました。重要なのは「なぜそれが必要なのか」——技術的なロジックの前に、そういう“ユーザーの体感”を判断軸にしていくことで、最終的なアウトプットのクオリティが全然変わってくる気がしています。

このようにアスタスタでは、ユーザー目線に立った体験の提供と、+αの「遊びごころ」を大事にしています。エンジニアチームによる「機能の開発」にとどまらず、視覚的な美しさやストレスのない操作性など、社内にデザイナーが在籍するからこその、高い品質のUI・UXの提供を得意としています。

これからも様々な分野を横断しながら、デザイン×エンジニアリングの力で世の中を楽しくできるようなコンテンツをお届けできるよう、挑戦を続けていきます！🚀