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.

動的なフォント融合による文字デザイン支援手法

155 views

Published on

第47回EC研究会資料(斉藤絢基)

Published in: Education
  • Be the first to comment

  • Be the first to like this

動的なフォント融合による文字デザイン支援手法

  1. 1. 明治大学 総合数理学部 斉藤 絢基 中村 聡史 動的なフォント融合による 文字デザイン支援手法
  2. 2. 文字デザインで悩んだことありませんか? ほげほげ観光協会 そうだ、 島に行こう
  3. 3. 作成したシステム
  4. 4. 作成したシステム
  5. 5. コンテンツの創作・発信が身近に 文字デザインがコンテンツとしての完成度をあげる サムネイル・字幕・歌詞 セリフ・オノマトペ見出し・キャッチコピー
  6. 6. 文字デザインの効果 ほげほげ観光協会 そうだ、 島に行こう ほげほげ観光協会 そうだ、 島に行こう
  7. 7. 游ゴシック 游明朝MS明朝 MSゴシック メイリオ UDデジタル教科書体 MS UI Gothic 和文フォント 10種類 Arial Andale Mono 欧文フォント 59 種類 Helvetica Georgia Bodoni 72 Times New Roman Rockwell Courier Book Antiqua Comic Sans Corbel Farah Segoe Script Papyrus Optima Cooper Black Impact 和文フォントの数が少ない 従来の文字デザイン方法の問題点 MS Pゴシック MS P明朝 Meiryo UI
  8. 8. 新たにフォントを購入&インストール 愛のあるユニークな書体 愛のあるユニークな書体 愛のあるユニークな書体 愛のあるユニークな書体 愛のあるユニークな書体 愛のあるユニークな書体 愛のあるユニークな書体 愛のあるユニークな書体 愛のあるユニークな書体 愛のあるユニークな書体 愛のあるユニークな書体 愛のあるユニークな書体 大人っぽくて 清涼感のある フォントはどれ..? 従来の文字デザイン方法の問題点
  9. 9. 問題点 和文フォントの数が少なく、選択の幅が狭い つくりたいイメージに合ったフォントの選出が困難 従来の文字デザイン方法の問題点
  10. 10. 解決手法 手書きやフォントを加工して自らデザイン ① 手描きで一文字ずつ ○ オリジナル性の高い仕上がりにできる ✕ 時間がかかる・センスを必要とする
  11. 11. 解決手法 手書きやフォントを加工して自らデザイン ② 手描きのスケッチにフォントを融合 [Suveeranont 2010] → 融合するストロークの対応を取る必要があり,日本語には不向き
  12. 12. ③ フォント同士の融合 [Campbell 2015] → 融合する組み合わせが限定的・日本語には不向き → 出力結果がイメージに合うものなのかその都度判断する必要がある 解決手法 手書きやフォントを加工して自らデザイン 大人っぽくて 清涼感のある フォントはどれ..?
  13. 13. ユーザが求めるイメージに合ったフォントを 既存のフォントを組み合わせることで獲得 本研究の目的
  14. 14. 提案手法 ユーザの入力する印象語に応じて フォントの配置結果が変わる マップ上の選択位置 = 印象値の強さ としフォントの獲得を直感的に
  15. 15. 1. フォントに対する印象付与 2. フォント融合アルゴリズム 提案手法の概要
  16. 16. 1. フォントに対する印象付与 2. フォント融合アルゴリズム 提案手法の概要
  17. 17. 1. 事前調査でフォントの印象語 & 印象値を算出 2. 2つの印象語を軸とし,印象値に応じて フォントをマップ上に配置 フォントに対する印象付与
  18. 18. ① フォントに関する印象語を35対選出[井上 ‘84][井上 ‘85] ② 18人の大学生が18種類のフォントを評価 ③ 主因子法・プロマクス回転による因子分析 各フォントの印象値 = 18名の評価の平均値 事前調査手順
  19. 19. ① フォントに関する印象語を35対選出[井上 ‘84][井上 ‘85] ② 18人の大学生が18種類のフォントを評価 ③ 主因子法・プロマクス回転による因子分析 各フォントの印象値 = 18名の評価の平均値 事前調査手順
  20. 20. ① フォントに関する印象語を35対選出[井上 ‘84][井上 ‘85] ② 18人の大学生が18種類のフォントを評価 ③ 主因子法・プロマクス回転による因子分析 各フォントの印象値 = 18名の評価の平均値 事前調査手順
  21. 21. 1. 事前調査でフォントの印象語&印象値を算出 2. 2つの印象語を軸とし,印象値に応じて フォントをマップ上に配置 フォントに対する印象付与
  22. 22. 1. フォントに対する印象付与 2. フォント融合アルゴリズム 提案手法の概要
  23. 23. 1. フォントを大きさの変化する円の軌跡で表現し,数式化 2. 選択位置と各フォントとの距離に応じて,ブレンド割合を決定し フォントをブレンドする 円の中心座標の軌跡 → フォントの芯線 円の半径 → フォントの太さ 𝑥 = 𝒂 𝟎 cos(0t) + 𝒃 𝟎 sin(0t) + 𝒂 𝟏 cos(1t) + 𝒃 𝟏 sin(1t) + 𝒂 𝟐 cos(2t) + 𝒃 𝟐 sin(2t) + 𝒂 𝟑 cos(3t) + 𝒃 𝟑 sin(3t) + 𝒂 𝟒 cos(4t) + 𝒃 𝟒 sin(4t) + 𝒂 𝟓 cos(5t) + 𝒃 𝟓 sin(5t) … 𝑦 = 𝑧 = 𝒂 𝟎 cos(0t) + 𝒃 𝟎 sin(0t) + 𝒂 𝟏 cos(1t) + 𝒃 𝟏 sin(1t) + 𝒂 𝟐 cos(2t) + 𝒃 𝟐 sin(2t) + 𝒂 𝟑 cos(3t) + 𝒃 𝟑 sin(3t) + 𝒂 𝟒 cos(4t) + 𝒃 𝟒 sin(4t) + 𝒂 𝟓 cos(5t) + 𝒃 𝟓 sin(5t) … 𝒂 𝟎 cos(0t) + 𝒃 𝟎 sin(0t) + 𝒂 𝟏 cos(1t) + 𝒃 𝟏 sin(1t) + 𝒂 𝟐 cos(2t) + 𝒃 𝟐 sin(2t) + 𝒂 𝟑 cos(3t) + 𝒃 𝟑 sin(3t) + 𝒂 𝟒 cos(4t) + 𝒃 𝟒 sin(4t) + 𝒂 𝟓 cos(5t) + 𝒃 𝟓 sin(5t) … フォント融合アルゴリズム
  24. 24. 1. フォントを大きさの変化する円の軌跡で表現し,数式化 2. 選択位置と各フォントとの距離に応じて,ブレンド割合を決定し フォントをブレンドする 円の中心座標の軌跡 → フォントの芯線 円の半径 → フォントの太さ 𝑥 = 𝒂 𝟎 cos(0t) + 𝒃 𝟎 sin(0t) + 𝒂 𝟏 cos(1t) + 𝒃 𝟏 sin(1t) + 𝒂 𝟐 cos(2t) + 𝒃 𝟐 sin(2t) + 𝒂 𝟑 cos(3t) + 𝒃 𝟑 sin(3t) + 𝒂 𝟒 cos(4t) + 𝒃 𝟒 sin(4t) + 𝒂 𝟓 cos(5t) + 𝒃 𝟓 sin(5t) … 𝑦 = 𝑧 = 𝒂 𝟎 cos(0t) + 𝒃 𝟎 sin(0t) + 𝒂 𝟏 cos(1t) + 𝒃 𝟏 sin(1t) + 𝒂 𝟐 cos(2t) + 𝒃 𝟐 sin(2t) + 𝒂 𝟑 cos(3t) + 𝒃 𝟑 sin(3t) + 𝒂 𝟒 cos(4t) + 𝒃 𝟒 sin(4t) + 𝒂 𝟓 cos(5t) + 𝒃 𝟓 sin(5t) … 𝒂 𝟎 cos(0t) + 𝒃 𝟎 sin(0t) + 𝒂 𝟏 cos(1t) + 𝒃 𝟏 sin(1t) + 𝒂 𝟐 cos(2t) + 𝒃 𝟐 sin(2t) + 𝒂 𝟑 cos(3t) + 𝒃 𝟑 sin(3t) + 𝒂 𝟒 cos(4t) + 𝒃 𝟒 sin(4t) + 𝒂 𝟓 cos(5t) + 𝒃 𝟓 sin(5t) … フォント融合アルゴリズム
  25. 25. プロトタイプシステム
  26. 26. 評価実験 目的1:従来の文字デザインの問題を解消できるか検証 和文フォントの数が少なく、選択の幅が狭い つくりたいイメージに合ったフォントの選出が困難 目的2:従来のフォント選択手法との振る舞いの違いを分析
  27. 27. 評価実験 リスト形式 ※ 使用するフォントの数は同じ - 新たなフォントを生成する点が有効に働くか検証するため - 従来のフォント選定 マップ配置形式 - 印象値によって配置 - フォント融合はなし- フォント名を そのフォントで表示
  28. 28. 実験概要 • 参加者:大学生15名 • 内容:提示された写真とテキストに合った文字デザインを行う • 試行回数:5(デザインタスク)×3(手法)=15回 • 文字デザインごとにアンケートに回答してもらった - Q1:製作のコンセプト(自由記述) - Q2:コンセプト通りの字体得られたか(5段階) - Q3:獲得したフォントを利用して テキストが写真上に表示されたときの満足度 (5段階) 評価実験
  29. 29. Q3:テキストが写真上に表示されたときの満足度 字形の獲得に対する満足度の比較: vs. マップ配置形式 有意差あり 有意差あり Q2:コンセプト通りの字体が得られたか 評価実験結果
  30. 30. 有意差あり Q2:コンセプト通りの字体が得られたか Q3:テキストが写真上に表示されたときの満足度 評価実験結果 字形の獲得に対する満足度の比較: vs. リスト形式
  31. 31. リスト形式 評価実験結果:システムを使用した感想・コメント ❌ 似たようなフォントが最後の 2 択になった場合,選ぶのが大変 だった ❌ 上から順に検討する必要があり,面倒だった ⭕ 最適なフォントを提示してくれている感がよい ⭕ 最初に連想した方向性を表現できる軸があれば目的のフォントが みつかる ❌ 妥協点をみつけるのが大変だった マップ配置形式 △ 微調整ができるのが良かった or 面倒だった 提案手法
  32. 32. 評価実験結果:提案手法の使い方の違い 提案手法を高く評価したグループ
  33. 33. 評価実験結果:提案手法の使い方の違い マップ配置形式を高く評価したグループ
  34. 34. 評価実験結果:提案手法の使い方の違い マップ配置形式を高く評価したグループ フォントを融合している体験を与えきれていなかった 融合結果が満足のいくものではなかった
  35. 35. 評価実験結果まとめ システムを使用した感想・デザイン行動観察結果 • プロトタイプシステムの改善点が明らかに - 融合結果の完成度をあげる - UI設計を再検討し,新たなフォントを生成している体験をユーザに与える 字形の獲得に関する満足度調査結果 • リスト形式・マップ配置形式どちらと比較しても有意差が確認された → 印象語によってフォントの配置・新たなフォントを生成 する提案手法が有効に働いていた → 従来の文字デザインの問題を解消できた!
  36. 36. 応用例 フォント製作におけるコミュニケーションの敷居を下げるツール • 小説作者がキャラクタのイメージに合うようなフォントの 作成を依頼することがある → 言葉で伝えるため,作者の意図と完成品に食い違いが生じる場合も → かといって文字デザイン経験はないので,他に伝える手段がない どこか気の抜けた 感じのフォント オッケー 任せて! イメージは こんな感じー
  37. 37. 今後の展望 システムの改良 映画の字幕やカラオケの歌詞への応用 まとめ 目的 従来の文字デザインに内在する問題を解消したい 提案手法 任意の既存のフォントを組み合わせて,新たなフォントを提供 評価結果 従来のフォント選択手法と比較して,有用性を確認 従来の文字デザインに内在する問題を解消

×