• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 出光美心/卒業研究 へ行く。
  • 1 (2024-04-02 (火) 15:33:14)
  • 2 (2024-04-12 (金) 15:47:51)
  • 3 (2024-04-19 (金) 16:54:39)
  • 4 (2024-04-26 (金) 16:37:56)
  • 5 (2024-05-10 (金) 11:22:19)
  • 6 (2024-05-10 (金) 14:13:17)
  • 7 (2024-05-10 (金) 16:02:46)
  • 8 (2024-05-17 (金) 14:22:56)
  • 9 (2024-05-17 (金) 17:18:55)
  • 10 (2024-05-21 (火) 03:35:29)
  • 11 (2024-05-21 (火) 19:41:05)
  • 12 (2024-05-24 (金) 13:50:51)
  • 13 (2024-05-24 (金) 17:26:13)
  • 14 (2024-05-25 (土) 01:28:44)
  • 15 (2024-06-07 (金) 15:51:39)
  • 16 (2024-06-13 (木) 20:13:55)
  • 17 (2024-06-14 (金) 15:50:00)
  • 18 (2024-06-14 (金) 17:07:29)
  • 19 (2024-06-28 (金) 14:21:07)
  • 20 (2024-06-28 (金) 17:18:51)
  • 21 (2024-06-30 (日) 02:15:45)
  • 22 (2024-06-30 (日) 03:57:02)
  • 23 (2024-07-01 (月) 02:06:02)
  • 24 (2024-07-01 (月) 14:19:07)
  • 25 (2024-07-03 (水) 03:04:46)
  • 26 (2024-07-04 (木) 03:27:22)

---

Time is Money

時間をお金で買うことをテーマにした架空のwebサイト

• Idemitsu Miko
• Keywords：website, animation, movie theatre
• プロトタイプ

概要

これは何？

アニメーションを使ってユーザーが映画作品を視覚的にイメージを伝える架空の映画館のwebサイト

背景

現代を生きる人々はタイムパフォーマンスを重視しており、あらゆる情報や行動を効率的に処理することが求められ時間は非常に貴重なものになっている。そこで「時間をお金で買って結果を得る」ということをテーマにアニメーションを筆頭にWebデザインの研究を行うことで、人々の共感を得られるサイトを制作する。

目的

アニメーションについて研究することでより効果的に情報を伝たり、より複雑な情報をわかりやすく伝えることでさらに没入感のあるWebサイトを提供するため

コンセプト

・実務的で現実的なWebサイトの中に、非現実的な架空の商品を入れ込む
・ビジュアルデザインの研究を通して伝わりやすいアイコンを制作する
・アニメーションを組み込むことで没入感を提供する

成果物の仕様

• webサイト
  
  

メンバー

制作ツール

Windows11
iPadPro
Figma
HTML
CSS
Javascript

プロジェクトの期間

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

まとめ

現状調査の時点でインタラクティブという言葉やJavaScriptの知らなかったアニメーション、GitHubのAIを使った機能を知ることが出来てよりWebに関する知識を深めることが出来た
Webサイトに載せる映画の選定や謎解きを考える作業が難航しており遅れ気味なので、今後相談したり先行事例をさらに詳しく調べて遅れを取り戻したい

調査

現状調査

• 「イマーシブコンテンツ」と呼ばれるWebサイトを集めてみた
• Webは楽しい。そんな風に思える「体験できるサイト」を集めてみました。
• インタラクティブとは
• 魅力的でインタラクティブなウェブサイト

先行事例

映画館のウェブサイト

• TOHOシネマズ
• T・ジョイ博多
• ユナイテッド・シネマ
  
  

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

• 変なWebメディア
• すごいWeb
  
  

技法・技術情報

• GitHub Copilot
• 【js】イメージにグリッチエフェクト効果を実装する
• CSS/JavaScriptで文字に動きを！テキストアニメーション30選
• トレンドウェブサイトから学べ！JavaScriptで作る本格スクロール演出
  
  
  
  

プロジェクト管理

スケジュール

スケジュール

• クリティカルパスとは
  
  

ToDo

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

---

---

2024.06.28

相談して決まったこと

