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

>100 Views

December 29, 18

スライド概要

EC50にて発表したスライド

profile-image

Nakamura Laboratory (Meiji University)

@nkmr-lab

スライド一覧

明治大学 総合数理学部 先端メディアサイエンス学科 中村聡史研究室

シェア

埋め込む »CMSなどでJSが使えない場合

各ページのテキスト
1.

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

2.

私たちの周りの音楽

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

9.

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

10.

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

11.

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

12.

歌詞付きの音楽動画

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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

22.

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

23.

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

24.

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

25.

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

26.

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

27.

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

28.

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

29.

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

30.

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

31.

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

32.

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

33.

デモ ゴシック体 提案⼿法

34.

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

35.

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

36.

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

37.

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

38.

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

39.

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

40.

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

41.

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

42.

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

43.

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

44.

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

45.

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

46.

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

47.

データセット構築(フォント) 和⽂フォント + 英数字

48.

データセット構築(フォント)

49.

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

50.

データセット構築(フォント)

51.

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

52.

データセット構築(フォント)

53.

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

54.

データセット構築(音楽動画)

55.

データセット構築(音楽動画)

56.

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

57.

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

58.

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

59.

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

60.

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

61.

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

62.

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

63.

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

64.

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

65.

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

66.

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

67.

実験結果(印象値) ■融合フォント 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

68.

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

69.

実験結果(印象値) ■融合フォント 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 かなりばらつきがある

70.

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

71.

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

72.

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

73.

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

74.

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

75.

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

76.

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

77.

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

78.

融合フォント 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

79.

融合フォント 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

80.

融合フォント 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

81.

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

82.

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

83.

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

84.

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

85.

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

86.

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

87.

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

88.

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

89.

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

90.

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

91.

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

92.

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

93.

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

94.

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

95.

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

96.

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

97.

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

98.

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

99.

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

100.

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