たらむび。 -インタラクティブ映画のススメ-
“観る”だけじゃない、新しい映画の形「インタラクティブ映画」の魅力を紹介するwebサイト、webコンテンツ
- Nao Kukita
- Keywords：インタラクティブ映画, 映画の新たな楽しみ方, webサイト
- プロトタイプ(figma)
- 中間評価シート/アンケート(googleフォーム)
- ↑回答よろしくお願いいたします！
概要
これは何？
「インタラクティブ映画」という新たな映画の楽しみ方を、より多くの人に周知してもらうためのwebサイト、webコンテンツ
背景と目的
2025年2月、日本初のインタラクティブ映画が公開されました。実際に劇場で鑑賞したところ、観客自身が物語に介入できるという新しい体験に大きな感動を覚えました。
現代のエンターテインメントは、イマーシブシアターやVRコンテンツなど、体験者が深く没入できることを重視する傾向が強まっています。インタラクティブ映画は、こうした流れの中で、これからの時代を代表する新たなエンターテインメントの形になると感じています。
そこで、インタラクティブ映画の魅力をより多くの人に知ってもらい、その可能性を広げるために、情報を発信するウェブサイトを制作することにしました。
本サイトでは、インタラクティブ映画の仕組みや魅力、体験レポートなどを紹介し、より多くの人にその世界への興味と関心を持ってもらうことを目指します。
コンセプト
「“観る”だけじゃない、新しい映画の楽しみ方を紹介する」
インタラクティブ映画を知らない人・興味関心を持った人にもわかりやすく、楽しく魅力を知ってもらう。
成果物の仕様
webサイト、web上で遊べるノベルゲーム
メンバー
制作ツール
illustrator、HTML、CSS、Twine
プロジェクトの期間
2025.04.08 - 2025.07.01 webサイト部分の完成
2025.08.01 - 2025.12. ゲームの実装、最終完成
まとめ
調査
現状調査
- インタラクティブ映画に関する調査
- インタラクティブとは、利用者がパソコンやスマートフォン、タブレット端末等の情報通信機器を利用する際、対話を行うように操作を進めていく形態を指す。加えて、情報の送り手と受け取り手が、相互にコミュニケーションを図れる状態にあることを、インタラクティブと呼ぶ。インタラクティブ(Interactive)とは、「相互の」「双方向の」を意味する英単語である。
- インタラクティブシネマ(インタラクティブ映画)
インタラクティブシネマとは、映画のようなシナリオと映像演出を持ちながら、プレーヤーが自らストーリーを進行させてゆくことのできるマルチメディアコンテンツのことである。映画とコンピューターゲームの中間的存在であるといえる。映画のように映像やストーリー性の高いコンテンツに対して、こちらから働きかけることができるという感覚を得ることができる。
- 2025年2月21日、日本初のインタラクティブ映画『ヒプノシスマイク -Division Rap Battle-』が劇場で公開された。4月16日には興行収入12億を突破した。（映画業界では、興行収入10億円がヒットの基準と言われている）
ニュースサイトやテレビ番組でも取り上げられており、関心が集まっていると感じている。
先行事例
- インタラクティブ映画の紹介サイト
- 既存のサイトでは、インタラクティブ映画に注目、特集したサイトは見つけられなかった。特定のインタラクティブ映画のレビューや記事などは見つかる。
- web上で遊べるインタラクティブな体験・ゲーム
- NEAL.FUN web上でさまざまなゲームが遊べるサイト。
いくつかゲームが遊べるが、その中でも世界中の人が参加できる投票ゲーム lets settle this と、トロッコ問題をモチーフにした自分で選択していくゲーム absurd trolley problemsは、インタラクティブ映画の楽しみ方に近いと感じた。・ユーザーが自分で選択肢を選ぶ点、投票率を見ることができる点など…
- NEAL.FUN web上でさまざまなゲームが遊べるサイト。
技法・技術情報
プロジェクト管理
スケジュール
- 工程表(OneDrive)
- 5/20,5/27 1Q審査
- webサイトのデザインカンプ
- プレゼン資料
- 7/1,7/8 1Q審査
- webサイト部分の完成
- webサイト部分の完成
ToDo
進捗記録
2025.06.03
HTML,CSSを用いたサイト制作
- サイト進捗：sample_01
- プロトタイプからの変更点：管理者紹介、サイト名の開設の追加
- プロトタイプからの変更点：管理者紹介、サイト名の開設の追加
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向けの配置になっているため、スマホ基準にする
- 画像は正方形〜縦長に
- スマホの一画面を一コマと考える
- 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
研究テーマ案
- 「インタラクティブ映画」をもっと広めたい
- 「観る」から「関わる」になった、新しい映画の楽しみ方を知ってほしい。
- 都市伝説・オカルトを通して情報伝達方法の面白さを知ってほしい
- 口伝から本、写真、新聞、ラジオ、テレビ、ネットなど、都市伝説は情報伝達の歴史、変遷を象徴するものだと思う。都市伝説を通じて情報伝達の歴史の面白さを感じてほしい。
- 「カカポ」という生き物のことを広めたい
- 世界で最も絶滅の危機に瀕している鳥の一種の「カカポ（フクロウオウム）」について知ってもらいたい。
- 世界で最も絶滅の危機に瀕している鳥の一種の「カカポ（フクロウオウム）」について知ってもらいたい。
sampledesu.jpg
s02.PNG
s01.PNG
main.jpg
l02.png
l01.png
raf.jpeg
waiya2.png
waiy.jpg
waiya.png
