Fontender: フォントの印象空間操作による自在な表現が可能な文字デザイン支援手法

Fontender: フォントの印象空間操作による 自在な表現が可能な文字デザイン支援手法 学籍番号: 2722182018 明治大学大学院先端数理科学研究科先端メディアサイエンス専攻 中村研究室 斉藤絢基

背景 研究目的 従来のインタフェースでコンテンツの印象に合った 文字デザインを行うことは難しい ユーザのデザインに関する知識や経験に依存せず 文字デザインが容易なインタフェースの実現 手法 ① フォントを数式化し融合する手法 ② フォントの印象空間を操作することで動的にフォントを 生成するインタフェース 実験 • 従来インタフェースとの比較実験 • 生成されたフォントの妥当性の検証 結果 • 提案手法 > 従来手法 • 任意の組み合わせで融合されたフォントは 概ね期待通りの印象をもつ

背景 文字を適切にデザインすることは重要 • 適切なフォント選びが商品の魅力を高める [Lewis, 2013] • フォントは商品の選択行動へ影響する [川島, 2019][濱野, 2019] Rich and creamy tomato soup Rich and creamy tomato soup

文字デザインの方法 1 既存のフォントから選択する • Webフォントの登場により、利用数が急増 → Google Fontsのフォント閲覧数は23兆以上 2 オリジナルの文字デザインを制作する • 競合との差別化・ブランディング ex. メルカリフォント・オランジーナ専用フォント • うまくデザインできればコンセプトやイメージをより表現できる • 一から手書きで・フォントを変形 etc.

適切な文字デザインは難しい - 従来のインタフェースを例に フォント数が増えると比較が難しくなる 制作するコンテンツに合うか判断するには 知識や経験が必要

文字デザイン支援に関する研究 二次元平面上にフォントを配置 [Campbell, 2014] • 似た形状のフォントの存在を把握することができる フォントを融合し新たな文字デザインを生成 [Suveeranont, 2010] • 対応するパーツを指定するとベースとなるフォントに 手書きやフォントを融合できる

文字デザイン支援に関する研究 二次元平面上にフォントを配置 [Campbell, 2014] • 似た形状のフォントの存在を把握することができる フォントを融合し新たな文字デザインを生成 [Suveeranont, 2010] • 対応するパーツを指定するとベースとなるフォントに 手書きやフォントを融合できる 形状からコンセプトやイメージに合うか 判断する知識や経験が必要

研究目的 誰もが制作するコンテンツの印象に合った 文字デザインを行うことができるインタフェースの実現 既存のフォントから選択する オリジナルの文字デザインを制作する ① 文字デザインに関する知識や経験に依存しない ② 所有するフォントの数にも依存しない

提案手法 - 印象空間を操作することでフォントを生成するインタフェース [EC47][MMM2019] • ユーザが選択した2つの印象語を軸に フォントマップを作成し操作 → デザインの知識や経験に依存しない • どの位置を選択しても、選択位置の周 りのフォントを融合して出力 → 所有するフォントの数に依存しない

提案手法 - フォント融合手法 [EC47] 1. フォントを大きさの変化する円の軌跡で表現し フーリエ級数展開によって数式化 2. 各係数を加重平均し融合

提案手法 - フォント融合手法 [EC47] 1. フォントを大きさの変化する円の軌跡で表現し フーリエ級数展開によって数式化 2. 数式の各係数を加重平均し融合 フォントA 70% 60% 50% 40% 30% 0% 0% 30% 40% 50% 60% 70% フォントB

提案手法の有用性の検証 ① インタフェースの使用実験 ② フォント融合により生成されたフォントの妥当性検証

① 使用実験 - 実験概要 [EC47] • 実験協力者: 大学生15名（20~23歳） • 3つのインタフェースを使った文字デザインタスクを5回ずつ実施 ▸写真とその上に付加する文章からコンセプトを決定し、文字デザイン • 文字デザインタスクごとにアンケート ▸出力された書体に対する満足度（-2~+2） • システム使用後にアンケート ▸それぞれのインタフェースに対する フィードバック

