Keywords: タイポグラフィ, 看板文字, バリアブルフォント, 書体の変形
1.はじめに
昨今の社会には文字が溢れ、書体・フォントに対する人々の関心も高まっている。またスマートフォンやタブレットPCの普及によって、ディスプレイに映る文字を見る年齢層も広がっており、文字のビジュアルが与える印象には、先の時代より多くの注目が集まるようになっている。
そして近年、文字の印象を形作るという点で全く新しい特徴を備えた「バリアブルフォント」が登場した。これは文字の大きさや太さの調節を、連続したアニメーションのように捉えられる「変形する書体」である。静止していることが当たり前の文字が滑らかに流動する様子は、多くの人々にとって新鮮な驚きを感じさせる。
筆者は、このビジュアル面での新たな表現を活かすことで、人々が今よりも文字の見た目と印象を楽しみ、関心を寄せるきっかけを作れるのではないかと考えた。
また本来のバリアブルフォントは活字書体をベースにしているが、より著しい印象変化を楽しめるモチーフとして「看板の手描き文字」という題材が挙げられる。これらにはユニークな外観が多く見られることから、印象を変化させることに期待が持てる。
以上を踏まえ本研究では、バリアブルフォント特有の表現である「変形」を活かしたWebコンテンツを開発する。看板の手描き文字（以下、看板文字）の変形を見ることで、文字ごとに印象の面白さがあることを再認識し、関心をより高められる体験を目指す。
2.研究の目的
本研究では、バリアブルフォントを用いた、文字の印象変化を体験するコンテンツの開発を行う。ブラウザ上で稼働させ、スライダーのドラッグ操作によって体験者本人が文字を変形させる形式での実装を目指す。
印象変化の体験を通して、文字のビジュアルから与えられる印象の面白さを改めて実感し、文字への関心をより深めてもらうことを目的とする。
3.先行事例との関連
スライダーの操作によって印象変化を体験するコンテンツの前例として、BIO MOTION LAB製作の『BML Walker』[1]が挙げられる。これは、点の集合と運動の、バランスの変化によって、点が表す人体の感情・性別などの個体差を体感できるWebコンテンツである。感情などの尺度をスライダーで調整すると、人体を表す点の動きが変化する。画面に説明は無いが、操作はドラッグのみとシンプルであり、体験者に分かりやすい作りとなっている。また、外観は白・黒・グレーを基調としてなるべく装飾を排しており、体験者の視線は、コンテンツの主役である点の運動にのみ集中できる。これを参考に、誰にでも分かる単純な操作と、メインの体験に意識が向く外観の2要素を、筆者のコンテンツに反映させる。
また、看板文字を題材とした活動として『のらもじ発見プロジェクト』[2]が挙げられる。このWebコンテンツは写真上の看板名をユーザーが書き換えて楽しむことができるが、文字が変形するものではない。文字のビジュアルとイメージの変化には、高い独自性があると言える。
4.調査と分析
バリアブルフォントはまだ未開拓の分野であるが、フォント作成用の専用ソフト「Glyphs」で実装可能である。操作はAdobe illustratorと似ており、点と曲線を繋げて文字の輪郭を描く。バリアブルフォントではこの描画データを2つ用い、点と線の座標を移動させることで変形を描写している。この仕組みを利用し、繋ぎ方を工夫する事で、変形に特徴を出せることが分かった。
またバリアブルフォント作成の参考資料とするため、世田谷区祖師ヶ谷大蔵の商店街で看板文字を蒐集するフィールドワークをおこなった。駅側から奥へ進むうちに明らかに活字書体ではない看板文字を複数見つけ、スマートフォンで撮影、採集した。新規に開発された駅側から古い店舗が残る奥へ進む中で、既成の書体ではない手描きの風合いある看板文字を複数発見できた。
5.成果物
5.1.コンセプト
看板文字のイメージ変化を見ることで、文字のビジュアルと印象への関心を、より高められるコンテンツ。
5.2.概要
ブラウザ上で稼働するコンテンツである（図1）。画面上部にあるスライダータブのドラッグに合わせて、「クリーニング」の看板文字が変形する仕組みになっている。
この看板文字の変形とそれに伴うイメージ変化の体験を通して、人々が文字への関心をより高めることを狙う。
以下、コンテンツを要素ごとに解説する。ページ作成、操作、画像、文字の４点に分けて詳細に述べる。
まずページはHtmlで記述しており、mekkablue氏が作成したバリアブルフォントの稼働テスト用スクリプト[3]を元にして装飾を施している。本研究ではこの著作権を遵守する理由もあり、オンラインでの実装は行わない。
次に操作については、先行事例との関連で述べた通り、なるべく多くのユーザーに体験を楽しんでもらうため、要求する操作をスライダーのドラッグのみに絞っている。また開発側の操作として、ページ下部に隠れたテキストボックスにキーボード入力を行うことで、看板に表示される文字を変更できる機能を付属させている。
画像については、店舗を正面から捉えた写真を背景として配置した。これは、看板文字と店舗を一体とすることで、自然のままの看板文字の風合いをできる限り再現する為の工夫である。また店主の許可を得て看板部分を無地に加工しており、ここで文字の変形が展開される。
そして文字については、イメージ変化に著しい緩急が見込めるバリアブルフォントを採用した。先端が丸く曲線的なものと、先端が鋭く直線的なものから構成されている。スライダーを右へドラッグすると、丸く柔らかい輪郭から、四角く鋭い輪郭に変形する（図２）。また勿論、左へ動かせば反対のイメージ変化を楽しむことができる。
6.評価と考察
6.1.評価方法
普段からノートPCを使用している友人2名に、実際にコンテンツを体験してもらった。操作と体験を経ての感想を聞き、その結果を元に、考察を行う。
6.2.結果と考察
まず操作において、ドラッグ操作のみはやや単調に感じたが、純粋に変形を楽しめたと感想を得た。この結果から、一つに絞られた操作は許容され易い一方で、年代によっては飽きを感じる要因にもなると考えられる。
そして体験においては、丸から四角く変わるのが楽しい、他にも動く看板文字があれば見たい、等の感想を得た。この結果から、文字の変形は現代の人々に受け入れられる表現であり、ユニークな印象の多い看板文字はユーザーを惹きつけるモチーフとして有効であると見られる。加えて他の変形バリエーションが求められた点から、文字への関心をより高めることも出来たと考えられる。
7.おわりに
本研究を通して、筆者自身も文字への関心をさらに高めることが出来た。バリアブルフォントや看板文字に加え活字書体にも今まで以上に目を向け、Glyphs以外の手法でも表現したいと考えている。そして何より、文字の印象を楽しむ、という原体験を大切にしていきたい。
参考文献
[1] BML Walker
[2] のらもじ発見プロジェクト
http://www.noramoji.jp
[3] Variable Font Test HTML.py / mekkablue
https://github.com/mekkablue/Glyphs-Scripts/blob/master/Test/Variable%20Font%20Test%20HTML.py