たらむび。 -インタラクティブ映画のススメ-
“観る”だけじゃない、新しい映画の形「インタラクティブ映画」の魅力を紹介するwebサイト、webコンテンツ
- Nao Kukita
- Keywords：interactive movie , movie , web site
概要
これは何？
「インタラクティブ映画」という映画の形式を、より多くの人に周知するためのwebサイト、webコンテンツ
背景と目的
2025年2月、日本初のインタラクティブ映画が公開されました。実際に劇場で鑑賞したところ、観客自身が物語に介入できるという新しい体験に大きな感動を覚えました。
現代のエンターテインメントは、イマーシブシアターやVRコンテンツなど、体験者が深く没入できることを重視する傾向が強まっています。インタラクティブ映画は、こうした流れの中で、これからの時代を代表する新たなエンターテインメントの形になると感じています。
そこで、インタラクティブ映画の魅力をより多くの人に知ってもらい、その可能性を広げるために、情報を発信するウェブサイトを制作することにしました。
本サイトでは、インタラクティブ映画の仕組みや魅力、体験レポートなどを紹介し、より多くの人にその世界への興味と関心を持ってもらうことを目指します。
コンセプト
「“観る”だけじゃない、新しい映画の楽しみ方を紹介する」
インタラクティブ映画を知らない人・興味関心を持った人にもわかりやすく、楽しく魅力を知ってもらう。
成果物の仕様
webサイト(HTML)、web上で遊べるノベルゲーム、リーフレット(A6・三つ折り)
制作ツール
Adobe Illustrator、Visual Studio Code(HTML、CSS、Java script)、ibis Paint X
プロジェクトの期間
2025.04.08 - 2025.07.01 webサイト部分の完成
2025.08.01 - 2025.12. ゲームの実装、最終完成
まとめ
本プロジェクトでは、インタラクティブ映画の魅力を伝えるWebサイトを制作した。
視覚的な工夫として画像やイラストを多用し、文章主体の構成よりも直感的な理解を促した。ユーザーの興味を引きやすくする効果があると考えられる。
また、Webサイトの補完的な導入施策として、映画館で配布することを想定した冊子も併せて制作した。
これにより、Web環境にアクセスできない層にも情報を届ける手段を確保できた点で、より広い認知拡大が期待できるアプローチとなった。
当初は、後期の授業と連携してゲーム要素の実装も検討していたが、実制作を通して、紹介を主目的とするサイト構成では、オリジナルのコンテンツを十分に活かすスペースが確保しづらいという課題が浮き彫りになった。
そのため、プロジェクト全体のテーマ設定について再検討が必要であるとの判断に至った。今回の制作を通して身についた知識や技術を活かして、後期ではテーマ設定から見直して制作を進めたい。
制作の進行管理に関しては課題が残った。コンスタントに成果物を提出することが難しく、ガントチャートによる日程管理も十分に活用できなかった。
この経験から、自身が表形式でのスケジュール管理を苦手としていることを認識するとともに、日程管理の重要性を改めて実感することとなった。今後は、自分に合った方法を模索しつつ、計画的な作業進行とこまめな記録・確認を意識し、より効果的なプロジェクト運営を目指したい。
調査
現状調査
- 「インタラクティブ」とは、利用者がパソコンやスマートフォン、タブレット端末等の情報通信機器を利用する際、対話を行うように操作を進めていく形態を指す。加えて、情報の送り手と受け取り手が、相互にコミュニケーションを図れる状態にあることを、インタラクティブと呼ぶ。インタラクティブ(Interactive)とは、「相互の」「双方向の」を意味する英単語である。
- インタラクティブシネマ(インタラクティブ映画)
インタラクティブシネマとは、映画のようなシナリオと映像演出を持ちながら、プレーヤーが自らストーリーを進行させてゆくことのできるマルチメディアコンテンツのことである。映画とコンピューターゲームの中間的存在であるといえる。映画のように映像やストーリー性の高いコンテンツに対して、こちらから働きかけることができるという感覚を得ることができる。
- 2025年2月21日、日本初のインタラクティブ映画『ヒプノシスマイク -Division Rap Battle-』が劇場で公開された。7月1日時点で興行収入18億を突破した。（映画業界では、興行収入10億円がヒットの基準と言われている）
ニュースサイトやテレビ番組でも取り上げられており、関心が高まっていると感じている。
先行事例
- インタラクティブ映画の紹介サイト
- 既存のサイトでは、インタラクティブ映画に注目、特集したサイトは見つけられなかった。特定のインタラクティブ映画のレビューや記事などは見つかる。
- web上で遊べるインタラクティブな体験・ゲーム
技法・技術情報
プロジェクト管理
スケジュール
進捗記録
2025.07.01
サイト調整
- サイト上部にもどるボタンの表示を調整。上矢印と文字を組み合わせることで直感的にも分かりやすくした。
リーフレット最終調整
2025.06.24
サイト最終調整
- 画像や動画で引用できない作品を紹介するためのイメージイラストの制作
- 実際にゲームを何度かプレイし感想記事を制作。また、レビュー用画像を制作
2025.06.17
リーフレット制作
webサイト制作
2025.06.10
サイト、冊子用のイラスト制作
webサイト制作
メインページ及びサイト全体の大枠がほとんど完成した。
2025.06.03
HTML,CSSを用いたサイト制作
2025.05.27
リーフレットの制作を検討
⁻サイトを作っても、サイトまでたどり着かないと意味がない。映画館に置けるようなリーフレットの制作を検討。
全国の投票結果の調査
- 現実の日本とのリンク
- 作中には｢イケブクロ｣｢ヨコハマ｣｢シブヤ｣｢シンジュク｣｢オオサカ｣｢ナゴヤ｣といった、現実の日本と同じ地名を冠する地域があり、それぞれの地域を拠点として活動しているディビジョン(ラップをするチーム)が登場する。
公式サイトでは、全国の映画館での勝敗や投票結果の割合が掲載されている。
各劇場投票結果
これを見ると、｢TOHOシネマズ池袋｣ではイケブクロのチームが、｢TOHOシネマズ渋谷｣ではシブヤのチームが優勝率98%以上を誇っている。
また、少しひねったものもあった。
- ｢TOHOシネマズ日本橋｣では同名(読みは違う)の地名｢日本橋｣が大阪にもあるからか、オオサカのチームが勝率98%を記録している。
- 「TOHOシネマズ日比谷」では、チームの拠点となる高層ビルに似た建物であることや、映画館の付近にキャラクターの名前と同じ名前の広場が存在することから、女性のチームが優勝しやすい。
…など。
- 記念日
- キャラクターの誕生日にはそのキャラクターの属するチームが優勝する確率がかなり高い。また、語呂合わせや、チームから連想される日付などで、特定のチームが優勝しやすい傾向にある。
- 4月4日 声優さんが制定した非公式記念日
大阪のチームのハンドサインが指を4本立てるものであることから定められた。大阪のチームが優勝しやすい。
- 4月28日 語呂合わせで「シブヤ」
渋谷のチームが優勝しやすい。
- 令和7年5月8日 語呂合わせで「ナゴヤ」
名古屋のチームが優勝しやすい。
2025.05.20
中間発表
- 「自分作ったコンテンツ(文字、デザイン等)」量が少ない
- 上映中のインタラクティブ映画の、公式で公開されている統計や全国の投票結果を調査し、考察や感じたことをレポート
- 過去公開されたインタラクティブ映画の紹介ページで、自作のイラストを使用
ロゴ
- 映画に関するサイトであることが伝わる
- ストーリーが分岐していく特徴を表現
2025.05.13
プロトタイプの作成
- プロトタイプ(figma)
- 指摘していただいたこと、気をつけること
- 余白や行間を、サイトのコンセプトに合ったものにする
- サイト内の画像や情報の引用元は確かにしておく
- スマホで見ることを想定 小さい画面のため、情報の連続性や視認性を意識
サイトのロゴ
- 最終案
- コンセプトとしては「気軽に触れてほしい」「敷居を低くしたい」
- ゆるく、可愛らしい とっつきやすいイメージ
次回までにやること
2025.04.29
ワイヤーフレームの作成
- 指摘していただいたこと
- PC向けの配置になっているため、スマホ基準にする
- 画像は正方形〜縦長に
- スマホの一画面を一コマと考える
サイトタイトルの決定、背景と目的・コンセプトの整理、記載
- サイトタイトル「インタラクティブ映画のススメ」
- 「インタラクティブ映画」というワードを入れ、分かりやすいように
- 「⚪︎⚪︎のススメ」という定番のフレーズで親しみやすく
2025.04.22
「Twine」「Github」を使用したブラウザゲームの調査
- webデザインの授業にて、HTMLやGithubを活用した。気軽に体験してもらう・メインのサイトから誘導しやすいようにweb上で完結する簡易的なブラウザノベルゲームを作成。
- Twineの調査
webサイトの構成
- サイトに載せたい情報、実装したい要素の整理
- インタラクティブ映画とは何か
- インタラクティブ映画の歴史
- 日本初のインタラクティブ映画「ヒプノシスマイク」の紹介
- 実際に自分が映画を見た感想のレポート
- 現実世界とのリンク 記念日や「聖地」
- 「インタラクティブ映画風」の体験を提供
- TwineとHTMLを使用した、web上で遊べるノベルゲームの実装
- インタラクティブ映画用のアプリで見られる情報(選択肢を選んだ割合、他の観客との一致率など)を表示
- サイトマップの作成
- 各ページのタイトルは検討中のため、一旦内容をそのまま表記
制作スケジュールの設定。工程表の作成。
- 作業量を鑑み、前期〜後期を通しての制作に決定。
- 前期でwebサイトの作成、記事の準備
- 夏休み・後期を使ってゲーム部分の作成、実装
2025.04.15
どんな形でまとめるかを検討
- webサイト
- 日本初のインタラクティブ映画『ヒプノシスマイク -Division Rap Battle-』を中心に、インタラクティブ映画の歴史や魅力を紹介し、新たな映画コンテンツの楽しみ方を知ってもらう。
- 先行調査：既存のサイトでは、インタラクティブ映画に注目したサイトは見つけられなかった。特定のインタラクティブ映画のレビューや記事などは見つかる。
- web上で「インタラクティブ」な体験を提供
- クリックで選択肢を選びストーリーが進んでいくサイトで体験してもらう？ ゲームブックに近いかも
- ストーリーなどはChat GPTを活用
インタラクティブ映画に関する調査
- インタラクティブとは、利用者がパソコンやスマートフォン、タブレット端末等の情報通信機器を利用する際、対話を行うように操作を進めていく形態を指す。加えて、情報の送り手と受け取り手が、相互にコミュニケーションを図れる状態にあることを、インタラクティブと呼ぶ。インタラクティブ(Interactive)とは、「相互の」「双方向の」を意味する英単語である。
- インタラクティブシネマ(インタラクティブ映画)
インタラクティブシネマとは、映画のようなシナリオと映像演出を持ちながら、プレーヤーが自らストーリーを進行させてゆくことのできるマルチメディアコンテンツのことである。映画とコンピューターゲームの中間的存在であるといえる。映画のように映像やストーリー性の高いコンテンツに対して、こちらから働きかけることができるという感覚を得ることができる。
「一方通行ではなく、相互に影響を与える」
- インタラクティブ作品の歴史
- 『I’m Your Man』 1992年12月18日公開
- 『Late Shift』 2016年3月9日公開
- 『ブラック・ミラー：バンダースナッチ』 2018年12月28日公開
- 『Traces of Responsibility』 2024年公開
- 『ヒプノシスマイク –Division Rap Battle-』 2025.2.21公開
2025.04.08
研究テーマ案
- 「インタラクティブ映画」をもっと広めたい
- 「観る」から「関わる」になった、新しい映画の楽しみ方を知ってほしい。
- 都市伝説・オカルトを通して情報伝達方法の面白さを知ってほしい
- 口伝から本、写真、新聞、ラジオ、テレビ、ネットなど、都市伝説は情報伝達の歴史、変遷を象徴するものだと思う。都市伝説を通じて情報伝達の歴史の面白さを感じてほしい。
- 「カカポ」という生き物のことを広めたい
- 世界で最も絶滅の危機に瀕している鳥の一種の「カカポ（フクロウオウム）」について知ってもらいたい。