使用してもらうインタフェース 提案手法 リスト形式 ※ 使用するフォント数は同じ マップ配置形式

実験結果 - 出力された書体に対する満足度 2要因の分散分析の結果 どちらの⼿法と⽐較しても ⼿法の主効果において有意だった - リスト形式（F[1,4]=5.47, p<0.05） - マップ配置形式（F[1,4]=6.54, p<0.05]）

実験結果 ‒ 提案手法に対するフィードバック • 最初に連想した方向性を表現できる軸があれば、 すぐに目的のフォントがみつかる • 使いたい書体が思いつかない場合は、リスト形式より良かった • 自分のイメージと合致する印象語を探すのが大変だった • 選択位置を微調整するのが面倒だった

② 生成されたフォントの妥当性検証 - 検証目的 [HCI186] この2つを1:1で融合 すれば明るさ+1に 提案システム 明るさ+1の フォントがほしい 明るさ -1 ユーザ 明るさ +3 明るさ +1？？

② 生成されたフォントの妥当性検証 提案システム 明るさ+1の フォントがほしい - 検証目的 [HCI186] この2つを1:1で融合 すれば明るさ+1に システムによって生成されたフォントが ユーザの意図通りの印象をもっているかが未検証 明るさ -1 明るさ +3 ユーザ 明るさ +1？？

② 生成されたフォントの妥当性検証 - 検証概要 • フォントの印象評価データセットを構築 ▸大学生65名に協力を依頼 ▸任意のフォントで提示された文章を見て 35の形容詞対に対して7段階（-3〜+3）で評価 • ベクタフォント・数式化フォント 融合フォント（25%-75%, 50%-50%, 75%-25%） • 構築した印象評価値を用いて仮説を検証 複数のフォントを任意の割合で融合したフォントは 各々のフォントの印象値を同様の割合で融合した印象をもつ

検証方法 融合フォントの期待値と実測値のコサイン類似度を計算する • 期待値 ▸ベクタフォントの印象評価値から算出した印象値 • 実測値 ▸データセット構築から得られた印象評価値

