動く!web漫画制作
web漫画にアニメーション要素を追加する
- 山元友敬
- Keywords:comic,animation
- twitter_Y.T
Overview
What is this?
- 動くweb漫画の制作
Background and Purpose
- 現在twitterが広く普及されており時間が空いた時にtwitter見ている人が多い。twitterの投稿の中でも1話が短編のweb漫画がすぐに読むことができるということで人気を博している。そのためそのweb漫画の所々を動かすことでweb漫画の表現の仕方を拡張していこうという目的がある。
Concept
- web漫画と24fpsのアニメーションを掛け合わせる
Outputs
- 4ページのweb漫画を作成し、それぞれのページに24fpsのアニメーションをつけて1作品twitterに載せる
ブラッシュアップ後
- ブラッシュアップ後の作品→twitter Y.T
Google drive
- web漫画1ページ目アニメーション_ブラッシュアップ
- web漫画2ページ目アニメーション_ブラッシュアップ
- web漫画3ページ目アニメーション_ブラッシュアップ
- web漫画4ページ目アニメーション_ブラッシュアップ
※前回より長い動画となっており、容量が大きくなっているため読み込むことができない場合があります(作品を見る場合はTwitter上で見た方が安定して見れます)
ブラッシュアップ前
- ブラッシュアップ前の作品→twitter Y.T
Google drive
- web漫画1ページ目アニメーション
- web漫画2ページ目アニメーション
- web漫画3ページ目アニメーション
- web漫画4ページ目アニメーション
※こちらはGoogle drive上にアップロードした短い動画となっているので読み込みが不安定です
(作品を見る場合はTwitter上で見た方が安定して見れます)
Tools
- iMac
- 板タブ
- CLIP STUDIO PAINT EX
- twitter
Term
- 2022.09.21-2022.12.21
Conclusion
- web漫画とアニメーションを掛け合わせてみて、web漫画の手軽に読める特徴を潰さないようにするためにアニメーションの時間をなるべく短く設定したが、そのことによりアニメーションの展開がかなり速くなってしまった。
- 特にセリフに関する文字のアニメーションを速くすると読み手の読むスピードが狂ってしまうので、web漫画とアニメーションを掛け合わせる場合は、読み手が読みやすくするように文字のアニメーションに緩急をつけて、最低でも1ページにつき10秒あれば読みやすくなるのではないかと思った。
(ブラッシュアップ済み)
Research
Current Situation
- 漫画のアニメーションについて調査したが、調査したyoutubeのアニメーションの方法をそのままweb漫画に取り入れてしまうと漫画内がうるさくなり過ぎてしまうと考える。このことより、このプロジェクトで作成するweb漫画では瞬きや耳などの細かなアニメーションをつける。
Precedent
Technology
- ストーリーの作り方を総まとめ!一般的な創作理論を整理して紹介
- 物語の才能面白いストーリーの作り方
- プロに近づく!漫画の描き方
- つまらないを卒業!読ませる漫画ストーリーの作り方・基本を解説
- 動く描写がある漫画作品に関する調査(見本とするもの)
Project Management
Schedule
ToDo
CLIP STUDIO PAINT EXの使い方を学ぶtwitter上の漫画の傾向を調べるプロットを考えるネームを描くペン入れをする
WORK LOG
2022.12.21
調査
試作
- web漫画3ページ目アニメーション_ブラッシュアップ
- web漫画4ページ目アニメーション_ブラッシュアップ
※前回より長い動画となっており、容量が大きくなっているため読み込むことができない場合があります
2022.12.14
調査
試作
- web漫画2ページ目アニメーション_ブラッシュアップ
※前回より長い動画となっており、容量が大きくなっているため読み込むことができない場合があります
2022.12.07
先生方からのアドバイス
- ループを用いたアニメーション作り
- 本来の漫画のコマの構成にとらわれないようにする
調査
試作
- web漫画1ページ目アニメーション_ブラッシュアップ
※前回より長い動画となっており、容量が大きくなっているため読み込むことができない場合があります
2022.11.30
調査
試作
2022.11.23
調査
試作
1次提出作品
- web漫画1ページ目
- web漫画2ページ目
※1,2ページ目の赤色で丸されている部分はアニメーションをつけようとしている箇所です - web漫画3ページ目ネーム
※現在ペン入れ中です - web漫画4ページ目アニメーション
※短い動画となっているので容量が少し重くなっております
2022.11.16
調査
試作
- web漫画4ページ目アニメーション
※短い動画となっているので容量が少し重くなっております
2022.11.09
調査
- Web漫画を描きたい!読みやすいサイズ、解像度、フォントサイズとは
- アニメを作る時に何枚絵を入れたらいいの?フレームレートと1秒のコマ数
- 先週と今週の調査で30fpsでアニメーションを作る予定を24fpsに変更
- 先週と今週の調査で30fpsでアニメーションを作る予定を24fpsに変更
試作
2022.11.02
調査
試作
2022.10.26
調査
- 動く描写がある漫画作品に関する調査
試作
- 中間のまとめ
- 最初は体の動きまでアニメーションで再現しようとしたが、1ページがとても騒がしくなってしまうと考えたため細部だけにアニメーションをつけようと考えた
- 中間までの期間はアニメーションより絵の上達に力を入れていたため、これからは漫画の作成と並行してアニメーションを中心に取り組んでいく
- 研究に深く関わってくる中間までの主な試作
2022.10.19
調査
- 漫画の参考にする画像
- クラウチングスタート
- 蹴りの画像
試作
- キャラクター作り
- 今週は絵の細部に気が行ってしまったので来週までには漫画とモーション一つを作りたいです....
- 今週は絵の細部に気が行ってしまったので来週までには漫画とモーション一つを作りたいです....
2022.10.12
調査
- 漫画に関する調査
試作
2022.10.05
調査
- アニメーションに関する調査
試作
- 手を描くときのスケッチ
- 太もも、ふくらはぎを描くときのスケッチ
※スカルプターのための美術解剖学を見て大事な部分を描いたもの - テーマの変更
- スケジュール表作成
2022.09.28
調査
- Twitter上での先行事例
試作
- 正面、横、斜めから見て同じキャラに見せる練習
- Precedentの書き込み
2022.09.21
テーマ作成
- 前期に引き続き動物の擬人化の作品を制作
- 形式は漫画
- 目つきが悪くコミュニケーションが苦手なキャラクターを中心の短い漫画を5個作成