基礎から学ぶデザイン4原則 ～モーションデザイナーのためのデザイン講座～｜VGT2019

「VIDEOGRAPHERS TOKYO 2019」で超人気だったセッションが帰ってきました！今年はロンドン在住のモーションデザイナーkanaさんを加えて、よりパワーアップ！デザインとモーションの奥深い世界へようこそ。

人気だった【VGT】「モーションデザイナー必見！！」モーショングラフィックストレンドの第2弾です。ゲストにロンドン在住のモーショングラフィックデザイナーのkanaさんも加えて、よりパワーアップして帰ってきました！初心者にも上級者にも使える内容にしてみましたよ！

前回はこちら↓

今回はこちら↓

Coming soon

登壇者　ダストマン × 白戸裕也 × kana

ダストマン
YouTubeチャンネル【ダストマンTips】の人。いろんな映像制作の作り方を紹介しています。本業はエディター。広告がメイン。広島県の山奥に古民家を買い、田舎暮らしをしながらのんびり生きています。

白戸裕也
Motion Designer / Editor
日本大学芸術学部放送学科卒業。大手制作会社にて、テレビCM・WebCM制作等を経験。株式会社サイバーエージェントにて、AbemaTV（現ABEMA）の番組宣伝映像やオープニング映像、イベント用映像などの制作を担当。現在は、短尺に特化したオンライン動画広告の企画・制作をおこなう「６秒企画」にて、モーションデザイナー、エディターを務める。映像系イベントにも多数登壇、記事も執筆している。

kana
モーショングラフィックデザイナー。
主に3DCGをメインとし、学生時代は桑沢デザイン研究所にてグラフィックデザインを学び、その後maxillaに入社。そこでCinema4dに出会い、3DCGを本格的に学び日本のモーションデザインスタジオ、Onesalに入社、その後ビジュアル制作の幅を広げる。現在はロンドンのモーションスタジオweareseventeenに所属。

【第1章】デザインが大切な理由

まずはじめに紹介したいのは、この名言。千利休の「守りつくして　破るとも　離るるとても　本（もと）を忘るな」。

千利休の言葉で、「型を破ってもいいけど、まずは基本を押さえないといけないよ」という意味です。

前回のおさらいですが、「モーショングラフィックスとは、絵や写真、文字や図形、ロゴなどに、動きを与え、さらに音を加えたもの」でしたよね。今回はなぜ、この中から「デザイン」を取り上げたのでしょうか。

それは、「After Effects や CINEMA 4D のチュートリアルはやってるけど、チュートリアル止まりでアレンジができない」という声を耳にしたからです。

「モーショングラフィックスの基礎である、デザインでつまづいている」のが、理由のひとつかもしれません。

デザインがあやふやだと、とてもバランスが悪い。デザインがしっかりしていると、揺らぎが少なく、安定感があります。今回のセッションでは、良いデザインをつくるための原則をご紹介します。

良いモーショングラフィックスには、良いデザインが必要です。

【第2章】デザインの要素と原則

「デザイン」と一口に言っても、どこから手を付けたら良いか分からないですよね。デザインのポイントをまとめてみました。

「要素」と「原則」を組み合わせて、関係性を生み出し、情報を伝えるのがデザインです。要素が増えれば増えるほど、選択肢も増えていきます。

1本の直線なら、タテとヨコ。あとはナナメ。

2本の直線なら、選択肢は無数に増えますね。

いくつもの選択をして 全体のバランスをいかに整えるかが、プロの腕の見せ所です。一見、すごく簡単につくれそうなロゴやモーションでも、そこには幾多ものプロセスがあります。

では、どうやって全体のバランスを整えると良いのでしょうか？その手掛かりとなるのが、デザインの4原則です。

【第3章】デザインの4原則

デザインの4原則は、『揃える』『繰り返す』『近づける』『離す』『コントラストをつける』。

『揃える』

例えば、この名刺。会社名も名前もグチャグチャで、心が落ち着きませんよね。

要素を 『揃える』 と、情報が整理されて伝わりやすくなります。

『繰り返す』

どれもかわいい猫ちゃんたちですが、トリミングやサイズがバラバラ、文字も傾いていて統一感がありません。フォントも少し野暮ったさを感じます。

このようにトリミングとサイズを揃えるだけでも、だいぶ見やすくなりました。

もう少し手を加えると、このように。丸のモチーフを繰り返したことで、猫の種類が続いているのもグッと分かりやすくなりました。スコティッシュフォールドの「耳が折れている」特徴にも目が行きやすくなりましたよね。

ちなみに、今日のVGTは"猫づいて"ますね。さっきのセッションでも、いっしんさんが「モーショングラフィックスは猫だ」と(笑)

『近づける・離す』

【出典】https://helpx.adobe.com/after-effects/using/expression-language-reference.html

こちらは、モーションデザイナー御用達、After Effects のエクスプレッションです。このままだと、どこがエクスプレッションの記述なのか、非常に分かりづらい。

まずは先ほどの 『揃える』 をします。

次に、タイトルと記述を 『離して』 みました。どうでしょう、最初と比べてだいぶ見やすくなりましたよね。

さらに、ひと手間加えて 『コントラスト』 を付けてみました。タイトルを大きくして、記述を太字に。説明文は細字にしました。同じ内容なのに、見やすさが雲泥の差です。

『コントラストをつける』

デザインひとつで、情報の理解度が大きく変わります。

少し前に話題になった、「運休のお知らせ」のポスターがとても良い例なので紹介します。

