音楽印象と同期した歌詞フォント融合による印象強調手法

音楽印象と同期した歌詞フォント 融合による印象強調手法 野中滉介（明治⼤学 総合数理学部 3年） ⻫藤絢基 中村聡史 明治⼤学 総合数理学部 先端メディアサイエンス学科

私たちの周りの音楽

私たちの周りの音楽 歌詞のある⾳楽が多い！

歌詞の役割 歌詞のある音楽において歌詞の内容は重要な要素 • 心情や情景などを聴取者に伝達する[森 2010]

歌詞の役割 歌詞のある音楽において歌詞の内容は重要な要素 • 心情や情景などを聴衆者に伝達する[森 2010] 歌詞を⽬にする機会ってそんなに多い？

主な音楽聴取手段（2017年度） 2017年度「⾳楽メディアユーザー実態調査」報告書

主な音楽聴取手段（2017年度） YouTube（YouTube公式アプリも含む） 2017年度「⾳楽メディアユーザー実態調査」報告書

主な音楽聴取手段（2017年度） ⾳楽を映像で楽しむユーザが多い！ 2017年度「⾳楽メディアユーザー実態調査」報告書

リリックビデオ ⾳楽と同期して歌詞を提⽰するPVが増加している サカナクション/アルクアラウンド Perfume/Hold Your Hand

Lyric Speaker ⾳楽と同期した歌詞アニメーションを表⽰する製品 → 歌詞アニメーションがより⼀般的なものに！

Text Alive [加藤 2015] 誰でも⾳楽と同期した歌詞アニメーションの制作が可能に！

歌詞付きの音楽動画

歌詞付きの音楽動画 歌詞の意味を理解しながら視聴！

歌詞付きの音楽動画 歌詞の意味を理解しがなら視聴！ より良い視聴体験に！

そのフォントは？ そもそも⽂字を メインに制作されたもの いらすと

そのフォントは？ そもそも⽂字を メインに制作されたもの カラオケ いらすと ⾳楽番組

そのフォントは？ そもそも⽂字を メインに制作されたもの カラオケ いらすと ⾳楽番組 画⼀的なフォント！

そのフォントは？ そもそも⽂字を メインに制作されたもの ただ歌詞の内容を伝達してるだけ カラオケ いらすと ⾳楽番組 画⼀的なフォント！

そのフォントは？ そもそも⽂字を メインに制作されたもの ただ歌詞の内容を伝達してるだけ カラオケ 画⼀的なフォント！ もっと良いものにできるはず！ いらすと ⾳楽番組

関連研究：コンテンツへの影響 使⽤するフォントによって視覚的印象に変化が⽣じる [⽊村ら 1997] フォントの視覚的特性とデザイン特徴に関連性がある [Mackiewiczら 2004] フォントの視覚的特性と感情反応に関連性がある [Caldwellら 2013]

関連研究：コンテンツへの影響 ポスター/漫画 コンテンツに合ったフォント選びをしている

関連研究：コンテンツへの影響 ポスター/漫画 コンテンツに合ったフォント選びをしている ⾳楽動画の視聴体験も豊かにしたい！

関連研究：視聴体験の拡張 振動を⽤いた⾳楽の印象強調[井⼿⼝ら 2013] 楽器⾳に同期した振動をユーザに感じさせる 錯視を利⽤した映像の印象強調[福地ら 2016] 映像コンテンツの周辺に錯視図形を提⽰

関連研究：視聴体験の拡張 振動を⽤いた⾳楽の印象強調[井⼿⼝ら 2013] 楽器⾳に同期した振動をユーザに感じさせる 錯視を利⽤した映像の印象強調[福地ら 2016] 映像コンテンツの周辺に錯視図形を提⽰

関連研究：視聴体験の拡張 振動を⽤いた⾳楽の印象強調[井⼿⼝ら 2013] 楽器⾳に同期した振動をユーザに感じさせる 歌詞の内容を考慮したものでない 錯視を利⽤した映像の印象強調[福地ら 2016] 映像コンテンツの周辺に錯視図形を提⽰

関連研究：文字デザイン コンテンツに適したフォントデザイン

関連研究：文字デザイン コンテンツに適したフォントデザイン 既存のフォントから選定 新しくデザイン

関連研究：文字デザイン 既存のフォントから選定 業種とフォントのイメージが⼀致するフォントの選定 [三好ら 2001] ユーザの⼊⼒に適したフォントの選定 [宮林ら 2011][飯場ら 2012]

関連研究：文字デザイン 既存のフォントから選定 業種とフォントのイメージが⼀致するフォントの選定 ⾳楽に適したフォントってそもそもある？ [三好ら 2001] ユーザの⼊⼒に適したフォントの選定 [宮林ら 2011][飯場ら 2012]

