モリサワのWebフォント「TypeSquare」の取り組み
Webサイトのイメージはフォントで決まる！

紙媒体からデジタル媒体へ急速に移行するなか、Webサイトでのイメージ戦略でWebフォントが注目されています。これまで紙で表現してきたことをWebサイトで実現しようとするのはなかなか難しく、フォントを画像化したりすることで近づける努力をしてきました。

しかし、それだと制作サイドにも負担がかかる上、Webサイトのメリットを活かしきれず、かえってお客さまに不自由を強いることにもなりました。企業のイメージはフォントの扱い1つでガラリと変わります。モリサワでは以前からWebフォントサービスの提供を展開。1000書体以上の中から、イメージに合ったフォントを使って表現できます。

そこで今回は、モリサワがこれまで培ってきたフォントについてと、Webフォントのサブスクサービス「TypeSquare」について、モリサワの貫さんと吉野さんにお話を伺いました。

貫真由さん（以下、貫）　「最初にフォントという言葉の定義について簡単に説明していきます。まず、ロゴとフォントの違いって何だか分かりますか？」

池澤あやかさん（以下、池澤）　「ロゴはもう、それ専用に作られるイメージがあります。フォントは日本語書体だとひらがなやカタカナから漢字まで全部揃っている」

貫　「そのとおりです。ロゴとは企業名や製品名、ブランド名などを特別にその文字列だけをデザインした文字を指します。一方フォントは、組版に利用できる共通にデザインされた一揃いの文字の集まりになります。ちなみに、私たちは『書体』と『フォント』という2つの呼び方を使い分けているのですが、『書体』は共通した表情をもつ文字の集まり、『フォント』はデジタル化した書体のことを指すことが多いです。

私たちフォントメーカーはお客さまが、どんな組み合わせで文字を使うのかわかりません。文字の組み合わせだけではなく、文字のサイズや、縦書きなのか横書きなのかといったさまざまなケースが考えられます。そのため、いろいろなケースでできるだけ美しく使いやすいものになるように、細かく調整をしています」

池澤　「確かに日本語と英語でフォント変えたりしますし、縦書き横書きと日本語は柔軟性が高いから複雑ですよね」

貫　「書体のデザインは、大きく分けて明朝体やゴシック体、丸ゴシック体、デザイン書体、筆書体などいくつかのカテゴリーに分けることができます。弊社のフォントサービス『MORISAWA PASSPORT』では1500書体以上を扱っていて、和文（日本語書体）だけではなく、欧文や中国語、韓国語、タイ語など日本語以外のフォントも使うことができます。

これらのフォントは、一書体ごと一文字ずつ人の手で作って提供しています。1500書体というと、そんなにたくさんと驚かれるかもしれませんが、単純にデザインのバリエーションが豊富なだけではなく、同じデザインでもウエイト展開があり、選ぶ書体によって印象が大きく変わってきます」

貫　「例えば、これは架空の病院のサイトの例ですが、左がゴシック体の『ゴシックMB101』で、右が明朝体の『リュウミン』です。レイアウトは変えずフォントを置き換えただけでも、かなり印象が違うと感じていただけると思います」

池澤　「フォントを変えただけでぜんぜん印象が違ってきますね」

貫　「例えば歯医者さんのサイトで清潔感とかクリーンさを出したい時には、すっきりとした印象の『あおとゴシック』を合わせてみてはいかがでしょうか。オンスクリーン向けに開発されたゴシック体なので、Web上での表示にも最適です。

もう1つ、美容クリニックのサイトには『フォーク』を合わせてみました。端正でスマートな雰囲気のデザイン書体なので、美容クリニックの優美でスタイリッシュな印象とも親和性があります」

池澤　「確かに美容クリニックらしい印象ですね」

貫　「通常Webサイトだと端末にあるフォントで表示されるので、それこそ画像などで貼り付けない限り端末によって表示されるフォントが異なってしまいます。そんなときにWebフォントを使うと、どの端末で閲覧しても指定したフォントで表示されるので、サイトのイメージを統一できます。

また、目的によっては『UD書体』が適している場合もあります。モリサワのUD書体は、文字の形が分かりやすいこと、読み間違えにくいこと、文章が読みやすいことをコンセプトに設計しています」

池澤　「文字のサイズによっては、認識しづらいときがありますよね」

貫　「読み間違えにくいことも、UD書体では大事にしています。濁点や半濁点を大きくしたり、通常の明朝体よりも少し横画を太くすることで、ぼやけたりかすれたりしても、しっかり読み取れるようになっています」

