「モリサワ×さくらインターネット Webフォントの夕べ in 東京」に参加したレビュー

2016年6月、日本最大のフォントメーカーであるモリサワとさくらインターネットが協業し、「さくらのレンタルサーバ」上のWordpressサイトに、モリサワが提供しているWebフォントサービス「TypeSquare」のうち30種類の書体が月間2.5万PVまで無料で使用できるようになりました。

プレスリリース
https://www.sakura.ad.jp/press/2016/0629_morisawa/

この発表に伴い、7月27日に記念的イベント「モリサワ×さくらインターネット Webフォントの夕べ in 東京」が開催されました。今回はそのイベントに参加たレビューと、今後のWebフォントについての考察を紹介したいと思います。

ちなみに、「Webフォントの夕べ in 東京」は2016年秋にも開催予定だそうです。本記事では細かな内容までは紹介しないので、興味のある方は申し込んでみてはいかがでしょうか。

第一部「Webフォント最新事例紹介」

第一部は「Webフォント最新事例紹介」として、モリサワ エンタプライズ営業部の菊池さんより、WebフォントによってWebサイトにどのような恩恵があるのかが紹介されました。

デザイン全般において重要な役割のあるフォントをWebサイト上でより活用できるようになることで、VIやCIを強固にできるということ。これまで画像で表現していたテキストをフォントデータで管理することで、その構築やメンテナンスが飛躍的に楽になるということがその内容でした。

菊池さんのお話の中で特に面白いと思ったのは、「スマートフォンサイト表示用にコンデンスフォントを使用する」という概念です。今回「さくらのレンタルサーバ」で使用できるようになったフォントの中には、スマートフォンでの表示を目的とした二つのコンデンスフォントが含まれています。

みなさんコンデンスフォントってご存知ですが？Web業界の人はあまりなじみがないかもしれませんが、グラフィックデザインの仕事では大変重宝している代物で、フォントの各文字が細長く設計されていることで、少ない行数で多くの文字を表示することのできるフォントです。一文字一文字はただ横幅を縮めているのではなく、その幅で美しくなるように個別で設計されています。

上が幅90%のコンデンスフォント、下が通常のフォントです（モリサワWebサイトより引用）

このコンデンスフォントは、例えば文字数が限られている狭い領域などで用いられているので、スマートフォンサイトにはまさにうってつけです。文字サイズを小さくせず、つまり読みにくくせずに情報量を増やすことができるので、デザイン的にもユーザビリティ的にもいいことづくしです。コンデンスフォントをスマートフォン向けに用意するといのは、フォントメーカーならではの発想だと思いました。さすがはモリサワ、という感じです。

第二部「さくらのVPSコンパネでのアイコンフォントの利用事例」

第二部は「さくらのVPSコンパネでのアイコンフォントの利用事例」として、さくらインターネット UXデザイングループの河原さんより、さくらのVPSというサービスのコントロールパネルで導入しているオリジナルのアイコンフォントの事例の紹介でした。

さくらのVPSのコントロールパネルでは基本はFont Awesomeのアイコンフォントを使いつつFont Awesomeにないものは自作しているとのことで、その具体的な作成方法やアイコンフォントを導入することのメリットが紹介されました。

私もアイコンフォント導入には賛成派で、矢印や三角などの記号は極力アイコンフォントを使用するべきと考えています。圧倒的にコーディングやメンテナンスが楽になるからです。ですので都合のよいアイコンフォントが無い場合に自作しようという精神は素晴らしいと思いました。

第三部「モリサワWebフォント連携の概要と今後の展望」

第三部は「モリサワWebフォント連携の概要と今後の展望」として、さくらインターネット 技術本部 ビジネス推進グループの谷口さん・中島さんより、「さくらのレンタルサーバ」上のWordpressで具体的に「TypeSquare」のWebフォントを設定する方法や、今後さくらインターネットのサービスとしてどのような展開が予定されているのかが紹介されました。

「TypeSquare」を指定するためのWordpressプラグイン

「さくらのレンタルサーバ」上のWordpressで「TypeSquare」のサービスを利用するには、専用のプラグインを使用します。
TypeSquare Webfonts さくらのレンタルサーバ　プラグインページ

率直な意見を述べさせていただくと、このプラグインは改善の余地がかなりあるかな、という印象でした。

まず、かなりのWordpressビギナー向けに作られており、テーマを0から作るような人にとってはかえって使いにくそうな印象がありました。