関連研究：文字デザイン 新しくデザイン ベースのフォントと任意のフォントの融合 [Suveeranontら 2010] 2次元マップ上に似たフォントを配置し 形状の近いものを融合 [Campbellら 2014]

関連研究：文字デザイン 新しくデザイン 形状に着⽬している ベースのフォントと任意のフォントの融合 [Suveeranontら 2010] 印象を元にした融合はできない 2次元マップ上に似たフォントを配置し 形状の近いものを融合 [Campbellら 2014]

目的 フォント融合によって ⾳楽動画の印象に適したフォントの⽣成！ 既存のフォントより印象強調できるか調査！

デモ ゴシック体 提案⼿法

研究内容 1. 提案⼿法：フォント融合システム 2. 印象値のデータセット構築 3. 実験・考察

研究内容 1. 提案⼿法：フォント融合システム 2. 印象値のデータセット構築 3. 実験・考察

提案手法：フォント融合システム ⻫藤らの⼿法[2016] 2つの印象クラス ユーザの⼊⼒ 近いフォントを融合

提案手法：フォント融合システム ⻫藤らの⼿法[2016] 提案⼿法 2つの印象クラス 6つの印象クラス ユーザの⼊⼒ ⾳楽動画印象を⼊⼒ 近いフォントを融合 近いフォントを融合

使用する印象クラス 印象を表す形容詞 ⾳楽検索ワークショップ MIREXで⽤いられた5つ 可愛い[⼤野ら 2016] C1 堂々，どっしりとした C2 元気が出る，陽気な C3 切ない，哀愁の C4 激しい，熱情的な C5 滑稽な，奇抜な C6 可愛い，愛くるしい

融合アルゴリズム 1．フォントの数式化 芯線 𝑥 = 𝑎$ cos 0𝑡 + 𝑏$ sin 0𝑡 + 𝑎. cos1 𝑡 + … 2．係数を加重平均 𝑦 = 𝑐$ cos 0𝑡 + 𝑑$ sin 0𝑡 + 𝑐. cos1 𝑡 + ⋯ 太さ 𝑧 = 𝑒$ cos 0𝑡 + 𝑓$ sin 0𝑡 + 𝑒. cos 1𝑡 + ⋯

融合アルゴリズム 1．フォントの数式化 芯線 𝑥 = 𝑎$ cos 0𝑡 + 𝑏$ sin 0𝑡 + 𝑎. cos1 𝑡 + … 2．係数を加重平均 𝑦 = 𝑐$ cos 0𝑡 + 𝑑$ sin 0𝑡 + 𝑐. cos1 𝑡 + ⋯ 太さ 𝑧 = 𝑒$ cos 0𝑡 + 𝑓$ sin 0𝑡 + 𝑒. cos 1𝑡 + ⋯

融合アルゴリズム 融合割合 6つの印象クラスを軸とした 6次元空間 近いものほど⾼い割合で融合 あ あ あ ♬ あ あ

融合アルゴリズム 6つの印象クラスを軸とした 6次元空間 融合割合 近いものほど⾼い割合で融合 フォントA 70％ 60％ 50％ あ あ 40％ あ 30％ あ ♬ 30％ 40％ 50％ 60％ あ 70％ あ あ フォントB

研究内容 1. 提案⼿法：フォント融合システム 2. 印象値のデータセット構築 3. 実験・考察

データセット構築 ⾳楽動画の印象を⼊⼒し， それらをフォントの印象と対応づけることで融合

データセット構築 ⾳楽動画の印象を⼊⼒し， それらをフォントの印象と対応づけることで融合 事前にフォントと⾳楽動画に印象値を設定する必要がある

データセット構築（フォント） 実験協⼒者 ⼤学⽣の男⼥19名 C1(堂々とした) 評価項⽬ C1~C6の印象クラス(5段階) C3(切ない) 例． -2 可愛くない〜可愛い +2 C2(元気が出る) C4(激しい) C5(滑稽な) C6(可愛い)

データセット構築（フォント） 和⽂フォント ＋ 英数字

データセット構築（フォント）

データセット構築（フォント） 先⾏研究 から引⽤ 個性的な 形を追加

データセット構築（フォント）

データセット構築（フォント） ← 左から，C1（堂々とした）, C2（元気が出る）, C3（切ない）, C4（激しい）, C5（滑稽な）, C6（可愛い）

データセット構築（フォント）

データセット構築（音楽動画） 実験協⼒者 ⼤学⽣の男⼥19名 使⽤した⾳楽動画 18曲のサビ部分 評価項⽬ • C1~C6の印象クラス(5段階)

データセット構築（音楽動画）

データセット構築（音楽動画）

融合例 C1(堂々とした)，C4(激しい) C3(切ない)，C6(可愛い)

