普段動画を見ていて何となく、「この動画良い動画だな」、「この動画の情報入ってきやすいな」、「雰囲気にピッタリだな」と思うこと、ありませんか?動画編集をされている方やこれから始めようとされている方は特に気になるところかと思います。
このように、「なぜこの動画が良いのか」を言語化して理解し、より良い動画の制作に向けて編集力を上げていくための第一歩として、今回はレイアウトと配色、そしてテロップの表現についてお伝えします!
動画制作の際に重要なのは、「見やすさ」ですよね。その見やすさというのはレイアウトによって大きく左右されます。レイアウトで気をつけることは、大きく分けて以下の項目です。
・関係性の強いものを近くに配置
・同じ色で揃える
・線で結ぶ
・適切な余白を取り、コントラストをつける
・視線の流れを意識する
余白(以下マージン)を編集するときは以下のことに気をつけます。
・上下左右バランスを調整
・画面いっぱい、ベースいっぱいにイラストを配置しない
・図形の中に設置する文字を大きくしすぎない
・要素と要素の間には適度に間隔をとる
その他にも、文字の頭や中心を揃える、シンメトリーな仕上がりにする、上下左右のマージンに均等な余裕をもたせるなど動画編集においては意識することが沢山あります。
ちなみに、余白が多いとよりオシャレな印象になりやすいです。
見やすいように動画編集をしたところで、自分の取り扱う系統を理解した上でレイアウト/マージンを編集することも大事です。
動画編集をしていると、後になって「これも足しておくべきだったな」とか「この要素を挿入し忘れていた」なんてこともあるかと思います。その場合、要素を足した後からでも、余白や全体のバランス、マージンをしっかりと整理できるようにしておきましょう。
動画編集で回避したい点は以下の通りです。
・画面全体の要素が下に寄ってしまっている
・画像を説明するテロップがセンター揃えになっていない
・画像は下ベースに対して上下センターになっているが、テロップを見越したバランスになってない
・ベースと字幕の間に隙間がない
他にも以下のようにならないよう注意しましょう。
・カーニングがばらばら
・センターがずれている
・余白がばらばら
・アイコンの位置がそろっていない
レイアウト、マージンを細かく意識し、見る側にとって見やすくわかりやすい動画を制作する為にこれらを覚えておきましょう。
動画レイアウトにて、前提として覚えておきたいのは、人間の視覚的視覚というのは左から右へ進むということです。というのも、我々は時間軸を左から右へと移り変わっていくものと無意識に認識しているからです。例えば、横に流れるアニメーションにおいて、左から右へ流れていくのは想像に容易いと思います。でもその逆はどうでしょうか。不自然に感じるのではないでしょうか。
他の視線誘導パターンは以下のようになります。
Z型 | 左上→右上→左下→右下 初めて触れるデザインや全体の構成を見るときに、予告のみテキストなどに使われる。 |
F型 | 左上→右上→少し下がって左→右→下 Fの形のように目が動く。 リピーターの目線の動きはこれが多い。見落とした情報を確認するときにこれになる。上から順にじっくりと上部を閲覧してから、下部に移動することがある。 |
N型 | 上→下→上→下 日本語でかかれた新聞や雑誌など、縦組みの書籍に用いられることが多い。漫画動画など。 |
大きいものから 小さいものへ | 情報の形やサイズそのものを変化させることで視線の誘導を促す。 |
線 | 人間は、線の配置に視線を奪われやすい。 例:漫画の集中線、下線 |
同形、同色 | 均一に情報が配置されている際、人間は同色同形のものを無意識にさがしてグループ化する修正がある。 これを逆手に取った視線誘導法。 |
数字 | 人は無意識に数を数える。情報に数字を入れ込み、無意識に数字を追わせることができる。 ただし、見る側が予測した先に情報がない場合、見る側のストレスに繋がる可能性がある為、注意が必要。 |
注意を引くときに、左からコンテンツを出すと効果的と言われています 。心臓を守るという人間の本能を使い、左側から物を出すことによって、より驚き注意をひくことができます。
資料デザインのチェックリスト
・優先順位に沿った文字の大きさである
・適度な余白がある
・意味のある色選択になっている
・ゴシック体になっている
・丸は基本正円になっている
・塗りだけか、もしくは線だけの図形になっている
参考サイト等
・Slideshare:スライドに特化したサイト
・Pinterest:英語で調べると参考になるものがでてきます
・Muuuuu.org:メインビジュアルが資料の参考になるかもしれません
・伝わるデザイン:基本をスライドデザインを学べるサイト
色の配色を語る上でおさえておきたい基本が、「色相」「明度」「彩度」3つの属性です。
・色相:色味、色を特徴づける色味のこと
・明度:明るさ絵の具で白を混ぜると明るくなって行く感じのこと
・彩度:鮮やかさ、高すぎると目が痛くなる
これに加え、もう二つの大事な要素が「補色」と「トーン」です。
・補色:色相環にて対局にある色。合わせると目立つ色合わせになる
・トーン:彩度と明度が一致している色達のこと
トーン
彩度と明度が一致している色合いには、たくさんの組み合わせがあります。
表でまとめると、このようになります。
ビビット | 彩度が最も高い |
ブライト | 明るく健康的、カジュアル、ポップ、マロンカラー |
ストロング | ビビットより再度をやや落としている |
ディープ | クラシックで落ち着いている、和の印象を与えやすい |
ライト | ソフトで軽い、爽やかで清潔なイメージ、パステルカラー |
ソフト | ビビットから彩度だけを落とした色、ぼんやりとした印象 |
ダル | 暗く濁った印象だが、大人らしく品のある演出が可能 |
ダーク | 重厚な印象、格式を求められる場でも使いやすい |
ペール | 透明感があり、女性的な印象を与えるが、色の印象は弱い |
ライト グレイッシュ | ペールトーンをやや濁らせた様な色相、ペールトーンより大人らしい印象 |
グレイッシュ | 彩度は低めで、少しくすんだ色で落ち着いた印象 |
ダーク グレイッシュ | 明度も彩度も最大限落とした色相で、黒とほぼ区別がつかない |
無彩色 | 黒と白のグラデーション。特定の色を持たない為、どの有彩色と組み合わせてもうまくまとまる。 |
このような様々なトーンを頭に入れておくことで、トーンを合わせる、つまり動画に統一感を出すことができるのです。これを理解していないと、チグハグな色使いをしてしまう可能性があります。
内容が完璧な動画を制作しても、色使いによって印象が良くも悪くも操作されてしまいます。トーンの調節にこだわって動画編集を進めるのが理想的です。
動画制作会社の立場からすると、お客様がどんなカラートーンを求めているのか、完全に把握できない場合があります。その場合は、お客様である企業のカラートーンを理解することが鍵になります。
単に「黄色」、といっても様々な彩度や明度の中の黄色がありますよね。ビビットなのか、パステル調なのか、お客様と色のニュアンスを調整することが大事です。
上記にもあるように、配色、色の組み合わせといっても様々な種類があります。
同系色をつかった配色、明度もしくは彩度だけが異なる色の組み合わせ、トーンは異なるが同じ色相の組み合わせ、トーンは同じで色相上隣り合う色・隣接色の組み合わせ
など…数えられないほどの組み合わせが存在するのです。
ここで、代表的な色素の組み合わせとその名称を見てみましょう。
・色相差を使った配色
色相を買えて配色する場合、同一トーン内での配色がベター。
・類似色相配色
色相環で一つ飛んで隣の色を類似色相という。同系色と同様に比較的扱いやすい配色
・補色色相配色
補色を組み合わせた配色、色の差が大きいため、ダイナミックでカジュアルな印象を与える。
・対照色相配色
色相環で補色の両サイド2つを対照色という。補色と比べると選択肢が多い為使いやすい。
・マルチカラー配色
3色以上の色を組み合わせた配色
忘れてはいけないのは、色使いや配色は、プロのアーティストやデザイナーの方々でも難しく、頭を悩ませるということ。
ポイントは、色数はできるだけ少なくするということです。下手に色を多くしてしまうと配色が困難になり、更にバランスが悪くまとまりがなくなるのです。
動画制作においては見ていて目が痛くなるなんてことは、避けたいですよね。
大切なのは、色で意味を伝えようとしないことです。
色の感じ方は人それぞれであり、色はあくまで情報の補佐であるということです。正確に意味などを伝える機能はないのです。
意識しなければいけない要素は色以外にも存在します。例えば、フォント、レイアウト、マージンなどが代表例です。
総合的に考えた上で、色の調節ができればベストです!
迷った時は、カラーホイールを参考にしましょう。
一般的に、動画でのイラストは
・Illustrator
・Photoshop
・Clip Studio
などの、レイヤー分けされているソフトウェアで作成、編集されることが多いです。
単位はPixelと言われ、ドットの集まりで構成されています。
これらのソフトウェアでよく使われる技法は以下の通りになります。
解像度 | 画像の密度 |
アンチエイリアス | 文字や画像の境界をぼかして、斜めの線や曲線を滑らかに見せる処理 |
バース | 遠近法や透視図法のこと、奥行きをだすのに役立つテクニック |
トレース | 写真や元のイラストなどを、輪郭などからうつしとる技法 |
マスク | 指定の範囲を隠すことができるデジタルツール |
皆さんも、子供の時に見たアニメーションやカートゥーンの記憶があるのではないでしょうか。イラストの画風というのはそれによって見る側に与える印象や伝わる情報そのものが変わったりする、重要な要素になります。
イラストの画風の種類をリストアップすると、このようになります。
デフォルメ | 原型を変形させる、頭身を小さくすることが多い。リアル系とデフォルメを使い分けたりする。 例:おしりたんてい |
アメコミ | アメリカンコミックのスタイル。 例:スーパーマン、MARVEL |
劇画風 | シリアスな雰囲気、線が太く濃い。ここぞという時に良い。 例:ベルサイユの薔薇 |
カートゥーン | 海外の子供向け風のユーモアたっぷりの絵。動きに特徴をつける。 例:トムとジェリー、シンプソンズ |
リアル系 | リアルで緊張感のある描写 |
その他にもゆる系、萌え系、などたくさんの画風が存在しています。使い分ければ使い分けるほど、表現の幅は一気に広がりますね!
テロップが動いているのなんて、見慣れた光景ではありますよね。でも、動いている意味やなぜそう動いているのか、考えたことはあるでしょうか。
テロップの基本の動きをおさらいしましょう。
・スライドイン:画面の外、奥、手前からはいってくる
・フェードイン:うきでてくる
・ワイプイン:拭き取る様に出てくる
他にも、移動、大小、伸ばす縮める、回転、ひかる、ぼかすなど様々です。
テロップを動かす上での狙いは以下の様になります。
・動きをつけ、視聴者の目線や注意を引いて、その言葉を印象付ける
・動きによって感情や意味を伝える
・速度、緩急、余韻を調整して印象を操作をする。シャープ、コミカル、可愛い、ゆったりなど
もちろん、テロップを動かす上でも、いくつかのメリットとデメリットが存在します。
・メリット:情報が伝わりやすい、雰囲気づくり、画面がにぎやかになる
・デメリット:ごちゃごちゃ、映像自体の邪魔、間違った動かし方で雰囲気台無し
今回は、情報が心地やすく、伝わりやすいレイアウトから視線誘導、カラーの配色まで幅広い分野をカバーした内容でお送りしましたが、いかがでしたでしょうか?より見やすい動画を作成するためにも、是非参考になればと思います!
より効果的な動画編集は、プロに任せると安心
質の良い動画広告を社内で制作するのは、人的リソースやノウハウ、費用対コストの面で考えると正直難しいでしょう。質の良い広告を大量に制作するとなると尚更です。
短かい納期で、高質な動画制作が可能な外部の制作会社に依頼することがとても合理的です。
当社は、「ムビラボ」という自社サービスを駆使し、保険会社から漫画広告まで幅広いサービス紹介動画を大量に制作してきました。今回紹介したSOMPO保険ひまわり保険生命株式会社さんのサービス紹介動画も我々ムビラボが経験とノウハウで作り上げたプロジェクトの一環です。
同社では、営業の際に自社の保険サービスに対しお客様側の興味喚起を促す大きな課題がありました。その課題を解決すべく、弊社に制作を依頼しました。その結果、自社で制作する手間が省かれ、更には高クオリティな動画制作を実現することができました。ムビラボが制作した動画で、お客様に自社サービスをより正確に理解していただくことができていると評価していただいております。
全ての制作段階において自社でかける手間がなくなり、短期間でハイクオリティな動画制作が実現できました。
ムビラボのこれまでの事例、サンプル動画は以下のURLをご覧ください。
なお、詳細について相談を希望される方は、以下URLからお気軽にお問い合わせください。