池澤　「一文字一文字しっかり目に飛び込んでくる感じですね」

貫　「これらが本当に読みやすいのかどうか、第三者機関と共同で研究もしており、ロービジョンの方や読み書き障害のディスレクシアの方々を含めた多くの人にとって、ほかの書体と比べた時により判別しやすく、情報などを効率的に読むことができる書体であることがわかっています。また最近だと、デジタルデバイス上での読みやすさの検証もしていて、こちらも多くの方にとって読みやすいという結果がでました。皆さんも普段の生活の中で、印刷物やスマートフォン、ゲームやテレビのテロップなど、毎日必ず文字を目にしていると思います。

モリサワでは、多様なお客さまのニーズに対応できるようにフォントを開発するだけではなく、文字に関連するさまざまな事業にも取り組んでいます。先ほどご紹介したMORISAWA PASSPORTというサブスクリプションサービスのほか、ゲームや医療機器への組み込みフォント、Web上でフォントを美しく表示できるようにする『TypeSquare』というWebフォントサービス、また、ユニバーサルデザインを実現する『MORISAWA BIZ+』というサービスなど、社会の環境の変化に対応すべく、文字で社会に貢献する商品を展開しております」

池澤　「Webサイトを見ていても、かなり印象が違いますよね」

貫　「そうですね。よく書体は『目で見る声だ』と言われますけど、同じゴシック体というジャンルでも、当然ですが書体によって細かくデザインに差があって、その違いが見たときの印象の差につながっているのだと思います」

池澤　「POPな書体だと安売りっぽいみたいな」

貫　「チラシの数字などで使われているのでその印象が強いのかもしれませんね。どういう場面でどんな書体が使われているのか、市場は常に意識しながら企画を立てるようにしています。声色を使い分けるみたいに、書体も使い分けていただけると嬉しいです。2022年はこれまで開発を進めてきたデザイン書体が一挙にリリースとなるので、書体ごとの印象の違いなどにも注目していただきたいです」

池澤　「最近のトレンドみたいなものってありますか？」

貫　「例えば、コロナ禍でオンライン授業が進み『デジタル教科書』という言葉を耳にすることも増えたと思います。『UDデジタル教科書体』はデジタル教科書をはじめとした ICT教育の現場に効果的なユニバーサルデザイン書体で、教育現場に配慮した字形になっています。うまく時代にマッチしたよい例なのではと思います。デジタル、オンスクリーンという点でいうと、Webフォントも今後さらに活用してほしいですね」

池澤　「私がWebデザインを手伝っていた時代は、ちょうどWebフォントが出てきたぐらいですね。そのときはWebフォントを使わず、本文のフォントはデフォルトのフォントを使って、タイトルのところは画像でモリサワさんのフォントなどを使って組むというデザイン方法でやっていました」

吉野誠さん（以下、吉野）　「WebフォントのサービスTypeSquareがスタートしてから約10年になりますが、当初は日本語のWebフォントはデータサイズが大きく、ネットワークに負荷がかかり、Webサイトの表示に時間がかかってしまっていました」

池澤　「ポイントでしか使いたくないというイメージがありました。ローディングに時間がかかるから、極力文字数減らすとか」

吉野　「デザイナーはフォントを使いたいという要望があるのですが、エンジニアからすると、重くて表示に時間がかかるので使用を避けたいというのが、出始めた時の反応でした。

日本では当時そういった感じでしたが、海外のサイトではWebフォントを使うのは当たり前になっていました。ただ、最近は日本のサイトでもWebフォントを活用していただく機会が多くなってきています」

池澤　「海外では当たり前ですよね」

吉野　「世界の有名企業では、自社のコーポレートサイトにWebフォントを使っているというケースが多く見られます。日本語の書体は漢字・ひらがな・カタカナと文字数が非常に多く、欧文書体に比べてデータサイズが数MBと格段に大きくなってしまうハンディがあります。

TypeSquareは、それを解消する方法としてフォントデータのすべてではなく、必要な文字だけをダウンロードして読み込んでいます。例えばタイトルの5文字だけとか、リード文の20文字ぐらいで使いたいというのであれば、その文字だけをパッケージにし、TypeSquareのほうから閲覧者のブラウザーへ送り、読み込ませて表示します。この方式をサブセットというのですが、日本語フォントだけど非常に軽くてダウンロードも速く、表示速度も従来に比べれば上がっています」

池澤　「本文で丸々使われるよりも、タイトルなど一部で使われる事例のほうが多いですか？」