研究内容 1. 提案⼿法：フォント融合システム 2. 印象値のデータセット構築 3. 実験・考察

実験 実験動画 ：18動画 ✖ 3フォント = 54動画 実験協⼒者：⼤学⽣の男⼥19名 評価項⽬ • C1~C6の印象クラス(5段階) 例. -2 可愛くない〜可愛い +2

実験 実験動画 ：18動画 ✖ 3フォント = 54動画 実験協⼒者：⼤学⽣の男⼥19名 評価項⽬ • C1~C6の印象クラス(5段階) 例. -2 可愛くない〜可愛い +2 印象強調できても雰囲気がマッチしてない可能性！

実験 実験動画 ：18動画 ✖ 3フォント = 54動画 実験協⼒者：⼤学⽣の男⼥19名 評価項⽬ • C1~C6の印象クラス(5段階) 例. -2 可愛くない〜可愛い +2 印象強調できても雰囲気がマッチしてない可能性！ • マッチ度(⾳楽動画とフォントの印象があっていたか) （5段階）

3つのフォント 融合フォント 4つのフォントを融合 近傍フォント ⼀番印象に近い既存のフォント 印象値0フォント C1〜C6を0にして 4フォントを融合 あ あ あ あ

印象値0フォント あ 印象値0フォント ⼊⼒値であるC1~C6を 0にして融合 楽曲の印象を反映していないもの あ あ あ 原点 あ

実験結果(マッチ度) 近傍フォント

実験結果(マッチ度) 近傍フォント

実験結果(マッチ度) 近傍フォント ⾳楽動画にマッチしたフォントを作成できた

実験結果(マッチ度) マッチ度⾼ マッチ度低

実験結果(印象値) ■融合フォント C1 C2 C3 C4 C5 C6 C1 C2 C3 C4 C5 C6 C1 C2 C3 C4 C5 C6 ■近傍フォント ■印象値0フォント ⾳楽動画A ⾳楽動画B ⾳楽動画C ⾳楽動画D ⾳楽動画E ⾳楽動画F ⾳楽動画G ⾳楽動画H ⾳楽動画I ⾳楽動画J ⾳楽動画K ⾳楽動画L ⾳楽動画M ⾳楽動画N ⾳楽動画O ⾳楽動画P ⾳楽動画Q ⾳楽動画R

音楽動画の印象値一覧 A G M B H N C I O D J P E K Q F L R

実験結果(印象値) ■融合フォント C1 C2 C3 C4 C5 C6 C1 C2 C3 C4 C5 C6 C1 C2 C3 C4 C5 C6 ⾳楽動画A ⾳楽動画B ■近傍フォント ⾳楽動画C ■印象値0フォント ⾳楽動画D ⾳楽動画E ⾳楽動画F どのフォントが印象強調できるかは ⾳楽動画G ⾳楽動画H ⾳楽動画I ⾳楽動画J ⾳楽動画K ⾳楽動画L ⾳楽動画M ⾳楽動画N ⾳楽動画O ⾳楽動画P ⾳楽動画Q ⾳楽動画R かなりばらつきがある

ばらつきの原因調査 選定したフォントは適切だったか？ フォントごとの⽐較は？ フォントは⾳楽動画にマッチしていた？

ばらつきの原因調査 選定したフォントは適切だったか？ フォントごとの⽐較は？ フォントは⾳楽動画にマッチしていた？

フォントの印象値 印象クラスごとに フォントを並び替えた

フォントの印象値 C3(切ない) 印象クラスごとに フォントを並び替えた C4(激しい) ⾼く評価されたフォントが 極端に少ない

フォントの印象値 印象クラスごとに フォントを並び替えた 【C3(切ない)，C4(激しい)】 融合されたフォントに偏りが出てしまった? ⾼く評価されたフォントが 極端に少ない 選定するフォントによっては結果に偏りが出る

ばらつきの原因調査 選定したフォントは適切だったか？ フォントごとの⽐較は？ フォントは⾳楽動画にマッチしていた？

融合フォント vs 近傍フォント ← 3つのフォントを⽐較 印象値0フォントを基準としたとき， 融合フォントと近傍フォントのどちらが印象強調できているか

融合フォント vs 近傍フォント ある⾳楽動画 実験協⼒者 C1 C2 C3 C4 C5 C6 融合フォント： 0 -2 1 2 -1 1 印象値0フォント： -1 -2 0 -1 0 0

融合フォント vs 近傍フォント ある⾳楽動画 融合フォント： 印象値0フォント： 実験協⼒者 C1 C2 C3 C4 C5 C6 0 -2 1 2 -1 1 1 0 1 3 -1 1 -1 -2 0 -1 0 0

