久木田直央/情報デザイン研究I
をテンプレートにして作成
HOME
ABOUT
最新の更新
2022
MEMBER 2022
棈松智也
梅木悠民
江頭奏
大井このか
大石颯
太田糸音
太田姫奈
越智楓
鎌田真幸
楠田佑月
興梠媛愛
後藤太成
坂井彩華
指方依緒
徐泰陽
杉野市之助
堤晴司
角田雄一
中井千尋
原朋恵
平嶋明日花
増田里奈
深町彩海
藤島早希
宮路咲希
梁井英翔
山口愛麗
山本彩花
松田葉奈
松本龍太郎
熊谷涼花
近藤ひかる
善結穂
待永萌衣
三浦遥
木村円香
鴻上早紀
石松匡広
上田莉帆
宇田川春稀
宇美希美
佐野美和
竹之内咲希
土斐崎種定
野村優亜
福田千紗
山川彩香
山田侑加子
重松優花
甲斐陸斗
2023
MEMBER 2023
秋月靖雅
浅田真優花
阿南慶子
荒谷唯斗
安藤貴仁
池邉成
井上大河
岩本愛結
梅﨑美和
浦朱里
江村梨里香
大場こころ
勝田喜一
亀崎瑞穂
神田舞
白井くるみ
髙市遥
竹松莉羽
寺田圭志
中村心香
原晴紀
菱谷実来
日山晃良
平崎千夏
福井涼
堀玲二
早稲田加奈恵
渡邊優希
十時明日香
江口依舞
久木田直央
本田麻緒
山田真央
石井彩晶
大神槙之介
大熊玄樹
大山花音
岡萌絵子
荻野美咲
鐘ヶ江雅
金田桜子
北村美優香
清野梨果
高庄玲衣
津覇稜也
福屋早希乃
脇山千寛
2024
MEMBER 2024
芦谷心渚
安部詩織
池田隆之介
伊藤早紀
越智花凛
金ヶ江光千瑠
佐藤澪
川村玲太
菊池真桜
後藤未羽
齊場由布
佐々木陽菜
猿本大翔
竹之内優希
田尻有沙
谷口和歌子
千々岩聡真
手島凜
鳥越友菜
中尾桃瀬
庭瀬美来
野口朗央
福岡比菜
松崎菜々実
松永紗和
真子大輝
南妃香莉
宮園晴日
森山海莉
劉沢寧
渡辺颯香
足立実優
池田阜弥
井上朋美
宇野日菜
上瀧桃子
佐藤美月
茂山和寛
髙嶋莉彩
橘彩以
田中さゆり
田村宥奈
徳永歩乃佳
轟はなの
橋本音花
若狭映那
古賀莉梨香
2025
MEMBER 2025
赤星花
有薗晴己
泉百々
稲吉うた
宇都宮楓
大島詩絵里
小川眞由
源島咲太郎
櫻井風希
佐藤禾生子
友田葵
中西恋果
中山颯太
新甫楓佳
納富早希
野口瑞季
橋本京佳
東島百合子
平野雅華
深井梨々子
松本美時
丸石樹
椋本凌
村山小桜
村山優
持田真翔
吉松まなみ
浅川ひより
池光希
大崎優衣
大瀬梨乃亜
加藤虎太郎
金丸菜美
北本杏
坂本隆太朗
杉野亜子
田代夕加里
永野陽香
濱村悠伸
原凛々子
一松彩心
八木玲蓮
STAFF
専任教員一覧
伊藤敬生
井上貢一
井上友子
岩田敦之
桜井祐
永嶋さゆり
北島己佐吉
OBOG
2024年度卒業生
2023年度卒業生
2022年度卒業生
2021年度卒業生
2020年度卒業生
2019年度卒業生
SESSION
専門科目一覧
ソーシャルデザイン応用演習
情報デザイン演習I
企画デザイン演習I
情報デザイン演習IIIA
情報デザイン演習IIIB
地域ブランド企画演習IIIA
地域ブランド企画演習IIIB
情報デザイン研究II
地域ブランド企画研究II
通信ネットワーク演習
データサイエンス
3DCG演習
卒業研究
教務ガイダンス
RecommendedVideo
BasicKnowledge
PROJECT
SEARCH
開始行:
*たらむび。 -インタラクティブ映画のススメ-
“観る”だけじゃない、新しい映画の形「インタラクティブ映画...
#image(mainP.jpg)
-''Nao Kukita''
-'''Keywords:interactive movie , movie , web site'''
-webサイト:[[【たらむび。】>https://29-mochi.github.io/k...
+
~
**概要
***これは何?
//&color(red){これは何か・・を簡潔に};
「インタラクティブ映画」という映画の形式を、より多くの人...
~
***背景と目的
//&color(red){プロジェクトの背景と目的};
まず「インタラクティブ映画」とは「視聴者が人物の行動や...
2025年2月、日本初のインタラクティブ映画が公開されました...
現代のエンターテインメントは、イマーシブシアターやVRコ...
そこで、インタラクティブ映画の魅力をより多くの人に知っ...
本サイトでは、インタラクティブ映画の仕組みやレビューを...
~
***コンセプト
「“観る”だけじゃない、新しい映画の楽しみ方を紹介する」
インタラクティブ映画を知らない人・興味関心を持った人にも...
//&color(red){基本的な考え方、枠組み、視点など};
~
***成果物の仕様
webサイト(HTML)、web上で遊べるノベルゲーム、リーフレット(...
//&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...
--Webサイトの導入としての役割を果たすだけでなく、インター...
//***メンバー
//&color(red){共同プロジェクトの場合のみ|メンバーと役割...
~
***制作ツール
Adobe Illustrator、Visual Studio Code(HTML、CSS、Java scr...
//&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){プロジェクトが完結したら「まとめ」を記載し...
本プロジェクトでは、インタラクティブ映画の魅力を伝えるW...
視覚的な工夫として画像やイラストを多用し、文章主体の構...
また、Webサイトの補完的な導入施策として、映画館で配布す...
「知らない人でも分かりやすい」「手軽に触れられる」Webサ...
当初は、後期の授業と連携してゲーム要素の実装も検討して...
そのため、プロジェクト全体のテーマ設定について再検討が...
~
~
**調査
***現状調査
//&color(red){プロジェクトのテーマに関わる社会の現状と問...
-「インタラクティブ」とは、利用者がパソコンやスマートフォ...
--[[インタラクティブ | 用語辞典 | BizDrive(ビズドライブ...
-インタラクティブシネマ(インタラクティブ映画)
インタラクティブシネマとは、映画のようなシナリオと映像演...
--[[インタラクティブシネマとは何?わかりやすく解説Weblio...
-インタラクティブ映画の紹介サイト
--特定のインタラクティブ作品のレビューなどはあったものの...
-劇場型のインタラクティブ映画は映画館へのシステムや機材の...
-また、映画館サイトの作品ページにもインタラクティブ映画自...
-2025年2月21日、日本初のインタラクティブ映画『ヒプノシス...
ニュースサイトやテレビ番組でも取り上げられており、関心が...
~
***先行事例
//&color(red){プロジェクトのテーマに該当する先行事例の紹...
-web上で遊べるインタラクティブな体験・ゲーム
--[[NEAL.FUN>https://neal.fun]] web上でさまざまなゲーム...
いくつかゲームが遊べるが、その中でも世界中の人が参加でき...
~
***技法・技術情報
//&color(red){プロジェクトの遂行に必要な技法・技術に関す...
-[[HTML・CSSのみでつくるアコーディオンメニュー8選>https:/...
--レビューページのネタバレ防止表示に使用
-[[ホームページ画像の最適化:スマホやデスクトップの適正サ...
--全体の画像やコンテンツのサイズ、配置の参考に使用
-[[HTMLとCSSのみで作るトップへ戻るボタン【デザイン3種類】...
--色や背景色を変更して使用。
~
~
**プロジェクト管理
***スケジュール
-[[工程表(OneDrive)>https://ksumail-my.sharepoint.com/:x:...
-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(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/kenky...
--プロトタイプからの変更点:管理者紹介、サイト開設者の追加
#image(sampledesu.jpg)
~
~
**2025.05.27
***リーフレットの制作を検討
⁻サイトを作っても、サイトまでたどり着かないと意味がない。...
#image(s01.PNG)
#image(s02.PNG)
***全国の投票結果の調査
-現実の日本とのリンク
-作中には「イケブクロ」「ヨコハマ」「シブヤ」「シンジュク」「オオ...
公式サイトでは、全国の映画館での勝敗や投票結果の割合が掲...
[[各劇場投票結果>https://hypnosismic-movie.com/voting-sta...
これを見ると、「TOHOシネマズ池袋」ではイケブクロのチームが...
また、少しひねったものもあった。
--「TOHOシネマズ日本橋」では同名(読みは違う)の地名「日本橋」...
--「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/Fu3Hoj...
-指摘していただいたこと、気をつけること
--余白や行間を、サイトのコンセプトに合ったものにする
--サイト内の画像や情報の引用元は確かにしておく
--スマホで見ることを想定 小さい画面のため、情報の連続性...
~
***サイトのロゴ
-最終案
--コンセプトとしては「気軽に触れてほしい」「敷居を低くし...
--ゆるく、可愛らしい とっつきやすいイメージ
#image(raf.jpeg)
~
***次回までにやること
-ロゴの完成
-プロトタイプのブラッシュアップ
~
~
**2025.04.29
***ワイヤーフレームの作成
#image(waiy.jpg)
-指摘していただいたこと
--PC向けの配置になっているため、スマホ基準にする
---画像は正方形〜縦長に
---スマホの一画面を一コマと考える
~
***サイトタイトルの決定、背景と目的・コンセプトの整理、記載
-サイトタイトル「インタラクティブ映画のススメ」
--「インタラクティブ映画」というワードを入れ、分かりやす...
--「⚪︎⚪︎のススメ」という定番のフレーズで親しみやすく
~
~
**2025.04.22
***「Twine」「Github」を使用したブラウザゲームの調査
-webデザインの授業にて、HTMLやGithubを活用した。気軽に体...
-Twineの調査
--[[Twineでノベルゲームを作ってみよう ~ノベルゲーム制作...
--[[無料でゲームブックやYes/Noチャートをプログラミングの...
***webサイトの構成
-サイトに載せたい情報、実装したい要素の整理
--インタラクティブ映画とは何か
--インタラクティブ映画の歴史
--日本初のインタラクティブ映画「ヒプノシスマイク」の紹介
---実際に自分が映画を見た感想のレポート
---現実世界とのリンク 記念日や「聖地」
--「インタラクティブ映画風」の体験を提供
---TwineとHTMLを使用した、web上で遊べるノベルゲームの実装
---インタラクティブ映画用のアプリで見られる情報(選択肢を...
-サイトマップの作成
--各ページのタイトルは検討中のため、一旦内容をそのまま表記
#image(waiya2.png)
***制作スケジュールの設定。工程表の作成。
-作業量を鑑み、前期〜後期を通しての制作に決定。
--前期でwebサイトの作成、記事の準備
--夏休み・後期を使ってゲーム部分の作成、実装
~
//
~
~
**2025.04.15
***どんな形でまとめるかを検討
-webサイト
--日本初のインタラクティブ映画『ヒプノシスマイク -Divisio...
--先行調査:既存のサイトでは、インタラクティブ映画に注目...
-web上で「インタラクティブ」な体験を提供
--クリックで選択肢を選びストーリーが進んでいくサイトで体...
--ストーリーなどはChat GPTを活用
~
***インタラクティブ映画に関する調査
--インタラクティブとは、利用者がパソコンやスマートフォン...
---[[インタラクティブ | 用語辞典 | BizDrive(ビズドライブ...
--インタラクティブシネマ(インタラクティブ映画)
インタラクティブシネマとは、映画のようなシナリオと映像演...
---[[インタラクティブシネマとは何?わかりやすく解説Weblio...
「一方通行ではなく、相互に影響を与える」
-インタラクティブ作品の歴史
--『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
//-◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
//-◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
//~
//~
終了行:
*たらむび。 -インタラクティブ映画のススメ-
“観る”だけじゃない、新しい映画の形「インタラクティブ映画...
#image(mainP.jpg)
-''Nao Kukita''
-'''Keywords:interactive movie , movie , web site'''
-webサイト:[[【たらむび。】>https://29-mochi.github.io/k...
+
~
**概要
***これは何?
//&color(red){これは何か・・を簡潔に};
「インタラクティブ映画」という映画の形式を、より多くの人...
~
***背景と目的
//&color(red){プロジェクトの背景と目的};
まず「インタラクティブ映画」とは「視聴者が人物の行動や...
2025年2月、日本初のインタラクティブ映画が公開されました...
現代のエンターテインメントは、イマーシブシアターやVRコ...
そこで、インタラクティブ映画の魅力をより多くの人に知っ...
本サイトでは、インタラクティブ映画の仕組みやレビューを...
~
***コンセプト
「“観る”だけじゃない、新しい映画の楽しみ方を紹介する」
インタラクティブ映画を知らない人・興味関心を持った人にも...
//&color(red){基本的な考え方、枠組み、視点など};
~
***成果物の仕様
webサイト(HTML)、web上で遊べるノベルゲーム、リーフレット(...
//&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...
--Webサイトの導入としての役割を果たすだけでなく、インター...
//***メンバー
//&color(red){共同プロジェクトの場合のみ|メンバーと役割...
~
***制作ツール
Adobe Illustrator、Visual Studio Code(HTML、CSS、Java scr...
//&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){プロジェクトが完結したら「まとめ」を記載し...
本プロジェクトでは、インタラクティブ映画の魅力を伝えるW...
視覚的な工夫として画像やイラストを多用し、文章主体の構...
また、Webサイトの補完的な導入施策として、映画館で配布す...
「知らない人でも分かりやすい」「手軽に触れられる」Webサ...
当初は、後期の授業と連携してゲーム要素の実装も検討して...
そのため、プロジェクト全体のテーマ設定について再検討が...
~
~
**調査
***現状調査
//&color(red){プロジェクトのテーマに関わる社会の現状と問...
-「インタラクティブ」とは、利用者がパソコンやスマートフォ...
--[[インタラクティブ | 用語辞典 | BizDrive(ビズドライブ...
-インタラクティブシネマ(インタラクティブ映画)
インタラクティブシネマとは、映画のようなシナリオと映像演...
--[[インタラクティブシネマとは何?わかりやすく解説Weblio...
-インタラクティブ映画の紹介サイト
--特定のインタラクティブ作品のレビューなどはあったものの...
-劇場型のインタラクティブ映画は映画館へのシステムや機材の...
-また、映画館サイトの作品ページにもインタラクティブ映画自...
-2025年2月21日、日本初のインタラクティブ映画『ヒプノシス...
ニュースサイトやテレビ番組でも取り上げられており、関心が...
~
***先行事例
//&color(red){プロジェクトのテーマに該当する先行事例の紹...
-web上で遊べるインタラクティブな体験・ゲーム
--[[NEAL.FUN>https://neal.fun]] web上でさまざまなゲーム...
いくつかゲームが遊べるが、その中でも世界中の人が参加でき...
~
***技法・技術情報
//&color(red){プロジェクトの遂行に必要な技法・技術に関す...
-[[HTML・CSSのみでつくるアコーディオンメニュー8選>https:/...
--レビューページのネタバレ防止表示に使用
-[[ホームページ画像の最適化:スマホやデスクトップの適正サ...
--全体の画像やコンテンツのサイズ、配置の参考に使用
-[[HTMLとCSSのみで作るトップへ戻るボタン【デザイン3種類】...
--色や背景色を変更して使用。
~
~
**プロジェクト管理
***スケジュール
-[[工程表(OneDrive)>https://ksumail-my.sharepoint.com/:x:...
-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(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/kenky...
--プロトタイプからの変更点:管理者紹介、サイト開設者の追加
#image(sampledesu.jpg)
~
~
**2025.05.27
***リーフレットの制作を検討
⁻サイトを作っても、サイトまでたどり着かないと意味がない。...
#image(s01.PNG)
#image(s02.PNG)
***全国の投票結果の調査
-現実の日本とのリンク
-作中には「イケブクロ」「ヨコハマ」「シブヤ」「シンジュク」「オオ...
公式サイトでは、全国の映画館での勝敗や投票結果の割合が掲...
[[各劇場投票結果>https://hypnosismic-movie.com/voting-sta...
これを見ると、「TOHOシネマズ池袋」ではイケブクロのチームが...
また、少しひねったものもあった。
--「TOHOシネマズ日本橋」では同名(読みは違う)の地名「日本橋」...
--「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/Fu3Hoj...
-指摘していただいたこと、気をつけること
--余白や行間を、サイトのコンセプトに合ったものにする
--サイト内の画像や情報の引用元は確かにしておく
--スマホで見ることを想定 小さい画面のため、情報の連続性...
~
***サイトのロゴ
-最終案
--コンセプトとしては「気軽に触れてほしい」「敷居を低くし...
--ゆるく、可愛らしい とっつきやすいイメージ
#image(raf.jpeg)
~
***次回までにやること
-ロゴの完成
-プロトタイプのブラッシュアップ
~
~
**2025.04.29
***ワイヤーフレームの作成
#image(waiy.jpg)
-指摘していただいたこと
--PC向けの配置になっているため、スマホ基準にする
---画像は正方形〜縦長に
---スマホの一画面を一コマと考える
~
***サイトタイトルの決定、背景と目的・コンセプトの整理、記載
-サイトタイトル「インタラクティブ映画のススメ」
--「インタラクティブ映画」というワードを入れ、分かりやす...
--「⚪︎⚪︎のススメ」という定番のフレーズで親しみやすく
~
~
**2025.04.22
***「Twine」「Github」を使用したブラウザゲームの調査
-webデザインの授業にて、HTMLやGithubを活用した。気軽に体...
-Twineの調査
--[[Twineでノベルゲームを作ってみよう ~ノベルゲーム制作...
--[[無料でゲームブックやYes/Noチャートをプログラミングの...
***webサイトの構成
-サイトに載せたい情報、実装したい要素の整理
--インタラクティブ映画とは何か
--インタラクティブ映画の歴史
--日本初のインタラクティブ映画「ヒプノシスマイク」の紹介
---実際に自分が映画を見た感想のレポート
---現実世界とのリンク 記念日や「聖地」
--「インタラクティブ映画風」の体験を提供
---TwineとHTMLを使用した、web上で遊べるノベルゲームの実装
---インタラクティブ映画用のアプリで見られる情報(選択肢を...
-サイトマップの作成
--各ページのタイトルは検討中のため、一旦内容をそのまま表記
#image(waiya2.png)
***制作スケジュールの設定。工程表の作成。
-作業量を鑑み、前期〜後期を通しての制作に決定。
--前期でwebサイトの作成、記事の準備
--夏休み・後期を使ってゲーム部分の作成、実装
~
//
~
~
**2025.04.15
***どんな形でまとめるかを検討
-webサイト
--日本初のインタラクティブ映画『ヒプノシスマイク -Divisio...
--先行調査:既存のサイトでは、インタラクティブ映画に注目...
-web上で「インタラクティブ」な体験を提供
--クリックで選択肢を選びストーリーが進んでいくサイトで体...
--ストーリーなどはChat GPTを活用
~
***インタラクティブ映画に関する調査
--インタラクティブとは、利用者がパソコンやスマートフォン...
---[[インタラクティブ | 用語辞典 | BizDrive(ビズドライブ...
--インタラクティブシネマ(インタラクティブ映画)
インタラクティブシネマとは、映画のようなシナリオと映像演...
---[[インタラクティブシネマとは何?わかりやすく解説Weblio...
「一方通行ではなく、相互に影響を与える」
-インタラクティブ作品の歴史
--『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
//-◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
//-◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
//~
//~
ページ名: