ひんやりそのまま詰め込んで
清涼感を届けるWebコンテンツ
- 奈須本真椰
- Keywords:夏,清涼感
- https://youtu.be/13VWVUMSkfg
概要
これは何?
イラスト×アニメーション×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
プロジェクトの期間
進行管理表←こちらから!
まとめ
卒業研究I(前期)では主に情報デザイン研究IIで制作したイラストを元に絵コンテを制作し、それに沿ったアニメーション動画の試作に取り組んだ。卒業研究II(後期)ではイラストのブラッシュアップに加え、アニメーション動画やそれを用いたWebサイトの制作に取り組む。
全体的な動画の構成は決まったので、今後はイラストのブラッシュアップを重ね、「動画を見た人の夏に対する嫌悪感を少しでも軽いものにすると同時に、夏そのものの魅力を伝える」という目標を達成するため、よりコンセプトに沿った動画の制作を進めていきたい。また同時に、物語を展開させる際、夏を涼しく過ごすための知恵を描写した新規イラストの制作も行う(その際「夏を涼しく過ごすための知恵」をいくつかリストアップし、参考にすることで、よりスムーズに制作を進める)。それぞれのシーンに合わせてイラストの出現の仕方や、出現する向きを場面に合わせて変えることで、見た人を飽きさせない工夫をする必要があると感じる。
調査
現状調査
- 近年、日本の夏が暑すぎるために、屋外での季節行事が涼しい時期での開催に変更され、公立小中学校のエアコンの設置率が高まるなど、多くの熱中症対策がなされている
- 夏の東京の平均気温はこの100年間で3℃上昇しており、地球温暖化の問題を解決しない限りはこれからも上昇し続けると言われている
- 毎年異常な暑さを記録する日本の夏に対し、世間はどう捉えているのだろうと考え、調査をした結果、様々な理由で夏が嫌いな人が多く存在し、その中でも「暑すぎる」ことを理由に挙げる人の割合が高いことが分かった
先行事例
- 夏の作業用BGMに合わせた動画※音が出ます
効果音に合わせてイラストが動くことで、よりリアリティを感じられる。動画を作る際に参考にしたい。 - 漫画のPV※音が出ます
大胆なカットインやBGMの切り替えから、漫画の持つ独特な世界観を保ったまま、躍動感を演出している。セリフやコマの出し方など、動画を作る際に参考にしたい。
- 日記風のWebサイト
画像と文章の比率がまとめられていてとても見やすい。Webサイトを作る際に参考にしたい。 - 遊び心のあるWebサイト
アイコンにギミックを取り入れている点など、見る人を飽きさせないWebサイトを制作する上で参考にしたい。 - 特殊な動きを取り入れたWebサイト※音が出ます
サイトを訪れると海中をイメージした音楽が流れ、触れると波紋が広がり、スクロールすると泡が上へと流れていく。臨場感のあるWebサイトを制作する際に参考にしたい。 - 夏の過ごし方の知恵
物語を展開していく上で取り入れることで、よりリアリティを演出出来ると感じる。
技法・技術情報
プロジェクト管理
スケジュール
進行管理表←こちらから!
ToDo
テーマ案の模索テーマの決定/登録メインビジュアルの制作/設定目的の部分を明確にする(根本的なところを練り直す)キャラクターデザインの制作アニメーション動画の試作7/1までに作品概要を完成字/絵コンテの制作イラストのブラッシュアップWebサイトのサイトマップの制作
2022.7.22
試作
- イラストのブラッシュアップ
イラスト内の時間を変更し、またそれに合わせた光の角度を描写した。
情報デザイン研究IIではキャラクター性を高めるため主人公の口をあえて描かなかったが、今回リアリティのある動画を作るにあたって、表情が豊かな方が良いと考え、変更した。 - Webサイトのサイトマップ(ラフ)
物語のみのシンプルなWebサイトを制作予定。GIFに変換した動画を短く切り取って配置。その動画に対する文章を記載し、周辺に動画に関するアイテム(ラムネや風鈴)や、泡や水面の波紋など水の要素を配置する。動画内に台詞を入れず、物語を展開させるのではなく動画に対する補足(時間とひとことを日記風に表記)でも良いかもしれない。
今週の目標
- 最終調整(前期時点)
2022.7.15
試作
- 字/絵コンテ全動画分まとめ
作品の全体を把握するため、字/絵コンテをシーンごとに分けて全動画分制作した。見る人を飽きさせない構成にするため、それぞれシーンに合ったアニメーションを取り入れる。
プレゼンを通して見つかった改善点
- Webサイトのサイトマップを制作し、全体を把握する
- イラスト内の時間の表記に合わせた光の角度の描写をする(ブラッシュアップ)
- 夏の嫌悪感を軽いものにするためには、昔ながらの知恵では難しいのではないか(外国の暑い地域について調べてみる?)
今週の目標
- Webサイトのサイトマップの制作
- 指摘されたイラストのブラッシュアップ
2022.7.8
試作
- 字/絵コンテその7
- 字/絵コンテその8
主人公が下校するシーン。ところどころに文章・効果音を取り入れる。ここではイラストの出現の仕方や、出現するテンポを落とし、夕方のゆったりとした時の流れを表現する。
今週の目標
- プレゼンの準備
- 作品概要の再調整
2022.7.1
試作
- 字/絵コンテその5
- 字/絵コンテその6
主人公が登校するシーン。ところどころに文章・効果音を取り入れる。ここではイラストの出現の仕方や、出現する向きを大幅に変え、臨場感を演出(集中線を取り入れるなど)。
今週の目標
- プレゼンの準備
- 作品概要の再調整
2022.6.24
試作
- 字/絵コンテその3
- 字/絵コンテその4
引き続き主人公が朝の支度をするシーン。ところどころに文章・効果音を取り入れる。よりリアリティを演出させるため、ここでも日常を切り取った新規イラストの制作を行う。
今週の目標
- 字/絵コンテを最後まで制作
2022.6.17
試作
- キャラクターデザイン
主人公の視点(一人称視点)で物語を進めることで、よりリアリティを演出させる。
今週の目標
- 字/絵コンテを最後まで制作
- 7/1までに作品概要を完成
2022.6.10
試作
- 字/絵コンテその2
主人公が朝の支度をするシーン。ところどころに文章・効果音を取り入れる。よりリアリティを演出させるため、日常を切り取った新規イラストの制作も行う。 - 物語で取り入れる知恵まとめ
物語を展開させる際に、夏を涼しく過ごすための知恵を描写することで、見る人に清涼感を与える。
今週の目標
- 目的の部分を明確にする(根本的なところを練り直す)
- キャラクターデザインの制作
- 字/絵コンテを最後まで制作
2022.6.3
試作
- イラストのブラッシュアップ2
見る人により涼しげな印象を与えるよう、全体的なトーンを寒色で統一。
プレゼンを通して見つかった改善点
- 絵コンテを最後まで制作し、全体を把握する
- 目的の部分を明確にする(アイデア集なのか、嫌悪感を軽くするのか統一)
- 見てもらう時期について考えることで、作品の質を高める
- 動画からWebサイトへ誘導する仕組みの導入
- 時間ごとにWebサイトの背景の色を変更・天気予報や時間を表記し、Webサイトの充足感を高める
- 「知恵」をカテゴリ化することで、Webサイトの充足感を高める
- 「知恵」に関しては、テクノロジーではなく自然さにこだわる
今週の目標
- 字/絵コンテを最後まで制作
- イラストのブラッシュアップ
- 目的の部分を明確にする(根本的なところを練り直す)
2022.5.27
試作
- 字/絵コンテその1に沿って制作。より臨場感を演出するため、文章の出現の仕方などを工夫する必要がある。
今週の目標
- 字/絵コンテの続き
- イラストのブラッシュアップ
2022.5.20
試作
- 字/絵コンテその1
主人公が起床するシーン。ところどころに文章・効果音を取り入れる。イラストの出現の仕方や、出現する向きを場面に合わせて変えることで、よりリアリティを演出。
今週の目標
- 字/絵コンテの続き
- イラストのブラッシュアップ
- 中間報告の準備
2022.5.13
調査
- 特殊な動きを取り入れたWebサイト※音が出ます
サイトを訪れると海中をイメージした音楽が流れ、触れると波紋が広がり、スクロールすると泡が上へと流れていく。臨場感のあるWebサイトを制作する際に参考にしたい。 - 特殊な動きを取り入れたWebサイト2
サイト内の画像に触れると波紋が広がっていく。臨場感のあるWebサイトを制作する際に参考にしたい。 - 特殊な動きを取り入れたWebサイト3
サイト内の画像に触れると波紋が広がり、スクロールすると水滴が上へと流れていく。臨場感のあるWebサイトを制作する際に参考にしたい。
試作
- イラストのブラッシュアップ
見る人により涼しげな印象を与えるよう、部屋のアイテムを寒色で統一。
今週の目標
- 字/絵コンテのスケッチ
- イラストのブラッシュアップ
- 中間報告の準備
2022.4.22
テーマのメモ
- イラスト×アニメーション×Webサイト:「夏」をモチーフに物語が展開していく動画や、それを用いた動的なWebサイトの制作/グッズの製作
お楽しみ要素などの説明は省き、物語そのものだけのサイトに
特典画像はダウンロード出来るように
夏の過ごし方の知恵をストーリーに組み込む?
調査
- 遊び心のあるWebサイト
アイコンにギミックを取り入れている点など、見る人を飽きさせないWebサイトを制作する上で参考にしたい。 - 夏の過ごし方の知恵
物語を展開していく上で取り入れることで、よりリアリティを演出出来ると感じる。 - おばあちゃんの知恵袋
上に同じ。物語を展開していく上で参考にしたい。
試作(ラフ)
- メインビジュアルのラフ1
- メインビジュアルのラフ2
それぞれ「夏の詰まった箱」が流れてやってくるイメージ。
卒業研究II(後期)に向けての長期的な目標
- 卒業研究I(前期)では主に情報デザイン研究IIで作成したイラストのブラッシュアップや、それを用いたアニメーション動画の制作
- 卒業研究II(後期)では主に卒業研究Iでの成果物を用いたWebサイトや、関連グッズの制作
今週の目標
- テーマの決定/登録
- メインビジュアルの制作/設定
- キャラクターデザインの制作
- イラストのブラッシュアップ
2022.04.15
テーマのメモ
- イラスト×アニメーション×Webサイト:「夏」をモチーフに物語が展開していく動画の制作、またそれを用いた動的なWebサイトの制作(情報デザイン研究IIで製作したWebサイトのブラッシュアップも同時進行で行い、アニメーションを埋め込むことでより動的なWebサイトに)
- イラスト×グッズ:上記のWebサイトと動画に用いたイラストをモチーフにしたグッズの製作(pixivFACTORYを用いて自分用に製作、又はBOOTHにて販売)
- イラスト×Webサイト:旅行の際に必要な「持ち物チェックリスト」の役割をするWebサイトの制作(文章ではなくイラストにして並べることで、より分かりやすく分類)
調査
- 漫画のPV※音が出ます
大胆なカットインやBGMの切り替えから、漫画の持つ独特な世界観を保ったまま、躍動感を演出している。セリフやコマの出し方など、動画を作る際に参考にしたい。
試作(ラフ)
- 「夏」をモチーフに物語が展開していく動画/全体的な構成のラフ
画面が上から下へ流れていくのに合わせて、物語も進んでいく。所々に効果音を用いてリアリティを演出。
- いるものリスト/グッズ化も見込んだ壁紙のラフ
Webサイトに用いた持ち物のイラストを配置し、壁紙としてダウンロード出来るようにする。グッズも製作?
今週の目標
- テーマ案の模索
- 事前調査の継続
2022.04.08
テーマのメモ
- イラスト×アニメーション×Webサイト:「夏」をモチーフに物語が展開していくWebサイトの作成(情報デザイン研究IIで製作したWebサイトのブラッシュアップ?アニメーションを制作することで、より動的なWebサイトに)
- イラスト×アニメーション:「夏」をモチーフに物語が展開していく動画の作成(キャラクターの声は入れず、効果音のみ)
- イラスト×グッズ:上記のWebサイトや動画に用いたイラストをモチーフにしたグッズの製作(pixivFACTORYを用いて自分用に製作、又はBOOTHにて販売)
- イラスト×Webサイト:旅行の際に必要な「持ち物チェックリスト」の役割をするWebサイトの制作(文章ではなくイラストにして並べることで、より分かりやすく分類)
調査
- オリジナルグッズ
ピアスやルームキーのキーホルダー。画期的な形のグッズなど、モチーフを別のものに置き換えて考えた上で参考にしたい。 - 物語が展開していくWebサイト
下にスクロールするに連れて物語が展開していく。絵本のように要点がまとめられているので分かりやすい。Webサイトを作る際に参考にしたい。 - 日記風のWebサイト
画像と文章の比率がまとめられていてとても見やすい。Webサイトを作る際に参考にしたい。 - 個人的に好きな構成のWebサイト
配色やフォントなどの統一感も含め、全体的に情報が整理されていてとても見やすい。サイトを開いた時に出るアニメーションなど、Webサイトを作る際に参考にしたい。 - リリックビデオ1
歌詞と連動したイラストが表示されることで、楽曲が表す情景をより鮮明に思い浮かべることが出来る。見ていて飽きない。こちらは楽曲を元に制作されたものだが、画面の動きに合わせて台詞やイラストを表示し時間の経過を表すなど、動画を作る際に参考にしたい。 - リリックビデオ2
上に同じ。動画を作る際に参考にしたい。 - 夏の作業用BGMに合わせた動画
効果音に合わせてイラストが動くことで、よりリアリティを感じられる。動画を作る際に参考にしたい。
- 旅行の持ち物チェックリスト
性別や場面ごとに分かりやすくまとめられていてとても見やすい。Webサイトを作る際に参考にしたい。 - 鞄の中身を描いたイラスト
持ち物のレイアウトなど、Webサイトを作る際に参考にしたい。 - 持ち物を並べていくゲーム
細かいところまでドット絵で綺麗に描写されていてとても見やすい。アイテムを自分の好きな場所に配置出来るなど、自由度が高い。Webサイトを作る際に参考にしたい。
試作(ラフ)
- いるものリスト/Webサイトのレイアウトラフ
持ち物のイラストを選択し、それぞれドラッグすることで「入れたもの」と「入れてないもの」を分類出来るWebサイト。
スケジュール管理
- 進行管理表←こちらから!
今週の目標
- テーマ案の模索
- 事前調査の継続