数式化フォントとベクタフォントがもつ印象の類似度 フォントを数式化する際、印象構造が変化していないことを確認 GT3(ベ) GT7(ベ) MC3(ベ) MC7(ベ) MG4(ベ) NMG(ベ) KY4(ベ) GT3(数) GT7(数) MC3(数) MC7(数) MG4(数) NMG(数) KY4(数) LK5(数) EK5(数) HL3(数) SR7(数) KB5(数) CS9(数) ST5(数) HT5(数) TR3(数) TM3(数) HP3(数) HB3(数) RO7(数) 0.94 0.36 0.85 0.24 0.57 0.64 0.79 0.01 -0.01 -0.27 -0.44 0.25 -0.56 0.02 0.31 0.06 0.64 0.38 -0.29 0.09 0.48 0.93 0.44 0.73 0.26 0.21 0.28 0.49 0.37 -0.27 -0.48 -0.49 -0.62 0.05 -0.29 -0.60 -0.10 -0.40 -0.54 0.23 0.72 0.41 0.89 0.53 0.35 0.35 0.90 0.32 -0.02 -0.10 -0.40 0.31 -0.72 -0.20 0.06 -0.28 0.63 0.11 -0.46 0.14 0.25 0.86 0.56 0.95 -0.02 -0.09 0.45 0.74 0.28 0.13 -0.43 -0.30 -0.61 -0.26 -0.53 -0.82 0.02 -0.58 -0.52 0.04 0.74 0.29 0.41 0.11 0.94 0.90 0.42 0.16 0.57 -0.54 0.15 -0.05 -0.28 0.67 0.60 0.13 0.45 0.36 -0.72 0.47 0.68 -0.07 0.25 -0.27 0.91 0.96 0.30 -0.21 0.39 -0.62 0.26 0.18 -0.15 0.74 0.79 0.51 0.49 0.68 -0.42 0.46 0.76 0.22 0.95 0.36 0.37 0.41 0.97 0.18 -0.13 0.03 -0.37 0.45 -0.54 -0.20 0.20 -0.04 0.81 0.32 -0.27 -0.06 LK5(ベ) -0.15 0.59 0.18 0.81 -0.04 -0.15 0.19 0.97 0.51 0.36 0.13 -0.38 -0.10 0.01 -0.43 -0.76 -0.05 -0.56 -0.62 -0.05 EK5(ベ) HL3(ベ) 0.03 0.58 -0.07 0.52 0.40 0.31 -0.07 0.74 0.84 -0.13 0.35 -0.56 -0.02 0.56 -0.06 -0.49 -0.19 -0.34 -0.79 0.31 -0.31 0.40 0.17 0.68 -0.31 -0.41 0.17 0.88 0.26 0.74 0.01 -0.20 0.11 -0.28 -0.57 -0.66 0.02 -0.55 -0.30 -0.35 SR7(ベ) KB5(ベ) CS9(ベ) -0.34 -0.49 -0.39 -0.28 0.22 0.21 -0.16 0.19 0.29 0.15 0.89 0.13 0.52 0.51 0.42 0.25 0.13 0.29 -0.22 0.09 0.38 -0.50 0.41 -0.28 0.23 0.29 0.61 -0.35 -0.35 -0.17 0.03 0.92 -0.35 -0.16 0.43 0.36 0.70 0.57 0.03 0.31 -0.48 -0.36 -0.54 -0.34 0.03 0.02 -0.50 0.15 0.35 0.38 0.71 -0.22 0.91 0.50 0.21 0.32 -0.13 0.14 0.09 -0.29 ST5(ベ) HT5(ベ) TR3(ベ) TM3(ベ) HP3(ベ) HB3(ベ) RO7(ベ) 0.22 -0.07 -0.23 -0.23 0.78 0.74 -0.15 0.02 0.65 -0.56 0.64 -0.19 0.15 0.93 0.67 0.32 0.08 0.37 -0.59 0.56 0.55 -0.39 0.07 -0.55 0.84 0.89 0.21 -0.41 0.20 -0.61 0.45 0.31 0.03 0.71 0.95 0.70 0.50 0.81 -0.27 0.45 0.29 -0.72 -0.07 -0.87 0.39 0.50 0.01 -0.80 -0.30 -0.28 0.24 0.50 0.32 0.32 0.78 0.97 0.42 0.87 0.43 0.02 0.68 -0.17 0.82 0.03 0.45 0.49 0.92 0.03 -0.16 0.13 -0.09 0.67 -0.24 -0.09 0.47 0.27 0.98 0.60 -0.18 -0.14 0.68 -0.45 0.39 -0.49 0.74 0.82 0.53 -0.44 -0.06 -0.36 0.21 0.62 -0.06 0.41 0.88 0.74 0.80 0.92 -0.09 0.20 -0.33 -0.37 -0.20 -0.36 -0.65 -0.53 -0.26 -0.56 -0.79 0.28 -0.32 0.23 0.22 -0.56 -0.26 0.26 -0.20 0.02 0.97 -0.45 0.30 0.00 0.01 -0.01 0.56 0.51 0.11 -0.04 0.39 -0.71 0.32 0.15 -0.40 0.45 0.42 0.00 0.11 0.15 -0.59 0.87