吉野　「タイトルなど目立たせたいところを、イメージ通りに表示させたいという目的でWebフォントを使うケースもありますし、会社のフォントとしてモリサワのフォントを使用することを決めている企業様ではほとんどの文字に対してWebフォントで表示しているケースもあります。

最近はコロナ禍により、企業やサービスを知るという機会が変わってきています。これまでは、展示会や店舗などに行って企業やサービスを知って、そこで説明を受けて取引や利用の検討を始めてもらうことができたのですが、展示会や店舗へ行くことが減り、Webで検索をして企業や製品を知って、さらにWebサイトでいろいろ調べて比較、検討する流れが増えていると思います。しっかりと情報発信していないと、Webサイトだけで検討が終わってしまい、問い合わせすら来ないことになってしまいます。そのためWebサイトを充実させようと考える企業が増えてきています。

先程ご覧いただいたようにフォントによって、閲覧者に与えるイメージが変わるため、Webサイトで発信したい情報に合わせてWebフォントの利用が検討されています。

文字を含めた画像を作成して貼る手もありますが、サイトを修正したり更新したりする際に再度画像を作成することになるので、手間がかかります。文字の修正だけで済むのであれば、Webフォントを活用したほうが圧倒的に作業は楽になります」

池澤　「画像だと修正が発生するたびに作り変える必要があるので、キツイですよね」

吉野　「画像化された文字はスマホでピンチアウトして拡大すると、ぼやけて表示されることがありますが、Webフォントであれば文字はクリアで美しさをキープできます。また、PC・スマホ・タブレットなどあらゆる端末で閲覧しやすいように画面サイズに応じてレイアウトが自動的に調整されるレスポンシブデザインにおいても、Webフォントは相性がよいですね。」

池澤　「TypeSquareを利用しているサイトを表示してもfont-familyの読み込み表示が出てこないし、表示もすごく速いですね」

吉野　「そうなんです。当初から比べると、かなり改善してきております。また、この10年で通信速度がかなり速くなったことも、読み込み速度の向上に寄与しています。今後5Gがもっと普及すればスマホでどの場所で閲覧しても、待たされることがほぼなくなると思います」

池澤　「通信速度の向上は、Webサイト閲覧においてかなり貢献していますよね」

吉野　「日本語の文章は多くの場合、構成としてはひらがなが多く、実際に使われている文字はそれほど多くはありません。TypeSquareでサブセットすると、フォントのファイル容量が数十KBのケースも多いので、非常に軽く扱えるようになったのが現在の状況です」

池澤　「フォント自体はモリサワさんのサーバーにあって、そこから読み込むわけですよね」

吉野　「そのとおりです。TypeSquareを利用するための設定は3つです。1つ目は使いたいサイトのドメインをTypeSquareの『マイページ』に登録します。次に発行された『専用タグ』をHTMLに挿入します。そして、最後はCSS指定例を参考に、Webフォントを使いたい箇所へfont-familyを使って指定します。TypeSquareでは現在1000書体以上の中から選べますが、設定後にフォントを変更したければ、font-familyの指定を変えるだけです」

池澤　「これからは、他社に差をつけるためにもWebフォントを使ってちゃんと印象づけるようにしていくべきですね」

吉野　「そうですね。大企業だけでなく小さい規模でも立派なWebサイトを持てるようになってきているので、誰もがこだわりを持ってサイトのデザインを考えてほしいですね。

最近は、アパレルや化粧品業界からの問い合わせも増えてきています。お客さまが店舗に行く機会が減ってしまったので、Webサイトを通じてブランドイメージの演出を図る必要があると思います。お客さまがWebサイトを見るデバイスによってフォントが異なると、ブランドイメージの統一が難しいため、Webフォントを検討されるというわけです」

池澤　「確かに、きれいなサイトを見ていると、これ何というフォントだろうって思うことがあります」

吉野　「日本のサイトでは、まだまだWebフォントではなく、端末に入ったフォントで表示されることが多いのですが、そうした中でパッと見、違うフォントで見せられると、それだけで逆に印象に残ると思います」

池澤　「早々に使い始めたほうが、より効果が上がりそうですね。使うフォントによってかなりイメージが変わってくるし、いろんな端末で見られる時代だから、どんな端末でも同じイメージで見られるよう、Webフォントの需要は今後もっと伸びる予感がします」

吉野　「これまで紙が中心だった企業が、今後はWebサイトをはじめとするディスプレー上で表示する機会が増えてくると思うので、そういったところにもフォントを気にして使っていただきたいですね。その際、モリサワを選んでいれば安心というふうに思っていただけるよう、時代のニーズにマッチした書体とサービスを今後も提供していく所存です」