堀玲二/情報デザイン研究II の履歴(No.9)

MEMORIES COLLECTION

テンプレートを使った映画の思い出オリジナルカードを作成できるサイト

堀玲二
MEMORIES COLLECTION　プロトタイプ
movie tickets, collection, web site
前期研究ページ

↑

概要

↑

これは何？

映画鑑賞の思い出を記録し、コレクションできるオリジナルカード作成サイト

↑

背景と目的

映画を観に行ったときにもらうチケットは、多くの場合映画鑑賞後に捨てられてしまう。しかし、そこには確かに存在した時間や感情、誰と観に行ったか、どんな気持ちで映画を見たのかといった、かけがえのない記憶が宿っているはずだ。

チケットが捨てられることで、そうした記憶や感情もまた、次第に風化していく。思い出が手元に残らないということは、自分の過ごしてきた時間を振り返る手がかりを失うことでもある。

本研究では、映画鑑賞を単なる一過性のイベントで終わらせることなく、価値ある体験として心に留めてもらうことを目指している。具体的には、作品名、鑑賞日、映画館名、座席番号、そして鑑賞時の感想などを「記録」として残し、「コレクション」として楽しめるようにすることで、記憶を呼び起こすきっかけを作り、感動をいつまでも忘れないようにする。

↑

コンセプト

思わずとっておきたくなるようにグラフィック要素を取り入れた上で統一感を持たせ、コレクション性を加える

↑

成果物の仕様

前期
映画のチケットのテンプレートを４案×色違い４種　　計１６種
映画の思い出オリジナルカードを作成できるサイトのプロトタイプ

後期
GitHubにて公開するWebサイト

↑

制作ツール

Adobe Illustrator
VScode
Procreate
figma

↑

プロジェクトの期間

４月２９日〜１月１０日(通年)

↑

まとめ

前期まとめ

サイトのプロトタイプに関して、サイトの動線をわかりやすくし枝分かれさせないという点でユーザーが使いやすいサイト構成になったと考えている。

カードのテンプレートに関しては、各テーマに合わせて色彩を考えたという点がテンプレートの統一感を生みだすことができたと考えている。
しかしサイトやサイトやテンプレート全体を通してみてみると要素同士の調和が取れていないと感じたため、後期では色味の調節が必要と考えている。

前期の期間で制作物の素材が完成したので、後期はその素材を使いサイトのコーディングに取り掛かりたいと考えている。

前期中間まとめ

成果物の変更の可能性はあるがチケットのデザイン１６案までは確実に作ろうと考えていて現在はデザイン案のスケッチまで終わっている。

チケット案のスケッチに時間がかかってしまっているので、ガントチャートの予定よりも早くデザインを完成させようと考えている。

↑

ToDo

~~チケットのデザイン案を計４案考える~~
~~デザイン案をもとにチケット作成~~
~~ジャンル別に使う色を考える~~
~~サイトマップを考える~~
~~ワイヤーフレームを考える~~
サイトで使用する機能のリスト化
サイト内原稿の作成
サイトで使用する機能簡易作成
チケットデザイン案ブラッシュアップ
コーディング

進捗記録

↑

2025.09.29

↑

機能お試し作成

ウェーブ背景
- ウェーブ背景GitHub
- 参考技術・技法
スクロール表記の切り替え
- スクロール表記の切り替えGitHub
入力した文字を画像上に出力
- 入力した文字を画像上に出力GitHub

↑

サイトで使用する機能のリスト化

~~ローディング画面~~
~~フェードインアニメーション~~
~~ウェーブ背景~~
ハンバーガーボタン
~~スライダー~~
~~文字数チェッカー~~
~~スクロール表記の切り替え~~
~~入力した文字を画像上に出力~~
画像ダウンロード

↑

Webサイトアニメーション理由

この記事では便宜的に、サイトを閲覧しているユーザーを「閲覧者」、サイトで情報を発信・運用している管理者を「発信者」とします。

閲覧者の視線を誘導する
閲覧者の操作で画面内の要素に変化が起きたときに、
何が起きているかを通知する
UIもしくはWebサイト全体の使用感を向上させる
発信者が表現したい世界観・雰囲気を演出する

　参考サイト

↑

インプット技術

|| (OR または)
- 二つの条件のうち、どちらか一つだけ満たす条件をOR条件といい、
  「｜（バーティカルバー）」記号を条件式の間に二つ続けて書く。
DOMContentLoaded
- DOMContentLoaded
  HTML(DOM)解析が終わった直後（画像の読み込みはまだ）
- load
  画像を含めてすべての読み込み完了後
- DOMだけが必要？ → DOMContentLoaded
  画像やCSSのロード完了が必要？ → load
- loadイベントだとwindow.addEventListener
  DOMContentLoadedイベントだとdocument.addEventListener
  と記述される。windowとdocumentの部分が違っている。
  これはそれぞれのイベントがwindowオブジェクトとdocumentオブジェクトに対して動作しているから。
inset: 0;
- inset: 0; は、position: absolute; や position: fixed; などのpositionプロパティが指定されている要素に対して有効です。
  しかし、imgタグにはデフォルトでposition: static;が適用されているため、inset: 0;だけでは画像の大きさや位置は変わりません。
position relative とposition absolute
- position: absolute; は、一番近い position: relative; などが指定された親要素を基準に配置されます。
  もし親要素に position: relative; が指定されていなければ、body（またはhtml）全体を基準に絶対配置されます。
css background
- CSSにおける「background」プロパティは、要素の背景に関する複数のスタイ(背景色、背景画像、サイズ、位置、繰り返しなど)を一度にまとめて指定するためのショートハンドプロパティです。個別のプロパティ(background-colorやbackground-imageなど)をすべて指定する代わりに、backgroundプロパティを使えば簡潔に記述できます。
css animation
- リニア（linear）：等速で変化する。のっぺりとした安定した印象。
- イーズイン（ease-in）：徐々に加速する。加速するような勢いのある印象。
- イーズアウト（ease-out）：徐々に減速する。
  変化の余韻が残りやすい印象。
- イーズインアウト（ease-in-out）：加速してから減速。