#author("2023-12-15T17:11:04+09:00","default:member","member") #author("2023-12-21T15:54:06+09:00","default:member","member") #image(heder.PNG) -[[''思い出きっぷWEB''>https://kirakr.github.io/omoideticket_projects/index.html]] -''吉良琉汰'' -'''Keywords：思い出, 記憶, 切符, QRコード,タイムカプセル~ -''目次'' #contents *COLOR(#070050):概要 ---- 人生を生きていくなかでいつの間にか忘れてしまう記憶という大事な思い出を 新しいアプローチで保存する方法を提案するwebサイト ~ *COLOR(#070050):背景と目的 ---- ''背景'' 現在思い出を残す方法として、写真の撮影を行ったり訪れた場所の切符や入場チケット等を残す等、様々な方法がありますが、[[撮影した物を特に何もせずそのままにしておいたり、クラウドストレージ等に保存を行っても実際見返す機会が少ない事に気がつきました。>https://www.cross-m.co.jp/report/life/20230419camera/]]また、写真や映像からはその撮影時の感情が伝わりにくく、感情も含め思い出を忘れていくのは勿体ないと感じました。 ''目的'' そこで、感情をモチーフにデザインした切符程度の小さな媒体に、画像や映像、音声等の情報をqrコードを通して引き出せるようにし、記憶と情報を結びつけ両方の側面から新しい体験価値を生み出す事で、思い出を楽しく保管できるシステムがあれば面白いのではないかと気が付き、新しい仕組み[[思い出きっぷ>https://kirakr.github.io/omoideticket_projects/index.html]]を作成することを目的にしました。 ~ *COLOR(#070050):コンセプト ---- 普通にアルバムを見るのとちがって、qrコードを開くワクワク感や、アナログとデジタルの側面を活かせる融合させることで、従来のアルバムとは一味違う新しい体験を提供し、より魅力的なコンテンツにする。また、写真や映像等のデータからは伝わりにくい撮影時の感情という情報を付与して、インターネット環境とスマホやパソコンさえあればどんな人でも好きな時間に思い出を切符として保管ができるようにする。 ~ *COLOR(#070050):成果物 ---- -QR技術を活用した切符 -webサイト ''前期制作物'' -切符3種類 +専用型切符デザイン 画像1枚に対してQRコードの生成を行うので、読み込む事で即座に画像が表示され、見たいものをピンポイントで伝える事が可能なタイプ。 それ以上のデータを追加する事ができない。 使用例：感動した1枚をピンポイントで保存したい場合 #image(20230707_124243.jpg) +ファイル型切符デザイン ファイルに対してQRコードの生成を行うので、複数のデータをまとめて保存できる上、編集を許可する事でQRを読み取った人達と共有のアルバムとしても使い回す事ができ、追加したいデータがあればオンラインで随時データを追加できるタイプ。 使用例：数人で旅行に行った時の思い出を共有する等、複数のまとまりとして保管したい場合 #image(20230707_124320.jpg) +音楽メッセージ型切符 「あの時期よく聞いてたな」等、思い出の曲をQR化する事で曲にアナログの情報を持たせる事ができるようなる。 また、メッセージを書けるように大きな余白をとっているので、曲を人におすすめしたい時にメッセージ付きで曲をおすすめしたり、過去にどんな時期にどんな感情でその曲を聴いていたのかのメモ等にも使用する事ができる。 #image(20230707_124225.jpg) ''工夫点'' -普通紙だと全体的に発色が悪く不鮮明な感じがしたためQRコードとの相性を考え光沢紙を採用。 -後々誰でも作れるように機会の提供にも挑戦していきたいので印刷には特別な ものは使用せず、全てコンビニのシール用紙で印刷を行った。 -また、切符としての没入感を損ねないように裏に黒色のボール紙を張り付け強度をあげつつ切符としてのリアリティーを高めた。 #image(20230707_131308.jpg) ''後期制作物'' -喜怒哀楽をモチーフにデザインした切符4種類 #image(ticket_color.png) -作成例（セブンイレブンでハガキ印刷後カットラインに合わせてカット） #image(22.jpeg) -[[webサイト思い出きっぷ>https://kirakr.github.io/omoideticket_projects/index.html]] ~ *COLOR(#070050):制作ツール ---- -フォトショップ -イラストレーター -github -Html -css -JavaScript -[[jqueryライブラリ>https://jquery.com/]] ~ *COLOR(#070050):まとめ ---- ''前期まとめ'' -前期では実際にQRコードを埋め込んだ切符を何パターンか完成させる事ができた。後期では、ここから発展させたQRコードの新たな活用方法や、SNSを通して思い出きっぷのプロモーション等に力を入れていく。 また、可能であれば前期では作成する事が難しかった実際に切符を作成できるWEBサイトの製作にも挑戦して、ゆくゆくは誰でも作成を行えるように機会の提供等も行っていきたい。 ''後期まとめ'' -前期のまとめで目的にも定めていた誰でもきっぷを制作できるWEBサイト制作を完成させる事ができた。また今回作成したサイトの仕組みは、他のサービスにも応用していく事ができそうだなとも感じて、qrコードの可能性の広さにも気づけた。 ~ *COLOR(#070050):調査 ---- ''活用事例'' [[QRコードで墓参り>https://qr.andosekizai.com]] お墓にQRコードを埋め込む事でお墓参りを行った時に故人との思い出を振り返る事が出来る新たな形のお墓 [[洋服のタグにQRコード>https://www.avail-corp.com/products/io-tag/]] 洋服のタグにQRコードを埋め込む事で服に情報を持たせることができ、タグのQRに読み取ればすぐにショップに飛べる。売上の機会も逃さず便利。 ''データ情報'' [[スマホやカメラで撮る写真に関する調査>https://www.cross-m.co.jp/report/life/20230419camera/]] ''技術情報'' [[QRコードの生成>https://qr.quel.jp/design.php]] [[動くWEBデザイン>https://coco-factory.jp/ugokuweb/]] [[コーディング参考>https://moshashugyo.com/media]] [[ペヤングブランドサイト>https://www.peyoung.co.jp/peyoung/]] [[covermaker>https://covermaker.floclo.net/]] [[音楽カード>https://www.j-cast.com/kaisha/2019/01/18348279.html?p=all]] [[リリース>https://prtimes.jp/magazine/prtimes-template-new-release/]] [[引用>https://digital-marketing.jp/contentmarketing/precautions-when-quoting-copyrighted-works-on-blogs/]] ~ ~ *COLOR(#070050):プロジェクト管理 ---- [[スケジュール管理>https://docs.google.com/spreadsheets/d/1jJVMTOjRdRyDfcCppDtUeWDljCcPur-idTR0TYx0bZg/edit?usp=sharing]] ''ToDo'' %%テーマの捻出%% %%中間報告%% %%中間報告を受けての制作%% %%切符デザイン制作%% %%サイトマップ制作%% %%Web制作%% 報告 ~ *COLOR(#070050):制作記録 ---- **2023.12.15 ''パネル制作'' -説明パネル提出に向けてパネル制作を行なった。 **2023.12.8 ''プレゼン&フィードバック'' -画像ダウンロード時に違うファイル名で保存されるようにする。 -チケット画像に日付やテキスト等の情報を入れるようにする。 -webサイトのテーマを統一させる。 **2023.12.1 ''ブラッシュアップ'' サイトのフッター用ロゴを制作し配置した **2023.11.24 ''webのブラッシュアップ'' サイトにFAQエリアを作成し最終調整を行った **2023.11.17 ''webのブラッシュアップ'' サイトのuiを変更し見やすくなるようディスプレイの仕方に変更を加えた **2023.11.10 ''切符のブラッシュアップ'' -切符のコンセプトを変更し感情に結びつけたデザインへと再編集を加えた。 **2023.10.27 ''中間報告を終えてブラッシュアップ'' -メインビジュアルの画像を人物に変更しイメージを湧きやすくするようにした **2023.10.20 ''中間報告を終えてブラッシュアップ'' -一目見た時にサイトの内容が分かりにくいのでメインビジュアルをわかりやすくする。 -実際にその切符を使用している様子等をのせてイメージを湧きやすくさせる。 -内容をわかりやすく噛み砕き本文の調整等を行う。 -テーマと内容のメリハリをしっかりつける。 **2023.10.13 ''状況整理'' HTML のフォーム機能要素を使い色や文字を入れるためのフォームを作成する **2023.10.06 ''作るページを編集'' webページを参考にしたり、その他プログラマーとの意見交流でアドバイスを頂く。 ''HTML css Javascriptで作成していく。'' インフラ面をどうするのかを考えていく。 htmlのページ数を増やして作成の工程を細分化していく。 **2023.09.29 ''メインページとなるindexのページを編集'' イメージラフを再現するため背景の切符画像の動きは動画を使用。 ''CSSにて背景に動画を挿入し中央揃えで配置'' また最下層のレイヤーに配置 背景動画の上に透過ロゴを配置 透過素材でのサイト説明ページ画像を制作し配置。後々スクロールする事でポップアップアニメーションを設定する可能性あり その他必要ページを作成。デザインは随時修正予定 **2023.09.22 -HTMLを使いサイトを構築ヘッダーとフッダーは使い回す仕様で作成。 -Javascriptを使用しロードアニメーションを追加した。 ロードアニメーションはオリジナルのものを使用。 テーマを考え電車が走っているようなものにした。 またあまり重くならないようにシンプルな描写に収まるように緩めのイラストを制作 **2023.09.15 ''状況整理'' -サイトマップを修正しサイトの流れを見直した。 **2023.07.14 ''概要集制作'' -最終報告を見た/概要集に対して修正・制作を行った **2023.07.07 ''制作'' -実際に切符を印刷し、どのような見た目になるのか確認を行った。 -いくつかQRのパターンを作る事で使用用途にどのような違いが生まれるのかを検証を行った **2023.06.30 ''制作'' -実際に切符を印刷し、どのような見た目になるのか確認を行った。 -いくつかQRのパターンを作る事で使用用途にどのような違いが生まれるのかを検証を行った **2023.06.23 ''web開発・メインビジュアル制作'' -ワードプレスを利用しつつ、サイトフレームの制作を行った。 -切符のデザイン案を考えるために、webサイトやピンタレスト等からデザインの選考調査を行った。 **2023.06.16 ''Web開発'' -Html・Css・Javaを使った基本的なホームページを制作を行った。 -A4用紙でPDFファイル印刷を行ったがQRコードとの相性が悪くサイズの変更を行った **2023.06.9 ''中間報告期間'' -切符をモチーフとした作品をつくるうえで、どのようなデザインのものが存在しているのかを先行事例として調査を行った。 →[[切符をモチーフにしたデザインナショリー>https://www.kumpel-design.com]] -すでに実際に使われている切符のデザインを参考にしつつ切符デザインの制作を行った。 QRコードを入れると所々潰れる箇所が発生するので、解像度をあげつつデザインを行った。 **2023.06.2 ''中間報告期間'' -実際に発表をおこないフィードバックを頂いた。 方向性に関しては良い感触をえれたので、テーマに関してはQRコードを活用した新たな記憶の保存方法というアイデアで進めていく -webサイトを作る場合、技術的問題がクリアできるかを確認しておく必要がある。 -切符を制作する場合何種類のレイアウトを用意すべきかを考えておく必要がある。 **2023.05.26 ''中間報告期間'' -報告に向けたビジュアル的面での制作をおこなった -仮のメインビジュアルの追加 #image(1685682740788.jpg) -切符の制作過程の流れを考えたメモを作成した #image(1.jpg) **2023.05.19 ''テーマアイデアの捻出'' -これまで考えてきたアイデアをソーシャルデザインに関連ずけたうえで もう一度考え直してみる。社会のゴミ問題とからめていく ↓ SDGsを考える **2023.05.12 ''テーマアイデアの捻出'' 「人間がいつの間にか忘れてしまう記憶を大切に保存したい」 を主なテーマとして具体的な案を形にして作品を制作していく。 具体的にこのテーマをもとにしたアイデアを3つ考えました。 +思い出バンク 本来はすてるような映画の半券やレシートを保存でき、おもいでをほかんできるATM ++幸せポイントカード 幸せを感じるごとにポイントがたまり、自分の幸福会員れべるがはかれる +++ゴミpay 自分がすてたゴミの値段でpayがチャージされていき、自分が浪費してきた金額が分かる。 **2023.04.28 ''テーマアイデアの捻出'' -OmoideProject [[人間は1度学習したことを1時間後には56%忘れ、1日後には74%、さらに1週間後には77%、1カ月後には79%を忘れてしまう。もちろんそれが大切な思い出であっても同様に忘れてしまう。>https://www.gexeed.co.jp/column/cl039.html]] 写真や映像で思い出す事もできるがその時の感情や情景などは、思い出そうとしても中々思い出せない。ただ、日記であればその時の感情や情景等も思いだす事ができる。 しかし、ただ日記を書くのは手間のかかる作業であるという問題もある。 そこで日記を作りやすくするギミックを加え、日記を作るという行為に体験価値を付与させる事で楽しく日記を作れるようにする。 また、刺激的な体験価値を付与する事で日記を作った感覚も同時に思い出せるため、より記憶に残りやすいのではないか ↓ 思い出切符プロジェクトを計画 %%***デジタルベジタブル%% %%普段は混じり合う事がない２つが混ざるとどんな反応が起きるのか試し%% %%たいWebサイトやアプリ開発か、ポーカー形式のボードゲームとして制作%% %%するのも面白いかもしれない。%% 記憶とは関係のないテーマだったため取り扱わない事にした。 **2023.04.21 ''テーマアイデアの捻出'' -OmoideProject [[人間は1度学習したことを1時間後には56%忘れ、1日後には74%、さらに1週間後には77%、1カ月後には79%を忘れてしまう。もちろんそれが大切な思い出であっても同様に忘れてしまう。>https://www.gexeed.co.jp/column/cl039.html]] 写真や映像で思い出す事もできるがその時の感情や情景などは、思い出そうとしても中々思い出せない。ただ、日記であればその時の感情や情景等も思いだす事ができる。 しかし、ただ日記を書くのは手間のかかる作業であるという問題もある。 そこで日記を作りやすくするギミックを加え、日記を作るという行為に体験価値を付与させる事で楽しく日記を作れるようにする。 また、刺激的な体験価値を付与する事で日記を作った感覚も同時に思い出せるため、より記憶に残りやすいのではないか -デジタルベジタブル 普段は混じり合う事がない２つが混ざるとどんな反応が起きるのか試したい Webサイトやアプリ開発か、ポーカー形式のボードゲームとして制作するのも面白いかもしれない。 **2023.04.14 ''テーマのアイデア'' -フォーマット（グラフィックス）（イラスト）（ショート動画）（絵本）（図鑑）（パンフレット） -テーマ（ロス問題）（SNS）（AI技術）（遊び心） -アイデア1 仮）OmoideProject [[人間は1度学習したことを1時間後には56%忘れ、1日後には74%、さらに1週間後には77%、1カ月後には79%を忘れてしまう。もちろんそれが大切な思い出であっても同様に忘れてしまう。>https://www.gexeed.co.jp/column/cl039.html]] 写真や映像で思い出す事もできるがその時の感情や情景などは、思い出そうとしても中々思い出せない。ただ、日記であればその時の感情や情景等も思いだす事ができる。 しかし、ただ日記を書くのは手間のかかる作業であるという問題もある。 そこで日記を作りやすくするギミックを加え、日記を作るという行為に体験価値を付与させる事で楽しく日記を作れるようにする。 また、刺激的な体験価値を付与する事で日記を作った感覚も同時に思い出せるため、より記憶に残りやすいのではないか -アイデア2 仮）めっちゃ万能ツール -アイデア3 仮）世界はどでかい ネーミングに対する解説 ~