「揃える」、テキストのレイアウト

2019年7月23日

今回は、情報として見せるテキストのレイアウトについて紹介します。

テキストの役割

テキストはモーショングラフィックスの一部として動かしたり、英語の長文のように読ませるつもりがない装飾としての役割を持たせたりすることができます。

そんな中で情報として読ませるテキストがあります。
歌詞やセリフ、クレジットなどです。
これらのテキストが見やすくなるレイアウトを探してみたいと思います。

揃える

テキストオブジェクトは、文字をどこに合わせて揃えるか選択することができます。

横文字の場合、基本となるのが左揃えです。
テキストの頭を左側に揃えます。文字を足したり削ったりしてもあたまの位置は変わらないので、レイアウトしやすくなります。

反対におしりを合わせるときは右揃えにします。

続いて中央揃えです。
短文も長文もテキストの中央に中心をもってきます。文字を修正するとあたまやおしりの位置が変化します。

縦書きの場合、あたまを揃えるなら上寄を選択します。
真ん中で揃えるときは、中央にします。

特に複数オブジェクトで構成されているテキストは、この「揃える」が崩れがちになるので、目で見えるようにガイドを引くなどの工夫をしてみるといいと思います。

視線の移動

横書きの場合、テキストを読む視線はZ字のように左上から右下へと動きます。
縦書きの場合、N字のように右上から左下へと移動します。

演出上の意図がない限り横文字を右から読ませたり、縦書きを左から書いたりせず、視線の流れに沿ってレイアウトすると読みやすくなります。

また、ひとつの画の中に横書きと縦書きを混ぜないようにするのも見やすくするコツです。

歌詞入れ

日本語の歌詞を入れるパターンとして、右上への配置があります。
参考にいくつかMVを見ましたが、あたまを揃えた歌詞が読みやすかったです。

別パターンとして中央揃えがありますが、歌詞が変わるたびにあたまの位置が変わるので読みやすさとしては少し落ちる気がします。

歌詞は一行で収めるのが望ましいです。
やむを得ず二行にする場合は、二行目のあたまを下げるとスッと読めると思います。

画面中央下に歌詞を入れるパターン。
この場合は中央揃えで配置する方がバランスが取れて歌詞が読みやすくなります。

いずれも何度か歌詞が出されると、見ている側は次も同じ場所に歌詞が出ることを期待します。動画を編集していると、つい変わったことをしようと反復から逸脱してしまいます。今まで縦書きだったのに途中から横書きになったりしては統一感が失われてしまうので、注意したいところです。

背景とテキストの調和

画面は写真が占める割合が大きい、でもテキストを前面に出したい。
例えば、
・テキストを中央に持ってくる
・マーカーとしてラインを引く
・背景は動かさずにテキストを動かす

背景に負けないテキストの工夫が必要になります。

動画の最後に流すクレジットの一例。
あくまでも背景メインで写真を損なわないように中央以外に配置。
視線の流れに沿うように、最後を右下で終わらし、テキストも右揃え。

背景とテキストの調和が難しいときは、思い切ってクレジットだけに切り替えるもの手ですね。

いかがだったでしょうか。
情報として見せるテキストには大きな動きより、安定して見やすいことが一番だと思います。「揃える」を意識してレイアウトしてみてください。

デザイン入門教室[特別講義] 確かな力を身に付けられる ~学び、考え、作る授業~ (Design&IDEA)