LogoMark.png

出光美心/卒業研究

CINEMA

サイト内の世界観を視覚を通して体験できるインタラクティブなwebサイト

 

            メインビジュアル、あるいは
            プロジェクトの最新の状態を視覚的に掲載

  




概要

これは何?

ユーザーがWebサイト内の世界を体験できるインタラクティブな架空の映画館のwebサイト

背景

近年webサイトのアニメーションや演出の幅が広がり、様々なものが生まれている。演出の幅が広がることでユーザーの動きが反映させたりサイトとスマホを連動させたり、3DCGや記事を拡張する機能など様々な表現ができるようになった
さらにアニメーションについて研究することでより効果的に情報を伝たり、より複雑な情報をわかりやすく伝えたりする方法を研究したいと考えたから

目的

映画館というモチーフを使ってwebサイトのアニメーションを多用したインタラクティブなサイトを作り、新しい表現方法によってユーザーにwebサイトを通した体験から得られる情報を増やしつつ、新しい表現方法を見つけてさらに没入感のあるWebサイトを提供するため

コンセプト

映画館には様々なコンセプトの映画がありアニメーションとの相性もよく、作品の世界観に引き込みやすく没入感を提供しやすい
架空の映画館という特殊な設定のwebサイト内で、ユーザーにアニメーションを通して体験と情報を提供する

成果物の仕様

メンバー


制作ツール

Windows11
iPadPro
Figma
HTML
CSS
Javascript

プロジェクトの期間

プロジェクトの期間|2024.04.12 - 2024.12.20

まとめ




調査

現状調査


先行事例

映画館のウェブサイト

アニメーション重視のサイト

技法・技術情報

プロジェクト管理

スケジュール

スケジュール

ToDo

テーマ決めのための調査
技術に関する情報収集
映画のポスターの制作
映画の選定
サイトマップ・ワイヤーフレームの作成
webサイトのコーディング
中間発表準備
最終発表準備
修正・手直し




進捗記録




2024.05.17

2024.05.10

ワイヤーフレームの作成続き

映画館のウェブサイト

Webサイトのデザインの参考にしたいもの

https://ac-bu.info/happening/
https://dozo-gift.com/
https://uniam.jp/


カラーパレット
Figmaインタラクションの作成



2024.04.26

仮のサイトマップとワイヤーフレーム(一部)の作成

Group 1.jpg
wire 1.jpg wire2.jpg

調査

スケジュールの作成

技術に関すること

2024.04.19


参考になりそうなもの

相談して決まったこと

2024.04.12


参考になりそうなもの

やりたいこと・興味のあること


PAGES

GUIDE

添付ファイル: filewire2.jpg 6件 [詳細] filewire 1.jpg 6件 [詳細] fileGroup 1.jpg 7件 [詳細]
Last-modified: 2024-05-17 (金) 17:18:55