MEMORIES COLLECTION
テンプレートを使った映画の思い出オリジナルカードを作成できるサイト
概要
これは何？
映画鑑賞の思い出を記録し、コレクションできるオリジナルカード作成サイト
背景と目的
映画を観に行ったときにもらうチケットは、多くの場合映画鑑賞後に捨てられてしまう。しかし、そこには確かに存在した時間や感情、誰と観に行ったか、どんな気持ちで映画を見たのかといった、かけがえのない記憶が宿っているはずだ。
チケットが捨てられることで、そうした記憶や感情もまた、次第に風化していく。思い出が手元に残らないということは、自分の過ごしてきた時間を振り返る手がかりを失うことでもある。
本研究では、映画鑑賞を単なる一過性のイベントで終わらせることなく、価値ある体験として心に留めてもらうことを目指している。具体的には、作品名、鑑賞日、映画館名、座席番号、そして鑑賞時の感想などを「記録」として残し、「コレクション」として楽しめるようにすることで、記憶を呼び起こすきっかけを作り、感動をいつまでも忘れないようにする。
コンセプト
思わずとっておきたくなるようにグラフィック要素を取り入れた上で統一感を持たせ、コレクション性を加える。
既存のチケットに記入されている情報に追加して、グラフィック要素や感想記入欄を作ることにより、記憶を残しやすくする。
画像保存と現物保存の二つの中からユーザーに合うコ方法でコレクションを促し、思い出を振り返りやすくする。
成果物の仕様
- 前期
映画のチケットのテンプレートを４案×色違い４種 計１６種
映画の思い出オリジナルカードを作成できるサイトのプロトタイプ
制作ツール
Adobe Illustrator
VScode
Procreate
figma
プロジェクトの期間
４月２９日〜１月１０日(通年)
まとめ
前期まとめ
- サイトのプロトタイプに関して、サイトの動線をわかりやすくし枝分かれさせないという点でユーザーが使いやすいサイト構成になったと考えている。
- カードのテンプレートに関しては、各テーマに合わせて色彩を考えたという点がテンプレートの統一感を生みだすことができたと考えている。
しかしサイトやサイトやテンプレート全体を通してみてみると要素同士の調和が取れていないと感じたため、後期では色味の調節が必要と考えている。
- 前期の期間で制作物の素材が完成したので、後期はその素材を使いサイトのコーディングに取り掛かりたいと考えている。
前期中間まとめ
- 成果物の変更の可能性はあるがチケットのデザイン１６案までは確実に作ろうと考えていて現在はデザイン案のスケッチまで終わっている。
- チケット案のスケッチに時間がかかってしまっているので、ガントチャートの予定よりも早くデザインを完成させようと考えている。
調査
現状調査
人生で一番大切な仕事は「思い出づくり」
DIE WITH ZERO 人生が豊かになりすぎる究極のルール
映画を観た後、チケットの半券を捨てている人の割合は53.9%
映画の半券を捨てるか捨てないかのアンケート記事
映画のチケットを窓口で購入している人の割合は 63.5％
実践『ペルソナ』通信 (No.47)映画の半券の保存状況に関する調査結果
先行事例
ピンタレストのボード
思い出きっぷ
技法・技術情報
デザインの心理学
プロジェクト管理
スケジュール
情報デザイン研究ガントチャート
ToDo
チケットのデザイン案を計４案考える
デザイン案をもとにチケット作成
ジャンル別に使う色を考える
サイトマップを考える
ワイヤーフレームを考える
サイトで使用する機能のリスト化
サイト内原稿の作成
サイトで使用する機能簡易作成
チケットデザイン案ブラッシュアップ
コーディング
進捗記録
2025.09.29
発表準備
- 背景と目的
映画を観に行ったときにもらうチケットは、多くの場合映画鑑賞後に捨てられてしまう。思い出は次第に風化され、チケットが捨てられれば記憶を思い出すきっかけを失うことになる。本研究ではwebサイトを用いて映画鑑賞という思い出をテンプレートを使い思い出オリジナルカードを作成する。この方法で思い出を形に残し、「コレクション」として楽しめるようにすることで、記憶を呼び起こすきっかけを作り、感動をいつまでも忘れないようにする。
- コンセプト
思わずとっておきたくなるようにグラフィック要素を取り入れた上で統一感を持たせ、コレクション性を加える。
既存のチケットに記入されている情報に追加して、グラフィック要素や感想記入欄を作ることにより、記憶を残しやすくする。
画像保存と現物保存の二つの中からユーザーに合うコ方法でコレクションを促し、思い出を振り返りやすくする。
- 中間発表までの成果物
- ウェーブ背景
- スクロール表記の切り替え
- 入力した文字を画像上に出力
- 画像ダウンロード機能
- 文字出力と画像ダウンロード
- ローディング画面
- スライダー
- 文字数チェッカー
- フェードインアニメーション
- チェックボックス
- まとめ（現状と今後）
現在はサイト作成に使用するグラフィック素材と
サイト機能を作成できている。
今後はこの素材を使用し実際にプロトタイプ通りに形にしていく。
サイト構築の過程でグラフィック修正の必要が出てくる可能性があるので、修正をする前提での日程調整をする必要がある。
2025.09.29
機能お試し作成
- ウェーブ背景
- スクロール表記の切り替え
- 入力した文字を画像上に出力
- 画像ダウンロード機能
- 文字出力と画像ダウンロード
サイトで使用する機能のリスト化
ローディング画面フェードインアニメーションウェーブ背景- ハンバーガーボタン
スライダー文字数チェッカースクロール表記の切り替え入力した文字を画像上に出力画像ダウンロード
Webサイトアニメーション理由
この記事では便宜的に、サイトを閲覧しているユーザーを「閲覧者」、サイトで情報を発信・運用している管理者を「発信者」とします。
- 閲覧者の視線を誘導する
- 閲覧者の操作で画面内の要素に変化が起きたときに、
何が起きているかを通知する
- UIもしくはWebサイト全体の使用感を向上させる
- 発信者が表現したい世界観・雰囲気を演出する
参考サイト
インプット技術
- onload
使用例 対象の要素.onload = () => {}; img.onload = () => {};
onload は 読み込み完了時に自動で実行されるイベント
画像なら「画像が表示できる状態になったとき」に呼ばれる
ページ全体では「ページ内のすべてのリソースが揃ったとき」に呼ばれる
画像をキャンバスに描画するときは、onload を使って画像の準備完了後に描画するのが必須
JavaScriptと合わせて使用するhtmlタグ
- new Image();
- 使用例 const img = new Image();
img には 空の画像オブジェクト が作られます。
作った直後はまだ画像データは入っていません。
- src にファイルのURLをセットすると、ブラウザがその画像をダウンロードし始めます。
記入例 img.src = 'images/dummy.png';
new Image() は「キャンバスに描画するための画像の入れ物を作っている」と考えるとわかりやすいです。
- new Image()
JavaScript内で画像を扱うためのオブジェクト
DOMには追加されない（見えない）
キャンバスなどに描画するために使う
- <img>タグ
HTMLのページに直接画像を表示するための要素
DOM（HTMLツリー）に追加される
ページにそのまま表示される
- まとめ
new Image() は JavaScriptで画像オブジェクトを作るコンストラクタ
作っただけでは何も表示されない
src を設定すると画像を読み込み始める
主にキャンバス描画や画像の加工など、HTMLに直接表示しないときに使う
- fillText
- fillText は キャンバスに文字を書き込むためのメソッド 。
ここでは ctx（2Dコンテキスト）を使って指定した座標に文字を描画している。
使用例 ctx.fillText(文字列, x座標, y座標 [, 最大幅]);
第1引数：描画するテキストの内容
第2引数：テキストの開始位置の x 座標（横方向の位置）
第3引数：テキストの開始位置の y 座標（縦方向の位置）
第4引数（省略可）：最大幅（指定した幅を超えると文字が縮小されて収まる）
- getContext 使用例 const ctx = canvas.getContext('2d');
→ 2D 描画を行うための「ペン」を取得。
ctx.fillStyle は「これから塗る色」を指定するプロパティ。
描画命令（fillRect や fillText など）を呼ぶ瞬間の色が反映される。
だから複数回設定すれば、そのたびに違う色で描ける。
- キャンバス内に描画する文字の設定や場所について
描画ツールの設定” にすぎません。
変更しても、すでに描いたものの色や場所は変わりません。
（紙に書いた絵の色はペンを持ち替えても変わらないのと同じ）
描画するたびに、その時点で設定されている設定が使われます。
- toDataURL 使用例 lcanvas.toDataURL("image/png")
Canvas の描画内容を PNG画像のデータURL（例："data:image/png;base64,..." という文字列）に変換します。
- createElement 使用例 ldocument.createElement('a')
→ 新しく <a>（リンク要素）を作ります（HTMLにはまだ表示されません）。
- href 使用例 llink.href = dataURL;
→ このリンク先を、さきほど作った 画像データURL に設定します。
→ 普通はリンク先にWebページのURLを書きますが、ここでは画像データを直接指定しています。
link.href = dataURL; は、
link（新しく作った <a> タグ）の
href 属性（リンク先） に
Canvasを画像化したデータURL を代入している
という意味です。
これによって、クリックしたときにサーバーからではなく その場で作ったCanvas画像をリンク先として開いたりダウンロードできる ようになるのです。
- download 使用例 link.download = 'canvas_image.png';
→ リンクをクリックしたときに表示ではなく ダウンロードされるようにする属性 です。
→ 'canvas_image.png' が保存されるファイル名になります。
- || (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）： 加速してから減速。
2025.09.22
機能お試し作成
- ローディング画面
- スライダー
- 文字数チェッカー
- フェードインアニメーション
- チェックボックス
2025.09.15
サイトで使用する機能のリスト化
- ローディング画面
- フェードインアニメーション
- ウェーブ背景
- ハンバーガーボタン
- スライダー
- 文字数チェッカー
- スクロール表記の切り替え
- 入力した文字を画像上に出力
- 画像ダウンロード
いきなりサイトを作り始めるのではなく機能のみの作成から始める。
入力した文字を画像上に出力が時間がかかる見込みなので、それ以外
の機能から作成を開始する。
研究進行について
