インタビュー
BiNDが切り拓く日本語Webフォントの未来
誰でも美しく作れるWeb制作ツールに迫る
BiNDが切り拓く日本語Webフォントの未来
誰でも美しく作れるWeb制作ツールに迫る
（2013/5/20 06:00）
デジタルステージの「BiND for WebLiFE*」は、6年以上の開発実績があるWindows・MacOS両対応のホームページ作成ソフト。5月30日には現行のマイナーバージョンアップ版となる「BiND for WebLiFE* 6.5」をリリースし、新たにWebフォントに対応する。
文字表示の見映えの良さから、すでに海外の欧文Webサイトでは採用例が増えつつあるWebフォントだが、日本語のWebサイトではいまだに大きな盛り上がりは見せていない。そんな中でデジタルステージがいち早くWebフォントをサポートした理由と狙いはどこにあるのか、同社の開発プロデューサー 平野友康氏と、BiNDのWebフォントに関わるバックエンドを担うソフトバンク・テクノロジーの関口浩之氏にお話を伺った。
導入すれば絶対に違いがわかるWebフォント
――新しい「BiND for WebLiFE* 6.5」でWebフォントを採用するに至った経緯について教えてください。
平野氏：
我々デジタルステージは、見た目も、中身も優れたWebサイトを誰でも簡単に作れるように、6年前から「BiND for WebLiFE*」というホームページ制作ソフトを開発してきました。単なるWebコンテンツの作成機能に止まらず、画像編集やショッピングカートの機能を追加したり、専用サーバーのサービスを始めてみたり、HTML5やｊQueryアニメーション、スマートフォン対応など、毎年毎年、必要と思われる機能をいち早く取り入れてきました。それまでは難しかったり不可能と考えられてきたことにもすぐに対応して、誰でも簡単に使えるようにする、というのをミッションに開発してきたんです。
そうした中で、最大の難関と思っていた要素がWebフォントでした。いろいろなハードルがあって実現できずにいましたが、1年半～2年前から日本語Webフォントを使えるようになったとき、即座にその可能性に注目し、どこよりも早く取り入れたいと思っていました。それが、ソフトバンク・テクノロジーさんと出会えたことで、可能になりました。
Webフォントには、欧文のWebサイトで使われ始めた4年くらい前から恋い焦がれていたんです。Webフォントを実際に導入してみれば、圧倒的に違うことがわかるんですよ。しかもBiNDであれば技術的な知識も必要なく、普通に使えちゃう。圧倒的に美しいWebサイトを作れる新しいバージョン6.5は、リリースするのが本当に楽しみです。
――日本語Webフォントの採用が進まなかった理由は何だったのでしょうか。
関口氏：
海外向けでは無料のGoogle Web Fontsとか、有料のFonts.comといったサービスがあって、見出しをきれいに見せるために使ったり、タイポグラフィー的に使っていたりします。和文で凝ったフォントを使いたいときは、普通は画像にするでしょうが、拡大したときにジャギーが出てしまいます。拡大しても破綻しないアウトラインフォントを使う方が間違いなくいいんですけども、HTML5やCSS3がわかっていなければならない、という技術的な問題がまずあるわけです。
それと、デザイナーであればMacにフォントワークス社やモリサワ社のフォントをインストールしている場合もありますが、ライセンス上Webフォントとしては使えなかったのも課題でした。
Webフォントにこだわる理由～最大の難関ながらも、最高に効果があるから
――なぜBiNDでそこまでWebフォントにこだわったのか、教えていただけますか。
平野氏：
もともと、予算をかけた大企業のWebサイトに負けないようなサイトを、誰でも作れるようにしたいという思いがありました。中小企業や個人事業主の方にこそ、見た目や内容の良いWebサイトが必要なのに、何百万円という単位でWeb構築費用がかかったりすると、戦えないじゃないですか。事業規模と関係なく世の中に広く伝えられるのがインターネットのいいところなのに。
技術的なことをいかに簡単にして、大きな予算をかけずに伝えられるようにするか、ということに毎年挑戦しているのが、我々のBiNDなんですね。そういった中で、Webフォントが最大の難関と言ったのは、これまではまだ機が熟していなかったというのもありますし、日本語Webフォントっていうのは、ライセンスだったりサーバーの設定の難しさがあったりする中である程度予算があってプロフェッショナルな管理者がいないとできないジャンルだったというのもあります。
ですが、Webフォントを使ったページを見ていただければわかる通り、すごくきれいなんですよね。AppleのRetinaディスプレイみたいに、それを体験する前はそこまでの解像度が必要なのかという話がありながらも、一度見ちゃうと戻れない。それと同じように、Webフォントを導入してしまえば圧倒的に違うので、もうそれ以外の選択肢はなくなるんだけれども、じゃあそれを誰ができるのかと。やっぱりプロしかできないのか。
BiNDでは、それまで難しかったことを誰でも簡単にできます、と常に言ってきた製品です。現状その中で、最高に難しくて最高に効果があるだろうというものがWebフォントだったので、最大の難関ながらも、どうしても実現したい悲願だったわけです。
ただ、ぶっちゃけて言うとWebフォントは、ただ使えるようになったというだけでソフトが売れる種類のものではないと思うんですよね。Webデザイナーなど一部のプロフェッショナルを除いて、まだWebフォントの良さが一般に認知されていないので、使ってみてはじめて良さがわかっていただける段階と考えています。
企業のWebサイト運営を担当している方がたまたま興味を持って使ってみたら非常に良かったという例は増えていますが、そういうことを100、200のWebサイトで始めてもなかなか世の中が変わっていかないんですね。BiNDは数万という規模のWebサイトで採用されていますから、それが全部Webフォント対応になって、Webフォントを使っているWebサイトが1万、2万という単位で増えていけば、日本語のWebフォント界が面白くなっていくんじゃないかなと。その初めのきっかけを我々が作れることになれば、ものすごくうれしいなあと思っているんです。
――BiND上ではどういった形でWebフォントを利用できるのでしょうか。
平野氏：
BiNDで作ったサイト自体は、ユーザーが用意した独自サーバーや他社のホスティングサービスと組み合わせて使うこともできますが、Webフォントを適用するときは、BiND専用のホスティングサーバー「WebLiFEサーバー」にアップロードして使います。Webフォントを使うには、仕組み上Webフォントを実装するためのサーバーが必要になるからです。
WebLiFEサーバーには、BiNDのパッケージ（プロフェッショナル版）に2年間の無料期間が付いてくる“ベーシックコース”と、有料の“プレミアムコース”がありまして、これらのコースにソフト上から申し込んでいただくと、Webフォントが利用できるようになります。事実上、BiNDユーザー全員にWebフォントを使っていただけることになります。
“ベーシックコース”では7書体、“プレミアムコース”では150書体をWebフォントとして用意しています。老舗フォントメーカーであるフォントワークス社の「ロダン」、「マティス」といった、デザイナーにはよく知られた、美しく使いやすいフォントがベーシックコースにも入っています。プロのデザイナーが、今までWebで使いたくても使えなかったようなフォントを、BiNDであれば使えてしまうんです。
現行のバージョン6のユーザー全員に無償アップデートで提供しますから、BiNDを使用している既存の数万サイトが一気にWebフォント対応になるわけです。
関口氏：
フォントを1書体ずつ買って揃えると、昔は何十万円という金額になりましたよね。それが、BiNDなら2年間無料のコースでもデザイナーに人気の高い7書体が使えるんです。有料のコースでは150書体も使えて、テレビのテロップで毎日のように見かけるマティスなども揃っている。そういう意味では、WebLiFE サーバーは単なるレンタルサーバーではないわけです。レンタルサーバーはこういった付加価値をもっとつけるべきですね。ホスティングサービスの差別化が難しくなってきている中で、BiNDとWebLiFE サーバーは画期的な内容になっていると思いますよ。
――BiNDのソフト上でWebフォントを使う際には、何か特別な操作など必要になりますか？
平野氏
Webフォントを使うのに必要な操作は、言ってしまえばBiNDの編集画面上で入力したテキストに対してフォントの種類を指定して、アップロードボタンを押すだけです。これでコンテンツがサーバーにアップロードされて、意図した通りのフォントでWebページが表示されます。HTML5やCSS3を理解する必要はありません。
――Webフォントを利用することによるメリットにはどういったものがあるのでしょう。
関口氏
表面的なわかりやすい特徴としては、Webページの表示がきれいになるということですね。PCだとあまり気にならない場合でも、スマートフォンやタブレットではピンチアウトなどの操作で拡大して見ることも多いわけで、そこが画像になっていると拡大したときにジャギーが出てしまいます。それに、画像として描かれていると文字部分をテキストとしてコピーできないんですね。
今回BiNDの最新バージョンで提供するWebフォントの機能を使えば、拡大してもきれいなままですし、テキストとしてコピーもできる。SEO対策のために画像にALT文字列を指定しなくてもいい。文字列の一部を間違っても、テキストを修正するだけで済み、Photoshopを開いたり、あるいはデザイナーに戻したりする必要はなくなります。制作工程からも、画像を使う時よりずっと楽になります。
これからも端末の高解像度化は進んでいくでしょうし、キャプションやナビゲーションメニューなど、これまで画像を使わざるを得なかったようなところも今後テキストに置き換えられていくでしょう。
もうひとつ、SEO対策にも有効です。制作側としてはユーザーに訪問してもらうのに大事なことですし、ユーザーも目的のWebサイトにたどりつきやすくなる。お互い検索サービスを利用する上で、テキストデータで扱えるということは重要です。
あと、文字って単なる部品ではないと思っているんですよ。ポスターでもテレビのテロップでもそうですけども、制作者が訴えたい気持ちを表現できる、そういう力が文字にはあります。Webサイトではこれまで表現しにくかった文字を含めたデザインも、Webフォントで可能になるというのが大きいですね。
ソフトバンク・テクノロジーの最新技術が、BiNDのバックエンドを支える
――そのデジタルステージのBiNDに対して、ソフトバンク・テクノロジーはどのように関わっているのでしょうか。
関口氏：
ソフトバンク・テクノロジーでは「フォントプラス」というWebフォントサービスを提供しています。CSSを理解したうえで、Javascriptのタグを埋め込むという手法で利用できるもので、何百という法人サイトに使っていただいています。BiNDに対しては、この「フォントプラス」の最新のシステムをOEM提供しています。「フォントプラス」は黒子というか、BiNDの1つのフィーチャーという扱いで、あえて表立ってはいません。
今回はフォントメーカーであるフォントワークス社と3社で手を組んで、映像系やゲーム系のコンテンツで非常によく使われている書体を中心にBiNDに提供しました。
――ソフトバンク・テクノロジーがWebフォントを手掛けるようになった経緯を教えていただけますか。
関口氏：
ソフトバンク・テクノロジーは、10年以上前から主に法人向けのWebサイト構築やWebサイト分析、Webマーケティングをやっていました。2、3年前に「何か新しい事業をやりたいよね」という話になったとき、Webフォントは海外では流行っているのに、日本語Webフォントはまだ全然来てないね、ということに気がついた。
最近、高解像度ディスプレイでWebサイトを閲覧することが多くなったので、画像で制作された文字が粗いと感じることが増えたな、と（笑）。海外は商品画像以外はわりときれいなWebサイトが多いのに、日本は文字のボタンが画像データだとWebサイトの印象として、粗いと感じられることが増えましたね。
本気でWebフォントのプロジェクトを進めるのであれば、日本のフォントメーカーの上位から手を組むのが第一と考えていましたので、フォントのことをよく知っている方になじみのあるメーカーとアライアンスを組む、ということを大事にしました。フリーフォントを集めるサービスだけにはしたくない、プロが使える書体のプラットフォームを作りたかったんです。
プロのデザイナーが日頃使っている書体が、Web上でテキストとしてそのまま出ればいいよね、と考えつつ、ライセンスの問題は我々の方で整理して、たくさんの書体をデザイナーさんに自由に使ってもらえるプラットフォームを我々が作った、ということになります。
http://eiganokotoba.jp/
http://ynn.jp/
――そうしていく中で、デジタルステージと出会ったわけですね。
関口氏：
個人や企業にWebフォントを使ってもらうパターンと、今回のBiNDのように、Webサイト制作ツールの裏側で我々のプラットフォームを使ってくれる企業を探す、というプロジェクトをスタートしたのが1年前です。我々は、クリエイターが喜ぶシステムを提供したいという志をもっていて、平野さんのいるデジタルステージもそういう部分で同じような熱い志がある会社だなと感じていました。思えば、このデジタルステージさんとの出会いはすばらしかったなと。
文字は、Webのクリエイティビティを発揮するうえですごく大事だと思っています。そのWebフォントを簡単に使えてWebをきれいに、という思いをもっているデジタルステージさんに我々の技術やプラットフォームをOEM的に提供したことで、その先にいるBiNDのユーザーさんに喜んでもらえたらハッピーだなと思っています。
――BiNDのバックエンドで「フォントプラス」の仕組みを採用しているとのことですが、その仕組みにはどういった特徴があるのですか。
関口氏：
「フォントプラス」には、“スマートライセンス”の方式と“バリューライセンス”の方式があります。“スマートライセンス”ですと、Webコンテンツの読み込み時に、本文が一度デバイスフォントで表示されるんですね。それからWebフォントに切り替わります。あるいは、全部読み込み終わるまで待ってからWebフォントを反映した形でコンテンツを一気に表示する、というやり方もあります。
1年半前は、「Webフォントって遅いじゃん」と言われていました。それを解決するために、今言ったような2種類の表示方法を用意したのですが、それでも不具合があるように感じられたり、通信速度が遅いように思われてしまうところが課題でした。すぐに表示されているように見えても、結局は根本的な速度の問題を解決していない。単にごまかしているだけでした。
“バリューライセンス”の方式は、ソフトバンク・テクノロジー独自の技術で、デバイスフォントを表示することなく、すぐにWebフォントを反映してコンテンツ全体を表示します。なぜこれが可能なのかというと、Webフォントを、実際に使う文字の文だけ、文字列をユニーク化してサーバー上にサブセット化して用意しているからなんです。どんな端末やクライアントからアクセスがあっても、それに最適化されたデータで出力します。
今回システム連携する形でBiNDに提供しているのは、この“バリューライセンス”の方式になります。デジタルステージさんの方でも表示スピードにこだわって実装していますし、ユーザーインターフェイスも非常に使いやすい形になっていますから、中小企業の広報担当者など、デザイン知識のないエントリーレベルのユーザーでも「ここまでできちゃうの？」というくらいデザイン性の優れたWebサイトを簡単に構築できるはずです。
◇スマートライセンス方式の表示
（一度デバイスフォントで表示してからWebフォントを読み込んで再表示）
http://www.fontplus.sakura.ne.jp/impress/index3.html
※5月15日よりFONTPLUSのスマートライセンスが高速化したため、通信環境やOS/ウェブブラウザーの環境によって、デバイスフォントの表示が感じられない場合があります。
◇バリューライセンス方式の表示
（最初からWebフォントを反映してコンテンツ全体を表示）
http://www.fontplus.sakura.ne.jp/impress/index5.html
――フォントデータをサブセット化したものは、画像データよりも軽いわけですね。
関口氏：
たとえばWebページ内のテキストが100ページ分あったとしても、フォントのデータ量としては実は大したことないんですよ。1書体のフォントデータが5MBあるとして、5MB全部をダウンロードさせてしまうと、利用者が多くなった時にサーバーがパンクしてしまいます。でも、使われている文字のフォントデータだけをサブセット化することによって、10KBとかになるわけです。数百文字ある文章であっても、ひらがなが多かったりすると、名寄せしたときには実質100文字くらいしかない、という場合もあります。小説も、ユニークな文字だけを数えると1000文字いかないケースもありますから。
平野氏：
ちなみにBiNDでは、文字表示の部分もチューニングを行っています。キャッシュサーバーを用意しているので、BiNDで作られたWebサイトを閲覧して1回でもそのWebフォントで表示していれば、他のWebサイトでもすでにあるキャッシュから読み込んで高速に表示するんです。アクセスするたびにWebフォントのデータを読み直すのではなく、弊社の場合は異なる複数のサイトのフォントデータもまとめてキャッシュしておくなどいろいろ工夫していて、オールインワンならではの快適さを提供しています。
――BiNDのWebフォントはデジタルステージのサーバー以外を利用していても利用できますか？
平野氏：
Webサイトを閲覧する方が待つことなく、素早くWebフォントを表示させるために、今回デジタルステージではBiNDユーザー用にWebフォントサーバーを用意しました。キャッシュサーバーも用意するなど、高速な表示にこだわって環境を構築しました。この表示スピードがインターネットを介しては担保できないので、先ほどお話した、ホスティングサービスのサーバー「WebLiFE サーバー」をお使いいただく方というのが前提条件になります。ドメインの持ち込みは可能ですので、これまで別のホスティングサービスを使われている場合も、ドメインの引越しをしていただくことでWebフォントを使ったサイトに模様替えすることが可能です。
プレビューで直感的に書体を選べる簡単インターフェイス
――BiNDのソフト上でWebフォントに関する工夫は何かされていますか。
平野氏：
コンテンツ編集時のフォント選択画面で、フォント一覧を漢字かな英数字交じりで大きく表示したりとか、明朝系や手書き風などのカテゴリーで分類して、選びやすくしています。ページのあらゆる文字列のフォントをWYSIWYGで変えられるのがポイントですね。
関口氏：
WYSIWYGって懐かしい言葉ですけど、プレビューで直感的に書体を選べるのがいいですよね。プロのデザイナーなら字形を見て何の書体かわかるんですが、一般的には、書体名でどんな形のフォントかわかる方はたぶんほとんどいないですよね。新ゴ、リュウミンあたりなら知っていても、それ以外はわからない人が多い。このユーザーインターフェイスはエントリーレベルの方だけではなくて、プロの方にも便利なのではないでしょうか。
――BiNDではHTMLのソース編集も可能になっているのですか？
平野氏：
BiNDでは、あえてソース編集はできないようにしています。CSSなどを一部調整することはできますが、BiND上でコンテンツを作ると、HTML5とCSS3に変換されて、SEO対策やスマートフォン対応といったものを裏で全部処理して、ほとんどのWebブラウザーでできる限り同じ形で見えるように調整します。
Webフォントについても同じ考え方なんです。Webフォントをよく理解している方はBiNDを使わず、もっと細かく好きなようにコーディングすることもできるでしょうが、そうすると場合によっては一部のWebブラウザーでうまく表示されなかったり、サーバーを変えたときに正しく動かなかったりと、トラブルの元にもなりがちです。しかし、BiNDのようにWYSIWYGでWebフォントを設定して編集画面上で問題なく表示されていれば、どんな環境でも限りなく同じ表示になります。
素材提供サービス「マテリアルズ」や、HTMLメール配信サービスも開始
――BiNDの利用者層はやはりビジネスユーザーが多いのでしょうか。
平野氏：
ビジネスユースが8割ですね。個人サイトはほとんどありません。いわゆるビジネスとしてWeb制作に利用されている方もいますが、そういうWeb制作会社の方よりも、会社のWebサイト担当の方や、お店のオーナー、フリーランスの方に使っていただいている例が一番多いと思います。
中小企業でも、ある程度の規模になるとWeb担当の方を置いて内製しないと予算的に合わないという事情もあったりします。それで、あまり見映えのよくないWebサイトができ上がってしまうというパターンがありがちですので、そういう層をまさにBiNDが埋めているのでは、と思います。
ちなみに、“ベーシックコース”と“プレミアムコース”のユーザーの割合は、ちょうど1対1ですね。最近では、"ベーシックコース"からの移行ではなく、“プレミアムコース”に直接申し込まれるユーザーが増えてきています。
――スマートフォンユーザーが増えてきていると思いますが、BiNDでの対応状況はいかがでしょう。
平野氏：
BiNDでは、通常はPC向けのコンテンツを出力しますが、そのままでもスマートフォンで見ることはできます。スマートフォン専用のテンプレートもBiND6から収録し、利用できるようにしましたので、PC向けとそれ以外向けのページを別個に作ったり、フィーチャーフォン用にWebLiFEサーバー側で自動的に変換して表示したりもできます。端末ごとにURLを分けて、ユーザーエージェントを見て自動でアクセス先を振り分けることも可能です。もちろんスマートフォンでもWebフォントが正しく反映されますよ。
スマートフォンの比重はだんだん大きくなってきていますし、スマートフォンやタブレットの方が画面が圧倒的にきれいになってきているので、フォントなどの美しさについて言えば、PCよりもむしろスマートフォン系の方が重要になってくると思っています。最終的なコンテンツの軽さ、SEO対策などを考えると、画像を減らしていくことが大切でしょう。優秀なスマートフォンサイトは画像の点数を抑えて効果的に使っていて、気持ちよく利用できる、というのも実感としてあります。
「Webフォントは、使ってみれば絶対に良さがわかる」
――バージョン6.5で新しく実装する機能では、Webフォント以外に何がありますか。
平野氏：
BiND 6.5の本体の機能としては、Webフォントと、その機能の使い勝手の向上を中心に、SEO対策のための機能改善などです。一方、WebLiFE サーバーは大幅にバージョンアップしていまして、Webフォントが使えるようになっただけでなく、「マテリアルズ」というオリジナルサービスも始めました。
「マテリアルズ」は、音楽や写真、フォント、テンプレートといった素材をユーザー向けにポイントと交換でプレゼントするというサービスです。プレミアムコース会員には、毎月3000ポイントを付与するほか、本格的なHTMLメールの作成・配信サービスを提供します。500以上のテンプレートを使ってHTMLメールを作って、毎月1000通までの配信が可能です。
http://materials.digitalstage.jp/
――BiNDではHTML5コンテンツを作成できるわけですが、FireFox OSにも標準採用されるHTML5アプリの開発に対してはどういったアプローチをお考えですか。
平野氏：
BiND 6ですでにHTML5とCSS3には完全対応していますから、HTML5アプリのようなインタラクティブ性が必要とされるものについては、機能としてBiNDにある程度取り込んでいくことはあるとは思います。
ただ、弊社は「LiVE for WebLiFE*」（ライブ・フォー・ウェブライフ）というBiNDの姉妹ソフトも開発していまして、jQueryを用いて音やアニメーションを組み合わせたリッチコンテンツを作れるものになっていますので、HTML5アプリなどについてはそちらでカバーしていく方向になると思います。今回バージョンアップするBiNDは、Webサイトをしっかり、 美しく作れる、ということを重視していきます。
――ユーザーやWebサイト制作に関わる方へメッセージがありましたら。
平野氏：
まずは、Webフォントを使ってみていただきたいというのが一番ですね。開発者としては、「使ってみれば絶対にわかる」と言い切れるものってなかなかないんです。Webフォントに関しては、使ってみれば絶対に良さがわかるものなので、とにかく使ってみていただきたいです。
今回2パターン用意したWebフォント用の新作テンプレートをもとに、Webページを作って遊んでもらうだけでも十分わかると思うんですけれども、これはまだ始まりでしかありません。近い将来には、これがWebフォントとして使えるの！ と必ずや喜んでいただけるフォントも控えていますし、種類も増やしていこうと思っています。いずれWebフォントの使い方がこなれてくれば、Webサイトのデザインが変わってきて、伝え方も変わってくるはずです。
たとえば、キャッチコピーが1行あるだけでもページが成立するようになるでしょう。まずは「BiND for WebLiFE* 6.5」で文字の美しさ、文字の重要さについて、みなさんに気付いていただければと。
関口氏：
ソフトバンク・テクノロジーの「フォントプラス」としては、BiNDのような対企業向けのサービスはもちろん引き続きやっていきます。フォントは著作権などセンシティブな課題もありますが、ホームページを作るツールですとか、サイネージを作っているサービス会社などにOEM提供していきたい。その先のユーザーが、最近なんか文字がきれいだよね、なんでだろう、ああWebフォントを使っているんだ！ と気付くような流れを、この1年くらいで作っていけるとうれしいですね。
――ありがとうございました。