実測値との類似度がどの割合の期待値で最も高い値だったか 3種の割合で融合した実測値と、5種の割合で算出した期待値 との類似度の中で最も高い値を示したものを集計(%表記) • 4名以上に評価された画像を対象とした • 同じ割合の期待値との類似度が最も高くはならなかったが、 どちらかに引っ張られる傾向がみられた 100%-0% 75%-25% 50%-50% 25%-75% 0%-100% 実測値(25%-75%) 2.65 3.54 14.16 25.66 53.98 実測値(50%-50%) 19.47 8.85 17.7 19.47 34.51 実測値(75%-25%) 51.26 21 18.49 5.31 4.2

仮説の検証 複数のフォントを任意の割合で融合したフォントは 各々のフォントの印象値を同様の割合で融合した印象をもつ

仮説が棄却された原因の調査 実測値が融合対象フォントの印象範囲内に入る割合・期待値を算出 印象範囲から逸脱している! 印象範囲内に入っている" 明るい 暗い 実測値 -2.5 -2 実測値 -1 +3

分析結果 因子ごとの分析 • すべての因子で期待値を上回っている 取り得る印象値の範囲 取り得る印象値の範囲 範囲内に入る期待値 範囲内に入る期待値 範囲内に入る割合 範囲内に入る割合 期待値と実測値との距離 期待値と実測値との距離 サンプル数 フォントごとの分析 サンプル数 楽観性 魅力度 迫力度 近代性 装飾性 全体平均 楽観性 0.737 魅力度 0.707 迫力度 1.214 近代性 0.873 装飾性 0.864 全体平均 0.883 0.737 0.123 0.123 0.383 0.383 -0.200 -0.200 374 374 0.707 0.118 0.118 0.337 0.337 -0.366 -0.366 374 374 1.214 0.202 0.202 0.499 0.499 -0.320 -0.320 374 374 0.873 0.145 0.145 0.410 0.410 -0.350 -0.350 374 374 0.864 0.144 0.144 0.433 0.433 -0.096 -0.096 374 374 • 魅力度・迫力度において全体平均を下回るフォント群 • 装飾性以外の4因子において全体平均を上回るフォント群 0.883 0.147 0.147 0.412 0.412 -0.275 -0.275 374 374

フォントごとの分析 魅力度・迫力度において全体平均を下回るグループ • 角張った形状・ウロコなどの装飾をもった形状 → 数式化する際、円の軌跡で表現しようとした結果 芯線が歪になり、円の半径の増減が急に

フォントごとの分析 装飾性以外の4因子において全体平均を上回るグループ • 筆書体系のフォント → 円の軌跡で表現しやすいため、 芯線が安定し、円の半径の増減も緩やか

結果のまとめ - 提案インタフェースの妥当性 • 使用実験 ▸提案手法 > 従来手法 ▸印象空間を操作することへのポジティブなコメント • 生成されたフォントの妥当性検証 ▸概ね期待通りの印象をもつ 課題 • 期待から逸脱する可能性が高い組み合わせの考慮 • 角張った形状や装飾のある形状にも対応した フォント融合手法の検討

本研究の貢献: コミックの文字デザイン支援 • セリフや描き文字（手書きの擬音語・擬態語）のデザイン支援 [JSAI2017][JSAI2018][MMM2019]

本研究の貢献: 文字表現で音楽の印象強調 • 音楽の印象に合わせて歌詞の字体を変える [Nonaka, 2019] ▸悲しい・楽しい・かわいいなどを表現可能 ▸激しい・怒り・荘厳などを表現するのは難しい（動きや色）

背景 研究目的 従来のインタフェースでコンテンツの印象に合った 文字デザインを行うことは難しい ユーザのデザインに関する知識や経験に依存せず 文字デザインが容易なインタフェースの実現 手法 ① フォントを数式化し融合する手法 ② フォントの印象空間を操作することで動的にフォントを 生成するインタフェース 実験 • 従来インタフェースとの比較実験 • 生成されたフォントの妥当性の検証 結果 • 提案手法 > 従来手法 • 任意の組み合わせで融合されたフォントは 概ね期待通りの印象をもつ