C!N3M4
アニメーションを使ってユーザーが映画作品を視覚的にイメージを伝える架空の映画館のwebサイト
- Idemitsu Miko
- Keywords:website, animation, movie theatre
- プロトタイプ
概要
これは何?
アニメーションを使ってユーザーが映画作品を視覚的にイメージを伝える架空の映画館のwebサイト
背景
近年webサイトのアニメーションや演出の幅が広がり、様々なものが生まれている。演出の幅が広がることでユーザーの動きが反映させたりサイトとスマホを連動させたり、3DCGや記事を拡張する機能など様々な表現ができるようになった
さらにアニメーションについて研究することでより効果的に情報を伝たり、より複雑な情報をわかりやすく伝えたりする方法を研究したいと考えたから
目的
映画館というモチーフを使ってwebサイトのアニメーションを多用したインタラクティブなサイトを作り、新しい表現方法によってユーザーにwebサイトを通した体験から得られる情報を増やしつつ、新しい表現方法を見つけてさらに没入感のあるWebサイトを提供するため
コンセプト
映画館には様々なコンセプトの映画がありアニメーションとの相性もよく、作品の世界観に引き込みやすく没入感を提供しやすい
架空の映画館という特殊な設定のwebサイト内で、ユーザーにアニメーションを通して体験と情報を提供する
成果物の仕様
メンバー
制作ツール
Windows11
iPadPro
Figma
HTML
CSS
Javascript
プロジェクトの期間
プロジェクトの期間|2024.04.12 - 2024.12.20
まとめ
現状調査の時点でインタラクティブという言葉やJavaScriptの知らなかったアニメーション、GitHubのAIを使った機能を知ることが出来てよりWebに関する知識を深めることが出来た
Webサイトに載せる映画の選定や謎解きを考える作業が難航しており遅れ気味なので、今後相談したり先行事例をさらに詳しく調べて遅れを取り戻したい
調査
現状調査
先行事例
映画館のウェブサイト
アニメーション重視のサイト
技法・技術情報
プロジェクト管理
スケジュール
スケジュール
ToDo
テーマ決めのための調査
技術に関する情報収集
映画のポスターの制作
映画の選定
サイトマップ・ワイヤーフレームの作成
webサイトのコーディング
中間発表準備
最終発表準備
修正・手直し
進捗記録
2024.06.28
相談して決まったこと
- 架空の販売サイトをつくる
- 絶対に売っていないようなもの、現実ではありえないものを題材にする
- 先にワイヤーフレームとコーディングをする
架空の販売サイトを作っているもの
新しいワイヤフレーム
2024.06.21
企画の練り直し
- アニメーションを多用した架空のサイトは作りたい
- 架空の販売サイト
- 映画館のサイト
- アニメーションを紹介するサイト?
2024.06.14
決めたこと
- ゲーム要素はなくしてアニメーションに絞る
- Webサイトがバグっている表現は無くす
サイト
2024.06.07
2024.05.31
テキストアニメーションテスト
テキストグリッチ
2024.05.24
中間発表の講評
- 何をしているのか分からない。どういうゲームなのか伝えるメッセージを出す
- オマージュした方が著作権侵害になりかねない。そのまま映画を載せたほうが良い
- 普通にインタラクティブなサイトを作ったほうがいいのでは?
- フローチャートや動きのサンプル、既存のキャプチャーを使う
- 類似するものを見つける
- 構成の段階をきちんと踏む
- 使いたい要素が目的に合うかきちんと見る
やりたいことに一番近いもの
参考になりそうなもの
フローチャート
2024.05.17
- メインビジュアルの作成
文字化け風にするためleetを使った(leetとは英語圏で使われるインターネット上でのアルファベットの標記のこと)
グリッチを使って画面が荒れている風にした
2024.05.10
ワイヤーフレームの作成続き
映画館のウェブサイト
Webサイトのデザインの参考にしたいもの
https://ac-bu.info/happening/
https://dozo-gift.com/
https://uniam.jp/
カラーパレット
Figmaインタラクションの作成
2024.04.26
仮のサイトマップとワイヤーフレーム(一部)の作成
調査
スケジュールの作成
技術に関すること
2024.04.19
参考になりそうなもの
相談して決まったこと
- Webサイトのアニメーションや設定にストーリー性を持たせてみる
- 謎解き要素などを入れて見る人に体験してもらう
- インタラクティブについて調べて情報収集する
インタラクティブとは
2024.04.12
参考になりそうなもの
やりたいこと・興味のあること
- Webサイト制作
- アニメーション
- カラーパレット
- フリーアイコン制作のサイト
- ポスターの制作
- 嘘の映画館のサイト