イベントレポート2016.11.30
BOHRフェスティバル～文字のデザインから見るWebの未来～(第三部)
5/30(月)に「文字のデザインから見るWebの未来」をテーマにしたBOHRフェスティバルを開催しました。初開催となる今回は、4組のゲストをお招きし、「文字のデザイン」をテーマにお話いただきました。
第三部ではtype.center管理組合の萩原俊矢氏、花村太郎氏をお招きし、「使ってみよう！Webフォント～フォントの種類とその活用方法～」についてお話ししていただきました。
使ってみよう！Webフォント～フォントの種類とその活用方法～
type.center管理組合とは？
萩原様と花村様が所属されているtype.center管理組合とはどういったグループなのでしょうか？まずはtype.center管理組合についてお話しをいただきました。
「type.center管理組合とは萩原俊矢、花村太郎の二人のユニット名です。普段はフリーランスのWebデザイナーとして二人とも働いていますが、その合間に二人でtype.centerというWebサイトの開発と管理をしています。
type.centerは『文字による文字のための文字のサイト』で文字に関するさまざまな情報を取り扱っているニュースサイトです。また、type.centerのWebサイト内では国内外のさまざまなベンダー(Webフォントを提供している会社)が提供しているWebフォントを使用し、サイト全体で120種類ほどのWebフォントを使用しています」
Webフォントを使った感想とWebフォントの可能性
Webフォントをたくさん使用すると以前はWebサイトの読み込み速度がとても遅くなりましたが、現在の状況はどうなのでしょう？次にWebフォントを使った感想とWebフォントの可能性についてお話しをいただきまし
「Webフォントには大きく分けて3つの種類があります。欧文フォント、日本語フォント、アイコンフォントの三種類です。それぞれの特徴をご紹介いたします。
1.欧米フォント
欧文フォントは『Helvetica（ヘルベチカ）』など王道のフォントから実験的な書体などたくさんのものがあります。
代表的なベンダーは『Google Fonts』など無料のものもあれば、『Hoefler & Co.』や『Fonts.com』などのように年間契約をすると好きな書体が使い放題になるものもあります。ただ、こちらは毎年フォントを維持するのにお金がかかります。年間契約をもう一度結ばないと使用していたフォントのライセンスが切れてしまします。例えばクライアントから作成を依頼されたWebサイトにこの年間契約のWebフォントを使用すると、毎年課金されてしまいます。
そういう方にオススメなのが、『セルフホステッド』フォントです。まだあまり一般的ではないですが、『セルフホステッド』とはフォントを購入したあと、そのフォントを自分のサーバーにアップロードして、必要なときにダウンロードして使うという方法です。この方法であれば、一回フォントを購入すれば、そのあとに課金されることはないので、一書体から購入されたい方にはぴったりです。『セルフホステッド』フォントを提供しているベンダーとして有名なのが『MyFonts』です。ただ、こちらのフォントはご自身のサーバーにフォントのデータをアップロードする必要があるので、ご自身のサーバーが安定していない場合は使用しないほうが良いでしょう。
2.日本語フォント
日本語フォントの特徴のひとつは文字数の多さです。欧文フォントは大体80～100文字ほどしかありませんが、日本語フォントは使用頻度が高い漢字を集めた『第一水準漢字』も含めると3000文字もあります。また、常用漢字にも対応させる場合はさらに7000文字に増えます。この文字数の多さのため日本語Webフォントを実装するとWebサイトの読み込み速度が遅くなってしまいました。しかし、近年ではデータ送信技術が発達し、使いやすくなった日本語フォントは様々なサイトで利用し始められています。
特に革新的だった新しいデータ送信技術は『ダイナミック・サブセッティング』です。『ダイナミック・サブセッティング』とはWebサイトで使用する文字を調べ、その必要な文字だけが入っているフォントファイルを動的に生成し、そのフォントファイルをダウンロードして使用する、という技術です。この技術を用いることにより、日本語でもフォントのファイルを軽量化して使用できるようになりました。
しかし、ダイナミック・サブセッティングにはいくつか問題点もあります。Webサイトに最初から文字が表示されている場合は問題ないのですが、一度Webサイトが表示されてから、JavaScriptなどで文字をWebサイトに追加した場合はWebフォントが適用されないというものです。こちらの問題は現在では、各ベンダーが対応しています。しかし、ベンダーによっては軽量化されたフォントファイルを生成するまでに時間がかかったりするなど、問題が残っている部分もあります。
日本語フォントを提供している主なベンダーは以下です。
現段階ではWebフォント実装の標準がないので、それぞれベンダーによって実装の仕方やプランが違います。日本語Webフォントを使用される際は自分に合った最適なフォントとベンダーをお探しください。
3.アイコンフォント
『フォント』というと文字を想像しがちですが、実はもう一種類アイコンをフォントデータとして利用することができる『アイコンフォント』というものもあります。
アイコンフォントは1990年のWindows3.1の時代から存在しましたが、現在では『Grunt』や『Gulp』といったタスクランナーを使用することによってSVG形式のアイコンがあれば、簡単に独自のアイコンフォントを生成することができるようになりました。『Grunt』や『Gulp』などのタスクランナーは簡単にいうとWeb制作における様々な処理を自動化してくれる技術です。例えば、Webサイトで使用する複数のJavaScriptファイルを一つにまとめたり、自動的にCSSやJavaScriptなどのファイル圧縮(minify)を行ったりすることができます。
こういったタスクランナーの便利な機能の一つとしてアイコンのSVGファイル(Illustratorで作ったベクトル画像形式)をタスクランナーに読み込ませると、そのファイルのフォントデータを生成してくれるという機能がありました。
このアイコンフォントは様々なところですでに実装されています。例えばTwitterのハートのアイコンやリツイートのアイコンなど『rosetta-icons-regular』という公開されているアイコンフォントを使用しています。
また、最近ではアニメーションの一コマ一コマをアイコンフォントにして、JavaScriptで切り替えることによってアニメーションを作りだすこともできます。このようにWebフォントとJavaScriptを組み合わせることによって、アニメーションをWebフォント化することもできます。
まとめとして、Webフォントは文字だけでなく、最近ではアイコンやアニメーションなどにも使用され、いわば新しい『画像形式』となりつつあります。Webフォントを使用すれば文字の色やサイズを自由自在に変更できますし、影などもCSS3の『text-shadow』プロパティを使えば色や大きさ、影の位置などを自由自在に作ることができます。また、近年ではRetinaディスプレイという画面解像度の高いディスプレイ対応なども進んでいますが、Webフォントを使用していただければ、こういったRetinaディスプレイなどでも綺麗に見せることが可能です」
今後のWebフォントの可能性
どんどん進化していくWebフォントですが、今後はWebフォントのどういったところに注目するべきなのでしょう。最後に今後のWebフォントの可能性について、お話をいただきました。
「まず注目するべきは色つきフォントです。例えば『type.center』のページ下部に表示されているページの言語を切り替えるための日本、韓国、そして台湾の国旗ですが、実はこちらは3つともWebフォントで作られています。例えば日本の国旗ですが、赤い丸の部分の記号と青い枠の部分の記号と二つ用意します。そこからCSSを使用し、青い枠の部分に対して『position:relative;』と『left:-1em』をかけることにより一文字分左にずらし、赤い丸の部分と重ねています。このように、アイコンのそれぞれの色のパーツを別で作成し、CSSで重ねる、という技術も出てきています。
また、2015年の欧米の流行語大賞に『絵文字』が選ばれました。受賞したのは『Face with tears of joy(喜びの涙を流す顔)』で、イギリスとアメリカで最も使用率が高い絵文字です。こういった絵文字も会社によって実装方法が異なります。AppleはすべてPNG形式で表示していますが、WindowsはWindows8.1からOpenType(TrueType)フォントというアイコンフォントが追加され、そちらを利用して絵文字を表示させています。
他にもMETAFONTというフォント作成に特化したプログラミング言語やそのMETAFONTを使用したオープンソースのフォントジェネレーター『metaflop』もあります。こちらは文字の太さ、間隔、重心などを操作し、独自のフォントを生成することができます。Adobeも『Project Faces』というフォントジェネレータを発表しています。こちらはiPadを使用し、書体の太さ、横棒、傾斜や曲線など細部まで調整が可能です。
さらに冒頭部分でご紹介したダイナミック・サブセッティングですが、最近では『スタティック・サブセッティング』という技術の開発に力が入れられています。こちらはWebサイトで使用する文字を調べ、その必要な文字だけが入っているフォントを動的に生成するダイナミック・サブセッティングと違い、先ほどご紹介したGulpなどの自動化ツールを使うことによって、大きなフォントファイルをWebサイトに必要な文字だけが入っている小さいフォントサイズにあらかじめしておき、そちらを使用するという方法です。まだ現実では実装されていませんが、今後こういった技術が開発されてくるかもしれません。
だんだんと文字の枠を超えて、新しい画像形式になりつつあるWebフォントですが、ぜひ皆さんも自分専用のフォントを作って、自分のサイトに組み込んでみてください」
ご自身のキャリアプランを相談したい方へ無料体験レッスン開催中
インターネット・アカデミーでは、毎日無料体験レッスンを開催しています。授業の体験をしていただくのはもちろん、お一人おひとりにニーズにぴったりのコースや学び方を選ぶお手伝いをします。ぜひお気軽にお越しください。