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

MEMORIES COLLECTION

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

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

↑

概要

↑

これは何？

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

↑

背景と目的

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

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

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

↑

コンセプト

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

↑

成果物の仕様

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

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

↑

制作ツール

Adobe Illustrator
VScode
Procreate
figma

↑

プロジェクトの期間

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

↑

まとめ

前期まとめ

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

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

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

前期中間まとめ

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

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

↑

ToDo

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

進捗記録

↑

2025.09.29

↑

機能お試し作成

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

↑

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

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

↑

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

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

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

　参考サイト

↑

インプット技術

onload
使用例　対象の要素.onload = () => {};　　img.onload = () => {};
onload は読み込み完了時に自動で実行されるイベント
画像なら「画像が表示できる状態になったとき」に呼ばれる
ページ全体では「ページ内のすべてのリソースが揃ったとき」に呼ばれる
画像をキャンバスに描画するときは、onload を使って画像の準備完了後に描画するのが必須

canvas

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）：加速してから減速。

↑