#author("2025-09-21T17:29:01+09:00","default:member","member") #author("2025-09-21T17:29:36+09:00","default:member","member") *MEMORIES COLLECTION テンプレートを使った映画の思い出オリジナルカードを作成できるサイト #image(名称未設定 1.png ) -堀玲二 -[[MEMORIES COLLECTION プロトタイプ>https://www.figma.com/proto/p5JBql8twIhdpwzmcPNsRN/%E7%84%A1%E9%A1%8C?node-id=4-3&t=pzWSNBCdlvrId6GY-1&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=4%3A3]] -movie tickets, collection, web site -[[後期研究ページ>堀玲二/情報デザイン研究Il]] -[[後期研究ページ>堀玲二/情報デザイン研究II]] **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; 映画鑑賞の思い出を記録し、コレクションできるオリジナルカード作成サイト //映画鑑賞を事例とした思い出を記録し、コレクションできるオリジナルカード作成サイト// ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; 映画を観に行ったときにもらうチケットは、多くの場合映画鑑賞後に捨てられてしまう。しかし、そこには確かに存在した時間や感情、誰と観に行ったか、どんな気持ちで映画を見たのかといった、かけがえのない記憶が宿っているはずだ。 チケットが捨てられることで、そうした記憶や感情もまた、次第に風化していく。思い出が手元に残らないということは、自分の過ごしてきた時間を振り返る手がかりを失うことでもある。 //本研究では、映画鑑賞という体験をただの一過性のイベントとして終わらせるのではなく、価値のある体験として残すために作品名や鑑賞日、映画館の名前や席番号、感じたことなどを「記録」として残し、「コレクション」として楽しめるようにし、記憶を忘れないように思い出すきっかけを作ることを目的とします。// 本研究では、映画鑑賞を単なる一過性のイベントで終わらせることなく、価値ある体験として心に留めてもらうことを目指している。具体的には、作品名、鑑賞日、映画館名、座席番号、そして鑑賞時の感想などを「記録」として残し、「コレクション」として楽しめるようにすることで、記憶を呼び起こすきっかけを作り、感動をいつまでも忘れないようにする。 ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など}; 思わずとっておきたくなるようにグラフィック要素を取り入れた上で統一感を持たせ、コレクション性を加える ~ ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; -前期 映画のチケットのテンプレートを４案×色違い４種 計１６種 映画の思い出オリジナルカードを作成できるサイトのプロトタイプ -後期 GitHubにて公開するWebサイト ~ //***メンバー //&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記}; //堀玲二 ~ ***制作ツール //&color(red){使用するツール｜ハードウエア・ソフトウエア}; Adobe Illustrator VScode Procreate figma ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX }; ４月２９日〜１月１０日(通年) ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; 前期まとめ -サイトのプロトタイプに関して、サイトの動線をわかりやすくし枝分かれさせないという点でユーザーが使いやすいサイト構成になったと考えている。 -カードのテンプレートに関しては、各テーマに合わせて色彩を考えたという点がテンプレートの統一感を生みだすことができたと考えている。 しかしサイトやサイトやテンプレート全体を通してみてみると要素同士の調和が取れていないと感じたため、後期では色味の調節が必要と考えている。 -前期の期間で制作物の素材が完成したので、後期はその素材を使いサイトのコーディングに取り掛かりたいと考えている。 ~ 前期中間まとめ -成果物の変更の可能性はあるがチケットのデザイン１６案までは確実に作ろうと考えていて現在はデザイン案のスケッチまで終わっている。 -チケット案のスケッチに時間がかかってしまっているので、ガントチャートの予定よりも早くデザインを完成させようと考えている。 ~ ~ **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; -思い出について [[人生で一番大切なことは、思い出を作ることだ>https://ameblo.jp/moriyuri2023/entry-12812990128.html]] ~ -映画の半券を捨てる人が多い [[映画の半券を捨てるか捨てないかのアンケート記事>https://research-panel.jp/rpdr/view.php?eid=465157&aid=1968977#goog_rewarded]] ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; [[ピンタレストのボード>https://pin.it/2DimonZgX]] [[思い出きっぷ>https://design.kyusan-u.ac.jp/socialdesign/?cmd=read&page=%E5%90%89%E8%89%AF%E7%90%89%E6%B1%B0%2F%E5%8D%92%E6%A5%AD%E7%A0%94%E7%A9%B6&word=%E6%80%9D%E3%81%84%E5%87%BA%E3%81%8D%E3%81%A3%E3%81%B7]] ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; [[デザインの心理学>https://321web.link/design-psychology/]] ~ ~ **プロジェクト管理 ***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; [[情報デザイン研究lガントチャート>https://ksumail-my.sharepoint.com/:x:/g/personal/k23as027_st_kyusan-u_ac_jp/EdG0DX8bYmtNtW1p5X7NwPgBHFApWJiDb3S935L9DBh8wg?e=vrMMZy]] ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; チケットのデザイン案を計４案考える デザイン案をもとにチケット作成 ジャンル別に使う色を考える サイトマップを考える ワイヤーフレームを考える コーディング //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2025.07.08 javaScriptの学習 .checkedを使ったコードの理解に時間がかかった。 ガントチャートの後期日程作成 ~ ~ **2025.07.01 このサイトを使う付加価値をもっと考える必要がある ***キネパス キネパスというアプリで似たようなことができる -差別点 --オリジナルカードというところ --画像ダウンロードできるとこ --実物保存できるところ。 実際にテンプレートをサイトに表示した時の見た目のバランスを調節する必要がある。 javaScriptの学習開始 チェックボックスにチェックされるとボタンが押せるようになる仕組みが今回のサイト作成に使えそう。 ~ ***今後やることを考える -テンプレートとサイトのプロトタイプの組み合わせ -組み合わせ後のプロトタイプまたはテンプレートのブラッシュアップ -Javaスクリプトの学習 -簡単な仕組み作り -html、cssでコーディング -JavaScriptを組み合わせる。 ~ ~ **2025.06.24 テンプレート１６案完成 左：モノクロ 右：ポップ |#image(情報デザイン研究3年前期清書.jpg)| |#image(情報デザイン研究3年前期清書ポップ.jpg)| 左：レトロ 右：和 |#image(情報デザイン研究3年前期清書レトロ.jpg )| |#image(情報デザイン研究3年前期清書和.jpg)| ~ モバイル版プロトタイプ |#image(iPhone 16 - 1.png)| |#image(iPhone 16 - 2.png)| |#image(iPhone 16 - 3.png)| |#image(iPhone 16 - 4.png )| #image(iPhone 16 - 7.png ,center,40%) ~ 発表準備 ~ ~ **2025.06.17 ***作業内容 -サイトデザイン作成 -サイトデザインモバイル版作成 ~ ***このサイトを利用することのメリット -映画鑑賞という体験を思い出すきっかけになる -コレクションを楽しむことができる。 -次の映画鑑賞をより良いものにできる -カード作成というプロセスによって、映画鑑賞という一度きりの体験が“振り返る価値のある出来事”になる。 -自己理解につながる。 -他人の目を気にせず、自分の思い出として記録できるため、より本音に近い、個人的でリアルな記録が可能。 ~ ***映画館で映画を観るときにもらうチケットをSNSにあげることとの差別点 -どうしても“他人に見せる前提”で、見映えや反応を意識して編集されるため、自分の素直な感情が抑えられたり演出されたりすることがある。 ~ ***ターゲットとの結びつけ このサイトのターゲット考案 -映画の当日チッケトを捨てる人 -映画の当日チケットを取っておきたいが理由があり捨てる人 -映画のチケットを捨てない人 ~ ***相談内容 -なるべく最初に何が作れるのかを持ってくる -手順１とスライダーをつなげる -とりあえず中身を研究のツッコミを考えずに作ってみる ~ ~ **2025.06.10 ~ テンプレートに記載する情報 タイトル 映画を見た日時 上映時間 スクリーン番号 シート番号 映画を見た時のチケットの値段 一言コメント（４０字以内） ~ ~ このサイトのターゲット 何かしらコレクションをしている人で、まだ映画の当日チケットを集めてない人 映画のチケットを捨てている人 ~ このサイトのターゲット考案 映画の当日チッケトを捨てる人 映画の当日チケットを取っておきたいが理由があり捨てる人 映画のチケットを捨てない人 ~ ~ 名刺用紙に印刷すれば裁断の手間がなくなる。 名刺用紙のテンプレートに作ったチケットを並べる作業をどうするか。 サイトの使い方説明の構造を考える。 ~ ワイヤーフレーム トップページ完成 #image(MacBook Air - 1.png ) ~ ~ **2025.06.03 どれだけサイトの使い方をわかりやすくするかを考える。 途中離脱がないように工夫しなければならない。 トップページで簡単な説明。各ページで詳しい説明という構成にする ~ トップページのビジュアル案 #image(名称未設定のアートワーク 4.png) サイトマップの内容追加 #image(名称未設定のアートワーク 5.jpg) ワイヤーフレーム作成開始 #image(スクリーンショット 2025-06-10 11.53.19.png ) ~ ~ **2025.05.27 テーマ案再考え -映画の当日チケットはその場限りの入場証として扱われ、鑑賞後すぐに捨てられる。 -捨てた時の問題点 --SNSや24時間で消えるストーリー機能へと変化している。これにより、「あとから振り返る」「形として残す」といった行為が減少し、体験が記憶として積み上がりにくくなっている。結果として、個人の記憶や文化的な価値が継承されにくいという課題が生じている。 -- -映画のチケットを集めさせるのが目的 -集めさせる手段として新しいデザインの提案 -オリジナルチケットを作成できるサイトを作る。 デザインされたチケットをテンプレートとして実際のタイトルや時間、スクリーンの番号や席の番号などを入力、オリジナルチケットを作成し画像保存できるようにする。 -これによりオリジナルチケットとして、映画鑑賞という体験を形にして残すことができる。 ~ ~ サイトマップ考案 #image(IMG_0424.jpg) ~ ~ **2025.05.20 デザイン案（モノクロ）のイラレデータほぼ完成 #image(情報デザイン研究3年前期清書.jpg) ~ テーマの調整 モノとして記録することに、どんな意味があるのか？ -問題点を考えてみる 個人が体験を記録・保存する方法が、アルバム→ブログ→SNS→ストーリー（消える）へと変化している。 ↓ 何が問題点なのか 後から振り返る、見返す、保存する、といった行為がされにくくなり、記憶が積み上がらない。 体験はされても、それが文化として定着しにくくなる。 ~ ~ **2025.05.13 テーマ変更案 変更理由 ・webページまで作っていたら作業量が多くなりすぎる。→前期後期で制作を分ければ可能。 ・デザインしたチケットをwebサイトにまとめる必要が感じられない。 ↓ ~ -webサイトにまとめたときのメリットを考える webサイトをデジタルアルバムにしたら面白いかも 日記機能を追加したら面白いかも あらかじめ登録してある画像をチェッカー機能などで写真アルバムのように一覧表示にする。一覧表示されたものを画像出力してダウンロードできるようにする ~ ~ ~ 中間発表準備 ・背景 ・目的 ・コンセプト ・研究成果：調査（現状調査・先行事例・技術など） ・研究成果：試作（アイデアスケッチ・サイトマップ・イメージボード・プロトタイプなど） ・まとめ（これまでの成果の振り返り・今後について） ~ ~ -背景 研究のテーマを考えていたときに映画の当日チケットを集めるのが好きだということに着目。 映画の当日チケットについて、一般的に映画のチケットは映画を観終わったら捨てる。 コレクションという行為について、多くの人が自分の興味の対象に対して時間や金銭を惜しまず注いでいる。 この研究は 映画鑑賞の思い出を残す手段として、チケットの保存・収集を推奨し、その魅力を広めることを目的とする。 ~ ~ -コンセプト グラフィック要素を取り入れた上で統一感を持たせ、コレクション性を加える ~ -研究成果：調査（現状調査・先行事例・技術など） 現状調査 普通のチケットは映画を見るために必要な情報を伝えることを最優先としているため、そのほかの要素が削ぎ落とされている ~ 普通のチケットとは別でムービーチケットという物がある。 ムービーチケットは映画のポスターがそのままチケットに印刷されていて作品ごとに統一感が失われる。 [[ピンタレスト先行事例>https://pin.it/7C9H3SMnn]] ~ -研究成果：試作（アイデアスケッチ・サイトマップ・イメージボード・プロトタイプ チケットのグラフィックは映画や映像に関係のある要素を入れました。 ~ ~ **2025.04.29 ***デザイン案作成 チケットに記載する情報 -タイトル -日付 -上映時間 -スクリーン -席番号 -チケットの値段 ~ ~ ***サイト構成 サイトに載せる情報は少ない トップページ -このサイトについて サブページ -チケットを一覧表示 このサイトについてをトップページに載せる。 トップページを一番下までスクロールするとボタン そのボタンを押すとチケット一覧が表示される ~ ~ -サイト作成については、サイトに表示する情報が少くなることが予想されるので、できるだけアニメーションを使うなどして、退屈なサイトにならないようにする。 ~ ~ ***チケット案スケッチ #image(IMG_0354.JPG ) #image(IMG_0350.PNG) #image(IMG_0353.JPG) //[[スケッチ案OneDriveファイル>https://ksumail-my.sharepoint.com/:f:/g/personal/k23as027_st_kyusan-u_ac_jp/El0eKaJG6ZVNnVMBYjSSXhEB0bgwH5ZPJHv6bkjbPthOQQ?e=Vtc7WC]]// ~ ~ **2025.04.22 ***テーマ 思わずとっておきたくなる''架空の映画の半券''のデザイン、および、それらをまとめたWebサイト ~ -成果物 チケットの形状ごとに違うデザインを考える計4案 デザインをされたチケットをまとめたサイト デザイン詳細 ユナイデットシネマ TOHOシネマ Tジョイシネマ イオンシネマ の4つの会社のデザインを考える。 ~ 各映画会社でデザインを考える。 さらに各映画会社のデザインの色違いを作り、色によるジャンル分けを行いデザインの種類を増やす ~ アクション 恋愛 サスペンス ファンタジー ~ ~ ***テーマ候補 -A案：映画のジャンルごとの半券デザイン定番スタイルの分析 -''B案''：思わずとっておきたくなる''架空の映画の半券''のデザイン、および、それらをまとめたWebサイト --案１：映画会社ごとにリニューアル案１点 ＞ 全 X 点 --''案２''：形状ごとにリニューアル案１点 ＞ 全 X 点 ~ TODO作成 チケットのデザイン案を計４案考える デザイン案をもとにチケット作成 ジャンル別に使う色を考える サイトマップを考える ワイヤーフレームを考える コーディング ~ ~ ~ ***サイトの構成 -TOP：このサイトについて --トップページからジャンル別に分けられたページに飛ぶ -- ~ ***何故映画の半券を集めるのが好きなのか -何の映画を見たかの記録（思い出）になる -統一感があり、集めたものが増えたことによる視覚的な充実感がある。 -映画を見るという行為にお金を払っているので、チケット自体は無料 -集めることに特別な労力がかからない -物自体のサイズが小さい ~ ***懸念事項 -webサイトにまとめる事で物が増えるのが嫌と言う人にも良いかも --実物があるわけではないので、視覚的な充実感が薄れるかも -作業量が多くなる可能性大 ~ ~ **2025.04.15 ***取り組み -テーマ案 現段階で決まっていること 素材はイラスト 手段はweb ~ ***テーマ案の続き -集めることが好き なぜ→ 物が充実する感じがする 統一感が出る イラストのステッカーなどはアクセサリーのような役割になることがある。 ↓ 集めるものに何か共通点があるはず ~ -イラストを描くことが好き なぜ→ 自分の中の好きを表現できるから イラストの技術が上達していることの喜びを感じられるから 時間を忘れられるから 人に喜んでもらえるから 承認欲求 ~ -イラストのどこが好き 何→ ~ -イラストの何が好き 何→ ステッカーや名刺 キャンバスプリントされたイラスト 額縁に入っているイラスト 見るのが好き ~ -なぜイラストが好き なぜ→ 自分の好きを表現し自分の好きを人に見てもらうことができるから 自分の表現した好きに共感してもらうことができるから 好きになる共通点 ~ ~ ***テーマ案候補 イラスト x ステッカー x Web イラスト x ステッカー x コレクション xWeb イラスト x ステッカー x x Web イラスト x ステッカー x 映画の半券x Web イラスト x 漫画 x Web イラスト x ポスター x Web ~ ~ **2025.04.08 ***取り組み -テーマ案 -調査 ~ ***テーマ案 -イラストとweb制作を合わせた何か -コレクション ***論文調査 [[イラストの印象を構成する画風要素の研究>https://www.interaction-ipsj.org/proceedings/2021/data/pdf/1A11.pdf]] [[vessel コンプレックスを題材にした作品制作>https://www.kyugeiworks.kyusan-u.ac.jp/2021/315/]] ~ ~ ~