JRと東京メトロの運休告知のデザイン、何故あれだけわかりやすさに差が出てしまったのか？その考察がおもしろい！

https://togetter.com/li/1431647

JR東日本のポスターは、パッと見では運休の情報が入ってきません。一方で、東京メトロの方はひと目で「終日運休がある」と分かります。

もう一つ例をお見せしましょう。「#VGTでツイートしよう！」の映像をつくってみました。悪くはないかもしれませんが、いまいちハッシュタグが目立っていません。

そこで、ハッシュタグの文字を大きくして、『コントラストをつけて』みました。結果は...言わずもがなですよね。ちなみに、文字の幅を抑えたことで、文字が決まってからの「じんわりズーム」の量も多くできました。

情報の優先順位を整理して、文字の「大きさ」「太さ」「色」などを変えると伝わりやすいデザインになります。大切なのは　「コントラストは大胆に付けること」　です。中途半端なコントラストでは意味がありません。

以上、デザインの4原則、 『揃える』『繰り返す』『近づける・離す』『コントラストを付ける』 でした。最後にもうひとつ大切なことをお伝えします。それは、これらの原則を「破る」こと。まさに守破離の「破」ですね。

原則をガチガチに守れば、確かに整ったデザインが出来上がります。ただ、それだけでは面白みに欠けます。完璧ではないからこそ、人間に面白みがあるのと同じで、適度にハズすのが大切です。ハズし過ぎはダメですよ！

【第4章】モーショントレンド2020

最近のトレンドはこの6つです。諸説あると思いますが、代表的なものを取り上げてみました。 『2次元と3次元の融合』 も結構ありますし、カット同士がシームレスに繋がっているように見える 『シームレス トランジション』 も定番です。

モーションデザインには様々な要素があって、実写と組み合わせたり、手描きのアニメーションだったり。その一覧がこちらです。

※白戸注：VGT当日から少しだけ改訂しました

シェイプを動かすだけがモーションデザインではなく、手で描いたり砂で描いたり。一度印刷したものをスキャンして、デジタルな中に「アナログ」を混ぜる手法もあります。

ビデオテープ風にしてレトロ感のある映像も人気ですよね。例えば、@jnosuke0218 さんのこの映像とか。

https://twitter.com/jnosuke0218/status/1260988976069963777

画像を乱れさせる 『ピクセルソート』 や 『データモッシュ』 など、いわゆる グリッチ表現 もよく見かけます。

『1カット』『長回し』『スロー』『ループ』『逆再生』 も演出のひとつですね。

ダストマン:
『コマ落とし』 はモーショングラフィックスで一番使われているんじゃないですかね。After Effects のエフェクトで言うと「ポスタリゼーション時間」で15コマや8コマにしたりとか。

カットの繋ぎは最も基本的な 『スタンダードカット』。最近では、YouTubeならではの、会話の間をバッサバッサとカットしていく編集もあります。『ジャンプカット』 を意図的につくっているというか。「自分がどんなのを作りたいかな」というときに、このシートを手元に置いておくと発想のヒントになるんじゃないかなと思います。

ダストマン:
モーションデザインを勉強する人には、いろんな映像を見て欲しいです。「なんでこのデザインにしたのかな」「なんでこの動きにしたのかな」を考えるのって重要です。「どういうことを伝えたいんだろう」と考える続けることが成長に繋がっていくんですね。

白戸:
もちろん、「ただただカッコいいから好き」というときもありますけどね(笑)

【第5章】モーションデザイナーのこれから

さて、最後の章です。映像編集に携わる人も多くなり、YouTubeのチュートリアルも群雄割拠の時代です。その中で、どう生き残って行けば良いのでしょうか。

kana:

まず「海外と日本のギャップ」と「若い人に伝えたいこと」の観点からいうと、海外では限られた時間の中でクオリティを上げていく力を付ける必要があります。

時間内に終わらせることが次のクリエイティブに繋がるという考え方です。若い学生さんで海外を目指している方は、まず英語をしっかり勉強すること。

大学も辞めない方が良いです。スムーズに海外に行きたい場合は、大学は卒業して、日本で経験を積んでからビザを取得するという流れがいいかもしれません。YouTubeのチュートリアルをひたすらやって自分の腕を磨くのもいいと思います。

ダストマン:

プロとして働きながら勉強するのは大変ですけど、今はYouTubeにいっぱい教材があります。「ここまで経験積んで、こういうビジュアルつくろう」って明確な目標があれば、「それを作るために必要なものは多分これとこれとこれ！」 と考えられるから、それをググればいい。目的なくチュートリアルを見るのも意外といいんじゃないかなと思っていて。「ああ～！前に○○で見たアレだ！」と思えます。

もしこれからチュートリアルを見て勉強しようって思っている方は、海外だと Ben Marriottさんがオススメです。

Ben Marriott
https://www.youtube.com/BenMarriott/

日本語で Cinema 4D のRedshift Renderを学びたいって方は、Composition Inc. の緒方達郎さんのチャンネルを見ると勉強になるかな。

Tatsuro Ogata
https://www.youtube.com/chechujp/

【編集部より】

最後に、今回セッションをしてくださった kanaさん、ダストマンさん、白戸さんのTwitterとInstagramを紹介させてください！素敵なロンドン生活や、最新のモーションデザイントレンドを掴めるかも!? それではみなさん、またの機会に！

白戸裕也さんおすすめ記事

デザインやモーションのことを勉強したい人におすすめの記事

VGT2022 開催決定！