LINEプロモーション動画のメイキングからひもとく!モーションデザインの制作フローと醍醐味

本記事はLINE CREATIVE CENTER Motion Graphic Design Teamの方にご寄稿いただきました。

こんにちは!LINE株式会社・LINE CREATIVE CENTERのMotion Graphic Design Teamです。
皆さん、“動画”や“モーションデザイン”といえば何をイメージしますか?
今回は私たちが制作した「LINEスタンプ プレミアム」の動画を事例に、モーショングラフィックの制作過程を解説していきます!モーショングラフィックは、情報を効果的に伝えたり雰囲気を演出したりできる表現技法です。動きがある分、静止画に比べ人々にメッセージが届きやすい場面も多くあります。
これまで馴染みがなかった方も、この記事を読んでモーショングラフィック制作に興味を持っていただけたら幸いです。
★今回の動画表現について「モーショングラフィックス」と呼ばれることが多いですが、記事内の表現はLINE CREATIVE CENTERのルールに則り「モーショングラフィック」としています。
[寄稿] 執筆 / LINE CREATIVE CENTER Motion Graphic Design Team , 編集 /YOSHIKO INOUE

●制作過程をご紹介する動画はこちら!

この記事では「LINEスタンプ プレミアム」というサービスをプロモーションするためのモーション動画の制作過程をご紹介します。

POINT
「LINEスタンプ プレミアム」のサービスを使ってみたい!と思うような楽しい動画を目指して制作しました。ナレーションはありませんが、音に合わせた演出で気持ち良いテンポになっています。動画用にオブジェクトのサイズ感が少し違うなど細かい遊びも入れています。

LINE株式会社はコミュニケーションアプリ「LINE」を筆頭にLINE NEWSやLINE MUSICなどさまざまなサービスを展開しています。それぞれのサービスは事業部や事業推進室、企画室(以下、事業部)と呼ばれる部署が管轄しており、事業部は領域ごとにカンパニーという小さな会社のような単位でまとまっています。
*参考:https://linecorp.com/ja/company/organization

サービスのデザインや会社としてのブランディングに必要なクリエイティブの制作は各事業部からLINE CREATIVE CENTERという部署へ依頼があり制作します。今回のようなブランドコンセプト映像や関連サービスの広告映像制作は、LINE CREATIVE CENTERの中の、私たちMotion Graphic Design Teamが企画から実制作まで一貫して担当しています。(インハウスのデザイン組織にモーションデザインのチームがあるのは、実は珍しいんです!)

それでは早速、制作過程をご紹介します!

モーショングラフィックの制作過程

1.企画・デザインを考える
2.デザインを動かす

1.企画・デザインを考える

1-1.企画書を作る

事業部から制作依頼を受けたら、まずはヒアリングを行います。目的や訴求ポイント、予算やスケジュールを整理し、しっかりと認識を擦り合わせます。その後内容を改めて綺麗に整えます。

依頼を踏襲しながらもLINEらしさがしっかり入った企画を提案するために、このサービスは何が目的で、誰がターゲットなのかを明確にすることがとても重要です。事業部の要望ももちろんですが、LINEのブランドのトンマナを守りつつデザインを制作していきます。

▼実際のアイディアスケッチです。(クリックで拡大)

アイディアスケッチはリファレンス(参考資料)をいくつも集めたり、SNSなどをリサーチしたりしながら進めます。このコツコツとした下準備は、大変な面もありますがとても重要です!なお、リファレンス集めはチーム内の数人で行い、打ち合わせで集めたものを提案し合います。複数人で行うことで観点の違うリファレンスが集まり、アイディアも多様になり面白いですよ。

1-2.デザインとストーリーボードを作成する

企画が固まったら方向性を決めて、カット毎に大きいデザインをしっかりと固めます。
まずはざっくり文字コンテに起こして、ナレーションがある場合は合わせて考えます。



今回の動画はほとんどの場合スマートフォンで閲覧されると想定できたため、見やすくシンプルに、音が無い環境でも内容が伝わるよう意識して制作しました。シンプルに土台を考えてから細かいデザインを決めます。



何度も内容を練り、後は微調整で済むくらいまでにデザイン・ストーリーボードの完成度を高めていきます。


企画・デザインが仕上がったら、いよいよ動画にしていきます!

2.デザインを動かす

2-1.ラフカットを作る

まずはどんな動画にしたいのか、尺はどのくらいにするのか、ざっくりと動かします。この段階で全体の流れを決めていきます。

▼デザイン・アニメーション作業は基本的にAdobeソフトを使用します。今回の動画ではスマホに影を出すのに3Dソフト(Cinema 4D)も使用しました。

2-2.動かしていく

ここからカット毎に動かしていきます。いきなり全てのアニメーションを付けるのではなく、徐々に仕上げていくのが大事です。
今回はにぎやかにするために、スタンプにも動きを足したり、足りないパーツを描き足したりと細かい作業で時間がかかりましたが、この地道な作業により動画が華やかになりました!

2-3.仕上げる

微調整や細かい修正を何度も繰り返してクオリティを上げていきます。必要であればナレーションを収録します。
そして最後、サウンドチームにBGMとSE(サウンドエフェクト)を付けてもらって完成です!学生さんがモーション制作をする際、音を付けるのは大変かもしれませんが、このひと手間で完成度がぐっと上がるのでぜひ挑戦してみてくださいね。

ついに完成です。YouTubeなどにアップされ一般公開したものを見ると大変だったことも忘れてしまうくらいの達成感があります!
▼改めて動画をご覧ください。

シンプルながら、対象のスタンプがたくさんあることや、シチュエーションごとにどこをタップすれば良いのかなど、誰が見ても分かりやすい内容になったと思います。
動画を制作していると、シンプルに伝える難しさをいつも実感します。さらに毎回同じような演出だと見る人に飽きられてしまうため、飽きさせない工夫も必要です。しかしそこを考えながら制作していくのもこの仕事の楽しさ、面白さだと思っています。

●最後に

モーショングラフィックは静止画だけでは伝えにくいイメージや情報を、文字やイラストを動かすことで見た人によりわかりやすく伝えることができます
動画制作は難しそうに見えるかもしれませんが、いまはスマホひとつで簡単に作れる時代です。After Effectsなどの専門ソフトを使わずとも1つ1つのプロセスをしっかりと固めることで完成度の高い動画が作れちゃいます!
ぜひ皆さんも動画制作を行ってみてくださいね。

(2021.11.19)

著者

LINE CREATIVE CENTER

LINE株式会社のUI/UX、BXデザイン、映像制作、スペースデザインなどを担当するデザイン組織です。デザインの幅を広げたい方やデザイナーを志す方に向けて、デザイナーによる記事をお届けします! ↗公式note  ↗23年卒新卒採用詳細  ↗ViViViT

記事一覧へ

ポートフォリオでデザインチームとつながろう

ポートフォリオをつくる

作品を投稿してデザインチームとつながる日本最大のマッチングプラットフォーム。もちろん、ポートフォリオのみの活用も可能です。

作成する

デザイナーを採用する

国内最大のデザインプラットフォームで、チームにマッチするデザイナーに声をかけてみませんか?

採用する