のすたる▶︎ちっく
ノスタルジーを届けるWebコンテンツ
概要
これは何？
イラスト×アニメーション×Webサイト：「ノスタルジー」をモチーフに物語が展開していくイラストや、それを用いたシンプルな構成の動画/Webサイトの制作
背景と目的
背景：近年SNSが普及したことから、昔に比べたくさんの情報が目に見えるようになった。その中でどれが嘘でどれが本当なのか、何が自分にとって必要かそうでないかを、瞬時に見極めて取捨選択しなければならなくなった。また、このように世の中に情報が溢れ、それらを吟味する時間が必要になったことも、現代人が忙しいと言われる理由の一つであると考えている。
また同時に、近年ノスタルジーを感じるイラストや音楽が流行している傾向がある。その背景に、忙しない現代社会と距離を置き、過去を懐かしんで現実逃避をしたい/癒されたいという想いが関係しているのではないかと感じている。
目的：情報過多により生き急ぎ、疲弊している現代人に対し、一度立ち止まって心を休ませるきっかけとなるような「ノスタルジー（懐かしさ）」を感じるWebコンテンツを制作し、同時に「癒し」を与える。
コンセプト
物語を展開させる際に、よりノスタルジーを感じられるよう昔ながらの景色や風習を取り入れる。また、田舎のゆったりとした時間の経過を表現するため、テクノロジーの描写を控え、自然さにこだわる（環境音など）。
Webサイトに関しては、カメラのシャッターを押した時のようなオープニングアニメーションや、日記帳に写真を並べたようなレイアウトを取り入れるなどの工夫をすることで、イラストや動画との親和性を高める。
成果物の仕様
イラスト：サイズは1280px ×720px、約40枚制作
動画：サイズは1920px ×1080px、7~45秒の動画を11個制作
Webサイト：GitHubを用いて制作、YouTubeにアップロードした動画を埋め込み、画面をスクロールすることで物語が展開していく（物語のみのシンプルなWebサイト）
制作ツール
ibisPaint X, After Effects, Premiere Pro, Atom
プロジェクトの期間
進行管理表←こちらから！
まとめ
イラストや環境音を取り入れたアニメーション動画を制作し、様々な表現方法でアプローチしたことで、視覚と聴覚で「ノスタルジー」を感じられるWebサイトを制作することが出来た。また、Webサイトを制作する際に様々な技法を取り入れ、「田舎のゆったりとした時間の経過を表現する」といったコンセプトに沿って工夫したことで、「癒し」を与えるという目的を達成することが出来たと感じる。
今後は、見る人をより世界観に引き込むため、サイト内にギミックを取り入れ、より作品を魅せるレイアウトを考案するなどといった、ブラッシュアップを重ねていきたい。
調査
現状調査
先行事例
- 夏の作業用BGMに合わせた動画※音が出ます
効果音に合わせてイラストが動くことで、よりリアリティを感じられる。動画を作る際に参考にしたい。
- 漫画のPV※音が出ます
大胆なカットインやBGMの切り替えから、漫画の持つ独特な世界観を保ったまま、躍動感を演出している。セリフやコマの出し方など、動画を作る際に参考にしたい。
- 日記風のWebサイト
画像と文章の比率がまとめられていてとても見やすい。Webサイトを作る際に参考にしたい。
- 遊び心のあるWebサイト
アイコンにギミックを取り入れている点など、見る人を飽きさせないWebサイトを制作する上で参考にしたい。
- 特殊な動きを取り入れたWebサイト※音が出ます
サイトを訪れると海中をイメージした音楽が流れ、触れると波紋が広がり、スクロールすると泡が上へと流れていく。臨場感のあるWebサイトを制作する際に参考にしたい。
- 夏の過ごし方の知恵
物語を展開していく上で取り入れることで、よりノスタルジーを演出出来ると感じる。
技法・技術情報
プロジェクト管理
スケジュール
進行管理表←こちらから！
ToDo
進行管理表の更新アニメーション動画のブラッシュアップアニメーション動画の制作サイトマップ再度作成タイトルのブラッシュアップメインビジュアルの制作/変更作品概要の制作- Webサイトのブラッシュアップ
進捗記録
2022.11.18
試作
- メインビジュアルの制作
切ないイメージのある夕暮れをモチーフに、全体的な画質を下げる加工をすることで、よりノスタルジーを感じられるメインビジュアルを制作した。
- Webサイトのブラッシュアップ
上記のメインビジュアルを用いて、オープニングアニメーションが終わると同時に人物が現れ、カメラで撮影したような構成のWebサイトを制作した。
今週の目標
2022.11.11
試作
- Webサイトのブラッシュアップ
カメラのシャッターを押した時のようなオープニングアニメーションや、日記帳に写真を並べたようなレイアウトを取り入れるなどの工夫をしたことで、イラストや動画との親和性を高めた。また、見る人にゆったりとした時間の経過を感じてもらうため、画面をスクロールするとイラストや動画/文章がフェードインする仕組みを取り入れた。
今週の目標
- メインビジュアルの制作/変更
- Webサイトのブラッシュアップ
2022.10.28
試作
- タイトルのブラッシュアップ
旧：ひんやりそのまま詰め込んで
新：のすたる▶︎ちっく
研究の背景や目的を大きく変えることから、タイトルも変更した。懐かしいという意味の「ノスタルジー」＋～っぽいという意味や時を刻む表現の「〜チック」を掛け合わせたもの。また、「▶︎」は電車の行き先を示すように、心が過去に向かう（懐かしい気持ちに浸る）ことや、動画の再生ボタンを押すように、一度立ち止まって振り返ることを表している。
- サイトマップ再度作成1
- サイトマップ再度作成2
- サイトマップ再度作成3
研究の背景や目的を大きく変えることから、Webサイトのサイトマップも再度作成した。ノスタルジーを感じさせると同時に、見る人を退屈させない動的なサイトを制作する。
今週の目標
- メインビジュアルの制作/変更
- 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
試作
今週の目標
- 進行管理表の更新
- アニメーション動画のブラッシュアップ