それからこのプラグインは、フォントテーマを設定することで、見出しタグ（h1,h2,h3,entry-titleクラス）、リードタグ（h4,h5,h6）、本文タグ（hentryクラス）、強調タグ（strong,b）それぞれに、そのテーマに合った別々のフォントが指定されるというものなのですが、デザインの基本として、「使用するフォントの数はなるべく少なくする」というものがあります。

強調タグは本文タグに指定されたフォントの太字用のものが指定されているので問題ないですが、h1,h2,h3とh4,h5,h6と本文でフォントをバラバラにするのは、場合によってはデザインが損なわれかねないのでは？と思いました。

（プラグインの設定画面です。フォントテーマを選択すると、各タグ、クラスに対してフォントを指定してくれます。）

フォントには、見出しに適したもの、本文に適したもの、などの個性があるので、見出しと本文で二種類というならまだ許容範囲ですが、ちょっと注意が必要なプラグインだと思います。使用する場合は「カスタムフォントテーマ」機能を使って、使用するフォントを限定して使用された方がいいと思います。

さらに、「投稿・固定ページでフォントテーマ設定機能を表示する」という機能があり、投稿ごとにフォントを変えられる変えられるのですが…これは完全に余計な機能です。大切なことなので二回言いますが、デザインの基本として、「使用するフォントの数はなるべく少なくする」というものがあります。使用される方は、こちらの機能は使わない方が良いでしょう。

逆に欲しい機能としては、設定画面でフォントのビジュアルを確認できるとか、各フォントの解説の表示、各フォントが人に与える印象についての説明の表示など。利用者がTypeSquareのフォントに対しての理解を深めることができ、より的確に利用できるようになるものが必要かと思います。そのような機能が備われば、Webフォントの発展に貢献できる素晴らしいプラグインになるのではと思いました。

TypeSquareの表示速度

またこの会では、気になるTypeSquareの表示速度についての説明もありました。

表示速度について結論を述べますと「Google Noto Fonts」の日本語フォントより早いとのことです。理由としては、以下のGoogle日本語フォントが遅い理由が、TypeSquareでは解消されているからとのこと。

• いらない文字を配信している（サブセット化していない）
• 配信元が海外（Google）

表示速度を実際のサイトで見せてくれていましたが、確かにそこまで遅い感じはしなかったです。ただやはり自ら構築してみないとわからない部分もあるので、気が向いたら表示速度の比較測定でもしてみようかなと思います。

イベントに参加した感想総括

全体的にわりとビギナー向けな内容ではありましたが、これまでなんとなく「モリサワはWebフォントも出してるな～」くらいの認識だったものが、実際のどのような代物なのかをしっかりと確認できたのはよかったです。

この記事を書くにあたってモリサワのサイトできちんとWebフォントについてみてみたのですが、本当にクオリティの高いWebフォントがたくさんあるんですね。。。勉強不足でした。

「TypeSquare」はもともと月間1万PVまでは無料で使用できるので、今回の協業による展開は画期的な新サービスというより、Webフォントを利用するきっかけをつくる／利用の間口を広げることが目的なのでしょう（私もそれに引っかかった一人ですね）。今後モリサワがよりWebフォントに注力し、展開していこうという意気込みが感じられます。モリサワの菊池さん曰く、この先Webフォントでプロポーショナルの対応なども検討しているようで、そうなると本当にフォントのクオリティが上がってくるでしょう。非常に楽しみです。

Webフォントの進化による、今後のWebデザイナーの仕事について

デザイナーに求められる技術やデザイナーの仕事内容は技術の進歩とともに変化するのが世の常です。

Webデザイナーに関しては今後Webフォントやアイコンフォントが進歩することで、従来のようにデザインの画像データを作成してからコーディングするという手法から、画像のデザインデータを介さずに直接Webデータとしてデザインをオペレーションするようになるのではないかと思います。フォントやアイコンがWeb上でベクターデータとして扱われないのに、いったんベクターデータとしてデザインを作る意味がありませんからね。さらに、CSS3の登場以降あらゆる効果がCSSだけで表現できるようになっていますので、その流れにWebフォントの強化が拍車をかけるのではないかと思います。

その時、Webデザイナーの仕事が今より増えるのか、減るのかはわかりませんが、もしオペレーションが楽になって仕事量が減るなら、Webデザイナーはフォントの選定や調整、アイコンの作成など、よりグラフィックデザイン的な能力が求められるようになるのではと思います。

日々勉強せよということですね。。。

とりあえず、日本語webフォントはGoogle Noto Fonts一択という思考回路から、もう少し多様な選択肢があるということを認識することから始めてみます。