necco note
田口 冬菜
necco note
ネッコチャンに公開したモーション10本の制作を振り返る
- Motion Design
こんにちは、デザイナー・モーションデザイナーの田口です（@fuyuna_design）。
先月からneccoがお送りするYouTubeチャンネル、necco Ch.（ネッコチャン）がはじまりました。
ネッコチャンではデザインやコンテンツづくり、エンジニアリングなど自社にまつわる動画をお届けしていく予定で、現在13本の動画が公開されています。
その中で過去に制作した10本のモーション作品を公開したので、制作を時系列順に振り返り、当時苦戦していたこと、チャレンジしたことなどを紹介したいと思います。
2020年8月〜12月に作ったものがほとんどで、2年も経過していて記憶が薄い部分、少し恥ずかしさを感じる部分もありますが、成長の記録として楽しんでいただけると幸いです。🙏
Hakoneco Sticker / PR動画（2020年8月）
1本目は箱猫ちゃんのステッカーのPR動画です。ステッカーを作ったのは本当ですが、PR動画は練習として自主制作したものなので非公式（？）です。
2020年7月にAfter Effectsを使いはじめてからこの動画を作るまでの約1ヶ月間は、基本ストーリーがなく、操作に慣れるためのモーション練習がほとんどでした。（箱猫ちゃんがぽよんと現れるモーションなど）
そこで次の段階としてチャレンジしようと思ったのが以下。
- 10秒以上でストーリーがある動画
- 何かをPRする実案件に少し近づけた動画
- 複数シーンの切り替え
- 写真とモーションの組み合わせ
- 封筒がパカっとひらくモーション
- 字幕っぽいテキストの使用
欲張ってすべてのチャレンジを取り入れたのが本作品でした。
写真やテキストの挿入は簡単でしたが、封筒がパカッとひらくモーションや、シーンが増えたことで大量にできたレイヤー・コンポジションの扱いに苦労しました。動画の最後にロゴを入れるとオフィシャルっぽい、という新しい発見もありました。
necco Summer Holidays 2020（2020年8月）
同じく2020年8月に制作した夏休みのお知らせモーショングラフィックス。はじめて一枚絵のイラストに動きをつけたものでした。
箱猫ちゃんやタイポグラフィ、ひまわり、雲、麦わらぼうし、飛行機など複数のオブジェクトをタイミングを変えて表示させたり、それっぽい動きをつけるため、レイヤーが大量に発生して管理に苦戦した作品でした。
このとき導入したのが IllustratorのパスをAfter Effectsのシェイプに転送するスクリプト「Overlord」。これが神スクリプトでした…！🙏 レイヤーわけを気にせず、動かしたい要素から順番にシェイプを転送、レイヤーの色をかえてわかりやすく整理し、動きをつける。 今も実践しているレイヤーの管理・編集方法がこのとき身につきました。
ほかには背景の青いグラデーション＋ジャリっとしたテクスチャの表現方法がわからず、背景だけPNGで書き出すか、After Effects上で再現するか…みたいな試行錯誤もありました。
このときは効率とかあまり考えられず、とにかくいろいろ試して自分の中での最適解を見つけ、よかった方法を次も試してまた新しい方法と比較検討して…という感じでやってました。（これは今も同じかも😂）
Hakoneco Sticker Message Card（2020年8月）
こちらも2020年8月に作ったもの。After Effectsに慣れてきて、どんどん作りたい、なんでも動かしたい時期でした。
箱猫ちゃんのステッカー完成に合わせ、デザイナーの今ちゃんがマンガ風のかわいいグラフィックを作ってくれました。1枚絵のグラフィックだとお伝えできる内容が限られますが、シーンを増やせばコミュニケーションをとるように、ていねいに感謝の気持ちをお伝えできる。そんな発想からこのモーションになりました。
マンガっぽい表現を探りながら、ちょっとしたアナログ感も足したいと考え、コマの枠と中の要素を表示するタイミングを工夫したり、アーケードゲームのようなチカチカするような動きをつけたりしてました。
いま見ると文字の表示アニメーションがズレてるなとか、タイミングもっといい感じにできたな、とか思うのですが、当時はこれが精一杯でした。😂
Section-9 / 実績ダイジェスト動画（2020年9月）
2020年9月、はじめて作った実績ダイジェスト動画です。
YouTubeやVimeoなどで公開されているかっこいいリール動画を見て、自分も作ってみたい！！！と思ったのが制作のきっかけでした。
Section-9さんのお仕事は、わたしが入社する前のプロジェクトで直接関わっていないのですが、ロゴやウェブサイト、イラストなどの実績がそろっていたので、1本の短い動画で実績が見れるダイジェストを作らせてもらいました。
この作品で主にチャレンジしたことは以下。
- ブランドのらしさを伝える表現
- グリッジ表現
- 暗転の表現
- カメラレイヤーの使用
- 成果物ごとのシーンの切り替え
- 見る人を退屈させないリズム感
- ウェブサイトの画面収録動画の使用
（Premiere Proで編集） - ループ再生への適応
Section-9さんらしい表現とは？どんなエフェクト？動き？スピード感？デザインを担当した今ちゃんや阿部さんにも見てもらいながら、らしさの追求をしていました。
映画のような起承転結、リズム感も意識して、最初と最後のシーンがつながるループ表現も取り入れました。ループひとつとっても、考えることがたくさんあるなと学びました。
当時は特に公開する予定もなく自主制作のつもりでしたが、現在は自社サイトの実績ページでも使用しています。（Section-9さんの実績詳細）
Alexa Day 2019 / 実績ダイジェスト動画（2020年10月）
2020年10月に制作した、2本目の実績ダイジェスト動画です。
Alexa Day 2019のプロジェクトも入社前で関わっていませんが、グラフィック、ウェブサイト、イベントツールなど実績をまとめて見れる短い動画を作りました。
この作品で主にチャレンジしたことは以下。
- メイングラフィックのモーション
- 3Dレイヤーの活用
- カメラレイヤーの練習
- トランジションのモーション作成
- 写真の切り替え（エフェクト）
- エンドクレジットの作成
にぎやかでかっこいいグラフィックをもとに、ポップな動き、シーンの表現などを探っていました。
カメラレイヤーを使用する場合、引きで見たときに「グラフィックが足りない！」とならないよう、想像以上に大きなグラフィックレイヤーを用意する必要があることも学びました。（スマホのところとか）
写真は夏井さんが撮影してくれていたものをお借りして、空が背景のバナースタンドは秋田に行ったときに一緒に撮影しました。（実は写真に写っていないところで小雪ちゃんと私がスタンドを支えています😂）
また、なぜかここまでAfter Effectsのエフェクトをほとんど使わずに制作してきていたので、写真の切り替えでトランジションのエフェクトをはじめて使用しました。（めっちゃ簡単にいい感じのトランジションつけれるんだなと感動した覚えがあります）
necco Winter Holidays 2020（2020年12月）
2020年12月、気づけばもうすぐ年末だ！ということで少し急いで作ったモーショングラフィックス。
おうちでくつろぐ箱猫ちゃんのグラフィックを作ってもらっていたので、「気づけば朝になっていた感」がより演出できるように、窓の外の景色や室内の照明を変化させたり、朝になったら鳥の声が聞こえてきたりするといいかも！と話しながら制作しました。
この動画では無料のサウンド素材をはじめて使用し、音がなるタイミングや音量の変化をつけてみたりしてました。
いままでにぎやかなモーショングラフィックスが多かったですが、夜と朝の静けさ、年末年始のお休みモードを表現する、雰囲気ある作品になりました。
Happy Birthday Marimelody（2020年12月）
同じく2020年12月に作った、お誕生日のお祝いモーショングラフィックス。今年からneccoのなかまになったまりめろさんのお誕生日に作ったものです。
デザイナーの今ちゃんがかわいいグラフィックを作っているのを見て、「ふうせん🎈とばしたりBGMがなってたりしたらもっとかわいいのでは！？」と声をあげたところ、サウンド担当のあべさんも「いいですね！！」と言ってすぐにBGMを作ってくれました。
このときはお誕生日の時間も迫っていて、とにかく早く、かわいく仕上げたかったので、これまで苦手意識のあったエクスプレッションを使って時短しました。
おばけちゃんのふわふわした動き、電球のチカチカはループのエクスプレッションを使用しています。少ないキーフレームで動きを制御できるエクスプレッションの便利さに気づき、これ以降は積極的に使うようになりました。
💡 表現したい動きの名前がわからないときは、モーション周期表を参考にしています。
necco 4th Anniversary（2020年12月）
2020年12月に作った、neccoの4周年記念モーショングラフィックスです。
10月から作っていた気がするのですが、基本お仕事以外の時間で作っていた＆いままで作ったことがないタイプの作品だったこともあり苦戦して、公開までに時間がかかってしまいました。（本当は10月の創業記念日に公開したかった…）
この作品でチャレンジしたことは以下。
- タイポグラフィ中心のモーショングラフィックス
- サウンドに合わせた動き
- シーンの切り替え
- 紙吹雪のモーション
お祝いらしく花火のようなシェイプアニメーションをサイズ違い、デザイン違いで使いまわしたり、チャッチャッチャッといった音にあわせて動きをつけたり、リズミカルかつ華やかにシーンを切り替えたり、色と動きを駆使してテキストアニメーションを多用したり…
当時は作りはじめたことを後悔するぐらい、めちゃくちゃ苦戦した作品でした。
特に音と動きの連動、複数のシーンを切り替えながら終盤に向けて盛り上げていく表現。いい意味で音がたくさんあり、どの音にどの動きを合わせれば気持ちよくハマるのか、見ている人を飽きさせないためにどんな表現をすればいいかなど、ひまがあればずっと考えてました。でもハマらない。
テキストアニメーションも持っているバリエーションが少なくて、しっくりくるものが見つからない。調べるしかない。作ってみるしかない。
違和感はあるけど、自分の実力が追いつかなくて完全に納得いくものができない。メンバーに見てもらって違和感を伝えてもらっても、解決できる策が思いつかない。めちゃくちゃ悔しい。そんな思いをしたのはこの作品がはじめてでした。
もっと時間をかければもっとよくできたかもしれませんが、4周年を迎えた年内に公開したくて、及第点で公開。自分の限界、その時点での実力を認められた意味ではよかったなと思います。
にしても本当に悔しかったし、以降もっとモーショングラフィックスがんばりたいと思う原動力になりました。
Happy New Year 2021（2021年1月）
2021年のお正月モーショングラフィックスです。
年末年始休業中、Slackにめちゃくちゃかわいいグラフィックがあがってきたので「動かしたいです！」と声をあげました。いつも通り、サウンド担当のあべさんもすぐに音楽を作ってくれました。
以下、この作品で主にチャレンジしたこと。
- 見る人を一瞬で引き込む演出
- 音と動きによる視点の誘導
- はやく作る（お正月は短い）
動画がはじまった瞬間に見る人を四角い世界へ引き込みたくて、舞台の幕があがるような演出を取り入れました。0秒の画面はかなり暗く、音楽のイントロに合わせて視界が開けるように明るくなります。同時に視点を中心に集めるモーションを意識してました。
歌舞伎とか見たことないけど、舞台がはじまる瞬間ってこんな感じかなあ。なんばグランド花月や土曜の昼に見てた吉本新喜劇、幕が上がる瞬間こんな感じだったなあ、みたいなことを考えて作ってました。裏テーマは「幕があがる」だったかもしれません。
音楽のリズムやひとつひとつの音もすごく心地よかったので、音と動きを気持ちよく連動させ、見る人を楽しい気持ちにできればとも考えてました。
Golden Week Holidays 2021（2021年5月）
最後は2021年のゴールデンウィークに伴う休業お知らせモーショングラフィックスです。
サウナで整う箱猫ちゃんのかわいいグラフィックを作ってもらったので、じわっと流れる汗や湯気のモクモク、葉っぱの束をゆっくり動かしました。（いま知ったのですが、葉っぱの束はヴィヒタというそうですね）
派手な動きや音はないですが、じわっと湿度が伝わったり、箱猫ちゃんの呼吸音が脳内再生されるといいなと思い作ってました。
また、この動画では「どれだけキレイなGIFアニメーションにできるか」というチャレンジをしました。その過程や結果は「After Effectsで作った動画をGIFアニメーションにしてみた｜箱猫サウナ動画」にまとめています。
最終的にできたGIFアニメーション。
Twitterのタイムラインで自動再生させることを目的にGIF変換をがんばってましたが、現在ではMP4でも自動再生されます。
情報量の多いグラフィックではGIFよりMP4の方がデータが軽くなることもわかり、なんとなく自分の中にできてきていた動画の書き出し形式のナレッジが強化されました。
おわりに
ネッコチャンで最近公開したモーション10本についての振り返りでした。
制作から約2年経ち、こうして過去のチャレンジや苦戦したことを振り返ることで新しい発見もありました。ひとつひとつの作品で課題にしていたこと、それによって得た学びが、すべて今のお仕事にいきているなと思います。
うまくいくことばかりではないですが、試行錯誤なしにはいいものを作れないと思うので、引き続きたくさん挑戦も失敗もしていきたいです。
現在お仕事でどのようにモーションを活用しているか気になる方は、「ACESのウェブサイトができるまで｜情報設計・デザイン・モーション制作編」や、下記の制作実績を見てみてください。
モーションを活用したお仕事実績
ほかの実績ページでもモーションを使用してたりするので、よければいろいろのぞいてみてください。🙌
necco Ch.
この記事で紹介した動画はすべて、necco Ch.（ネッコチャン）で見れます。👀 今後も動画追加していくので、よければチャンネル登録よろしくお願いします！
📮 お仕事のご依頼やご相談、お待ちしております。
お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。
🤝 一緒に働きませんか？
下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。
🗒 会社案内資料もご活用ください。
弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。
（2024年4月時点）
田口 冬菜
Fuyuna Taguchi
三重県伊勢市生まれ。地元の二次救急病院で約6年間理学療法士として約6年働き、趣味ではじめたデザインにハマってデザイナーへ転職。転職のタイミングでより成長できる環境を求めて東京に引っ越し。都内のデザイン会社1社を経て、2020年からneccoに入社した。入社後にはモーションデザインのスキルを身につけ、現在デザイナー・モーションデザイナーとして働いている。個人ではブログを書いたり、たまに動画・映像関連のメディア出演をしたりしている。著書に『これからはじめるFigma Web・UIデザイン入門』（マイナビ出版、2022）がある。インテリア、本、コーヒー、あまいもの、散歩、人の姿勢・動作観察が好き。
