──── 学生賞おめでとうございます。まずは作った作品の紹介をプレゼンでは話せなかったこだわりポイントも含めてお願いします。

obaさん ありがとうございます。今回のテーマ「みたかAI！これが人類だ！」に対して、僕たちのチームは「みたかAI！これが人類の感性と想像力だ！」というテーマで作品を作りました。AIにはないだろうという部分として感性と想像力に着目して、それを作品として展示できる場所を作ろう、というコンセプトです。まだまだAIには負けないぞ、と示すような展覧会になるといいなという思いがあります。

──── 入り口にパンフレットがあるのが印象的でした。

obaさん あそこは少しこだわっていて、縦長の冊子みたいな見た目にしています。コンセプトやテーマ、伝えたいことを書いて、鑑賞のポイントや体験会のご案内も載せました。実はレスポンシブ対応がうまくいっていないので、「PCでご参加くださいね」という案内もそこに書き足しています（笑）。

──── ギャラリーやショーケースの部分でこだわった部分などありますか？

obaさん エントランスの画面と、展示会のギャラリールームの画面があって、そこに作品が並びます。こだわりとしては無限スクロールを実装したことですね。一気に読み込むと重くなるのかなと思って、下に行ったら少しずつ増えていくようにしました。

気になる作品はクリックするとショーケースのページに飛んで、そこで作品に触れられます。操作は画面に書いていないんですが、左クリックで回転、右クリックで左右移動、マウスホイールで拡大縮小ができます。いろんな角度、いろんな距離から楽しめる展示ケースをイメージしました。

──── 体験会では実際に作品を作れるんですよね。

obaさん はい。使える立体をこちらで限定していて、あえて自由度を減らしています。その制限の中に感性や想像力を注ぎ込んで作品にしよう、というのがチームで話し合ったところです。置ける範囲も縦横16に高さ16を加えた範囲に制限しています。

制限をなくすと、とんでもない作品が生まれることもあると思うんですけど、そういうのが出てしまうと、体験会で軽く触りたい人が逆に出しにくくなってしまうかな、という話をした記憶があります。

──── 裏側で工夫されたところはありますか？

obaさん データ量を軽くするために、作ったモデルを別のファイルに落とすのではなく、「どこに」「どの図形で」「何色で」という情報をひたすらJSONにまとめて、データベースに保存しています。そこが功を奏したというか、データベースの設計もシンプルになりましたし、読み込みのときにガタつかず、サッと表示される印象になりました。

──── 作品を引き継げる機能もありましたね。

obaさん 途中から作れる機能ですね。引き継いだ場合は、どの作品を引き継いできたのかをショーケースにちゃんと明示するようにしています。ここはプレゼンでは言えていなかったところです。

──── 継承元を変えると、引き継いだ側も変わるんでしょうか？

obaさん そういうわけではなくて、その時点の構造をコピーして、そこにあれこれ触ったものを新しい作品として出す、というイメージです。図形が増えたり減ったりしたらJSONを書き換えて、新しいデータとしてデータベースに保存する流れになっています。

──── 技術スタックは何を使われたんですか？

obaさん ベースにThree.jsがあって、あとは基本的にバニラJSとHTML/CSSで全て構成しました。JSONをパースする関数を書いて、無理やり表示させている感じですね。インフラはCloudflare PagesとSupabaseです。

──── 役割分担はどんな形でしたか？

obaさん 初日にMVPを決めたあと、デプロイを2人ともやったことがなかったので、まず僕がインフラの方から始めました。Cloudflare Pagesを用意して、データベースが必要だとなったのでSupabaseを用意して、とりあえずHello Worldがページに乗るようにするところからですね。その間にigaさんには、メインのThree.jsでモデルを作れるようにするところを担当してもらいました。

igaさん 僕はHTMLとCSSが全くできなかったので、そこはobaさんに全部お任せして、僕はThree.jsとJSの方を触っていました。

──── Three.jsは以前から触られていたんですか？

igaさん いえ、初めてでした。ハッカソンのキックオフの金曜日にアイデアがだいたい決まっていたので、ノリで「ちょっとチュートリアルやってみるか」という感じでその日にやってみたんです。今回は四角とか丸とか、基本的な図形を扱っていたので、描画のあたりはチュートリアルの範囲に収まる感じでした。そこは自分で書いて、保存するロジックなどはAIに聞いて作りました。

──── 意外とご自身で書かれた部分が多いんですね。

igaさん ベースだけ自分で書いて、理解できるようにしておいて、修正のところはAIに任せました。触ったのが1日とかなので、間違っていても何が間違っているか分からないんですよ。なので「これはこういう間違いなんだ」というのを聞いて、それを修正していく、という感じでしたね。なるべく理解できるようにはしていました。ハッカソンなので、本番で動かなくなったら怖いですし。

obaさん その観点だと、チームの中で僕がHTML/CSSを共有する時間も意外とありました。結局JavaScriptからDOMを操作する必要があったので、このタグ構造はこういう意味だよ、ここでこういうのを当てているよ、というのを共有していましたね。学びになりました。

──── アイデアソンはどのくらいで決まったんですか？

obaさん テーマ発表が終わってすぐ「とりあえず話しますか」と始めて、1時間くらいですね。AIも使いながら考えていて、最初は2Dのドット絵みたいな作品をAIで作るという案だったんです。意外とAIがいい感じのものを出してきて、これなら感性や想像力という観点からテーマにつなげられそうじゃない？と思って。そこにigaさんが「3Dにする」というアイデアを加えてくれて決まりました。

──── 展示会というコンセプトは最初からあったんでしょうか。

obaさん 流れですね。最初は「3Dで作品を作って共有できたらいいよね」くらいでした。翌日に最低限この機能は乗せようという話をして、作っていく中で、展示会っぽくしたらもっと雰囲気が出るんじゃないか、アプリのコンセプトに寄せられるんじゃないか、と。やりたいことに対して、コンセプトやアプリの雰囲気が後付けで整っていった感じです。初日でおおよその機能が整って、「意外といけますね」という話をしていました。

──── お二人はもともとお知り合いなんですか？

obaさん 1年前くらいにSGキャンプに参加して、そのときに同じグループのメンバーだったんです。今回、久々になんとなくハッカソンに出たいなと思い始めて、誰かと出たいとなったときに、懐かしのメンバーがいるじゃないかと思って声をかけたら、都合が合うということで参加してくださいました。

──── 他のチームの作品で印象に残っているものはありますか？

obaさん お葬式のやつですね。作品そのものもそうですけど、プレゼンするときにガイドを装ってやろうという、プレゼンにもテーマを持たせていたところ。服装と背景まで整えてくるあの感じが、どうしても強く印象に残っています。

igaさん 僕もお葬式のアプリが印象的でした。今回このアプリの描画を担当していたので、その意味でも気になって。最初にチャットを打って棺が流れてくるところで終わるかと思いきや、バスの演出があって、そこからさらに続いていく。あの一連の流れが意外だったので、ずっとワクワクさせるような演出がよかったですね。

──── 最後に、今後の予定を教えてください。

obaさん ハッカソンを見つけられたらまた出たいねという話をしています。もし見つけられなかったとしても、最近はこのアプリをもっと改修したいよねと話しているので、時間を合わせて作ったものを共有したり、一緒に何か一つ実装したりできたらいいなと思っています。

──── 本日はありがとうございました！