ひんやりそのまま詰め込んで
清涼感を届けるWebコンテンツ
概要
これは何?
イラスト×アニメーション×Webサイト:「夏」をモチーフに物語が展開していく動画や、それを用いたシンプルな構成のWebサイトの制作
背景と目的
背景:近年、日本の夏が暑すぎることから、「夏」というものに対し嫌悪感を抱いている人も少なくないと感じる。実際、夏の東京の平均気温はこの100年間で3℃上昇しており、地球温暖化の問題を解決しない限りはこれからも上昇し続けると言われている。
目的:夏を涼しく過ごすための知恵を描写し、その場の空気感を鮮明に表現することで、動画を見た人やWebサイトを訪れた人の夏に対する嫌悪感を少しでも軽いものにする。
コンセプト
物語を展開させる際に、夏を涼しく過ごすための知恵を描写することで、見る人に清涼感を与えるイラストや、それを用いた動画/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
進行管理表の更新
アニメーション動画のブラッシュアップ
- メインビジュアルの制作/変更
- アニメーション動画の制作
進捗記録
2022.9.30
試作
- 新規イラストの制作
アニメーション動画に用いる、見る人により涼しげな印象を与えることを目的とした新規イラストを制作した。水滴が水面に落ちて波紋が広がる様子を描写した。
今週の目標
- メインビジュアルの制作/変更
- アニメーション動画の制作
2022.9.23
試作
- イラスト内の時間を変更し、またそれに合わせた光の角度を描写するなどのブラッシュアップを行った。
また、動画内で物語を展開させるのではなく動画に対する補足(時間やひとこと)をサイト内に表記するため、台詞のアニメーションを省いた。
今週の目標
- メインビジュアルの制作/変更
- アニメーション動画の制作
2022.9.16
試作
今週の目標
- 進行管理表の更新
- アニメーション動画のブラッシュアップ