#author("2022-11-11T15:42:21+09:00","default:member","member")
*のすたる▶︎ちっく
//ひんやりそのまま詰め込んで
ノスタルジーと清涼感を届けるWebコンテンツ
~
#image(main_02.jpg)
~
-''奈須本真椰''
-'''Keywords：夏,清涼感'''
-https://maya-des.github.io/hinyari_sample01/
~
**概要
***これは何？
//&color(red){これは何か・・を簡潔に};
イラスト×アニメーション×Webサイト：「夏」をモチーフに物語が展開していく動画や、それを用いたシンプルな構成のWebサイトの制作
~
***背景と目的
//&color(red){プロジェクトの背景と目的};
背景：近年、日本の夏が暑すぎることから、「夏」というものに対し嫌悪感を抱いている人も少なくないと感じる。実際、夏の東京の平均気温はこの100年間で3℃上昇しており、地球温暖化の問題を解決しない限りはこれからも上昇し続けると言われている。
目的：夏を涼しく過ごすための知恵を描写し、その場の空気感を鮮明に表現することで、動画を見た人やWebサイトを訪れた人の夏に対する嫌悪感を少しでも軽いものにする。
~
***コンセプト
//&color(red){基本的な考え方、枠組み、視点など};
物語を展開させる際に、夏を涼しく過ごすための知恵を描写することで、見る人に清涼感を与えるイラストや、それを用いた動画／Webサイトを制作する。知恵に関しては、テクノロジーではなく自然さにこだわる。また、日記風で書き留めることでさらにリアリティを演出し、まるで自分もそこにいるかのような、その場の空気感を鮮明に表現する。
~
***成果物の仕様
//&color(red){&small(成果物の形式・サイズ・時間尺等);};
イラスト：サイズは1280px ×720px、23~30枚制作
動画：サイズは1920px ×1080px、約45秒の動画を10個前後制作
Webサイト：GitHubを用いて制作、GIFに変換した動画を埋め込み、画面をスクロールすることで物語が展開していく（物語のみのシンプルなWebサイト）~
-[[部分的な構成のラフ>https://drive.google.com/file/d/1X6GR7PwhFjmYJ3Gr4E4fgo78T5S_-xku/view?usp=sharing]]とそれに沿って制作した[[「夏」をモチーフに物語が展開していく動画>https://youtu.be/13VWVUMSkfg]]
-[[字/絵コンテ全動画分まとめ>https://drive.google.com/file/d/1XJqqVxTYpKxGyXatw-Swhzun6sqyB9fi/view?usp=drivesdk]]
-[[キャラクターデザイン>https://drive.google.com/file/d/12rVSYDJfvfOZ-wX32qHWEZIorsT8_pc3/view?usp=drivesdk]]
-[[イラストのブラッシュアップ>https://drive.google.com/file/d/1gezAdxZC3ZZjsfvvDb1X8mKLAnUMvtX3/view?usp=drivesdk]]
-[[Webサイトのサイトマップ>https://drive.google.com/file/d/1HZuujh4M2kHeSdt3SpqmDZnjQnkR9CQy/view?usp=drivesdk]]
~
//***メンバー
//&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){プロジェクトが完結したら「まとめ」を記載して下さい。};
準備中
~
~
**調査
~
***現状調査
//&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し};
-近年、日本の夏が暑すぎるために、[[屋外での季節行事が涼しい時期での開催に変更>https://b-engineer.co.jp/chokomana/e-s-student/education/1120094]]され、[[公立小中学校のエアコンの設置率が高まる>https://www.yomiuri.co.jp/kyoiku/kyoiku/news/20200930-OYT1T50290/]]など、多くの熱中症対策がなされている
-[[夏の東京の平均気温はこの100年間で3℃上昇>https://toyokeizai.net/articles/-/229965?page=2]]しており、[[地球温暖化の問題を解決しない限りはこれからも上昇し続ける>https://www.env.go.jp/press/107008.html]]と言われている
-毎年異常な暑さを記録する日本の夏に対し、世間はどう捉えているのだろうと考え、調査をした結果、[[様々な理由で夏が嫌いな人が多く存在>https://happymail.co.jp/happylife/characteristic/dislike-summer/]]し、その中でも[[「暑すぎる」ことを理由に挙げる人の割合が高い>https://www.sankeiliving.co.jp/research/ol/116.html]]ことが分かった
~
-「ノスタルジック」の重要性？（要調査）
~
***先行事例
//&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]]
-[[HTMLで動画を自動再生する方法>https://webliker.info/52510/]]
~
~
**プロジェクト管理
~
***スケジュール
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
[[進行管理表>https://docs.google.com/spreadsheets/d/1xTTvgMmEyyGXhpsRaBVCrA_-qPdSyjp-zpj1tNLr30o/edit?usp=sharing]]←こちらから！
~
***ToDo
//&color(red){やるべきこと（タスク）を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};
-%%進行管理表の更新%%
-%%アニメーション動画のブラッシュアップ%%
-%%アニメーション動画の制作%%
-%%サイトマップ再度作成%%
-%%タイトルのブラッシュアップ%%
-メインビジュアルの制作/変更
-Webサイトのブラッシュアップ
//動くメインビジュアルを作りたいかもしれない
~
~
#hr
CENTER:''進捗記録''
//&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。};
#hr
~
~
**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サイトのブラッシュアップ
~
~
**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]]
制作するコンテンツとの親和性をより高めたメインビジュアルのスケッチを行った。「詰め込む」対象を段ボールからボトルメールにすることで、清涼感や透明感を演出する。ブラッシュアップをする度に変更していく予定。
~
***今週の目標
-進行管理表の更新
-アニメーション動画のブラッシュアップ
~
~
~
~
