はじめに
「3ヶ月で、展示用のアプリをゼロから作って、実際に子どもたちに体験してもらう」
そんなチャレンジが、本当にできるのか。
正直、不安の方が大きかったかもしれません。
でも今、環境広場さっぽろ2025の会場で子どもたちが笑顔でアプリを操作し、「もう一回やりたい！」と言ってくれる姿を思い出すと、あの3ヶ月間の全てが報われたと感じます。
このプロジェクトは、「環境問題を自分ごととして考える」きっかけをつくることを目的に、
生成AI・React Native・iPadを活用したインタラクティブなアプリを開発し、展示したものです。
私はこのチームのリーダーを務めたクラウドソリューション開発部の寺谷です。
社内の9人の仲間とともに、企画から技術実装、ブース設計まで全体を指揮しながら、このプロジェクトを完遂しました。
この記事では、限られた期間の中でどうやってアプリを完成させたのか、
そして、リーダーとして何を考え、どう動いたのかを、お話していきたいと思います。
環境広場2025について
今年の展示テーマは「ゼロカーボン × 夏祭り」。私たちはその中で、生成AIを子どもたちにも親しみやすく触れてもらう体験を提供したいと考えました。ただ見るだけでなく、「自分の選択で未来を描く」という構成で、環境問題をより自分ごととして考えるきっかけになればという想いがありました。
そのために必要だったのは、選択肢によって生成AIが画像を出力し、リアル展示としてスムーズに体験できるiPadアプリの開発。しかも、ゼロからの企画・設計・実装・当日運営まで、すべてを約3ヶ月という短期間で完遂する必要がありました。
チーム体制と役割分担
チームは社内から集まった9名。
部署もスキルも異なるメンバーが揃い、それぞれが持ち味を活かしながらプロジェクトを推進しました。
- UI/UXデザイン担当：子どもが直感的に操作できる画面設計とアニメーション演出
- エンジニア陣：React Nativeでのアプリ開発、生成AI連携の実装、デバイス調整
- コンテンツ企画：選択肢の内容設計、ストーリーフロー、メッセージ設計
- 会場演出・運営：景品配布の導線構成
社内プロジェクトとはいえ、業務領域が異なるメンバーが多かったため、ビジョンの共有と目的の言語化には特に力を入れました。
そんな中で私は、全体設計・スケジュール管理をしつつ、全体に関わっていきました。
タスク管理とスケジュールの可視化にはBacklogを活用し、プロジェクト全体をガントチャートで管理しました。
各自が何を担当し、いつまでに完了させる必要があるかを明確にしながら、進捗確認を週単位で行いました。
※下記にガントチャートの一部を載せます
このように可視化された課題は、全員が今どこにいるかを理解し、主体的に動ける状態を保つために非常に有効でした。
設計でこだわったポイント
目指したのは、楽しさ・教育・テクノロジーのバランスがとれた体験です。
来場者（主に小学生以下）にとって：
・来場者にとってゲーム感覚で取り組める
・自分の「選択」が可視化されるため、「未来を創造してる！」と楽しめる
展示担当としては：
・スムーズに回転できる（待ち時間が少ない）
・会場の雰囲気に馴染む演出やテンポ感がある
この2つを同時に満たすことは簡単ではありませんでしたが、だからこそ、技術・デザイン・体験の境界を越えて議論し、設計を磨き上げることが必要だったと感じています。
制約と優先事項を明確化して進行
開発スタート時、私がリーダーとしてまず行ったのは、実際の運用を想定した設計です(一部抜粋)。
- iPad3~ 5台で安定して稼働し続ける構成
- AI画像生成は10秒以内で完了（通信状況を想定）
- 展示現場で誰でも運用できるシンプル設計
このように開発初期の段階で「やるべきこと」を整理し、チーム全員に共有したことは、その後の意思決定や開発スピードにおいてとても重要だったと実感しています。
React Native × 生成AIでつくる展示体験の設計
展示用アプリを開発するにあたり、最初に大きな決断が必要だったのが「技術スタックの選定」でした。特にポイントとなったのは、iPadで安定して動作し、短期間で実装できることです。
その要件にもっともあっていたのが、React Nativeでした。
なぜReact Nativeを選んだのか？
今回のプロジェクトでは、限られた約3ヶ月という期間の中で、展示用のiPadアプリを完成させる必要がありました。
その中で、以下のような条件を満たす技術選定が求められました。
- iPadに最適化されたUIを素早く構築できる
- ネイティブのような操作感（タップ・スクロール・アニメーション）
- API通信や画像処理の統合がしやすい
- デプロイ(TestFlight)やビルドにおける環境構築がスムーズ
これらを踏まえて、私たちは React Native（CLIベース） を選択しました。
理由としては、私自身が普段からReact Native（ExpoではなくCLI）でスマートフォンアプリを開発しているため、構成の見通しやライブラリ選定、デバッグ対応などをリードできるからです。
そのため、チーム内での技術的な意思決定もスムーズに進み、開発スピードを落とさずにプロトタイプ→実装→テスト→本番運用まで到達することができました。
生成AIとの連携とプロンプト設計の工夫
このプロジェクトの目玉とも言えるのが、生成AIを使って選択したイメージをリアルタイムに生成する仕組みです。
子どもたちがアプリ上で選んだ内容に応じて、1枚の画像が生成される。
それは世界に一つだけの「自分が選んだ未来の形」となります。
私たちはこの仕組みを実現するために、Stability AI（Stable Diffusion API）を活用しました。
Stability AIとの接続と実装フロー
React Nativeから生成APIにアクセスするため、以下のような構成で非同期通信を組みました。
- 子供の選択したデータを英語プロンプト文字列に変換
- Stability AIの画像生成APIにHTTP POSTでリクエスト
- base64形式または画像URLでレスポンスを受け取り、表示用に変換
- 結果画像を即座に画面に反映し、保存・スライドショーにも共有
生成リクエストには平均で5〜8秒程度かかるため、ユーザーが飽きないように待機中のアニメーション演出や「イラストをつくっているよ！」などの表示タイミングなどにも細かな配慮を行いました。
会場をつなぐスライドショーの仕組みと演出
子どもたちが生成した画像は、1枚で終わりではありません。
その作品が他の来場者にも見られるように、会場内のスライドショーとして流れる仕組みを構築しました。
このスライドショーは、生成体験を他人と共有するための大切な機能であり、「誰かの選択が未来をつくる」というストーリーを視覚的に広げる役割も担っています。
以下の構成図が、子どもたちの生成画像がどのように会場内で共有されていたかを示したものです。
GCP × Google Driveを活用した画像保存
スライドショーで表示される画像は、単にアプリ内に保持されているわけではありません。
次のような構成で、生成された画像をGoogle Cloud Platform経由でGoogle Driveに保存し、それをもとにスライドショーを実現しました。
画像アップロードとダウンロードに関するフロー
- 画像生成完了後、アプリ内でbase64画像を一時保存
- GCP Functions / Cloud Run を経由し、特定のGoogleアカウントにアクセス
- Google Driveの指定フォルダに画像をアップロード
- スライドショー用のPC（モニター接続用PC）では、そのフォルダ内の画像を定期取得してスライドショーとして表示
このようにすることで、生成と同時にスライドショー表示用のファイルがクラウドに集約される仕組みを実現しました。
スライドショーの実装と会場演出
スライドショー用のPC（モニター接続用PC）では、Google Drive内の画像一覧を一定間隔で取得し、ローカルキャッシュと差分を管理しながら自動再生を行う処理を組みました。
- 更新インターバル：30秒ごとにDriveの新画像を取得
- 表示間隔：3秒で画像が切り替わる
- 演出：フェードインに加え、展示空間に馴染むアニメーション構成
結果として、イラスト生成を終えた子どもたちが「自分の作品がモニターに出た！」と指差して喜んでくれるシーンが何度も見られました。
アプリ終盤：ルーレット演出
アプリ体験の締めくくりには、ルーレットを回してうまい棒をもらえる演出を加えました。
生成された画像を見たあとの子どもたちに「やりきった感」を演出する仕上げとして、ルーレット演出を導入しました。
画面上でスピンする円盤が止まり、出た目の数だけ「うまい棒」をプレゼントする仕掛けです。
- UIはReact Native内で回転アニメーションを用いて実装
- 結果の数字に応じて、リアルの景品（うまい棒）と連動
- 子どもたちは「当たった！」と喜び、大人もつい笑顔に
この演出は、イラスト生成体験だけで終わらせず、「学んで・作って・遊ぶ」というフローをつくることで、結果的に展示全体を楽しい場にすることができました。
最終的に、展示ブースには想定以上の子どもたちが集まり、生成された画像は500枚以上。
多くの笑顔と驚きに触れる中で、「チームで１つの作品をつくる面白さ」、「技術で体験を変える実感」を強く感じました。
最後にアプリの動画について添付します。
全体のまとめ
「3ヶ月でアプリを完成させ、展示まで持っていく」。これは簡単なミッションではありませんでした。
環境問題という社会的テーマ、子どもたちを中心とした来場者、そして生成AIという先端技術をどう組み合わせて、わかりやすく・楽しく・記憶に残る体験として届けるか。
この問いに向き合い続けた3ヶ月間は、ただの開発期間ではなく、チームで未来をつくるための創造的なプロセスだったと感じています。
また、React Native、Stability AI、GCPをはじめとしたツール群は、あくまで目的を達成するための手段だと考えています。でもその手段をどう活かすか次第で、「誰かの気づき」や「行動のきっかけ」につながる体験が生まれると、今回の環境広場を通して実感しました。
そして、多様なスキルを持つ9人のメンバーがそれぞれの強みを発揮しながら協力できたからこそ、イベントを成功させることができたと思います。
最後まで読んでいただき、ありがとうございました。
このプロジェクトが、どこかで誰かのインスピレーションになれば嬉しいです！
エコモットでは、モノづくりに共感してくれる仲間を募集中です！弊社に少しでも興味がある方、ぜひ下記の採用ページをご覧ください！
