#author("2023-01-15T03:54:36+09:00","default:member","member") #author("2023-01-15T03:55:06+09:00","default:member","member") *のすたる▶︎ちっく //ひんやりそのまま詰め込んで ノスタルジーを届けるWebコンテンツ ~ #image(main_visual.jpg) ~ -''奈須本真椰'' -'''Keywords：夏,ノスタルジー''' -https://maya-des.github.io/nostal_tick/ ※動画が上手く反映されない場合は再度ページの更新をお願いします ~ **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; イラスト×アニメーション×Webサイト：「ノスタルジー」をモチーフに物語が展開していくイラストや、それを用いたシンプルな構成の動画/Webサイトの制作 ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; 背景：近年SNSが普及したことから、昔に比べたくさんの情報が目に見えるようになった。その中でどれが嘘でどれが本当なのか、何が自分にとって必要かそうでないかを、瞬時に見極めて取捨選択しなければならなくなった。また、このように世の中に情報が溢れ、それらを吟味する時間が必要になったことも、現代人が忙しいと言われる理由の一つであると考えている。 また同時に、近年ノスタルジーを感じるイラストや音楽が流行している傾向がある。その背景に、忙しない現代社会と距離を置き、過去を懐かしんで現実逃避をしたい/癒されたいという想いが関係しているのではないかと感じている。 目的：情報過多により生き急ぎ、疲弊している現代人に対し、一度立ち止まって心を休ませるきっかけとなるような「ノスタルジー（懐かしさ）」を感じるWebコンテンツを制作し、同時に「癒し」を与える。 //なぜノスタルジックな気持ちになるのか？メカニズムに関しては、未だ解明されていないが ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など}; 物語を展開させる際に、よりノスタルジーを感じられるよう昔ながらの景色や風習を取り入れる。また、田舎のゆったりとした時間の経過を表現するため、テクノロジーの描写を控え、自然さにこだわる（環境音など）。 Webサイトに関しては、カメラのシャッターを押した時のようなオープニングアニメーションや、日記帳に写真を並べたようなレイアウトを取り入れるなどの工夫をすることで、イラストや動画との親和性を高める。 ~ ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; イラスト：比率は16：9、約40枚制作 イラスト：比率は16:9、約40枚制作 動画：サイズは1920px ×1080px、7~45秒の動画を11個制作 Webサイト：GitHubを用いて制作、YouTubeにアップロードした動画を埋め込み、画面をスクロールすることで物語が展開していく（物語のみのシンプルなWebサイト）~ -[[Webサイト>https://maya-des.github.io/nostal_tick/]] ~ //***メンバー //&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記}; //~ ***制作ツール //&color(red){使用するツール｜ハードウエア・ソフトウエア}; ibisPaint X, After Effects, Premiere Pro, Atom ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX }; [[進行管理表>https://docs.google.com/spreadsheets/d/1xTTvgMmEyyGXhpsRaBVCrA_-qPdSyjp-zpj1tNLr30o/edit?usp=sharing]]←こちらから！ ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; イラストや環境音を取り入れたアニメーション動画を制作し、様々な表現方法でアプローチしたことで、視覚と聴覚で「ノスタルジー」を感じられるWebサイトを制作することが出来た。また、このWebサイトの感想を友人に求めたところ、光の加減や空気感から自然と時間の経過を感じ、何も深く考えずとも見られたことから、脳が休まる気持ちになったという意見をもらった。Webサイトを制作する際に様々な技法を取り入れ、「田舎のゆったりとした時間の経過を表現する」といったコンセプトに沿って工夫したことで、忙しない現代社会と距離を置き、「癒し」を与えるという目的を達成することが出来たと感じる。 今後は、見る人をより世界観に引き込むため、より作品を魅せるレイアウトを模索し、ブラッシュアップを重ねていきたい。 ~ ~ **調査 ~ ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; -[[「時間に追われている」と感じる現代人の割合は年々多くなっている>https://www.seiko.co.jp/timewhitepaper/2019/detail.html]] -コンテンツが世の中に溢れることで、それらを全て消費するために[[映画を倍速で視聴する人が増えている>https://news.yahoo.co.jp/articles/57e6ac7ca724bf1aec2c4a710799691eb8b312a7]] -[[ノスタルジーを感じるイラストが数多く投稿されている>https://www.pixivision.net/ja/a/2701]] -[[人は様々な場面でノスタルジーな気持ちになっている>https://workport.co.jp/plus/articles/8131]] //https://ja.wikipedia.org/wiki/%E3%83%8E%E3%82%B9%E3%82%BF%E3%83%AB%E3%82%B8%E3%82%A2 ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; -[[夏の作業用BGMに合わせた動画>https://youtu.be/-jj-rHDjCvM]]※音が出ます 効果音に合わせてイラストが動くことで、よりリアリティを感じられる。動画を作る際に参考にしたい。 -[[漫画のPV>https://youtu.be/vsPbfdv41-w]]※音が出ます 大胆なカットインやBGMの切り替えから、漫画の持つ独特な世界観を保ったまま、躍動感を演出している。セリフやコマの出し方など、動画を作る際に参考にしたい。 ~ -[[日記風のWebサイト>https://monokai.nl/2019/japan/]] 画像と文章の比率がまとめられていてとても見やすい。Webサイトを作る際に参考にしたい。 -[[遊び心のあるWebサイト>http://waaark.com/]] アイコンにギミックを取り入れている点など、見る人を飽きさせないWebサイトを制作する上で参考にしたい。 -[[特殊な動きを取り入れたWebサイト>https://seaballoon.com]]※音が出ます サイトを訪れると海中をイメージした音楽が流れ、触れると波紋が広がり、スクロールすると泡が上へと流れていく。臨場感のあるWebサイトを制作する際に参考にしたい。 -[[夏の過ごし方の知恵>https://kinarino.jp/cat6-%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB/40802-%E9%A2%A8%E6%83%85%E3%82%92%E6%A5%BD%E3%81%97%E3%82%80%E3%80%82%E5%85%88%E4%BA%BA%E3%81%AE%E7%9F%A5%E6%81%B5%E3%82%92%E6%B4%BB%E3%81%8B%E3%81%97%E3%81%9F%E3%80%81%E6%98%94%E3%81%AA%E3%81%8C%E3%82%89%E3%81%AE%E3%80%8C%E5%A4%8F%E3%81%AE%E6%B6%BC%E3%81%BF%E3%81%8B%E3%81%9F%E3%80%8D]] 物語を展開していく上で取り入れることで、よりノスタルジーを演出出来ると感じる。 ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; -[[Webサイトに水の表現を取り入れる技法>https://www.globalgate.co.jp/blog/water-effect-in-website]] -[[cssで動画や画像、文字をフェードインさせる技法>https://imasashi.net/element-fadein.html]] -[[画像を決められた数で横並びにする技法>https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet]] -[[画面幅に合わせてYouTube動画の比率を維持する技法>https://hirashimatakumi.com/blog/6601.html]] ~ ~ **プロジェクト管理 ~ ***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; [[進行管理表>https://docs.google.com/spreadsheets/d/1xTTvgMmEyyGXhpsRaBVCrA_-qPdSyjp-zpj1tNLr30o/edit?usp=sharing]]←こちらから！ ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; -%%進行管理表の更新%% -%%アニメーション動画のブラッシュアップ%% -%%アニメーション動画の制作%% -%%サイトマップ再度作成%% -%%タイトルのブラッシュアップ%% -%%メインビジュアルの制作/変更%% -%%作品概要の制作%% -%%YouTubeのタイトルを変更（作品との親和性を高める）%% -%%ハンバーガーメニューの削除%% -%%ギャラリー欄に載せるイラストの吟味%% -%%より世界観を表現するため、書体を変更、端末ごとに統一%% -%%YouTubeの要素を減らす（関連動画を操作/再生ボタンの色を変更）%% -%%ウィンドウ幅の調整%% -%%イラストを拡大した時にキャプションを載せる%% -客観的にまとめる（アンケート調査？） //-動くメインビジュアルを作りたいかもしれない //-Webサイトのブラッシュアップ //-ギャラリー＝エンドロール ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2022.12.23 ~ ***試作 -[[Webサイトのブラッシュアップ>https://maya-des.github.io/nostal_tick/]] ウィンドウ幅をそれぞれPC用/スマートフォン用に調整したことで、どのデバイスで見ても同じ世界観を楽しめるWebサイトを制作した。また、ギャラリー欄のイラストを拡大した際に、左下にキャプションを載せたことで、相乗効果で作品をより良いものに魅せることが出来たと感じる。 ~ ***今週の目標 -Webサイトのブラッシュアップ ~ ~ **2022.12.16 ~ ***試作 -[[Webサイトのブラッシュアップ>https://maya-des.github.io/nostal_tick02/]] ハンバーガーメニューを削除し、ギャラリー欄に載せるイラストの吟味したことで、よりシンプルにまとめた。また、Googleフォントを取り込み書体を手書きフォントで統一し、YouTube動画をループ再生させることで（関連動画を非表示にし）、より世界観に浸ることの出来るWebサイトを制作した。 ~ ***今週の目標 -Webサイトのブラッシュアップ ~ ~ **2022.12.9 ~ ***試作 -YouTubeのタイトルを変更 ~ #image(title.png,,50%) ~ Webサイトと引用する動画の親和性を高めるため、タイトルをストーリー内の時刻に設定した。 ~ ***今週の目標 -Webサイトのブラッシュアップ ~ ~ **2022.12.2 ~ ***試作 -[[サイトマップ再度作成>https://drive.google.com/file/d/18KyC-7wt-3B4r2dHCm1fS3p90BPKhFaa/view?usp=sharing]] Webサイトのサイトマップを再度作成した。書体を統一することで、より世界観に浸ることの出来る構成にする。 ~ ***プレゼンを通して見つかった改善点 -YouTubeのタイトルを変更し、作品との親和性を高める -ギャラリー欄に載せるイラストを吟味し、ウィンドウ幅を調整することで、審美性を高める -ハンバーガーメニューを削除し、シンプルな構成のWebサイトを制作する -より世界観を表現するため、イラストを拡大した時にキャプションを載せ、書体を変更し端末ごとに統一する -ノスタルジーを演出するため、YouTubeの要素を減らす（関連動画を操作し、再生ボタンの色を変更する） -客観的にまとめる ~ ***今週の目標 -Webサイトのブラッシュアップ ~ ~ **2022.11.25 ~ ***試作 -[[サイトマップ再度作成>https://drive.google.com/file/d/18SdXujotx3_WaFPYylf3dIVCeHxO9FBB/view?usp=sharing]] Webサイトのサイトマップを再度作成した。ハンバーガーメニューを削除し、よりシンプルな構成にする。 ~ ***今週の目標 -Webサイトのブラッシュアップ -プレゼン準備 ~ ~ **2022.11.18 ~ ***試作 -メインビジュアルの制作 ~ #image(main_visual.jpg) 切ないイメージのある夕暮れをモチーフに、全体的な画質を下げる加工をすることで、よりノスタルジーを感じられるメインビジュアルを制作した。 ~ -[[Webサイトのブラッシュアップ>https://maya-des.github.io/nostal_tick01/]] 上記のメインビジュアルを用いて、オープニングアニメーションが終わると同時に人物が現れ、カメラで撮影したような構成のWebサイトを制作した。 ~ ***今週の目標 -Webサイトのブラッシュアップ -作品概要の制作 ~ ~ **2022.11.11 ~ ***試作 -[[Webサイトのブラッシュアップ>https://maya-des.github.io/nostal_01/]] カメラのシャッターを押した時のようなオープニングアニメーションや、日記帳に写真を並べたようなレイアウトを取り入れるなどの工夫をしたことで、イラストや動画との親和性を高めた。また、見る人にゆったりとした時間の経過を感じてもらうため、画面をスクロールするとイラストや動画/文章がフェードインする仕組みを取り入れた。 ~ ***今週の目標 -メインビジュアルの制作/変更 -Webサイトのブラッシュアップ ~ ~ **2022.10.28 ~ ***試作 -タイトルのブラッシュアップ 旧：ひんやりそのまま詰め込んで 新：のすたる▶︎ちっく 研究の背景や目的を大きく変えることから、タイトルも変更した。懐かしいという意味の「ノスタルジー」＋～っぽいという意味や時を刻む表現の「〜チック」を掛け合わせたもの。また、「▶︎」は電車の行き先を示すように、心が過去に向かう（懐かしい気持ちに浸る）ことや、動画の再生ボタンを押すように、一度立ち止まって振り返ることを表している。 ~ -[[サイトマップ再度作成1>https://drive.google.com/file/d/1r_vedWFU7FDWTIQJBLR00yw2CWI3s8P7/view?usp=sharing]] -[[サイトマップ再度作成2>https://drive.google.com/file/d/1rgMzp5bnzICcy4h3ctj3xCsLytamfMnc/view?usp=sharing]] -[[サイトマップ再度作成3>https://drive.google.com/file/d/1rlqn1Huo1mgbtlHofoZheAlOSfLiFApT/view?usp=sharing]] 研究の背景や目的を大きく変えることから、Webサイトのサイトマップも再度作成した。ノスタルジーを感じさせると同時に、見る人を退屈させない動的なサイトを制作する。 ~ ***今週の目標 -メインビジュアルの制作/変更 -Webサイトのブラッシュアップ ~ ~ **2022.10.21 ~ ***試作 -[[Webサイトの制作>https://maya-des.github.io/hinyari_sample01/]] 動画を埋め込み、画面をスクロールすることで物語が展開していくシンプルなWebサイトを制作した。ギャラリー欄の画像をクリックすると拡大表示する仕組みなどを取り入れる必要がある。 ※あえてサイト内に台詞を記載せず、見た人に物語を想像してもらう…でも良いかもしれない。 ※ノスタルジックを感じられるサイト、電車の車窓風景（又はドア）をクリックすると動画が再生される仕組みなど…？ ~ -アニメーション動画の制作 ~ |#youtube(nWniMNxFVhU,100%,0.75)|#youtube(gcLWtdcvO_c,100%,0.75)| |#youtube(uNTch0ECE6M,100%,0.75)|#youtube(J0x6_BrKTi0,100%,0.75)| |#youtube(4NdE3iPyj5E,100%,0.75)|#youtube(ikOxtWuu8UE,100%,0.75)| |#youtube(Ymmvfvoo61s,100%,0.75)| 既存イラストのブラッシュアップを行うと同時に、より「夏らしさ」を感じられるよう、打ち水や風鈴の新規イラストを制作し、アニメーションに取り入れた。 特に「夏らしさ」のないイラストにも、セミの鳴き声や波の音などをBGMのように付け加えることで、リアリティを演出した。 ~ -[[イラストのブラッシュアップ1>https://drive.google.com/file/d/1kyp_QbAPAmW4oAJEhUEQ1CyXjcodWnWq/view?usp=sharing]] [[イラストのブラッシュアップ2>https://drive.google.com/file/d/1ntxPR2L2QB2KywY4yOEQ_aQBlgBtFWr5/view?usp=sharing]] イラスト内の雰囲気に合わせ、色温度を調整/イラストにメリハリを持たせ、構図の歪みなどに細かい修正を加えた。 ~ -[[新規イラストの制作>https://drive.google.com/file/d/1luUOrHX_tJbZpeGl34vYYuI8JX56QhKg/view?usp=sharing]] より「夏らしさ」を感じられるよう、打ち水や風鈴の新規イラストを制作し、アニメーションに取り入れた。人物の動きや風の流れを意識し、イラストに組み込むことで、よりリアリティを演出した。 ~ ***今週の目標 -メインビジュアルの制作/変更 -サイトマップ再度作成 -Webサイトのブラッシュアップ -タイトルのブラッシュアップ ~ ~ **2022.10.14 ~ ***試作 ~ -アニメーション動画の制作 ~ #youtube(WAnRd7lRPGg)03 ~ #youtube(e1JJFaFic44)04 台詞のアニメーションを省いたことにより、効果音かつ動きが必要な場面のみを制作するため、絵コンテの段階よりもテンポ良く物語を進めることが可能になった。 ~ ***今週の目標 -メインビジュアルの制作/変更 -アニメーション動画の制作 -Webサイトの試作 ~ ~ **2022.10.7 ~ ***試作 -[[イラストのブラッシュアップ>https://drive.google.com/file/d/1jUsmuIXM7xaBTG8Uzoq9wPkUzi2ViHjK/view?usp=sharing]] イラスト内の時間に合わせた光の角度を描写し、朝の柔らかい光の雰囲気を表すため、線の色を変更した。 ~ -アニメーション動画の制作 ~ #youtube(qDJWPqRERXo) [[新規イラスト>https://drive.google.com/file/d/1aBG5X3ZNVGEus7DdY95ckHDPCMDgDmfw/view?usp=sharing]]に合わせ、水滴の落ちる音を動画内に使用することにより、見る人により涼しげな印象を与える動画を制作した。 ~ ***今週の目標 -メインビジュアルの制作/変更 -アニメーション動画の制作 -進行管理表の更新 ~ ~ **2022.9.30 ~ ***試作 -[[新規イラストの制作>https://drive.google.com/file/d/1aBG5X3ZNVGEus7DdY95ckHDPCMDgDmfw/view?usp=sharing]] アニメーション動画に用いる、見る人により涼しげな印象を与えることを目的とした新規イラストを制作した。水滴が水面に落ちて波紋が広がる様子を描写した。 ~ ***今週の目標 -メインビジュアルの制作/変更 -アニメーション動画の制作 ~ ~ **2022.9.23 ~ ***試作 ~ -アニメーション動画の制作 ~ #youtube(o7Zpw2afgnU) イラスト内の時間を変更し、またそれに合わせた光の角度を描写するなどのブラッシュアップを行った。 また、動画内で物語を展開させるのではなく動画に対する補足(時間やひとこと)をサイト内に表記するため、台詞のアニメーションを省いた。 ~ ***今週の目標 -メインビジュアルの制作/変更 -アニメーション動画の制作 ~ ~ **2022.9.16 ~ ***試作 -[[メインビジュアルのスケッチ1>https://drive.google.com/file/d/1_TGv3We1OK2bdNLTsgAkcOPKi6DbfCPm/view?usp=sharing]] -[[メインビジュアルのスケッチ2>https://drive.google.com/file/d/1_VLz286J_lrBNtlU8V8nqeISqnAwHwZY/view?usp=sharing]] -[[メインビジュアルのスケッチ3>https://drive.google.com/file/d/1_XJ5tsqlTQzaKzEvTqregPyLxm3sm6PO/view?usp=sharing]] 制作するコンテンツとの親和性をより高めたメインビジュアルのスケッチを行った。「詰め込む」対象を段ボールからボトルメールにすることで、清涼感や透明感を演出する。ブラッシュアップをする度に変更していく予定。 ~ ***今週の目標 -進行管理表の更新 -アニメーション動画のブラッシュアップ ~ ~ ~ ~