情報処理学会 インタラクション 2018
IPSJ Interaction 2018

2B26
2018/3/5

フォント警察：ディープラーニングを用いたフォント選択支援ツール鈴木 眞生1,a)

鈴木 優1,b)

概要：フォントにはそれぞれ形状に特徴があり，フォントの外観的特徴は，読み手が文字列から読み取る印象を変える可能性を持つ．そのため，文字列の内容とフォントの印象とが合致していない印刷物等は，読み手に文字列の内容とは違った印象を与えてしまうことがある．本研究では，フォントを選択する知識や技能のことを「フォントリテラシ」と呼び，フォントリテラシが乏しい人へのフォント選択の支援を目的に，文字列の内容とフォントの印象とが合致しているかどうかをディープラーニングを用いて判断し，適したフォントの種類の提案をするツールを開発した．

Font Police: Tool to Support Font Selection Using Deep Learning
Mao Suzuki1,a)Yu Suzuki1,b)

Abstract: Each font has a feature in its shape. The appearance features of fonts have the potential to change
the impression we read from a string. Therefore, a character string in which the content of the character
string and the impression of the font do not coincide may give the reader a diﬀerent impression from thecontent of the character string. We called knowledge and skills to select fonts as ”Font Literacy”. For thepurpose of supporting font selection for people with poor font literacy, we developed a tool ”Font Police”
that deep learning suggests the type of font suitable for the string.

1. はじめに「フォントリテラシ」と呼ぶこととし，フォントリテラシが乏しい人へのフォント選択の支援を目的に，文字列の内容およそ目にしない日はないほど，街には 「創英角ポップとフォントの印象とが合致しているかどうかを自動的に判体」と呼ばれるフォントで書かれた印刷物が溢れている．

断し，適したフォントの種類の提案をする掲示物作成用のポップ体は多くの PC に標準搭載されている．また，文字ツールを開発を行った．の線が太く視認性も高いため，目立ちやすいフォントであると言える．そのため「印刷物の文字を目立たせたい」と2. 関連研究いう理由で使われやすいのではないかと考える．しかし，システムによって文書やデザイン描画を支援する研究にフォントにはそれぞれ形状に特徴があり，フォントによっは文献 [2], [3] などがある．文献 [2] は遺伝的アルゴリズムて受ける印象もそれぞれである [1]．そのため，印刷物等をを用いてレイアウト案を創出しファジィ推論を用いてそ作成する際には，内容に適したフォントを選ぶことが重要の印象を評価し，ポスター作成を支援している．また，文である．

献 [3] は印象に関するアンケートから多変量統計解析の一

本研究では，フォントを選択する知識や技能のことを手法である数量化 I 類を適用して感性モデルを構築し，文書のフォーム（配置やフォントなど ）作成を支援してい1a)b)

宮城大学
Miyagi University, 1-1Gakuen, Taiwa-cho, Kurokawa-gun,
Miyagi 981-3298, Japan
p1422054@myu.ac.jp
suzu@myu.ac.jp© 2018 Information Processing Society of Japanる．これらの研究ではユーザが求めるイメージのデザインを生成することはできるが，本研究が目的とする，フォントをユーザ自身が選ぶ際の支援，及びフォントリテラシの620

情報処理学会 インタラクション 2018
IPSJ Interaction 2018

獲得という点が不十分である．

3. 文字列の印象とフォント

2B26
2018/3/5

一連の流れを繰り返すことでユーザは徐々にフォントリテラシを獲得できるようになっていく．図 2 に吹き出し表示
時の画面イメージを示す．

文字列の情報は以下のように分類される [4] ．
文字列の情報文字列そのものが伝える内容
文字列の視覚的情報
フォントや文字の太さ，色等から読み手が受ける印象による情報目立たせるという目的で使用されることが多いポップ体
は，太めの線や丸みを帯びたフォルムが特徴的で，図 1 のように適さない箇所でこのフォントを使用すると，目立たせたいという目的とは別に子供っぽさやチープな印象を与えてしまう事がある．このようにフォントのような視覚的情報は，読み手が文字列から読み取れる印象を変えてしま

図 2

フォント警察 (画面イメージ)

う恐れがある．

5. フォント警察の実装について
5.1 word2vec
5.1.1 word2vec の概要
word2vec は，「フォント警察」を開発する上で，文字列とフォントとのマッチングを学習させるデータセットを作成のためのフォント毎の単語の分類及び，「フォント警察」で文字を入力した際の文字列の認識に使用する．
図 1 文字列の内容とフォントの印象が合致していない例

コンピュータにとって，文字はただの記号でしかなく，その文字列がどういった意味なのかはコンピュータは計算

4. フォント選択支援ツール「フォント警察」
4.1 「フォント警察」の概要
このツールはフォントリテラシの乏しい人を対象にした掲示物を作成するための web アプリである．文字を画面上に自由に配置し，そのまま印刷ができる．ユーザが入力した文字列に対してフォントが適切かどうかをディープラーニングによって評価し，ミスマッチであればユーザにそれを伝える．今回は，多くの PC にインストールされており，使用頻度，及び普段目にする頻度が高い「明朝体」「ゴシック体」「ポップ体」について評価・マッチングを行う．

