LogoMark.png

山元友敬/情報デザイン研究II の変更点


#author("2023-01-14T00:25:51+09:00","default:member","member")
#author("2023-01-14T00:28:04+09:00","default:member","member")
*動く!web漫画制作
web漫画にアニメーション要素を追加する
#img(main_image.gif, center, 30%)                                 
-''山元友敬''
-'''Keywords:comic,animation'''
-__[[twitter_Y.T>https://twitter.com/YT85507813]]__

~


**Overview
***What is this?
//&color(red){これは何か・・を簡潔に};
-動くweb漫画の制作
~

***Background and Purpose
//&color(red){プロジェクトの背景と目的};
-現在twitterが広く普及されており時間が空いた時にtwitter見ている人が多い。twitterの投稿の中でも1話が短編のweb漫画がすぐに読むことができるということで人気を博している。そのためそのweb漫画の所々を動かすことでweb漫画の表現の仕方を拡張していこうという目的がある。
~

***Concept
//&color(red){基本的な考え方、枠組み、視点など};
-web漫画と24fpsのアニメーションを掛け合わせる
~

***Outputs
//&color(red){&small(成果物の形式・サイズ・時間尺等);};
-4ページのweb漫画を作成し、それぞれのページに24fpsのアニメーションをつけて1作品twitterに載せる
**ブラッシュアップ後
Twitter
-ブラッシュアップ後の作品→__[[twitter Y.T>https://twitter.com/YT85507813/status/1613916877788688385]]__

Google drive
-[[web漫画1ページ目アニメーション_ブラッシュアップ>https://drive.google.com/file/d/1dGgYTZzZ1P8xYwb5iZQa1qhSYxP8tao2/view?usp=sharing]]
-[[web漫画2ページ目アニメーション_ブラッシュアップ>https://drive.google.com/file/d/1bAS3tTdubbnMBdXEMpGUPzr-cn7gWSIH/view?usp=sharing]]
-[[web漫画3ページ目アニメーション_ブラッシュアップ>https://drive.google.com/file/d/1cotPwKcA6ccSQARi9JORAxALwtCTDbn9/view?usp=sharing]]
-[[web漫画4ページ目アニメーション_ブラッシュアップ>https://drive.google.com/file/d/1Qb08zfoRq9Pg7v8DM8FpF5_DlZO1u-xB/view?usp=sharing]]
※前回より長い動画となっており、容量が大きくなっているため読み込むことができない場合があります(作品を見る場合はTwitter上で見た方が安定して見れます)
~
**ブラッシュアップ前
Twitter
-ブラッシュアップ前の作品→__[[twitter Y.T>https://twitter.com/YT85507813/status/1600229298576580608]]__

Google drive
-[[web漫画1ページ目アニメーション>https://drive.google.com/file/d/1z-IYsnNGZDOVQdI9Afx4PO-_kAuf1yhb/view?usp=sharing]]
-[[web漫画2ページ目アニメーション>https://drive.google.com/file/d/1iuZTrgjecFIAkDB2lgNk8hIhn7k9_4BR/view?usp=sharing]]
-[[web漫画3ページ目アニメーション>https://drive.google.com/file/d/1HhSOnrcSmGOiyUGHcDoBdHkWczx3yA-X/view?usp=sharing]]
-[[web漫画4ページ目アニメーション>https://drive.google.com/file/d/1ZvRERg3Cuttd36Qr99YIDZVWgtis9G8E/view?usp=sharing]]
※こちらはGoogle drive上にアップロードした短い動画となっているので読み込みが不安定です
(作品を見る場合はTwitter上で見た方が安定して見れます)
~

//***Member
//&color(red){共同プロジェクトの場合のみ|メンバーと役割分担を明記};
//~

***Tools
//&color(red){使用するツール|ハードウエア・ソフトウエア};
-iMac
-板タブ
-CLIP STUDIO PAINT EX
-twitter
~

***Term
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX };
-2022.09.21-2022.12.21
~

***Conclusion
//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};
-web漫画とアニメーションを掛け合わせてみて、web漫画の手軽に読める特徴を潰さないようにするためにアニメーションの時間をなるべく短く設定したが、そのことによりアニメーションの展開がかなり速くなってしまった。
-特にセリフに関する文字のアニメーションを速くすると読み手の読むスピードが狂ってしまうので、web漫画とアニメーションを掛け合わせる場合は、読み手が読みやすくするように文字のアニメーションに緩急をつけて、最低でも1ページにつき10秒あれば読みやすくなるのではないかと思った。
(ブラッシュアップ済み)
~

**Research

***Current Situation
//&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し};
-漫画のアニメーションについて調査したが、調査したyoutubeのアニメーションの方法をそのままweb漫画に取り入れてしまうと漫画内がうるさくなり過ぎてしまうと考える。このことより、このプロジェクトで作成するweb漫画では瞬きや耳などの細かなアニメーションをつける。
~

***Precedent
//&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など};
-Twitter上での先行事例
--[[カエルDXさん>https://twitter.com/kaeru_dx]]
--[[カコミスルさん>https://twitter.com/cacomistle_tail]]
--[[ぬこー様ちゃんさん>https://twitter.com/nukosama/media]]
twitter上の漫画は、漫画のようなコマ割りと長方形を縦に並べたコマ割りがある
~

***Technology
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};
-[[ストーリーの作り方を総まとめ!一般的な創作理論を整理して紹介>https://takagi-shinry.com/2017/11/26/how-to-make-story-summary/]]
-[[物語の才能面白いストーリーの作り方>https://monosai.com/]]
-[[プロに近づく!漫画の描き方>https://www.too.com/manga/]]
-[[つまらないを卒業!読ませる漫画ストーリーの作り方・基本を解説>https://comic.smiles55.jp/guide/8029/]]
-動く描写がある漫画作品に関する調査(見本とするもの)
--[[乙女解剖>https://www.youtube.com/watch?v=7zwCIz-Ohn4]]
--[[ジャンププラス_広告>https://www.youtube.com/watch?v=dbEeAHCj3bw]]
~

**Project Management

***Schedule
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
-[[スケジュール表>https://docs.google.com/spreadsheets/d/1jnn0W0RWss1NphktTftKBZYw4SuAtih3NkGCH76Ugw8/edit?usp=sharing]]
~

***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};
-%%CLIP STUDIO PAINT EXの使い方を学ぶ%%
-%%twitter上の漫画の傾向を調べる%%
-%%プロットを考える%%
-%%ネームを描く%%
-%%ペン入れをする%%

~
~
~

#hr
CENTER:''WORK LOG''
//&color(red){List the most recent information at the top.};
#hr
~
~

**2022.12.21
***調査
-[[アニメーション着彩方法(アニメ『ヴァイオレット・エヴァーガーデン』)>https://www.youtube.com/watch?v=7rrZmwMS0LQ]]
~

***試作
-[[web漫画3ページ目アニメーション_ブラッシュアップ>https://drive.google.com/file/d/1cotPwKcA6ccSQARi9JORAxALwtCTDbn9/view?usp=sharing]]
-[[web漫画4ページ目アニメーション_ブラッシュアップ>https://drive.google.com/file/d/1Qb08zfoRq9Pg7v8DM8FpF5_DlZO1u-xB/view?usp=sharing]]
※前回より長い動画となっており、容量が大きくなっているため読み込むことができない場合があります
~
~


**2022.12.14
***調査
-[[絵コンテ作成方法>https://douga-kanji.com/posts/movie-constitution]]
~

***試作
-[[web漫画2ページ目アニメーション_ブラッシュアップ>https://drive.google.com/file/d/1bAS3tTdubbnMBdXEMpGUPzr-cn7gWSIH/view?usp=sharing]]
※前回より長い動画となっており、容量が大きくなっているため読み込むことができない場合があります
~


**2022.12.07
***先生方からのアドバイス
-ループを用いたアニメーション作り
-本来の漫画のコマの構成にとらわれないようにする
~

***調査
-[[ループするアニメーションの作り方>https://tips.clip-studio.com/ja-jp/articles/4951]]
~

***試作
-[[web漫画1ページ目アニメーション_ブラッシュアップ>https://drive.google.com/file/d/1dGgYTZzZ1P8xYwb5iZQa1qhSYxP8tao2/view?usp=sharing]]
※前回より長い動画となっており、容量が大きくなっているため読み込むことができない場合があります
~
~


**2022.11.30
***調査
-[[跳び蹴り参考画像1>https://seiga.nicovideo.jp/seiga/im1973528]]
-[[跳び蹴り参考画像2>https://prcm.jp/album/baskewichkrk/pic/26597885]]
~

***試作
-[[web漫画1ページ目アニメーション>https://drive.google.com/file/d/1z-IYsnNGZDOVQdI9Afx4PO-_kAuf1yhb/view?usp=sharing]]
-[[web漫画2ページ目アニメーション>https://drive.google.com/file/d/1iuZTrgjecFIAkDB2lgNk8hIhn7k9_4BR/view?usp=sharing]]
-[[web漫画3ページ目アニメーション>https://drive.google.com/file/d/1HhSOnrcSmGOiyUGHcDoBdHkWczx3yA-X/view?usp=sharing]]
~
~


**2022.11.23
***調査
-[[フカンの体の描き方を解説>https://comic.smiles55.jp/guide/11181/]]
-[[アオリの体の描き方解説>https://comic.smiles55.jp/guide/10766/]]
~

***試作
-[[web漫画1ページ目>https://drive.google.com/file/d/1EkNbcFIlb5s5nZWNtV6d9JvR-Nlby0fb/view?usp=sharing]]
-[[web漫画2ページ目>https://drive.google.com/file/d/1H2q9KZuNyScSCWpRBkHAHLgWnIQiJ-mD/view?usp=sharing]]
~

***1次提出作品
--[[web漫画1ページ目>https://drive.google.com/file/d/1EkNbcFIlb5s5nZWNtV6d9JvR-Nlby0fb/view?usp=sharing]]
--[[web漫画2ページ目>https://drive.google.com/file/d/1H2q9KZuNyScSCWpRBkHAHLgWnIQiJ-mD/view?usp=sharing]]
※1,2ページ目の赤色で丸されている部分はアニメーションをつけようとしている箇所です
--[[web漫画3ページ目ネーム>https://drive.google.com/file/d/1RiqCkUreAm5lW-FFeur4LlmumAd97PgC/view?usp=sharing]]
※現在ペン入れ中です
--[[web漫画4ページ目アニメーション>https://drive.google.com/file/d/1ZvRERg3Cuttd36Qr99YIDZVWgtis9G8E/view?usp=sharing]]
※短い動画となっているので容量が少し重くなっております
~
~


**2022.11.16
***調査
-[[CLIP STUDIO PAINTでアニメーションコミックを作成する>https://tips.clip-studio.com/ja-jp/articles/2511]]
~

***試作
-[[web漫画4ページ目アニメーション>https://drive.google.com/file/d/1ZvRERg3Cuttd36Qr99YIDZVWgtis9G8E/view?usp=sharing]]
※短い動画となっているので容量が少し重くなっております
~
~


**2022.11.09
***調査
-[[Web漫画を描きたい!読みやすいサイズ、解像度、フォントサイズとは>https://3daysam.com/webcomic-size/#:~:text=Instagram%E3%81%AB%E6%8A%95%E7%A8%BF%E3%81%99%E3%82%8B%E6%BC%AB%E7%94%BB,%E3%81%A7%E6%AD%A3%E6%96%B9%E5%BD%A2%E3%81%AB%E3%81%97%E3%81%BE%E3%81%97%E3%82%87%E3%81%86%E3%80%82]]
-[[アニメを作る時に何枚絵を入れたらいいの?フレームレートと1秒のコマ数>https://aniduku.com/2016/08/29/frame/]]
--先週と今週の調査で30fpsでアニメーションを作る予定を24fpsに変更
~

***試作
-[[先週分析したうさぎのキャラをデジタルで描き起こし>https://drive.google.com/file/d/1TTwRQyt37kj2g4fODmyBSfQf-TD-ZMIR/view?usp=sharing]]
~
~


**2022.11.02
***調査
-[[ペン入れのコツ>https://murasakiatsushi.com/pen-drawing/]]
-[[24fpsと30fpsの違いについて>https://arintoko.com/entry/fps]]
~

***試作
-[[うさぎの分析からキャラクター化>https://drive.google.com/file/d/1IbBIkU_-p2PK7S9srkZ0OPDMF1mTDYoJ/view?usp=sharing]]
-[[イラスト練習>https://drive.google.com/file/d/1fuq2e1aRMcCu2t0Tv1Xbzka1k3q0GU3i/view?usp=sharing]]
~
~


**2022.10.26
***調査
-動く描写がある漫画作品に関する調査
--[[乙女解剖>https://www.youtube.com/watch?v=7zwCIz-Ohn4]]
--[[ジャンププラス_広告>https://www.youtube.com/watch?v=dbEeAHCj3bw]]
~

***試作
-[[アニメーションの練習(15fps)>https://drive.google.com/file/d/1cWrxsd5hMuMHL3BR2719ZmbNnR54Zvdt/view?usp=sharing]]
-[[漫画のネーム作成>https://drive.google.com/drive/folders/1E0qojmgMctFqMYAbV7Y275TmzyCvz5NW?usp=sharing]]
-[[写真からキャラクター化>https://drive.google.com/file/d/1KVOuXJYG4HVTEM-IFEzIBLBXUVeM-Hs9/view?usp=sharing]]

-中間のまとめ
--最初は体の動きまでアニメーションで再現しようとしたが、1ページがとても騒がしくなってしまうと考えたため細部だけにアニメーションをつけようと考えた
--中間までの期間はアニメーションより絵の上達に力を入れていたため、これからは漫画の作成と並行してアニメーションを中心に取り組んでいく

-研究に深く関わってくる中間までの主な試作
--[[アニメーションの練習(15fps)>https://drive.google.com/file/d/1cWrxsd5hMuMHL3BR2719ZmbNnR54Zvdt/view?usp=sharing]]
--[[漫画のネーム作成>https://drive.google.com/drive/folders/1E0qojmgMctFqMYAbV7Y275TmzyCvz5NW?usp=sharing]]
--[[キャラクター制作1>https://drive.google.com/file/d/1lQPPJaLUBsRRP2IkD9RG32AmY9ssOIcy/view?usp=sharing]]
--[[キャラクター制作2>https://drive.google.com/file/d/1S1mQESGCCGcSWOwuqa7Og87FvuL_zOhQ/view?usp=sharing]]
~
~


**2022.10.19
***調査
-漫画の参考にする画像
-[[クラウチングスタート>https://www.google.com/search?q=%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%81%E3%83%B3%E3%82%B0%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88&sxsrf=ALiCzsZmojvJDDpJdKeARKCIz2mwR0TDfw:1666158532842&source=lnms&tbm=isch&sa=X&ved=2ahUKEwig5PSbzOv6AhV3sVYBHYjTAtIQ_AUoAXoECAEQAw&biw=1368&bih=1187&dpr=2#imgrc=y1H8GyqGHOUAKM]]
-[[蹴りの画像>https://www.google.com/search?q=%E8%B9%B4%E3%82%8A&tbm=isch&ved=2ahUKEwiB-baR4vv6AhUxKqYKHRECB7IQ2-cCegQIABAA&oq=%E8%B9%B4%E3%82%8A&gs_lcp=CgNpbWcQAzIECCMQJzIICAAQsQMQgwEyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEMgUIABCABDoHCCMQ6gIQJzoHCAAQBBCABDoKCAAQBBCABBCxAzoJCAAQBBCABBADOg0IABAEEIAEELEDEIMBUKkTWM9FYM1NaAZwAHgAgAHJAYgBmAqSAQUwLjcuMZgBAKABAaoBC2d3cy13aXotaW1nsAEKwAEB&sclient=img&ei=PApYY4HrDrHUmAWRhJyQCw&bih=1187&biw=1368]]
~

***試作
-[[キャラクター作り>https://drive.google.com/file/d/1d4MUaOl7OfXRMZsIMv2R8exx6c0KVop9/view?usp=sharing]]
--今週は絵の細部に気が行ってしまったので来週までには漫画とモーション一つを作りたいです....
~
~


**2022.10.12
***調査
-漫画に関する調査
--[[クリスタ_基本的なコマ枠の作り方>https://tips.clip-studio.com/ja-jp/articles/610#d5a2d2ce]]
--[[クリスタ_コマ枠のテクニック>https://tips.clip-studio.com/ja-jp/articles/1137?recommended=b]]
~

***試作
-[[写真からキャラクター化1>https://drive.google.com/file/d/1EunEOT_18RayhukKltOoaDr-wIIsMIeu/view?usp=sharing]]
-[[写真からキャラクター化2>https://drive.google.com/file/d/18MCNUdRduT3TqaSZqvA-PskaSPdvzqqj/view?usp=sharing]]
-[[写真からキャラクター化3>https://drive.google.com/file/d/1q6U3pwTVQvAlXGd8Fch-GH7ffKZH4t-F/view?usp=sharing]]
-[[写真からキャラクター化4>https://drive.google.com/file/d/13l7hi3iFhb-oYo2-FqJeympku6BessuE/view?usp=sharing]]
~
~


**2022.10.05
***調査
-アニメーションに関する調査
--[[クリスタ_アニメーション機能の基礎知識>https://tips.clip-studio.com/ja-jp/articles/2047]]
--[[クリスタ_アニメーション、コピー貼り付け>https://ask.clip-studio.com/ja-jp/detail?id=25197]]
--[[クリスタ_アニメーション制作中の前後の絵の表示>https://ask.clip-studio.com/ja-jp/detail?id=3693]]
~

***試作
-[[手を描くときのスケッチ>https://drive.google.com/file/d/1vfwN4pKzh_2ZkcdsMKe24qCU273IRD2Q/view?usp=sharing]]
-[[太もも、ふくらはぎを描くときのスケッチ>https://drive.google.com/file/d/1Y3I_47gaBYoT-vDdo2Y3BI6gh0bmJsyL/view?usp=sharing]]
※スカルプターのための美術解剖学を見て大事な部分を描いたもの
-テーマの変更
-スケジュール表作成
~
~


**2022.09.28
***調査
-Twitter上での先行事例
--[[カエルDXさん>https://twitter.com/kaeru_dx]]
--[[カコミスルさん>https://twitter.com/cacomistle_tail]]
--[[ぬこー様ちゃんさん>https://twitter.com/nukosama/media]]
twitter上の漫画は、漫画のようなコマ割りと長方形を縦に並べたコマ割りがあるため自身のプロットを書き、ネームを描いてどちらがいいか確かめる
~

***試作
-[[正面、横、斜めから見て同じキャラに見せる練習>https://drive.google.com/file/d/1brWYrYljU02sAjq2LQwyNHkTKU6uQ5E5/view?usp=sharing]]
-Precedentの書き込み
~
~


**2022.09.21
***テーマ作成
-前期に引き続き動物の擬人化の作品を制作
-形式は漫画
-目つきが悪くコミュニケーションが苦手なキャラクターを中心の短い漫画を5個作成
~

***調査
-[[ストーリーの作り方を総まとめ!一般的な創作理論を整理して紹介>https://takagi-shinry.com/2017/11/26/how-to-make-story-summary/]]
-[[物語の才能面白いストーリーの作り方>https://monosai.com/]]
-[[プロに近づく!漫画の描き方>https://www.too.com/manga/]]
-[[つまらないを卒業!読ませる漫画ストーリーの作り方・基本を解説>https://comic.smiles55.jp/guide/8029/]]
~

***試作
-[[キャラクター制作1>https://drive.google.com/file/d/1lQPPJaLUBsRRP2IkD9RG32AmY9ssOIcy/view?usp=sharing]]
-[[キャラクター制作2>https://drive.google.com/file/d/1S1mQESGCCGcSWOwuqa7Og87FvuL_zOhQ/view?usp=sharing]]
~
~


~