Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

145 views

Published on

EC50にて発表したスライド

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 1. 音楽印象と同期した歌詞フォント 融合による印象強調手法 野中滉介(明治⼤学 総合数理学部 3年) ⻫藤絢基 中村聡史 明治⼤学 総合数理学部 先端メディアサイエンス学科
  2. 2. 私たちの周りの音楽
  3. 3. 私たちの周りの音楽 歌詞のある⾳楽が多い!
  4. 4. 歌詞の役割 歌詞のある音楽において歌詞の内容は重要な要素 • 心情や情景などを聴取者に伝達する[森 2010]
  5. 5. 歌詞のある音楽において歌詞の内容は重要な要素 • 心情や情景などを聴衆者に伝達する[森 2010] 歌詞の役割 歌詞を⽬にする機会ってそんなに多い?
  6. 6. 主な音楽聴取手段(2017年度) 2017年度「⾳楽メディアユーザー実態調査」報告書
  7. 7. 主な音楽聴取手段(2017年度) 2017年度「⾳楽メディアユーザー実態調査」報告書 YouTube(YouTube公式アプリも含む)
  8. 8. 主な音楽聴取手段(2017年度) 2017年度「⾳楽メディアユーザー実態調査」報告書 ⾳楽を映像で楽しむユーザが多い!
  9. 9. リリックビデオ ⾳楽と同期して歌詞を提⽰するPVが増加している サカナクション/アルクアラウンド Perfume/Hold Your Hand
  10. 10. Lyric Speaker → 歌詞アニメーションがより⼀般的なものに! ⾳楽と同期した歌詞アニメーションを表⽰する製品
  11. 11. Text Alive [加藤 2015] 誰でも⾳楽と同期した歌詞アニメーションの制作が可能に!
  12. 12. 歌詞付きの音楽動画
  13. 13. 歌詞付きの音楽動画 歌詞の意味を理解しながら視聴!
  14. 14. 歌詞付きの音楽動画 歌詞の意味を理解しがなら視聴! より良い視聴体験に!
  15. 15. そのフォントは? そもそも⽂字を メインに制作されたもの いらすと
  16. 16. そのフォントは? そもそも⽂字を メインに制作されたもの いらすと カラオケ ⾳楽番組
  17. 17. そのフォントは? そもそも⽂字を メインに制作されたもの いらすと 画⼀的なフォント! カラオケ ⾳楽番組
  18. 18. そのフォントは? そもそも⽂字を メインに制作されたもの いらすと 画⼀的なフォント! カラオケ ⾳楽番組 ただ歌詞の内容を伝達してるだけ
  19. 19. そのフォントは? そもそも⽂字を メインに制作されたもの いらすと 画⼀的なフォント! カラオケ ⾳楽番組 ただ歌詞の内容を伝達してるだけ もっと良いものにできるはず!
  20. 20. 関連研究:コンテンツへの影響 使⽤するフォントによって視覚的印象に変化が⽣じる [⽊村ら 1997] フォントの視覚的特性とデザイン特徴に関連性がある [Mackiewiczら 2004] フォントの視覚的特性と感情反応に関連性がある [Caldwellら 2013]
  21. 21. 関連研究:コンテンツへの影響 ポスター/漫画 コンテンツに合ったフォント選びをしている
  22. 22. 関連研究:コンテンツへの影響 ポスター/漫画 コンテンツに合ったフォント選びをしている ⾳楽動画の視聴体験も豊かにしたい!
  23. 23. 関連研究:視聴体験の拡張 振動を⽤いた⾳楽の印象強調[井⼿⼝ら 2013] 楽器⾳に同期した振動をユーザに感じさせる 錯視を利⽤した映像の印象強調[福地ら 2016] 映像コンテンツの周辺に錯視図形を提⽰
  24. 24. 関連研究:視聴体験の拡張 振動を⽤いた⾳楽の印象強調[井⼿⼝ら 2013] 楽器⾳に同期した振動をユーザに感じさせる 錯視を利⽤した映像の印象強調[福地ら 2016] 映像コンテンツの周辺に錯視図形を提⽰
  25. 25. 関連研究:視聴体験の拡張 振動を⽤いた⾳楽の印象強調[井⼿⼝ら 2013] 楽器⾳に同期した振動をユーザに感じさせる 錯視を利⽤した映像の印象強調[福地ら 2016] 映像コンテンツの周辺に錯視図形を提⽰ 歌詞の内容を考慮したものでない
  26. 26. 関連研究:文字デザイン コンテンツに適したフォントデザイン
  27. 27. 関連研究:文字デザイン コンテンツに適したフォントデザイン 既存のフォントから選定 新しくデザイン
  28. 28. 関連研究:文字デザイン 業種とフォントのイメージが⼀致するフォントの選定 [三好ら 2001] 既存のフォントから選定 ユーザの⼊⼒に適したフォントの選定 [宮林ら 2011][飯場ら 2012]
  29. 29. 関連研究:文字デザイン 業種とフォントのイメージが⼀致するフォントの選定 [三好ら 2001] 既存のフォントから選定 ユーザの⼊⼒に適したフォントの選定 [宮林ら 2011][飯場ら 2012] ⾳楽に適したフォントってそもそもある?
  30. 30. 関連研究:文字デザイン ベースのフォントと任意のフォントの融合 [Suveeranontら 2010] 新しくデザイン 2次元マップ上に似たフォントを配置し 形状の近いものを融合 [Campbellら 2014]
  31. 31. 関連研究:文字デザイン ベースのフォントと任意のフォントの融合 [Suveeranontら 2010] 新しくデザイン 2次元マップ上に似たフォントを配置し 形状の近いものを融合 [Campbellら 2014] 形状に着⽬している 印象を元にした融合はできない
  32. 32. 目的 フォント融合によって ⾳楽動画の印象に適したフォントの⽣成! 既存のフォントより印象強調できるか調査!
  33. 33. デモ 提案⼿法 ゴシック体
  34. 34. 研究内容 1. 提案⼿法:フォント融合システム 2. 印象値のデータセット構築 3. 実験・考察
  35. 35. 研究内容 1. 提案⼿法:フォント融合システム 2. 印象値のデータセット構築 3. 実験・考察
  36. 36. 提案手法:フォント融合システム ⻫藤らの⼿法[2016] 2つの印象クラス ユーザの⼊⼒ 近いフォントを融合
  37. 37. 提案手法:フォント融合システム ⻫藤らの⼿法[2016] 2つの印象クラス ユーザの⼊⼒ 近いフォントを融合 提案⼿法 6つの印象クラス ⾳楽動画印象を⼊⼒ 近いフォントを融合
  38. 38. 使用する印象クラス ⾳楽検索ワークショップ MIREXで⽤いられた5つ 可愛い[⼤野ら 2016] 印象を表す形容詞 C1 堂々,どっしりとした C2 元気が出る,陽気な C3 切ない,哀愁の C4 激しい,熱情的な C5 滑稽な,奇抜な C6 可愛い,愛くるしい
  39. 39. 融合アルゴリズム 1.フォントの数式化 2.係数を加重平均 𝑥 = 𝑎$ cos 0𝑡 + 𝑏$ sin 0𝑡 + 𝑎. cos1 𝑡 + … 𝑦 = 𝑐$ cos 0𝑡 + 𝑑$ sin 0𝑡 + 𝑐. cos1 𝑡 + ⋯ 𝑧 = 𝑒$ cos 0𝑡 + 𝑓$ sin 0𝑡 + 𝑒. cos 1𝑡 + ⋯ 芯線 太さ
  40. 40. 融合アルゴリズム 1.フォントの数式化 2.係数を加重平均 芯線 太さ 𝑥 = 𝑎$ cos 0𝑡 + 𝑏$ sin 0𝑡 + 𝑎. cos1 𝑡 + … 𝑦 = 𝑐$ cos 0𝑡 + 𝑑$ sin 0𝑡 + 𝑐. cos1 𝑡 + ⋯ 𝑧 = 𝑒$ cos 0𝑡 + 𝑓$ sin 0𝑡 + 𝑒. cos 1𝑡 + ⋯
  41. 41. 融合アルゴリズム 6つの印象クラスを軸とした 6次元空間 あ あ あ あ あ ♬ 融合割合 近いものほど⾼い割合で融合
  42. 42. 融合アルゴリズム 6つの印象クラスを軸とした 6次元空間 あ あ あ あ ♬ 融合割合 近いものほど⾼い割合で融合 あ 50%40%30% 60% 70% 50%60%70% 40% 30% あ あ フォントA フォントB
  43. 43. 研究内容 1. 提案⼿法:フォント融合システム 2. 印象値のデータセット構築 3. 実験・考察
  44. 44. データセット構築 ⾳楽動画の印象を⼊⼒し, それらをフォントの印象と対応づけることで融合
  45. 45. データセット構築 ⾳楽動画の印象を⼊⼒し, 事前にフォントと⾳楽動画に印象値を設定する必要がある それらをフォントの印象と対応づけることで融合
  46. 46. データセット構築(フォント) C1(堂々とした) C2(元気が出る) C3(切ない) C4(激しい) C5(滑稽な) C6(可愛い) 実験協⼒者 ⼤学⽣の男⼥19名 評価項⽬ C1~C6の印象クラス(5段階) 例. -2 可愛くない〜可愛い +2
  47. 47. データセット構築(フォント) 和⽂フォント + 英数字
  48. 48. データセット構築(フォント)
  49. 49. データセット構築(フォント) 個性的な 形を追加 先⾏研究 から引⽤
  50. 50. データセット構築(フォント)
  51. 51. データセット構築(フォント) ← 左から,C1(堂々とした), C2(元気が出る), C3(切ない), C4(激しい), C5(滑稽な), C6(可愛い)
  52. 52. データセット構築(フォント)
  53. 53. データセット構築(音楽動画) 実験協⼒者 ⼤学⽣の男⼥19名 評価項⽬ • C1~C6の印象クラス(5段階) 使⽤した⾳楽動画 18曲のサビ部分
  54. 54. データセット構築(音楽動画)
  55. 55. データセット構築(音楽動画)
  56. 56. 融合例 C1(堂々とした),C4(激しい) C3(切ない),C6(可愛い)
  57. 57. 研究内容 1. 提案⼿法:フォント融合システム 2. 印象値のデータセット構築 3. 実験・考察
  58. 58. 実験 実験協⼒者:⼤学⽣の男⼥19名 評価項⽬ 例. -2 可愛くない〜可愛い +2 • C1~C6の印象クラス(5段階) 実験動画 :18動画 ✖ 3フォント = 54動画
  59. 59. 実験 評価項⽬ 例. -2 可愛くない〜可愛い +2 • C1~C6の印象クラス(5段階) 印象強調できても雰囲気がマッチしてない可能性! 実験協⼒者:⼤学⽣の男⼥19名 実験動画 :18動画 ✖ 3フォント = 54動画
  60. 60. 実験 評価項⽬ 例. -2 可愛くない〜可愛い +2 • C1~C6の印象クラス(5段階) 印象強調できても雰囲気がマッチしてない可能性! • マッチ度(⾳楽動画とフォントの印象があっていたか) (5段階) 実験協⼒者:⼤学⽣の男⼥19名 実験動画 :18動画 ✖ 3フォント = 54動画
  61. 61. 3つのフォント 融合フォント 4つのフォントを融合 近傍フォント ⼀番印象に近い既存のフォント 印象値0フォント C1〜C6を0にして 4フォントを融合 あ あ あ あ
  62. 62. 印象値0フォント 印象値0フォント ⼊⼒値であるC1~C6を 0にして融合 あ あ ああ あ原点 楽曲の印象を反映していないもの
  63. 63. 実験結果(マッチ度) 近傍フォント
  64. 64. 実験結果(マッチ度) 近傍フォント
  65. 65. 実験結果(マッチ度) ⾳楽動画にマッチしたフォントを作成できた 近傍フォント
  66. 66. マッチ度⾼ マッチ度低 実験結果(マッチ度)
  67. 67. 実験結果(印象値) ■融合フォント ■近傍フォント ■印象値0フォント ⾳楽動画A ⾳楽動画B ⾳楽動画C ⾳楽動画D ⾳楽動画E ⾳楽動画F ⾳楽動画G ⾳楽動画H ⾳楽動画I ⾳楽動画J ⾳楽動画K ⾳楽動画L ⾳楽動画M ⾳楽動画N ⾳楽動画O ⾳楽動画P ⾳楽動画Q ⾳楽動画R C1 C2 C3 C4 C5 C6 C1 C2 C3 C4 C5 C6 C1 C2 C3 C4 C5 C6
  68. 68. 音楽動画の印象値一覧 A B C D E F G H I J K L M N O P Q R
  69. 69. 実験結果(印象値) C1 C2 C3 C4 C5 C6 C1 C2 C3 C4 C5 C6 C1 C2 C3 C4 C5 C6 ⾳楽動画A ⾳楽動画B ⾳楽動画C ⾳楽動画D ⾳楽動画E ⾳楽動画F ⾳楽動画G ⾳楽動画H ⾳楽動画I ⾳楽動画J ⾳楽動画K ⾳楽動画L ⾳楽動画M ⾳楽動画N ⾳楽動画O ⾳楽動画P ⾳楽動画Q ⾳楽動画R ■融合フォント ■近傍フォント ■印象値0フォント どのフォントが印象強調できるかは かなりばらつきがある
  70. 70. ばらつきの原因調査 選定したフォントは適切だったか? フォントは⾳楽動画にマッチしていた? フォントごとの⽐較は?
  71. 71. ばらつきの原因調査 選定したフォントは適切だったか? フォントは⾳楽動画にマッチしていた? フォントごとの⽐較は?
  72. 72. フォントの印象値 印象クラスごとに フォントを並び替えた
  73. 73. フォントの印象値 印象クラスごとに フォントを並び替えた ⾼く評価されたフォントが 極端に少ない C3(切ない) C4(激しい)
  74. 74. フォントの印象値 印象クラスごとに フォントを並び替えた ⾼く評価されたフォントが 極端に少ない 【C3(切ない),C4(激しい)】 融合されたフォントに偏りが出てしまった? 選定するフォントによっては結果に偏りが出る
  75. 75. ばらつきの原因調査 選定したフォントは適切だったか? フォントは⾳楽動画にマッチしていた? フォントごとの⽐較は?
  76. 76. 融合フォント vs 近傍フォント 3つのフォントを⽐較 印象値0フォントを基準としたとき, 融合フォントと近傍フォントのどちらが印象強調できているか ←
  77. 77. 融合フォント vs 近傍フォント 実験協⼒者 ある⾳楽動画 融合フォント: 印象値0フォント: 0 -2 1 2 -1 1 -1 -2 0 -1 0 0 C1 C2 C3 C4 C5 C6
  78. 78. 融合フォント vs 近傍フォント 実験協⼒者 ある⾳楽動画 融合フォント: 印象値0フォント: 1 0 1 3 -1 1 0 -2 1 2 -1 1 -1 -2 0 -1 0 0 C1 C2 C3 C4 C5 C6
  79. 79. 融合フォント vs 近傍フォント 実験協⼒者 ある⾳楽動画 融合フォント: 印象値0フォント: 1 0 1 3 -1 1 1以上の差分の個数をカウント 「1」:3個 「2」:0個 「3」:1個 0 -2 1 2 -1 1 -1 -2 0 -1 0 0 C1 C2 C3 C4 C5 C6
  80. 80. 融合フォント vs 近傍フォント 実験協⼒者 ある⾳楽動画 融合フォント: 印象値0フォント: 1 0 1 3 -1 1 1以上の差分の個数をカウント 「1」:3個 「2」:0個 「3」:1個 0 -2 1 2 -1 1 -1 -2 0 -1 0 0 C1 C2 C3 C4 C5 C6 全動画/全協⼒者分カウント
  81. 81. 融合フォント vs 近傍フォント 近傍フォントと印象値0フォントの差
  82. 82. 融合フォント vs 近傍フォント 近傍フォントと印象値0フォントの差
  83. 83. 融合フォント vs 近傍フォント 融合フォントの 結果が悪い 近傍フォント
  84. 84. 融合フォント vs 近傍フォント C1,C2,C4の 全ての評価値が⾼い 融合フォントの 結果が悪い 近傍フォント
  85. 85. 印象クラスごとの伝わりやすさ C3(切ない),C5(滑稽),C6(可愛い) → ⽂字デザインで表現可能 C1(堂々),C2(元気が出る),C4(激しい) → 他の印象と混ざってしまうと 表現が難しい?
  86. 86. ばらつきの原因調査 選定したフォントは適切だったか? フォントは⾳楽動画にマッチしていた? フォントごとの⽐較は?
  87. 87. マッチ度が低いフォント 複数の印象を反映したフォント
  88. 88. マッチ度が低いフォント 複数の印象を反映したフォント 低マッチ度 不要な印象も 反映?
  89. 89. マッチ度が高いフォント 実験協⼒者 融合フォント: 印象値0フォント: 0 -2 1 2 -1 1 -1 -2 0 -1 0 0 ⾳楽動画 A B C D E F マッチ度を⽐較
  90. 90. 融合フォント: 印象値0フォント: 0 -2 1 2 -1 1 -1 -2 0 -1 0 0 ⾳楽動画 A B C D E F マッチ度が高いフォント 実験協⼒者 融合フォントの評価値が正 マッチ度を⽐較
  91. 91. 融合フォント: 印象値0フォント: 0 -2 1 2 -1 1 -1 -2 0 -1 0 0 ⾳楽動画 A B C D E F マッチ度が高いフォント 実験協⼒者 マッチ度を⽐較 ⾳楽動画C + 融合フォント 印象値ベクトルの⼤きさ 𝑪 𝟏 𝟐 + 𝑪 𝟐 𝟐 + 𝑪 𝟑 𝟐 + 𝑪 𝟒 𝟐 + 𝑪 𝟓 𝟐 + 𝑪 𝟔 𝟐 ー ⾳楽動画C + 印象値0フォント 印象値ベクトルの⼤きさ 𝑪 𝟏 𝟐 + 𝑪 𝟐 𝟐 + 𝑪 𝟑 𝟐 + 𝑪 𝟒 𝟐 + 𝑪 𝟓 𝟐 + 𝑪 𝟔 𝟐 融合フォントの評価値が正
  92. 92. マッチ度が高いフォント 近傍フォント-
  93. 93. マッチ度が高いフォント マッチ度2(とても⾼い) 融合フォントで とても強調できる 近傍フォント-
  94. 94. マッチ度が高いフォント マッチ度1(少し⾼い) 融合フォントほぼ0 近傍フォント-
  95. 95. マッチ度ごとの分析 雰囲気がマッチしている → 印象強調可能! 雰囲気がそこまでマッチしてない → むしろ印象を抑制してしまう
  96. 96. マッチ度低 6つの印象クラスを軸とした 6次元空間 あ あ あ あ ♬ 遠いフォントなのに, 上位4つだから 融合されてしまう!
  97. 97. マッチ度低 6つの印象クラスを軸とした 6次元空間 あ あ あ あ ♬ 閾値を設け,遠すぎる フォントは融合しない
  98. 98. 応用例 • 印象を反映したフォントを使⽤したカラオケ • より感情移⼊し歌える可能性? • 歌詞や⾳楽動画の印象を⾃動推定するシステムとの連動 • ⾃動で融合フォント⽣成
  99. 99. 課題 • フォントの印象値のばらつきを考慮した選定 • 実験の際に歌詞を⾒るようにする仕組みの⼯夫 • ⽂字デザイン以外での印象強調 • ⾊,アニメーションなど • 歌詞の内容を考慮
  100. 100. まとめ • C3(切ない),C5(滑稽),C6(可愛い) → ⽂字デザインで表現可能 • C1(堂々),C2(元気が出る),C4(激しい) → 他の印象と混ざると表現が困難? • 融合フォントはマッチ度が⼤きく関与 • ⾳楽動画の印象を反映したフォントを作成 • 歌詞に使⽤して印象強調できるか調査 提案⼿法 結果

×