
🟡15日目・同人誌の表紙を動かす
こんにちは、だれのきです。
15日目は同人誌の表紙を楽しく動かしてみました!
今回の制作物
*✴︎ feeeling - Mano Sakuragi & Toru Asakura ✴︎*#とおまの合同 pic.twitter.com/efS2XreIJ3
— だれのき | うー (@darenoki) October 24, 2024
動かす元となったのはこちらのアンソロジーです!
デビルアクマさんと豆やなぎさんに許可をいただき実現できました(˘ᴗ˘)感謝…
櫻木真乃&浅倉透 カップリングアンソロジー『feeeling』
主催:デビルアクマ(@a9m_)
表紙イラスト:豆やなぎ(@yng043)
今回の目標
最近の本のデザインってすんご〜〜くかわいいので、「いつか同人誌の表紙を動かしてみたい」という欲求がだいぶ前からありました。
そして今回やるからには!ジャンルを知らない方にも本の雰囲気や、素敵な本だな〜ということが伝わるようにしたいなと思います。
制作の流れ
▶︎要件整理
豆やなぎさんから表紙のイラスト・デザインの意図を伝え聞いていたので、それを踏まえて自分なりに要件整理をしました。

テーマ「見たときに感じてほしい印象」
ギミック「映像的に表現しやすいポイント」
キーモチーフ「キーとなるモチーフ」※そのまんま
という感じです。
テーマはヒアリング内容がわりとそのまま入っています。
ギミックは、デザインを見たときに「どう動かせそうかな?」と感じたこととか。今回の場合だと、背景と中央のイラストが世界観的にがっつり分かれているので、階層やカメラワークで工夫して多層的に奥行きを見せる必要があるな〜と!
キーモチーフはデザインから受け取れる印象。手描きの鳥がかわいいし、手描きのゆるいラインのロゴもかわいいので、手描きの風合いを活かすとなじみそうだなと想像しました。
このあたりのことを着手前に決めておくと、いざ制作!の時に迷いにくいと思います。(=迷いがちなので今回はちゃんと決めておきました😅)
▶︎字コンテ
さらに、映像の内容を軽く文字で考えてみます。
・ぽんぽんぽんとひだまりのようなくにゃくにゃが生まれていく
・最後にキャラに目がいく
・おどるように文字を動かす
・表示順は 背景類→キャラ→文字→きらきらエフェクト
▶︎ベンチマークあつめ
字コンテまで作って作業できそうな気配がしてきましたが、まだなんとなくインスピレーション不足なのでベンチマークをあつめます。
普段はMVを参考にすることが多いですが、今回はワンショットの演出を想定しているのでWEBサイトのアニメーションを色々見てみました。
世界観や没入感を出すために色々な工夫をしていて本当にすごいなあと…。
参照元:Awwwards
VIVALALABIA 立体感、構造感
HTA 冒頭の演出で、いくつか写真があることを示唆する感じ
NOD 揺れ感、かわいい色
今回特に参考になったものは上のWEBデザイン。多層的・立体的な見せ方と、かろやかな遊び心を踏襲してみたいなと思います!
▶︎アニメーション作業
今回はデータをすべてillustratorのai形式でいただけたので、必要に応じてアセットを書き出しし、シェイプ・パスはOverloadでAEに移していきました。
作業順は以下。
1. 構造を組み3Dレイヤー化
2. 大まかなインアウトをつける
3. ロゴアニメーション
4. 冒頭トランジション+BU
5. きらきらエフェクト
お気に入りポイントを紹介します!
3.ロゴアニメーション
キャラクターのまわりを踊っているようにしたかったので、奥行きをつけて回り込むようにしてみました。
読む順番がわかりやすくなるよう、BUの段階で調整しています↓

視線誘導も「中央キャラ」→「背景キャラ」→「ロゴ」と自然に見れるように意識してつけています。
4.冒頭トランジション
表紙の雰囲気をいかして曲線+泡エフェクトのトランジションです。
キーモチーフである「手描き」感が出るよう、ポスタリゼーション時間でフレームレートを落とし、トランジションにもテクスチャを重ねてみました。

そして今回の止め絵は全体的に淡い色使いなのですが、冒頭ではアニメーションとしてインパクトが出したかったので少し濃いめの色も使っています!
▶︎Motion 4の便利機能
今回は素材の数が多かったので、1の時点でめちゃくちゃデータが重くなってしまったのが想定外でした…!
そんな時に役だったのがMotion 4のFocusというレイヤー管理機能です。
レイヤー群をエフェクト、人物、文字などある程度のブロックに分けてグループ登録しておき、必要に応じて表示/非表示することで作業効率化できました。
@no_TL Motion 4のレイヤーグループ操作! pic.twitter.com/oc5mgR5tmB
— だれのき | うー (@darenoki) November 9, 2024
この機能をまともに使ったのが今回初めてだったのですが、レイヤーが多い場合はかなり重宝するなと思いました。(ネクスタさんの解説が詳しいので気になっている方はぜひ〜!)
まとめ
今回のポイントは以下🙌
要件整理+字コンテで演出の方向性を定める!
動画にはしていませんが、なんとこちらのアンソロジー「feeeling」は裏表紙にも素敵な仕掛けがありますよ….!!!
初頒布は2024/11/17のSSF08です!実際にお手に取れる方はぜひ確認してみてください(˘ᴗ˘)🎶
🐋告知🐤
— デビルアクマSSF08カ01 (@a9m_) October 22, 2024
2024.11.17 #SSF08
櫻木真乃&浅倉透
カップリングアンソロジー
『feeeling』
A5/オール漫画形式/本文108P
¥1000
コミュ読ませて‼️話題沸騰越境カップリング
漫画オンリーとおまの合同誌、SSF08にて爆誕‼️
🍈メロンブックス予約受付中https://t.co/ay5OrYxyYU
(作家一覧に続く) pic.twitter.com/IR99X70sXv
以上が15作目の記録でした!参考になる部分があれば幸いです。