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

動的なフォント融合による 文字デザイン支援手法 明治大学 総合数理学部 斉藤 絢基 中村 聡史

文字デザインで悩んだことありませんか？ そうだ、 島に行こう ほげほげ観光協会

作成したシステム

作成したシステム

コンテンツの創作・発信が身近に 見出し・キャッチコピー サムネイル・字幕・歌詞 セリフ・オノマトペ 文字デザインがコンテンツとしての完成度をあげる

文字デザインの効果 そうだ、 島に行こう ほげほげ観光協会 そうだ、 島に行こう ほげほげ観光協会

従来の文字デザイン方法の問題点 和文フォントの数が少ない Book Antiqua Arial 游ゴシック UDデジタル教科書体 MS明朝 MS P明朝 游明朝 メイリオ 10 種類 Impact Meiryo UI Segoe Script Times New Roman Courier 和文フォント Andale Mono 欧文フォント Farah Optima 59 種類 Corbel MSゴシック Bodoni 72 Comic Sans Georgia MS UI Gothic Papyrus MS Pゴシック Cooper Black Rockwell Helvetica

従来の文字デザイン方法の問題点 新たにフォントを購入&インストール 大人っぽくて 清涼感のある フォントはどれ..？ 愛のあるユニークな書体 愛のあるユニークな書体 愛のあるユニークな書体 愛のあるユニークな書体 愛のあるユニークな書体 愛のあるユニークな書体 愛のあるユニークな書体 愛のあるユニークな書体 愛のあるユニークな書体 愛のあるユニークな書体 愛のあるユニークな書体 愛のあるユニークな書体

従来の文字デザイン方法の問題点 問題点 和文フォントの数が少なく、選択の幅が狭い つくりたいイメージに合ったフォントの選出が困難

解決手法 手書きやフォントを加工して自らデザイン ① 手描きで一文字ずつ ○ オリジナル性の高い仕上がりにできる ✕ 時間がかかる・センスを必要とする

解決手法 手書きやフォントを加工して自らデザイン ② 手描きのスケッチにフォントを融合 [Suveeranont 2010] → 融合するストロークの対応を取る必要があり，日本語には不向き

解決手法 手書きやフォントを加工して自らデザイン ③ フォント同士の融合 [Campbell 2015] → 融合する組み合わせが限定的・日本語には不向き → 出力結果がイメージに合うものなのかその都度判断する必要がある 大人っぽくて 清涼感のある フォントはどれ..？

本研究の目的 ユーザが求めるイメージに合ったフォントを 既存のフォントを組み合わせることで獲得

提案手法 ユーザの入力する印象語に応じて フォントの配置結果が変わる マップ上の選択位置 = 印象値の強さ としフォントの獲得を直感的に

提案手法の概要 1. フォントに対する印象付与 2. フォント融合アルゴリズム

提案手法の概要 1. フォントに対する印象付与 2. フォント融合アルゴリズム

フォントに対する印象付与 1. 事前調査でフォントの印象語 & 印象値を算出 2. 2つの印象語を軸とし，印象値に応じて フォントをマップ上に配置

事前調査手順 ① フォントに関する印象語を35対選出[井上 ‘84][井上 ‘85] ② 18人の大学生が18種類のフォントを評価 ③ 主因子法・プロマクス回転による因子分析 各フォントの印象値 = 18名の評価の平均値

事前調査手順 ① フォントに関する印象語を35対選出[井上 ‘84][井上 ‘85] ② 18人の大学生が18種類のフォントを評価 ③ 主因子法・プロマクス回転による因子分析 各フォントの印象値 = 18名の評価の平均値

事前調査手順 ① フォントに関する印象語を35対選出[井上 ‘84][井上 ‘85] ② 18人の大学生が18種類のフォントを評価 ③ 主因子法・プロマクス回転による因子分析 各フォントの印象値 = 18名の評価の平均値

フォントに対する印象付与 1. 事前調査でフォントの印象語&印象値を算出 2. 2つの印象語を軸とし，印象値に応じて フォントをマップ上に配置

提案手法の概要 1. フォントに対する印象付与 2. フォント融合アルゴリズム

フォント融合アルゴリズム 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) …

フォント融合アルゴリズム 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) …

プロトタイプシステム

評価実験 目的１：従来の文字デザインの問題を解消できるか検証 和文フォントの数が少なく、選択の幅が狭い つくりたいイメージに合ったフォントの選出が困難 目的２：従来のフォント選択手法との振る舞いの違いを分析

評価実験 リスト形式 マップ配置形式 - 従来のフォント選定 - 印象値によって配置 - フォント名を そのフォントで表示 - フォント融合はなし ※ 使用するフォントの数は同じ - 新たなフォントを生成する点が有効に働くか検証するため

評価実験 実験概要 • 参加者：大学生15名 • 内容：提示された写真とテキストに合った文字デザインを行う • 試行回数：5（デザインタスク）×3（手法）＝15回 • 文字デザインごとにアンケートに回答してもらった - Q1：製作のコンセプト（自由記述） - Q2：コンセプト通りの字体得られたか（5段階） - Q3：獲得したフォントを利用して テキストが写真上に表示されたときの満足度 （5段階）

評価実験結果 字形の獲得に対する満足度の比較： vs. マップ配置形式 有意差あり 有意差あり Q2：コンセプト通りの字体が得られたか Q3：テキストが写真上に表示されたときの満足度

評価実験結果 字形の獲得に対する満足度の比較： vs. リスト形式 有意差あり Q2：コンセプト通りの字体が得られたか Q3：テキストが写真上に表示されたときの満足度

評価実験結果：システムを使用した感想・コメント リスト形式 ❌ 似たようなフォントが最後の 2 択になった場合，選ぶのが大変 だった ❌ 上から順に検討する必要があり，面倒だった マップ配置形式 ⭕ 最適なフォントを提示してくれている感がよい ⭕ 最初に連想した方向性を表現できる軸があれば目的のフォントが みつかる ❌ 妥協点をみつけるのが大変だった 提案手法 △ 微調整ができるのが良かった or 面倒だった

評価実験結果：提案手法の使い方の違い 提案手法を高く評価したグループ

評価実験結果：提案手法の使い方の違い マップ配置形式を高く評価したグループ

評価実験結果：提案手法の使い方の違い フォントを融合している体験を与えきれていなかった 融合結果が満足のいくものではなかった マップ配置形式を高く評価したグループ

評価実験結果まとめ 字形の獲得に関する満足度調査結果 • リスト形式・マップ配置形式どちらと比較しても有意差が確認された → 印象語によってフォントの配置・新たなフォントを生成 する提案手法が有効に働いていた → 従来の文字デザインの問題を解消できた！ システムを使用した感想・デザイン行動観察結果 • プロトタイプシステムの改善点が明らかに - 融合結果の完成度をあげる - UI設計を再検討し，新たなフォントを生成している体験をユーザに与える

応用例 フォント製作におけるコミュニケーションの敷居を下げるツール • 小説作者がキャラクタのイメージに合うようなフォントの 作成を依頼することがある → 言葉で伝えるため，作者の意図と完成品に食い違いが生じる場合も → かといって文字デザイン経験はないので，他に伝える手段がない どこか気の抜けた 感じのフォント イメージは こんな感じー オッケー 任せて！

まとめ 目的 従来の文字デザインに内在する問題を解消したい 提案手法 任意の既存のフォントを組み合わせて，新たなフォントを提供 評価結果 従来のフォント選択手法と比較して，有用性を確認 従来の文字デザインに内在する問題を解消 今後の展望 システムの改良 映画の字幕やカラオケの歌詞への応用