融合フォント vs 近傍フォント ある⾳楽動画 1以上の差分の個数をカウント 「1」：3個 「2」：0個 「3」：1個 融合フォント： 印象値0フォント： 実験協⼒者 C1 C2 C3 C4 C5 C6 0 -2 1 2 -1 1 1 0 1 3 -1 1 -1 -2 0 -1 0 0

融合フォント vs 近傍フォント ある⾳楽動画 1以上の差分の個数をカウント 「1」：3個 「2」：0個 「3」：1個 融合フォント： 全動画/全協⼒者分カウント 印象値0フォント： 実験協⼒者 C1 C2 C3 C4 C5 C6 0 -2 1 2 -1 1 1 0 1 3 -1 1 -1 -2 0 -1 0 0

融合フォント vs 近傍フォント 近傍フォントと印象値0フォントの差

融合フォント vs 近傍フォント 近傍フォントと印象値0フォントの差

融合フォント vs 近傍フォント 近傍フォント 融合フォントの 結果が悪い

融合フォント vs 近傍フォント 近傍フォント 融合フォントの 結果が悪い C1,C2,C4の 全ての評価値が⾼い

印象クラスごとの伝わりやすさ C3(切ない),C5(滑稽),C6(可愛い) → ⽂字デザインで表現可能 C1(堂々),C2(元気が出る),C4(激しい) → 他の印象と混ざってしまうと 表現が難しい？

ばらつきの原因調査 選定したフォントは適切だったか？ フォントごとの⽐較は？ フォントは⾳楽動画にマッチしていた？

マッチ度が低いフォント 複数の印象を反映したフォント

マッチ度が低いフォント 低マッチ度 複数の印象を反映したフォント 不要な印象も 反映？

マッチ度が高いフォント マッチ度を⽐較 実験協⼒者 ⾳楽動画 A B C D E F 融合フォント： 0 -2 1 2 -1 1 印象値0フォント： -1 -2 0 -1 0 0

マッチ度が高いフォント マッチ度を⽐較 実験協⼒者 ⾳楽動画 A B C D E F 融合フォント： 0 -2 1 2 -1 1 印象値0フォント： -1 -2 0 -1 0 0 融合フォントの評価値が正

マッチ度が高いフォント マッチ度を⽐較 ⾳楽動画C ＋ 融合フォント 印象値ベクトルの⼤きさ 𝑪𝟏 𝟐 + 𝑪𝟐 𝟐 + 𝑪𝟑 𝟐 + 𝑪𝟒 𝟐 + 𝑪𝟓 𝟐 + 𝑪𝟔 𝟐 ⾳楽動画 A B C D E F 融合フォント： 0 -2 1 2 -1 1 印象値0フォント： -1 -2 0 -1 0 0 ー ⾳楽動画C ＋ 印象値0フォント 印象値ベクトルの⼤きさ 𝟐 実験協⼒者 𝟐 𝟐 𝟐 𝑪𝟏 + 𝑪𝟐 + 𝑪𝟑 + 𝑪𝟒 + 𝑪𝟓 𝟐 + 𝑪𝟔 𝟐 融合フォントの評価値が正

マッチ度が高いフォント 近傍フォント-

マッチ度が高いフォント 近傍フォント- マッチ度2(とても⾼い) 融合フォントで とても強調できる

マッチ度が高いフォント 近傍フォント- マッチ度1(少し⾼い) 融合フォントほぼ0

マッチ度ごとの分析 雰囲気がマッチしている → 印象強調可能！ 雰囲気がそこまでマッチしてない → むしろ印象を抑制してしまう

マッチ度低 6つの印象クラスを軸とした 6次元空間 あ あ 遠いフォントなのに， 上位4つだから 融合されてしまう！ あ ♬ あ

マッチ度低 6つの印象クラスを軸とした 6次元空間 あ あ 閾値を設け，遠すぎる フォントは融合しない あ ♬ あ

応用例 • 印象を反映したフォントを使⽤したカラオケ • より感情移⼊し歌える可能性？ • 歌詞や⾳楽動画の印象を⾃動推定するシステムとの連動 • ⾃動で融合フォント⽣成

課題 • フォントの印象値のばらつきを考慮した選定 • 実験の際に歌詞を⾒るようにする仕組みの⼯夫 • ⽂字デザイン以外での印象強調 • ⾊，アニメーションなど • 歌詞の内容を考慮

まとめ 提案⼿法 • ⾳楽動画の印象を反映したフォントを作成 • 歌詞に使⽤して印象強調できるか調査 • C3(切ない),C5(滑稽),C6(可愛い) → ⽂字デザインで表現可能 結果 • C1(堂々),C2(元気が出る),C4(激しい) → 他の印象と混ざると表現が困難？ • 融合フォントはマッチ度が⼤きく関与