できない．例えば，ヒトは「りんご」と「apple」という2 つの単語を見れば，これらが「同じ意味である」ということが判断できるが，コンピュータにはそれが理解できない．word2vec は単語を 200 程度の次元のベクトルとして表現する．実数値のベクトルで単語を表現することで，コンピュータは単語を理解することができる．単語を実数値のベクトルで表現する考え方を単語の分散表現と呼ぶ．本
研究では日本語の Wikipedia の全文章から単語を学習したモデルを使用する．

5.1.2 word2vec による学習データセットの作成
word2vec により，単語を実数値のベクトルで表現することでコンピュータが単語同士の意味を計算できるように

4.2 画面と操作画面上に書かれた長方形の内部が印刷される範囲である．以降はこの範囲をキャンバスと呼ぶ．ユーザは印刷したい文字列を入力し，キャンバス上に配置する．フォント，文字の色，大きさ，位置は自由に決定できる．システムはキャンバスに配置した文字列と，その際設定したフォントとのマッチングを判定する．文字列に対してフォントが合なった．これを用いて，文字列とフォントとをマッチングの学習を行うデータセットを作成した．タイポグラフィの文献 [5] を参照し，「明朝体」「ゴシック体」「ポップ体」の3 つの書体から受ける印象を表 1 のように定めた．
それぞれの書体の印象に類似した単語を word2vec を用いて 10,000 語ずつ集め，それぞれ 200 次元のベクトル数値を取得し，学習のデータセットとした．

致していなければ吹き出しを出現させ，文字列に合ったフォントの種類をユーザに提示する．それを踏まえてユーザはキャンバス上の文字のフォントを再び選択する．この© 2018 Information Processing Society of Japan621

情報処理学会 インタラクション 2018
IPSJ Interaction 2018

2B26
2018/3/5

表 1 各書体から読み手が受ける印象

書体名

受ける印象

明朝体

信頼感，安心感，女性的，日本的

ゴシック体

力強さ，男性的，現代的ポップ体

ユニーク，親しみ

5.2 TensorFlow
5.2.1 Softmax 回帰
TensorFlow は Google がリリースした機械学習・ディー
プラーニング・多層ニューラルネットワークライブラリで

図 4ある．機械学習における様々な機能が予め用意されておフォント警察のシステム構成

り，今回は softmax という関数を使った学習を行った．
入力に対し，重みをかけ，さらにバイアスを加えたものを softmax 関数にかけることにより，入力がどの次元の出力になるのか，という確率を出す．その確率とその正解ラベルデータとを比較し，より誤差が小さくなるように重みを最適化していく学習方法である．図 3 は学習のイメージを示している．
今回は 200 次元のベクトル数値の入力から，明朝体，ゴシック体，ポップ体の 3 つのうち，いずれかの出力をする学習を行い，精度 74.93%という結果が得られた．

6. まとめと今後の展望
本研究では，フォントリテラシが乏しい人を対象としたフォント選択支援のための web アプリの開発を行った．
今後の展望として，フォントリテラシという単語の浸透，一般化を目指し，web アプリ以外のインターフェースでのフォント警察の展開が上げられる．また，文字列とフォントとのギャップによって，読み手を混乱させる印刷物が減少することが期待できる．
参考文献
[1]

[2]

[3]
図 3 softmax 回帰のイメージ図 *1

[4]
[5]

5.3 フォント警察のシステム構造
文字列の入力やサーバへの送信等のアプリの動作部分

向井 志緒子. 和文書体フォントの印象に関する因子構造の探索的検討と分類. 日本デザイン学会研究発表大会概要集,
Vol. 60, No.0, pp. 221, 2013.
尾畑 貴信，萩原 将文．感性を反映できるカラーポスター
作成支援システム．情報処理学会論文誌，Vol.41，No.3，pp.701-710，2000．
石場正大，池田尚志，筈井隆史，武村浩司，稲木義弘，小竹めぐみ．感性モデルを組み込んだ文書作成支援システムの提案．情処学研報，vol.97, no.2, 71-78, 1997
石原 次郎, 熊坂 亮. フォントの違いによるイメージの伝達効果. 独語独文学研究年報, Vol. 29, No.0, pp. 25-40, 2002.
大崎 善治．タイポグラフィの基本ルール デザインラボ プロに学ぶ，. 一生枯れない永久不滅テクニック．SB クリエ
イティブ，2010.

及び，ディープラーニングの部分は Python3.6 と web ア
プリケーションフレームワークの Flask，HTML5，CSS，JavaScript を使用した．ユーザが入力した文字列をサーバに送信した後，mecab を用いて分かち書きをし，各形態素を word2vec によって 200 次元のベクトル数値に変換する．
こうすることで，TensorFlow の学習済みモデルに入力することができるようになる．この学習済みモデルを以降，分類器と呼ぶ．この分類器は入力された形態素のベクトル数値に対して，適切だと思われるフォントを返す．このフォントとユーザが選んだ書体とが合致していない時，web ア
プリ側にその旨と，適切な書体名を表示する．図 4 にフォント警察のシステム構造を示す．

*2

https://www.tensorflow.org/get started/mnist/beginners© 2018 Information Processing Society of Japan622