「モリサワ×さくらインターネット Webフォントの夕べ in 大阪」レポート

こんにちは。ベニヤマです。
2016年6月にフォントメーカーのモリサワとさくらインターネットが協業してさくらのレンタルサーバのWordPress上で「Typesquare」のWebフォント30書体が使えるプラグインをリリースされたということで、2016年9月12日に開催された「モリサワ×さくらインターネット Webフォントの夕べ in 大阪」に行ってきました。

目次

  1. WEBフォント最新事例紹介
  2. TypeSquare新機能紹介
  3. なんでも、つくれるアイコンフォント
  4. さくらのレンサバ×TypeSquareの導入方法と活用Tips
  5. 最後に
  6. おまけ

WEBフォント最新事例紹介

まずは株式会社モリサワさんによるWEBフォントの重要性と最新事例についてです。
まずWEBフォントのメリットとして

  • CIやVIのフォントが印刷物とWebで統一できる
  • 見出しを画像にしなくてもよいので構築や修正の手間が省けて、かつSEO対策になる
  • 改行位置をHTMLやCSSで調整できるのでレスポンシブサイトとの相性が良い

などを紹介。
またWEBフォントを使った最新事例を「ブランドサイト」「ブランドサイト」「イベントサイト」「コーポレートサイト」「キャンペーンサイト」の5つに分けて紹介。後で紹介されたサイトをいくつか見ましたが、どのサイトのWEBフォントも画像にしか見えなかったです。
その中で一番感心したのはモリサワのコーポレートサイトでした。
モリサワは「読みやすく、かたちを分かりやすく」をコンセプトにUD書体を開発し、自身のサイトに採用したんですが、なんとPC版とスマホ版で書体を変えているんです。 理由はPC版とスマホ版では文字サイズも改行位置も異なるから。だから文字が小さくても読みやすいように、また改行位置がきれいに見えるように書体を切り替えているそうです。デバイスで切り替える発想はフォントメーカーならではと感心しました。

TypeSquare新機能紹介

こちらも株式会社モリサワさんによる「Typesquare」のWEBフォントの表示スピードと文字詰め機能に関するご紹介。
日本語Webフォントには表示スピードの問題が付きまといます。この問題を解決するために不要なフォントを削除してから(サブセット化)Webサーバーにアップロードする方法が多いですが、Typesquareは想像を超えてました。
WEBフォントで表示する文字をjavascriptで書体別に分析し、サーバーに送信。次にサーバー側で必要な文字と文字情報を抽出して、最後に抽出した文字と文字情報をWEBサイトに返して元の文字の位置に沿って表示します。 これは目からウロコです。執念すら感じます。
更にCSS3の"font-feature-settings"プロパティで設定すればTypesquareのWebフォントに対して文字詰めができるようになったとのこと。Webサイト制作で半ば諦めていた文字詰めができるようになったのは驚きです。
静かな口調からフォントに対する情熱が垣間見えるプレゼンでした。

なんでも、つくれるアイコンフォント

さくらインターネットのUXデザイン担当さんによるアイコンフォントの作り方紹介。「さくらのVPS」という仮想サーバーサービスのコンパネに導入したアイコンフォントの作り方について話してくれました。
元々はFont Awesomeを導入していましたが、それだけじゃ足りないのでIllustratorと「Icomoon」というアイコンフォント作成サービスで自作したそうです。
更に話は進みアイコンフォント作成のポイントを紹介。
「作成前にWebサイトの本文フォントサイズを決める」「Illustratorのアートボードにグリッドを表示させて、矩形は必ずグリッド上に乗せる」などかなり具体的なポイントを教えてくれました。実は私も昔アイコンフォントを作って失敗してるんですが、これなら作れる気がします!

さくらのレンサバ×TypeSquareの導入方法と活用Tips

最後にさくらインターネット様によるwordpressプラグインの導入と活用方法です。
今回リリースされたWordPressプラグインはさくらのレンタルサーバーのスタンダードプラン以上かマネージドサーバーに契約すれば30書体限定で月間2.5万PVまでなら無料で使えるもので、プラグインの導入から書体の設定まで最短5分で可能というものでした。
以前デモを拝見したことがありますが、このプラグイン結構便利だなぁと素直に感心しました。
というのもWordPressの管理画面から 「見出し(h1〜h3)」「リード(h4〜h6)」「本文」「強調(strong)」 の各書体をあらかじめセットされた「フォントテーマ」で一括で設定できるのはけっこう楽です。もちろんフォントテーマの自作するのも可能で、Webサイトの制作会議のデモに使えそうです。
またこちらも表示速度について言及していて、実際に40000文字の表示テストを行ったそうです。
結果は表示スピードがWebフォントがoffの場合は2.5秒、onの場合3.4秒。またデータ読み込み量もon状態だとoff状態より262kb増量するとのことです。 「この結果に対して速いか遅いか感じるのは人それぞれ」と話していましたが、結構速いと思いますよ。
あと「大抵のWebフォントは見出しに使うくらいなら20kb〜50kbで収まる。画像1枚より小さい。」という言葉がなんだか納得してしまいました。

最後に

今回のセミナーを受けた直後、真っ先に思ったのは「Webフォント早よ浸透して」でした。
いや、ある程度は浸透していると思いますよ。でも中小企業のサイト制作が多いせいなのか、 私の周りはアイコンフォントは普及しているけどWebフォント導入自体はまだまだという印象です。理由はバリエーションが少ないとか表示スピードが遅いとか、でしょうか?自分のサイトにもGoogleの"Noto Sans Japanese"を使っていますが「そろそろ違う日本語フォントも使ってみたいなぁ」と憧れを抱いたセミナーでした。
そうそう。受付で名刺の提示を求められたのは意外でした。参加者の確認のためでしょうか?

おまけ

会場で資料とステッカー、さくらインターネット様のおみくじクッキー、お茶をいただきました。おみくじの結果は 「ラッキーアイテムはサーバー。専門店で奇跡の出会いがあるかも♪」でした。ヨドバシカメラに行けばいいのかしら。

Sponsored link

コメント