のすたる▶︎ちっく
ノスタルジックを届けるWebコンテンツ
概要
これは何？
イラスト×アニメーション×Webサイト：「ノスタルジー」をモチーフに物語が展開していく動画や、それを用いたシンプルな構成のWebサイトの制作
背景と目的
背景：近年SNSが普及したことから、昔に比べたくさんの情報が目に見えるようになった。その中でどれが嘘でどれが本当なのか、何が自分にとって必要かそうでないかを、瞬時に見極めて取捨選択しなければならなくなった。また、このように世の中に情報が溢れ、それらを吟味する時間が必要になったことも、現代人が忙しいと言われる理由の一つであると考えている。
目的：
コンセプト
物語を展開させる際に、夏を涼しく過ごすための知恵を描写することで、見る人に清涼感を与えるイラストや、それを用いた動画／Webサイトを制作する。知恵に関しては、テクノロジーではなく自然さにこだわる。また、日記風で書き留めることでさらにリアリティを演出し、まるで自分もそこにいるかのような、その場の空気感を鮮明に表現する。
成果物の仕様
イラスト：サイズは1280px ×720px、23~30枚制作
動画：サイズは1920px ×1080px、約45秒の動画を10個前後制作
Webサイト：GitHubを用いて制作、GIFに変換した動画を埋め込み、画面をスクロールすることで物語が展開していく（物語のみのシンプルなWebサイト）
制作ツール
ibisPaint X, After Effects, Premiere Pro, Atom
プロジェクトの期間
進行管理表←こちらから！
まとめ
準備中
調査
現状調査
先行事例
- 夏の作業用BGMに合わせた動画※音が出ます
効果音に合わせてイラストが動くことで、よりリアリティを感じられる。動画を作る際に参考にしたい。
- 漫画のPV※音が出ます
大胆なカットインやBGMの切り替えから、漫画の持つ独特な世界観を保ったまま、躍動感を演出している。セリフやコマの出し方など、動画を作る際に参考にしたい。
- 日記風のWebサイト
画像と文章の比率がまとめられていてとても見やすい。Webサイトを作る際に参考にしたい。
- 遊び心のあるWebサイト
アイコンにギミックを取り入れている点など、見る人を飽きさせないWebサイトを制作する上で参考にしたい。
- 特殊な動きを取り入れたWebサイト※音が出ます
サイトを訪れると海中をイメージした音楽が流れ、触れると波紋が広がり、スクロールすると泡が上へと流れていく。臨場感のあるWebサイトを制作する際に参考にしたい。
- 夏の過ごし方の知恵
物語を展開していく上で取り入れることで、よりリアリティを演出出来ると感じる。
技法・技術情報
プロジェクト管理
スケジュール
進行管理表←こちらから！
ToDo
進行管理表の更新アニメーション動画のブラッシュアップアニメーション動画の制作サイトマップ再度作成タイトルのブラッシュアップ- メインビジュアルの制作/変更
- Webサイトのブラッシュアップ
進捗記録
2022.10.28
試作
今週の目標
- メインビジュアルの制作/変更
- Webサイトのブラッシュアップ
2022.10.21
試作
- Webサイトの制作
動画を埋め込み、画面をスクロールすることで物語が展開していくシンプルなWebサイトを制作した。ギャラリー欄の画像をクリックすると拡大表示する仕組みなどを取り入れる必要がある。
※あえてサイト内に台詞を記載せず、見た人に物語を想像してもらう…でも良いかもしれない。
※ノスタルジックを感じられるサイト、電車の車窓風景（又はドア）をクリックすると動画が再生される仕組みなど…？
- アニメーション動画の制作
|
|
|
|
|
|
|
|
|
特に「夏らしさ」のないイラストにも、セミの鳴き声や波の音などをBGMのように付け加えることで、リアリティを演出した。
- イラストのブラッシュアップ1
イラストのブラッシュアップ2
イラスト内の雰囲気に合わせ、色温度を調整/イラストにメリハリを持たせ、構図の歪みなどに細かい修正を加えた。
- 新規イラストの制作
より「夏らしさ」を感じられるよう、打ち水や風鈴の新規イラストを制作し、アニメーションに取り入れた。人物の動きや風の流れを意識し、イラストに組み込むことで、よりリアリティを演出した。
今週の目標
- メインビジュアルの制作/変更
- サイトマップ再度作成
- Webサイトのブラッシュアップ
- タイトルのブラッシュアップ
2022.10.14
試作
- アニメーション動画の制作
台詞のアニメーションを省いたことにより、効果音かつ動きが必要な場面のみを制作するため、絵コンテの段階よりもテンポ良く物語を進めることが可能になった。
今週の目標
- メインビジュアルの制作/変更
- アニメーション動画の制作
- Webサイトの試作
2022.10.7
試作
- イラストのブラッシュアップ
イラスト内の時間に合わせた光の角度を描写し、朝の柔らかい光の雰囲気を表すため、線の色を変更した。
- アニメーション動画の制作
新規イラストに合わせ、水滴の落ちる音を動画内に使用することにより、見る人により涼しげな印象を与える動画を制作した。
今週の目標
- メインビジュアルの制作/変更
- アニメーション動画の制作
- 進行管理表の更新
2022.9.30
試作
- 新規イラストの制作
アニメーション動画に用いる、見る人により涼しげな印象を与えることを目的とした新規イラストを制作した。水滴が水面に落ちて波紋が広がる様子を描写した。
今週の目標
- メインビジュアルの制作/変更
- アニメーション動画の制作
2022.9.23
試作
- アニメーション動画の制作
イラスト内の時間を変更し、またそれに合わせた光の角度を描写するなどのブラッシュアップを行った。
また、動画内で物語を展開させるのではなく動画に対する補足(時間やひとこと)をサイト内に表記するため、台詞のアニメーションを省いた。
今週の目標
- メインビジュアルの制作/変更
- アニメーション動画の制作
2022.9.16
試作
今週の目標
- 進行管理表の更新
- アニメーション動画のブラッシュアップ
