#author("2025-07-28T22:28:07+09:00","default:member","member") #author("2025-07-28T23:22:34+09:00","default:member","member") *たらむび。 -インタラクティブ映画のススメ- “観る”だけじゃない、新しい映画の形「インタラクティブ映画」の魅力を紹介します #image(mainP.jpg) -''Nao Kukita'' -'''Keywords：interactive movie , movie , web site''' -webサイト：[[【たらむび。】>https://29-mochi.github.io/kenkyu001/]] + ~ **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; 「インタラクティブ映画」という映画の形式を、より多くの人に周知するためのwebサイト、webコンテンツ ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; まず「インタラクティブ映画」とは「視聴者が人物の行動やルートを選択でき、物語に介入できる」映画です。 2025年2月、日本初のインタラクティブ映画が公開されました。実際に劇場で鑑賞したところ、観客自身が物語に介入できる体験に、今までの映画とは違う、没入感と感動を覚えました。 現代のエンターテインメントは、イマーシブシアターやVRコンテンツなど、体験者が深く没入できることを重視する傾向が強まっています。インタラクティブ映画は、こうした流れの中で、これからの時代を代表する新たなエンターテインメントの形になると感じました。今後、より周知を広めることで、こういったエンターテイメントや作品が増えていく一助になるような制作ができればいいなと思ったことがきっかけです。 そこで、インタラクティブ映画の魅力をより多くの人に知ってもらい、その可能性を広げるために、情報を発信するウェブサイトを制作することにしました。 本サイトでは、インタラクティブ映画の仕組みやレビューを紹介し、「知らない人でも分かりやすい」「手軽に触れられる」Webサイトを目指します。 ~ ***コンセプト 「“観る”だけじゃない、新しい映画の楽しみ方を紹介する」 インタラクティブ映画を知らない人・興味関心を持った人にもわかりやすく、楽しく魅力を知ってもらう。 //&color(red){基本的な考え方、枠組み、視点など}; ~ ***成果物の仕様 webサイト(HTML)、web上で遊べるノベルゲーム、リーフレット(A6・三つ折り) //&color(red){&small(成果物の形式・サイズ・時間尺等);}; ~ |50|50|c |#image(waiya2.png)|#image(waiy.jpg)| |CENTER:サイトマップ|CENTER:ワイヤーフレーム| -webサイト --視覚的なわかりやすさを意識し、画像やイラストを多く用いた。文字情報だけでは伝わりにくい作品の世界観や分岐の構造などを、直感的に理解してもらえるように工夫。また、興味を持続しやすい構成になっていると考えている。 --ページ構成では、映画の仕組みや魅力を段階的に紹介し、初めてこのジャンルに触れる人にも理解しやすい流れを意識した。 ~ -リーフレット #image(aaa1.png) #image(aaa2.png) --[[PDF(OneDrive)>https://ksumail-my.sharepoint.com/:b:/g/personal/k23as603_st_kyusan-u_ac_jp/EetfU-jqIsVFvOsFHIbCDwcBmYsOewgTtdoWlCYtsz2JIA?e=dS1IGv]] --Webサイトの導入としての役割を果たすだけでなく、インターネット環境がない人にも作品の魅力を伝えられる手段として機能する。媒体を複数用いることで、より広い層へのアプローチが可能になり、情報伝達の幅を広げることができると考えている。 //***メンバー //&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記}; ~ ***制作ツール Adobe Illustrator、Visual Studio Code(HTML、CSS、Java script)、ibis Paint X //&color(red){使用するツール｜ハードウエア・ソフトウエア}; ~ ***プロジェクトの期間 2025.04.08 - 2025.07.01 webサイト部分の完成 2025.08.01 - 2025.12.1 ゲームの実装、最終完成 //&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX }; ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; 本プロジェクトでは、インタラクティブ映画の魅力を伝えるWebサイトを制作した。 視覚的な工夫として画像やイラストを多用し、文章主体の構成よりも直感的な理解を促した。ユーザーの興味を引きやすくする効果があると考えられる。 また、Webサイトの補完的な導入施策として、映画館で配布することを想定した冊子も併せて制作した。これにより、Web環境にアクセスできない層にも情報を届ける手段を確保できた点で、より認知を広げることが期待できるアプローチとなったと思う。 「知らない人でも分かりやすい」「手軽に触れられる」Webサイト、という目的は達成できたと感じている。 当初は、後期の授業と連携してゲーム要素の実装も検討していたが、実制作を通して、紹介を主目的とするサイト構成では、オリジナルのコンテンツを十分に活かすスペースが確保しづらいという課題が見つかった。 そのため、プロジェクト全体のテーマ設定について再検討が必要であると判断した。今回の制作を通して身についた知識や技術を活かして、後期ではテーマ設定から見直して制作を進めたい。 ~ ~ **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; -「インタラクティブ」とは、利用者がパソコンやスマートフォン、タブレット端末等の情報通信機器を利用する際、対話を行うように操作を進めていく形態を指す。加えて、情報の送り手と受け取り手が、相互にコミュニケーションを図れる状態にあることを、インタラクティブと呼ぶ。インタラクティブ(Interactive)とは、「相互の」「双方向の」を意味する英単語である。 --[[インタラクティブ | 用語辞典 | BizDrive（ビズドライブ）>https://business.ntt-east.co.jp/bizdrive/word/interactive.html]] -インタラクティブシネマ(インタラクティブ映画) インタラクティブシネマとは、映画のようなシナリオと映像演出を持ちながら、プレーヤーが自らストーリーを進行させてゆくことのできるマルチメディアコンテンツのことである。映画とコンピューターゲームの中間的存在であるといえる。映画のように映像やストーリー性の高いコンテンツに対して、こちらから働きかけることができるという感覚を得ることができる。 --[[インタラクティブシネマとは何？わかりやすく解説Weblio辞書>https://www.weblio.jp/content/インタラクティブシネマ]] -インタラクティブ映画の紹介サイト --特定のインタラクティブ作品のレビューなどはあったものの、インタラクティブ映画というジャンル自体を掘り下げるものは見つかりませんでした。また、映画館のサイトでもインタラクティブ映画自体の説明がほとんどなく、気軽に体験しづらいのではないかと感じました。 -劇場型のインタラクティブ映画は映画館へのシステムや機材の導入が必要で、先日公開された日本初のインタラクティブ映画の上映館は全国で85館と、一般的な映画の三分の一程度の規模での公開。 -また、映画館サイトの作品ページにもインタラクティブ映画自体の説明はほとんどなく、鑑賞する際の手軽さに欠ける。 -2025年2月21日、日本初のインタラクティブ映画『ヒプノシスマイク -Division Rap Battle-』が劇場で公開された。7月1日時点で興行収入18億を突破した。（映画業界では、興行収入10億円がヒットの基準と言われている） ニュースサイトやテレビ番組でも取り上げられており、関心が高まっていると感じている。 ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; -web上で遊べるインタラクティブな体験・ゲーム --[[NEAL.FUN>https://neal.fun]] web上でさまざまなゲームが遊べるサイト。 いくつかゲームが遊べるが、その中でも世界中の人が参加できる投票ゲーム [[lets settle this>https://neal.fun/lets-settle-this/]] と、トロッコ問題をモチーフにした自分で選択していくゲーム [[absurd trolley problems>https://neal.fun/absurd-trolley-problems/]]は、インタラクティブ映画の楽しみ方に近いと感じた。・ユーザーが自分で選択肢を選ぶ点、投票率を見ることができる点など… ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; -[[HTML・CSSのみでつくるアコーディオンメニュー8選>https://pote-chil.com/css-stock/ja/accordion]] --レビューページのネタバレ防止表示に使用 -[[ホームページ画像の最適化：スマホやデスクトップの適正サイズ>https://www.shopify.com/jp/blog/image-sizes]] --全体の画像やコンテンツのサイズ、配置の参考に使用 -[[HTMLとCSSのみで作るトップへ戻るボタン【デザイン3種類】>https://www.fuji-blo.com/entry/page-top#]] --色や背景色を変更して使用。 ~ ~ **プロジェクト管理 ***スケジュール -[[工程表(OneDrive)>https://ksumail-my.sharepoint.com/:x:/g/personal/k23as603_st_kyusan-u_ac_jp/EZS_mC5s1qpDuJVytZU7i2oB1mbabCzGtJfC5vZmXnZN3g?e=e42eI7]] -5/20,5/27 1Q審査 --webサイトのデザインカンプ --プレゼン資料 -7/1,7/8 1Q審査 --webサイト部分の完成 //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; ~ //***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2025.07.15 ***サイト修正 |#image(777.png)|#image(888.png)| |#image(777.png)|#image(56.png)| -indexで一部左寄せになっていた文章を中央揃えに -サイト全体のフォントをZEN丸ゴシックに変更して雰囲気を統一 -他のイラストとの統一感を出すために、レビュー用の絵を修正 シンプルな絵柄に ~ ~ **2025.07.08 ***リーフレット修正 |#image(rrr.png)|#image(eee.png)| -サイトと同じ点線のあしらいを追加 -表紙のタイトルをサイト内画像で使用しているものに変更 ***サイト修正 #image(Re.png) -他のイラストとの統一感を出すために、レビュー用の絵を修正 シンプルな絵柄に ~ ~ **2025.07.01 ***サイト調整 -サイト上部にもどるボタンの表示を調整。上矢印と文字を組み合わせることで直感的にも分かりやすくした。 #image(aaa3.png) ***リーフレット最終調整 -実際に印刷しつつ、文字サイズや字間を調整した。 #image(aaa1.png) #image(aaa2.png) ~ ~ **2025.06.24 ***サイト最終調整 -画像や動画で引用できない作品を紹介するためのイメージイラストの制作 -実際にゲームを何度かプレイし感想記事を制作。また、レビュー用画像を制作 #image(late3.jpg) ~ ~ **2025.06.17 ***リーフレット制作 #image(ri1.png) #image(ri2.png) ***webサイト制作 #image(agag.jpg) ~ ~ **2025.06.10 ***サイト、冊子用のイラスト制作 #image(edayo.png) ***webサイト制作 メインページ及びサイト全体の大枠がほとんど完成した。 #image(sudy.jpg) ~ ~ **2025.06.03 ***HTML,CSSを用いたサイト制作 -サイト進捗：[[sample_01>https://29-mochi.github.io/kenkyuu001/]] --プロトタイプからの変更点：管理者紹介、サイト開設者の追加 #image(sampledesu.jpg) ~ ~ **2025.05.27 ***リーフレットの制作を検討 ⁻サイトを作っても、サイトまでたどり着かないと意味がない。映画館に置けるようなリーフレットの制作を検討。 #image(s01.PNG) #image(s02.PNG) ***全国の投票結果の調査 -現実の日本とのリンク -作中には｢イケブクロ｣｢ヨコハマ｣｢シブヤ｣｢シンジュク｣｢オオサカ｣｢ナゴヤ｣といった、現実の日本と同じ地名を冠する地域があり、それぞれの地域を拠点として活動しているディビジョン(ラップをするチーム)が登場する。 公式サイトでは、全国の映画館での勝敗や投票結果の割合が掲載されている。 [[各劇場投票結果>https://hypnosismic-movie.com/voting-status/]] これを見ると、｢TOHOシネマズ池袋｣ではイケブクロのチームが、｢TOHOシネマズ渋谷｣ではシブヤのチームが優勝率98%以上を誇っている。 また、少しひねったものもあった。 --｢TOHOシネマズ日本橋｣では同名(読みは違う)の地名｢日本橋｣が大阪にもあるからか、オオサカのチームが勝率98%を記録している。 --「TOHOシネマズ日比谷」では、チームの拠点となる高層ビルに似た建物であることや、映画館の付近にキャラクターの名前と同じ名前の広場が存在することから、女性のチームが優勝しやすい。 …など。 -記念日 --キャラクターの誕生日にはそのキャラクターの属するチームが優勝する確率がかなり高い。また、語呂合わせや、チームから連想される日付などで、特定のチームが優勝しやすい傾向にある。 --4月4日 声優さんが制定した非公式記念日 大阪のチームのハンドサインが指を4本立てるものであることから定められた。大阪のチームが優勝しやすい。 --4月28日 語呂合わせで「シブヤ」 渋谷のチームが優勝しやすい。 --令和7年5月8日 語呂合わせで「ナゴヤ」 名古屋のチームが優勝しやすい。 ~ ~ **2025.05.20 ***中間発表 -「自分作ったコンテンツ(文字、デザイン等)」量が少ない --上映中のインタラクティブ映画の、公式で公開されている統計や全国の投票結果を調査し、考察や感じたことをレポート --過去公開されたインタラクティブ映画の紹介ページで、自作のイラストを使用 ***ロゴ #image(l01.png) #image(l02.png) -映画に関するサイトであることが伝わる -ストーリーが分岐していく特徴を表現 ~ ~ **2025.05.13 ***プロトタイプの作成 -[[プロトタイプ(figma)>https://www.figma.com/proto/Fu3HojarhUJvGUkhILzsOP/%E7%84%A1%E9%A1%8C?page-id=0%3A1&node-id=1-2&p=f&viewport=184%2C-1147%2C0.5&t=rq0tVUes8tdXGoeD-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=1%3A2]] -指摘していただいたこと、気をつけること --余白や行間を、サイトのコンセプトに合ったものにする --サイト内の画像や情報の引用元は確かにしておく --スマホで見ることを想定 小さい画面のため、情報の連続性や視認性を意識 ~ ***サイトのロゴ -最終案 --コンセプトとしては「気軽に触れてほしい」「敷居を低くしたい」 --ゆるく、可愛らしい とっつきやすいイメージ #image(raf.jpeg) ~ ***次回までにやること -ロゴの完成 -プロトタイプのブラッシュアップ ~ ~ **2025.04.29 ***ワイヤーフレームの作成 #image(waiy.jpg) -指摘していただいたこと --PC向けの配置になっているため、スマホ基準にする ---画像は正方形〜縦長に ---スマホの一画面を一コマと考える ~ ***サイトタイトルの決定、背景と目的・コンセプトの整理、記載 -サイトタイトル「インタラクティブ映画のススメ」 --「インタラクティブ映画」というワードを入れ、分かりやすいように --「⚪︎⚪︎のススメ」という定番のフレーズで親しみやすく ~ ~ **2025.04.22 ***「Twine」「Github」を使用したブラウザゲームの調査 -webデザインの授業にて、HTMLやGithubを活用した。気軽に体験してもらう・メインのサイトから誘導しやすいようにweb上で完結する簡易的なブラウザノベルゲームを作成。 -Twineの調査 --[[Twineでノベルゲームを作ってみよう ～ノベルゲーム制作ソフト「Twine」の紹介～>https://note.com/medamaman/n/n4dd88d0c298c]] --[[無料でゲームブックやYes/Noチャートをプログラミングの知識なしで作成できる「Twine」を使ってみた>https://gigazine.net/news/20191217-twine/]] ***webサイトの構成 -サイトに載せたい情報、実装したい要素の整理 --インタラクティブ映画とは何か --インタラクティブ映画の歴史 --日本初のインタラクティブ映画「ヒプノシスマイク」の紹介 ---実際に自分が映画を見た感想のレポート ---現実世界とのリンク 記念日や「聖地」 --「インタラクティブ映画風」の体験を提供 ---TwineとHTMLを使用した、web上で遊べるノベルゲームの実装 ---インタラクティブ映画用のアプリで見られる情報(選択肢を選んだ割合、他の観客との一致率など)を表示 -サイトマップの作成 --各ページのタイトルは検討中のため、一旦内容をそのまま表記 #image(waiya2.png) ***制作スケジュールの設定。工程表の作成。 -作業量を鑑み、前期〜後期を通しての制作に決定。 --前期でwebサイトの作成、記事の準備 --夏休み・後期を使ってゲーム部分の作成、実装 ~ // ~ ~ **2025.04.15 ***どんな形でまとめるかを検討 -webサイト --日本初のインタラクティブ映画『ヒプノシスマイク -Division Rap Battle-』を中心に、インタラクティブ映画の歴史や魅力を紹介し、新たな映画コンテンツの楽しみ方を知ってもらう。 --先行調査：既存のサイトでは、インタラクティブ映画に注目したサイトは見つけられなかった。特定のインタラクティブ映画のレビューや記事などは見つかる。 -web上で「インタラクティブ」な体験を提供 --クリックで選択肢を選びストーリーが進んでいくサイトで体験してもらう？ ゲームブックに近いかも --ストーリーなどはChat GPTを活用 ~ ***インタラクティブ映画に関する調査 --インタラクティブとは、利用者がパソコンやスマートフォン、タブレット端末等の情報通信機器を利用する際、対話を行うように操作を進めていく形態を指す。加えて、情報の送り手と受け取り手が、相互にコミュニケーションを図れる状態にあることを、インタラクティブと呼ぶ。インタラクティブ(Interactive)とは、「相互の」「双方向の」を意味する英単語である。 ---[[インタラクティブ | 用語辞典 | BizDrive（ビズドライブ）>https://business.ntt-east.co.jp/bizdrive/word/interactive.html]] --インタラクティブシネマ(インタラクティブ映画) インタラクティブシネマとは、映画のようなシナリオと映像演出を持ちながら、プレーヤーが自らストーリーを進行させてゆくことのできるマルチメディアコンテンツのことである。映画とコンピューターゲームの中間的存在であるといえる。映画のように映像やストーリー性の高いコンテンツに対して、こちらから働きかけることができるという感覚を得ることができる。 ---[[インタラクティブシネマとは何？わかりやすく解説Weblio辞書>https://www.weblio.jp/content/インタラクティブシネマ]] 「一方通行ではなく、相互に影響を与える」 -インタラクティブ作品の歴史 --『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 ***研究テーマ案 -「インタラクティブ映画」をもっと広めたい --「観る」から「関わる」になった、新しい映画の楽しみ方を知ってほしい。 -都市伝説・オカルトを通して情報伝達方法の面白さを知ってほしい --口伝から本、写真、新聞、ラジオ、テレビ、ネットなど、都市伝説は情報伝達の歴史、変遷を象徴するものだと思う。都市伝説を通じて情報伝達の歴史の面白さを感じてほしい。 -「カカポ」という生き物のことを広めたい --世界で最も絶滅の危機に瀕している鳥の一種の「カカポ（フクロウオウム）」について知ってもらいたい。 ~ ~ ~ //**2025.4. //*** //- //~ //***XXXXXXX //-◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯ //-◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯ //~ //~