• 架空の販売サイトをつくる
• 絶対に売っていないようなもの、現実ではありえないものを題材にする
• 先にワイヤーフレームとコーディングをする

https://www.n-info.co.jp/report/0052

https://asm.asahi.com/article/12505580

https://blog.wooder.info/2023/10/03/%E7%8F%BE%E4%BB%A3%E4%BA%BA%E3%81%AF%E3%81%AA%E3%81%9C%E5%B8%B8%E3%81%AB%E5%BF%99%E3%81%97%E3%81%8F%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%81%AE%E3%81%8B%EF%BC%9F%E3%82%AA%E3%83%AA%E3%83%90%E3%83%BC/

架空の販売サイトを作っているもの

• graziexxparlor
• 江崎悠芽さんの卒業制作

新しいワイヤフレーム

• ワイヤフレーム
  
  
  
  

2024.06.21

企画の練り直し

• アニメーションを多用した架空のサイトは作りたい
• 架空の販売サイト
• 映画館のサイト
• アニメーションを紹介するサイト？
  
  
  
  

2024.06.14

決めたこと

• ゲーム要素はなくしてアニメーションに絞る
• Webサイトがバグっている表現は無くす

サイト

• Github
  
  
  
  

2024.06.07

• 研究内容の練り直し
• 映画の選定(仮)
  
  
  
  

2024.05.31

テキストアニメーションテスト

• Github
• テストサイト
  
  

テキストグリッチ

• CSS Glitch Text Effect
  
  
  
  

2024.05.24

中間発表の講評

• 何をしているのか分からない。どういうゲームなのか伝えるメッセージを出す
• オマージュした方が著作権侵害になりかねない。そのまま映画を載せたほうが良い
• 普通にインタラクティブなサイトを作ったほうがいいのでは？
• フローチャートや動きのサンプル、既存のキャプチャーを使う
• 類似するものを見つける
• 構成の段階をきちんと踏む
• 使いたい要素が目的に合うかきちんと見る
  
  

やりたいことに一番近いもの

• オルタネイト・リアリティ・ゲーム(ARG)

参考になりそうなもの

• 曖宝学園かがみの特殊少年更生施設
• アートと少女を巡る冒険
• みんなのスパイ大作戦～ベイサイド・ミッション～

フローチャート

2024.05.17

• プロトタイプ

• 映画のリスト

• アニメーションのリスト

• メインビジュアルの作成
  文字化け風にするためleetを使った(leetとは英語圏で使われるインターネット上でのアルファベットの標記のこと)
  グリッチを使って画面が荒れている風にした
  
  
  
  

2024.05.10

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

• ワイヤーフレーム
  
  

映画館のウェブサイト

• TOHOシネマズ
• T・ジョイ博多
• ユナイテッド・シネマ
  
  

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

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


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

2024.04.26

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

調査

• 「イマーシブコンテンツ」と呼ばれるWebサイトを集めてみた
• Webは楽しい。そんな風に思える「体験できるサイト」を集めてみました。
• インタラクティブなサイトの演出アイデア
• 魅力的でインタラクティブなウェブサイト
  アニメーションや演出の参考になりそう
  
  

スケジュールの作成

• スケジュール
  
  

技術に関すること

• GitHub Copilot
• 【js】イメージにグリッチエフェクト効果を実装する
• CSS/JavaScriptで文字に動きを！テキストアニメーション30選
• トレンドウェブサイトから学べ！JavaScriptで作る本格スクロール演出
  
  
  
  

2024.04.19

参考になりそうなもの

• 変なWebメディア
• すごいWeb
  サイトのアニメーションや表現が参考になりそう

相談して決まったこと

• Webサイトのアニメーションや設定にストーリー性を持たせてみる
• 謎解き要素などを入れて見る人に体験してもらう
• インタラクティブについて調べて情報収集する
  インタラクティブとは
  
  
  
  

2024.04.12

参考になりそうなもの

• 木村天美さんの卒業研究
  Webサイトを制作していて、アニメーションやグラフィックなどこだわりが見える
• SPAM MUSEUM
  発想が面白い

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

• Webサイト制作
• アニメーション
• カラーパレット
• フリーアイコン制作のサイト
• ポスターの制作
• 嘘の映画館のサイト