MMD MOOMEMO
2024年03月02日 2024年03月21日

タイトルと歌詞の配置パターン

二段目:砧 丸丸ゴシックC  三段目:DIN 2014  背景:Juliette

はじめに

デザイン作業もちょこちょこするけど、しっかりとしたデザイナーではない程度のふんわりデザイン知識です。
本職の方は生温かく見守ってください。

動画を作成する際強く意識していることは安定と不安定の組み合わせ余白情報量です。
メインに奇抜なフォントを使うなら他のフォントはカッチリしているものにするとか、文字を斜めに配置するならまっすぐな帯を表示するなど、奇抜+奇抜の組み合わせは避けるようにしています。

情報量を増やす方法としては、歌詞を英訳・意訳したテキストや図形を配置したり(愛→LOVE / ハートマーク)、歌詞の一部のみを大きく表示したり、歌詞の一部の色を変更したりすることが多いです。

タイトル・ロゴ

パターン1

よくやるパターンが一段目ににアイコン、二段目にタイトル(特徴的なフォント)、三段目に帯を敷いたりカッチリしたフォントの組み合わせです。
二段目のデザインやサイズによっては一段目のアイコンを省きます。

二段目:AB Pochi  三段目:DIN 2014

DIN 2014

サイトのサムネイルもこのパターンです。ド・定番。

例1:アイデンティティ

一段目:黒薔薇シンデレラ  二段目:Senator

例2:ダーリン

一段目:アオハルマーカーmini  二段目:DIN 2014

例3:しあわせレストラン

一段目:ヒグミン  二段目:AB-カズン阿吽F

例4:SCREAM

二段目:AB-ことだまF  三段目:DIN 2014

例5:蜜月アン・ドゥ・トロワ

二段目:DNP 秀英にじみ初号明朝 Std  三段目:DIN 2014

パターン2例:まゆごもり

装甲明朝

こちらは楽曲PVのロゴをほぼそのまま参考にさせていただいたものですが、安定+安定パターンです。

装甲明朝  平成丸ゴシック Std  Duos

PVの演出を楽曲に合わせて不安定にしたので、タイトルがかっちりしているとギャップで不気味に感じるかな~と。

パターン3例:エバ

DIN 2014

情報量が稼げず、配置パターンも限られてくるので文字数少なめタイトルに苦手意識があります。難しい。
楽曲PVのタイトル部分で円が回転しているので、そこから着想を得て円の中に「言われれば読めなくはないかな…?」というノリタイトルをで配置しました。良く言えばデザイン性重視。
カタカナ部分はPhotoshopで自作(?)したのでフォントではありません。
後々になってから時計回りに斜めにしていたほうが読みやすかったのでは?と思ったり。時すでにお寿司。

パターン4例:ザムザ

Niagara

ザムザは楽曲PVのタイトルロゴを意識しつつ、動きのイメージが先行してあとからデザインしたパターンです。
こちらもエバと同様カタカナ部分はPhotoshopで自作したのでフォントではありません。

歌詞

余白

大抵シネマスコープを配置するので、動画の表示領域自体は1920 x 818pxです。
そこから最低でも60~90px程度は余白を取ってテキストを配置しています。
余白がないとなんかダセえと感じるからです。 この記事はふんわりデザイン知識でお送りしております。

参考シネマスコープ | Wikipedia

安定:シンプル縦横文字

平成丸ゴシック Std

不安定+安定:背景にデカい斜めの筆記体+手前に帯

Juliette  平成丸ゴシック Std

安定+安定:左右にデカ文字+真ん中に小文字

装甲明朝  平成丸ゴシック Std

不安定(弱)+安定:デカ文字+シンプル縦文字

異世明  平成丸ゴシック Std

不安定(弱)+安定:デカ文字+シンプル横文字+ライン

異世明  平成丸ゴシック Std

不安定(弱)+安定:斜体+ライン+揃ったデザイン

異世明

不安定+安定:デカい斜めの筆記体+シンプル縦文字+帯

Juliette  平成丸ゴシック Std

不安定+安定:デカい斜めの筆記体+歌詞の記号+シンプル横文字

Juliette  アオハルマーカーmini  平成丸ゴシック Std

愛して→愛して欲しい→お願い→Please+愛→ハートマーク

不安定+不安定(弱)+安定:デカい斜めの筆記体+歌詞を漢字に変換+シンプル横文字

Juliette  異世明  平成丸ゴシック Std

安定+安定:文字数と段落数を揃える+帯

装甲明朝

安定+安定:中抜き文字+帯

装甲明朝

不安定(弱)+安定:手書き文字+マス目

TA恋心


大体は似たパターンの組み合わせですが、組み合わせを変えつつ配置すれば意外と印象は変わると思います。
パターンのストックは多ければ多いほどいいので、思いついたら追加します。

フォント

DIN 2014大好きかよ。

大好き。

DINは有名所だとユニクロ東京オリンピック2020のロゴでも使用されているフォントです。
そこそこカッチリしていて、丸みもあり、視認性がよく、英字フォントで困ったらDIN 2014ってぐらい高頻度でお世話になっております。

参考#03 フォントの話「DIN」編 | 安村シン

筆記体だとJulietteが一押しです。大文字と小文字のサイズのバランスが好き。

Duosもニュアンス違いで種類がありとても使いやすいです。
筆記体は6~12度ぐらい斜めにしてあげると少し癖のある手書き感が増してよきよき。