未分類

ペアカーニングを使ってみよう

TypeSquareのWebフォントとして新たに利用可能になったA1ゴシック、秀英角ゴシック金/銀、凸版文久見出し明朝 EBは、ペアカーニング情報を利用した文字詰めに対応しています。 本記事では、その利用方法について紹介いたします。 ペアカーニングとは ペアカーニングとは、特定の文字の組み合わせ〈ペア〉で動作する、文字詰め機能〈カーニング〉のことです。 ペアカーニング情報とは、隣り合う文字の組み合わせごとに設定された文字詰めの情報のことを言います。 このペアカーニング情報をフォント内部に持つことで、どのような文字が組み合わされたとしても、最適な文字組みになるように設計されています。 ペアカーニングの例(上:設定なし、下:設定あり) 導入方法 「font-feature-settings」を利用します。 CSS中でfont-familyを記述している箇所に、以下の記述を追加します。 [crayon-5ba47d327cd3e749259793/] ペアカーニング情報は、当社フォント製品「MORISAWA PASSPORT」などに収録されているフォントと同一ですので、手元の制作環境にあるデスクトップフォントを利用して、文字間の詰まり具合を確認することもできます(これらの詰め情報は、OpenTypeの仕様で定義されたものです)。 対応書体 2018年9月10日時点での対応書体は以下の通りです。 A1ゴシック L/M/B/H A1ゴシック L/M/B/H JIS2004 秀英角ゴシック金 L/M/B 秀英角ゴシック金 L/M/B JIS2004 秀英角ゴシック銀 L/M/B 秀英角ゴシック銀 L/M/B JIS2004 凸版文久見出し明朝 EB 凸版文久見出し明朝 EB JIS2004 ※ 対応フォントは順次拡張していきます。 サポートブラウザ環境 【Windows/Mac環境】 Internet Explorer 11以降 Microsoft Edge 14以降 Safari 9.1以降 Chrome 42以降 Firefox 45以降 【スマートデバイス環境】 iOS 9以降 Android 4.4以降のChrome  (2018年9月10日現在)  上記ブラウザで現在確認されている制限事項や注意事項は次の通りです。 Internet ExplorerおよびMicrosoft Edge以外のブラウザでは、font-feature-settingsを指定せずとも一部カーニングが有効になる場合があります。ブラウザ間での表示に差異が発生するのを回避するため、明示的に指定することを推奨致します。 Chrome 48.0 未満の場合は、-webkit-font-feature-settingsとする必要があります   TypeSquareのフォント一覧を見る


typesquare.js v3 アップデート情報(v3.0.2)

開発担当オムロです。typesquare.js v3...


typesquare.js v3 をリリースしました

開発担当オムロです。WebAPI v2 に引き続き、typesquare.js v3...


導入後発を逆手にとって、遊び心あふれる[フォント総選挙]を実施! ユーザーとの距離を縮めた『エックスサーバー』

2003年から共有レンタルサーバーサービスを開始し、社名を冠した〈Xserver〉をはじめ、ビジネス向けの〈シックスコア〉やWordPressに特化した〈wpX〉など、業界トップクラスの大規模ホスティングサービスを提供している『エックスサーバー』さん。同社では2017年6月、すべてのレンタルサーバーにおいてモリサワのTypeSquareが利用できるサービスを開始しました。 Webフォント導入のきっかけからTypeSquareの活用方法まで、同社のサービスについて、ユーザーからの問い合わせに対応するカスタマーサポート課 課長を務める堀江圭介さんと、自社サービスのサイトや販促物の制作といったPRツールを手掛ける開発部デザイン課 課長の日下部祐さんにお話を聞いてきました。(以下、敬称略) カスタマーサポート課 課長の堀江圭介さん(左)と開発部デザイン課 課長の日下部祐さん(右) 全サービスで一気にWebフォントを導入 — 個人向けや法人向けなどを問わず、すべてのレンタルサーバーで、追加料金なしでWebフォントが利用できるサービスを始められました。最初からすべてのサービスにおいて、無料で使える機能として導入したのはなぜですか? 堀江「“最高を提供する”というのが当社の企業理念。Webフォントを提供する上で、導入時の費用と手間を省くことがユーザーにとって最も価値があることだと考えたためです。また、すでに他社が同様のWebフォントサービスを導入していたこともあって、お客様から『エックスサーバーでは使えないのか?』というお問い合わせをいただいており、直接的な顧客からの声も全サービスでの導入を決定した理由のひとつになりました」 日下部「これまではサーバーの高速化や安定化、セキュリティの強化などを中心に開発を行ってきましたが、お客様が運用するサイトに直接手を加えるような機能は持っていませんでした。Webフォントの導入が、これまでとは違った側面からのサービスだったので、私たちが築いてきた価値と反することなくサービスとして提供できるのかを社内で検討しました」 堀江「社内では当初、導入することでパフォーマンスが落ちるのではないかという懸念もありましたが、使用する文字データのみをダウンロードしてくるスタイルであることを説明したら全員が納得してくれました。モリサワさんの知名度もあって、スムーズに話が通ったと感じています」 日下部「ユーザーは多機能性を求めていますが、同時に手軽に利用できることも求めています。いくら機能が優れていても、複雑な仕組みだと使ってもらえません。その点で、WordPressのプラグインで簡単に利用できるのも喜ばれているポイントだと思います。限られたユーザーにしか使ってもらえないサービスでは価値がないのではないかという意見も出ましたが、サービス開始以降、想定よりも多くの方に使っていただけたので安心しました。もっと多くのユーザーに使っていただきたいので、告知活動にも力を入れていきたいと考えています」 堀江「SNSにおいてユーザーの反響が大きかったので、そうしたルートからも積極的にアピールしていきたいですね」 「“最高を提供する”という社の理念から導入を決めました」と語る堀江さん(左)。「サービス開始以降、想定よりも多くの方に使っていただけたので安心しました」と日下部さん(右) 後発だったからこそ実現した[みんなの推しフォント総選挙] — SNSといえば、サービス導入に合わせて、Twitterで[みんなの推しフォント総選挙]を実施し、話題になりました。提供Webフォント30書体のうち3書体をユーザーの投票で決めようという発想はとても斬新なものでした。そのアイデアはどうやって生まれたのですか? 堀江「Webフォントの導入に関しては後発となっていたので、ただ導入しただけではインパクトが弱いと悩んでいました。また、具体的な提供フォント30書体を選定するに際しては、当社のカスタマーファーストの理念もあり、果たしてすべてを自分たちだけで選んでしまっていいのかという思いもありました。そんな時、選挙でユーザーに使いたいフォントを選んでもらえばいいのでは、とスタッフの一人が発言したことがきっかけでした」 日下部「ライトユーザーにもWebフォントを知っていただき、さらに価値のあるサービスにしたかったので、ユーザーの使いたいものを素直に取り入れたいと思いました。遊び心あるイベントを行えたことで、エックスサーバーでWebフォントが使えるというインパクトを残せたと感じています」 — [総選挙]は、21書体の候補の中から『ベーシック書体』と『バラエティ書体』を1つずつ選ぶというものでした。専用のWebサイトでは、「やわらかい印象のゴシック体!」(ナウ-GM)や「サイトに明るさを与えてくれる書体!」(サン-M)など、それぞれのフォントにキャッチコピーを付けていました。フォントの名前は認知度が低いのですが、こうした説明があったことで、各書体の個性が非常に分かりやすかったと感じました。 日下部「1か月にわたる選挙の結果、ベーシック書体部門では『中ゴシックBBB』が、バラエティ書体部門では『すずむし』と『新丸ゴR』が当選しました。使い勝手のよいフォントが選ばれた印象ですね」 [総選挙]の結果、僅差で決まった3書体 — ユーザーを巻き込む戦略がヒットしたことで、『エックスサーバー』さんとユーザーの距離が近くなり、イメージアップに繋がったのでは? 日下部「ユーザーからは『こんなにフォントがあるとは知らなかった』『楽しかった』という声をたくさんいただきました。またユーザー以外でも、[総選挙]をきっかけに弊社のサービスに興味を持っていただける方が大勢いらっしゃり、PR活動にも繋がりました。Webフォントサービスが後発だったからこそできた企画で、大成功だったと思います」 堀江「当社がこれまで行ってきたサーバーの高速化や安定性強化も、ユーザーの声を受けて、サービスに反映していったものです。今回も[総選挙]を通して、弊社のそうした姿勢が表現できたと思っています」 日下部「[総選挙]後、“Web フォント”を検索ワードとした検索順位が上がってきており、弊社のサイトへのアクセスが増えました。チャネルが増え、新しい人に注目していただいていることを実感しています」 ビジュアルを多用し、Webフォント使用後のイメージを分かりやすく説明している どこよりも分かりやすくWebフォントの魅力を紹介 — Webフォントの導入について、後発だからこそ工夫された点はありましたか? 堀江「Webフォントサービスを詳しくご案内するページを制作しました。TypeSquareのブログなども参考に、Webフォントとは何なのかという説明から、メリットや活用イメージ、使うことで広がる表現など、ビジュアルをふんだんに使って具体例を挙げるよう工夫しました。すでに導入されていた一般企業様の事例も参考にさせていただきました」 — すごく分かりやすくまとめていただき、逆に参考にさせていただくことがあるほどです。 日下部「このご案内ページは社内で制作したのですが、ほかの仕事よりレイアウトの仕上がりが早いし、レスポンスも良かったんです」 堀江「デザイナーたちの“情熱”を感じました(笑)」 日下部「社内のデザイナーが持っていた“熱”は、ユーザーの中にもあるはずだと感じました。だからこそ、よりいいものをお届けしたいという気持ちに会社全体がなったのだと思います」 — Webフォントのリリース前後で社内の変化はありましたか? 堀江「実は弊社は新しいサービスを当日発表することが多いんです。Webフォント導入は2017年6月22日でしたが、これも同様に、前もって告知することなく、リリースを行いました」 日下部「するとリリースの直後にさっそくWebフォントを使ってくださったユーザーも多くいらっしゃいました。突然のリリースにも関わらず、すぐに利用される方が多かったことで、社内のテンションも高まりましたね」 堀江「社内の雰囲気は確かに変わりました。昨年くらいからカンファレンスに出展したり協賛したりすることが多くなり、社としての露出を増やし始めています。その場においても、Webフォントに関する質問を多くいただくようになり、手ごたえを感じています。今回のWebフォント導入は、デザイン的な面からユーザーのWebサイト運営をサポートする内容でした。今後もそうした方向からのサービスを厚くしていきたいですね」 — Webフォント導入に伴い、[みんなの推しフォント総選挙]を行って、他社との差別化のみならず、ユーザーとの距離を縮めることに成功した〈エックスサーバー〉さん。これからも遊び心あふれる企画を楽しみにしています。本日はありがとうございました。


幅広いお客様へ最大公約数のサービスを。ペルソナに向けたフォントを独自でセレクト! 『GMOインターネット』

1995年に「すべての人にインターネット」をブランドステートに掲げ創業した『GMOインターネット』さん。日本で初めて商用ドメイン名登録機関(レジストラ)に選出された「お名前.com」をはじめ、レンタルサーバーやプロバイダーサービスなど、幅広い分野でインターネット事業を展開しています。同社では2017年4月から〈お名前.com レンタルサーバー〉、6月から〈Z.com WP〉で、モリサワのTypeSquareが利用できるサービスを開始しました。 Webフォントの導入やTypeSquareの活用について、レンタルサーバー事業のマネージメントや事業全体の統括を担当されたホスティング事業部 マネージャー 松井大亮(左)さんと、仕様の検討から開発のディレクションを担当された事業本部 クラウド戦略チーム 吉田奈美(右)さんにお話を聞いてきました。(以下、敬称略) お話をうかがったホスティング事業部 マネージャー 松井大亮(左)さんと事業本部 クラウド戦略チーム 吉田奈美(右)さん 無料で簡単、デザイン性の向上が付加価値に — 〈お名前.com レンタルサーバー〉や〈Z.com WP〉において、追加費用なしでWebフォントを利用できるサービスを提供されています。まず、サービス導入の経緯を教えてください。 吉田「WordPressのプラグインで選択するだけでWebフォントが使えるという分かりやすい機能だったので、モリサワさんからお話をいただいた後、すぐに社内で検討を始めました。約半年かけて社内での検討や調整などを行い、リリースしました」 松井「弊社ではレンタルサーバーだけでも、共用型のほかVPSや専用型など複数のサービスを提供しています。そのなかでまず最初にどのサービスにWebフォントを導入するのかを検討しました。画期的なサービスなので、より多くのお客様に利用していただきたいと考え、最もお客様層が厚く契約数も多い〈お名前.com レンタルサーバー〉への導入を決めたんです」 — 導入から間もなく1年です。お客様の反応はいかがですか? 吉田「簡単にWebフォントが利用できると、高い評価をいただいています」 松井「現在レンタルサーバーの市場は、なるべくコストをかけずにWebページを制作したいというニーズが高く、低価格化が進んでいます。その観点から見ても、これまで有料だったWebフォントサービスが無料で使えるようになったということは、お客様にとって非常にメリットが大きかった。それが人気の理由の一つだと思います。月を追うごとにお客様数は増えていますが、まだまだこれからもWebフォントサービスの認知を広げていきたいと考えています」 — レンタルサーバー業界では、低価格化と並び、容量の増加や速度の強化に取り組んでいる企業が多いように見受けられます。今回のWebフォントの導入は、それらとは異なる新しいサービスの提供と思うのですが、どうして『GMO』さんではうまくいったのでしょうか? 松井「近年は市場が成熟して、各社とも商品のスペックが似てきています。カタログスペックだけではどのサーバーを選んでいいのか分からないお客様に、他社とは違う価値を提供しないといけない。今回のWebフォントの導入は、Webサイトのデザイン性を向上させるという付加価値に繋がりました」 「お名前.com レンタルサーバー」はブログツールとして人気の「WordPress」 に対応。用意されているテーマを使って手軽にWebフォントを利用できます。もちろん、自分で自由にテーマを作成することも可能です Webフォントのセレクトはペルソナマーケティングを用いて — 現在提供されている30書体のWebフォントは、どのような基準で選ばれたのですか? 吉田「〈お名前.com レンタルサーバー〉は約60%が個人のお客様です。個人のお客様の中でも、ご自身が経営されているお店のホームページや会社のコーポレートサイトなどで使いやすいフォントというのが、セレクトの前提でした。Web制作や広告のデザインを行う社内のクリエイティブチームにも相談し、使いやすいフォントや時代を超えて愛されている定番のフォントをまず最初に選びました」 松井「〈お名前.com レンタルサーバー〉内のWebサイトのジャンルやテイストは千差万別。より多くのお客様にご利用いただけるよう、ベーシックなフォントは必ず押さえてほしいと指示を出しました」 — フォントの選定には、年齢や性別、職業などを設定した架空のお客様へのアプローチを行う「ペルソナマーケティング」も使われたそうですね。 吉田「クリエイティブチームの意見に偏ることも良くないと考えたので、社内の別プロジェクトで作っていたペルソナマーケティングを利用しました。さまざまな人物像を設定し、その人たちが使いたくなるようなフォントであることも、セレクトの大きな基準だったんです」 松井「お客様にどれだけ使いやすく、また実際に使っていただけるのかが重要だと考えました。そういう観点からもペルソナマーケティングを使ったんです。子供向けの商品を扱うWebサイトであれば親しみやすい[ぽっくる]、企業のコーポーレートサイトなどには名刺や印章の文字に近いイメージを持つ[新正楷書]など、用途を仮定して選んだ書体もあります」 吉田「モリサワさんに教えていただいた人気ランキングも参考にしました。ただ、長い間使っていただけるフォントが大切だと考えていたので、現在流行していても数年後に古く感じるだろうなと思ったフォントについては、あえて外しています。そのほか、クリエイティブチームからは、[新ゴ]は充実させるべきとか、これを外すわけにはいかないなんて強い意見が出たことも(笑)。担当同士、好きなフォントの話で盛り上がったのもいい思い出です。ちなみに私のイチオシは、やわらかな印象の[解ミン月 B]です(笑)」 松井「今後お客様が増えていった際、ペルソナとの差が見えてくると思います。そうしたデータをまた別のプロジェクトにも生かしていきたいですね」 「お客様にどれだけ使いやすく、また実際に使っていただけるのかが重要」と語る松井さん(左)。「私のイチオシは、やわらかな印象の[解ミン月 B]です」と吉田さん(右) デザイン性とSEO対策が両立。アフィリエイターにも好評 — UD(ユニバーサルデザイン)書体も、7種類も選ばれていますね。なぜUDフォントを多めに選んだのですか? 吉田「弊社のサービスは多くの公共機関でもお使いいただいているためです。リリース後、さっそく何件もの自治体や公共施設でお使いいただいています。文字の形が分かりやすく、読み間違いにくいUDフォントの需要は、これからは一般企業などにも広がっていくと思います」 松井「Webフォントであればデザイン性とSEO対策が両立できるのも、弊社としては嬉しかったですね。お客様には、アフィリエイターも多くいらっしゃいます。Webサイトに個性が出せると同時に、クローラーにも認識されるWebフォントは、彼らがまさに求めていたものでした。また近年、マルチデバイスが浸透していますので、パソコンで見てもスマホで見ても、ページが同じイメージで見てもらえる点も好評です」 吉田「また、WordPressで簡単に利用できるというのも非常に魅力的です。Webに関する専門的な知識がなくとも簡単な操作で利用できるのがうけていると思います」 松井「主にビジネスのサポートツールとしてWebサイトを活用されている方は、プログラミングをしてページを作り込むことはあまりなく、多くはWordPressなどを利用しています。手軽にWebサイトを作りたい人にとって、Webフォントが簡単に使用でき、ページの個性を表現できるようになったのは、弊社サービスの大きな付加価値に繋がったと思います」 — これからますますWebフォントの需要が高まっていきそうですね。 松井「すべてのお客様に受け入れられるサービスを提供するのは、正直難しいものがあります。だからこそ、最大公約数のお客様に受け入れられるサービスを徐々に提供していきたいと考えています」 吉田「ご利用者数はおかげさまで伸びているものの、契約全体から見ると一部のお客様にはまだ使っていただけていません。Webフォントを使うことのメリットや簡単に設定が可能なことをもっとアピールしてたくさんのお客様に使っていただきたいですね。こだわってセレクトした書体やフォントテーマ機能もどんどんサイトに活用してほしいです」 — 〈お名前.com レンタルサーバー〉、そして〈Z.com WP〉と、徐々にWebフォントの導入を拡大されている『GMOインターネット』さん。これからもお客様目線でのサービスの拡大を期待しています。本日はありがとうございました。


業界初導入に歴代最高のいいね数獲得! 契約数増加・解約抑止のWebフォント機能 『さくらインターネット』

インターネットで自分の会社や店を宣伝したい、趣味のページを立ち上げて情報を発信したい……。Webサイトを作る理由は千差万別でも、その公開のために個人や法人を問わず多くの人が利用している「レンタルサーバ」サービス。数多くのレンタルサーバ事業者が参入し競争を繰り広げている中、1990年代のインターネット黎明期から、自社運営のデータセンターでインターネットインフラサービスを提供しているのが『さくらインターネット』さんです。 2016年6月、レンタルサーバ会社として初めて、サーバ利用者が無料でモリサワのTypeSquareを利用できる〈さくらのレンタルサーバ×TypeSquare〉を開始しました。 なぜWebフォントを導入することになったのか、TypeSquareをどのように活用しているのか、システムの構築を担当された技術本部 ビジネス推進グループ マネージャーの中島英児さんと同グループの谷口元紀さん、広報を担当されたセールスマーケティング本部 マーケティング部の室野奈緒美さんにお話を聞いてきました。(以下、敬称略) 谷口元紀さん(左)と中島英児さん(右)。室野奈緒美さんはテレビ会議システムでの参加 初めての試みが、史上最高数の“いいね!”に — 2016年から〈さくらのレンタルサーバ〉利用者に向け、WordPressを利用する際に追加料金なしでTypeSquareが利用できる業界初のサービスを始められました。まずは導入のきっかけから教えてください。 室野「モリサワさんとお話しているときにたまたま思いつき、その場で相談したところ、やりましょう! と言っていただけたのが最初です。それまでWebフォントの存在は知っていましたが、利用者それぞれが個別に契約をしないと使えないものだと思っていました。しかし、サーバを通して各利用者に配信が可能だとうかがって、レンタルサーバサービスの目玉になると思い、社内に提案したんです」 中島「これまでは自前で開発したサービスをお客様に提供してきたので、別の企業さんとコラボレーションをするのは初めての試みでした。そのため、リリースに至るまでの課題が多かった。たとえば、『さくら』のサーバは共用型なので、Webフォントを都度インストールする方式だとパーミッションの問題があります。そのため、使うフォントだけ読み込む方法を採用したり……。そうした課題を一つひとつ解決して、半年以上かけて実装しました」 — 初めて尽くしの試みでしたが、不安や心配はありませんでしたか? 中島「何より、Webフォントが本当にユーザーのニーズにマッチしているのか、正直不安でした。ニッチな部分にしかアプローチできないかもしれないと考えたこともありました」 室野「私は、Webフォントを使いたい人はたくさんいるはずだと考えていたので、必ず喜ばれるだろうという確信に近いものを持っていました。でも、リリース後の反応は、その想像をさらに超えるものでした」 谷口「リリース後、SNSで過去最高数の“いいね!”やリツイートがありました。Webフォントをすでに知っている人たちが最初に反応してくれ、その後幅広い方に認知されていった感じがします。それに伴い社内も盛り上がっていきました」 中島「社長も、こうした試みが業界そのものを活性化し、日本のホームページがきれいになるきっかけになるのでどんどんやっていこうと後押ししてくれました」 “表現したい”というニーズがあった! — 『さくら』さんが〈さくらのレンタルサーバ×TypeSquare〉を導入して以降、Webフォントの知名度が上がり、存在がより一層スタンダードなものになってきたと思います。 中島「これまでWebフォントを使うためには、サーバのレンタルとフォント、2つの契約が必要でした。複数の契約を行うことは、初心者のユーザーにとってはハードルが高い。それが一つの契約の中でWebフォントが使えるようになり、Webフォントの敷居を下げたという手ごたえはありました」 谷口「私はもともとWebデザインに携わっていたこともあって、最初にこのプロジェクトを聞いた時、これはアツい! と興奮しました。ただ、社内のエンジニアは反応が薄かったんです。これは何の役にたつんだ? って聞かれたこともありました(笑)」 中島「ユーザー目線を大切にしていきたいとは常々考えていますが、開発の際はつい高速化や安定化といったエンジニア目線になりがち。しかし、Webフォントはユーザーの“表現したい”というニーズに沿うことができたのだと思います」 谷口「リリースの翌月から活用事例を紹介するイベントを全国数カ所で行いました。以前の当社主催イベントの参加者はエンジニアがほとんどでしたが、この時はプロのデザイナーやクリエーター、デザイン系の学生にも多く参加していただきました。これまでとは異なる層の方々に『さくら』を知っていただき、新たなユーザーを獲得することができました」 室野「実際にイベントなどで新しい層のユーザーへの手ごたえを感じたことから、社内でも『デザイナーなどへアプローチするにはどうしたらいいのか』という意見が出るようになりました」 中島「これまではサーバの高速化や安定化、そして低価格化などがお客様から求められていることなんだと考え、サービスの中で表現に関することは後手に回っていたんです。しかしWebフォントの導入が、Webサイトをきれいに見せたい、読みやすくしたいといったニーズに目を向けるきっかけになったんです。サービス内の“表現”の優先度が格段に上がったのを実感しています。Webフォントによって、社内の風向きまで変わったんです」 谷口元紀さん(左)と中島英児さん(右)。大阪本社のバーカウンターの前で。 プロフェッショナルから初心者まで取り込んだWebフォント — Webフォントの導入以降、ユーザーからの反応はいかがですか? 初めて触れる方などからお問い合わせが増えたりしませんでしたか? 中島「そうした懸念もあったのですが、いざリリースしてみたら、お問い合わせや苦情はほとんどありません。WordPressのプラグインで選択するだけという非常にシンプルな操作なので、初心者の方にとっても分かりやすいのだと思います。もちろん、すでにWebフォントを活用していたプロの方にとっても負担が減ったと思います。手軽にWebサイトを作りたい人も、作り込みたい人も、どちらも取り込めるサービスになりました」 谷口「プロの方により満足していただけるよう、リリースの3カ月後には、特定のCMSに限らず、タグを記述すればすべてのWebサイトで使えるように機能を追加しました。また、初めてWebフォントを使われた方からは、SNSを通じ、文字がきれいになってうれしい、モリサワのフォントが無料で使えるってすごい、などの反響をいただきました。これまで使ってみたいと思っていた方のニーズにヒットしたんだと思います」 中島「Webフォントはかつて、読み込むのに時間がかかったりして、とても大変なものという印象がありました。しかし今は、必要な文字だけのフォントデータを配信する機能を持ち、必要最低限のデータ量で非常に高速に表示することができます。そのバックボーンを支えているのが、これまで取り組んできたサーバの大容量化や高速化、安定化です。そこにこれからは“表現”というベクトルが加わる。今回のWebフォントの導入は、私たちにとっても非常に良いタイミングだったんです」 — 自分のブログやホームページがきれいで読みやすいというのは、これまで提供されてきたサービスとは全く異なる価値を提供されているということですね。 中島「コンテンツを充実させたいというユーザーに向けて、他社との差別化に繋がっていくと考えています」 定番の明朝体やゴシック体からUD書体まで、全30種類が使用可能 契約数を伸ばし、解約の抑止にも繋がっている — 現在、選べるフォントは30種類。どのフォントを使おうかと考える作業はユーザーにとって楽しいものですね。 室野「ありがとうございます。実は最初は2〜3種類のみの予定だったんですが、モリサワさんにお願いして30種類を揃えていただきました。フォントのセレクトは広報宣伝室を中心に、社内でWeb制作に関わっているメンバーに声をかけて行いました。まず、見出しや本文に使用した際に可読性の高い実用的なもの。次に“ファッション”や“かわいい”などのテーマを挙げて遊び心を感じるものも選びました」 谷口「ユーザーからは、もっと数多くの種類のフォントを使いたいというリクエストも届いています。これは今後の課題として、モリサワさんと一緒に検討していきたい。よろしくお願いします(笑)」 室野「Webフォントの導入は、ユーザーのニーズにマッチしたことでヒットしました。導入を検討していた時期、会社が〈お客様と共に〉をテーマの一つに掲げていたので、まさにそれに沿ったサービスを実現することができたんです。これからもお客様に喜んでいただけるサービスに取り組んでいきたいと思います」 中島「Webフォントの導入が支持されたことで、契約数が伸びただけでなく、他社への乗り換えが減少し解約の抑止にも繋がっているんです。これからもユーザーの要望を汲み取り、より価値のあるサービスを提供していくために頑張ります」 — 日本のホスティングサービスを牽引する『さくらインターネット』さんの今後の展開が楽しみです。本日はありがとうございました。


新機能:WebAPI v2 とサービスステータスサイトをリリースしました

開発担当オムロです。寒くなってきましたが、ホットな話題です。 TypeSquareを2012年に公開してから今年で6年目。WebAPIも他サービスのWebAPIと比べ、使い勝手を悪く感じるところも多くなってきたので、WebAPIをリニューアルしリリースしました。 WebAPI v2では、レスポンス形式の変更や、いくつかの機能が追加されました。WebAPI v2における新機能の一部をご紹介します。 RESTベースAPIとJSON形式レスポンス WebAPIのインターフェースをREST化し、レスポンスにJSON形式を採用しました。 詳細はAPIリファレンスv2を参照ください。 APIキー発行 WebAPI v1では、認証APIにて、配信プランIDとログインパスワード用い、APIキーを発行します。 WebAPI v2では、APIキーを会員サイトで発行可能になりました。会員サイトにログインいただき、"マイページ" > "利用者登録" > "利用者詳細" よりAPIキーを発行ください。代表者の場合、APIキーを利用者に割り振ることも可能です。TypeSquareを契約された方がキーを発行し、委託先などに割り振ってご利用いただけます。(キー発行は1契約で最大10個まで) プロジェクトID WebAPI v1では、APIキー取得時に配信プランIDを指定するため、操作できるプランが固定される状況でした。 WebAPI v2では、APIのエンドポイントに"プロジェクトID"を指定するため、複数のプランに対して柔軟に対応することが可能になります。APIキー発行画面に表示されている "プロジェクトID" を利用し、プランを切り替えてご利用ください。 サービスステータスサイト Webフォント配信状況と、WebAPIの稼働状況を表示するサービスステータスサイトを新たに公開します。TypeSquareの過去1週間の稼働状況が一覧で確認可能となりますので、是非ともご活用ください。RSSの取得も可能です。 サービスステータスサイトはこちら。 WebAPI v1について WebAPI v1も引き続きサポートするので、並行利用が可能です。いまWebAPIをご利用中の場合は、そのまま変更なく運用いただけます。 最後に WebAPI v2ではアーキテクチャからすべて見直し、セキュリティの向上、TypeSquareシステム全体への負荷軽減、稼働率の向上も実現しています。 今後も改善は続けていきますので、ご要望等ありましたらフィードバックを頂けますと幸いです。 お問い合わせとフィードバックはこちらからお願い致します。


「デザイナーとして、ちゃんとできる」『ほぼ日刊イトイ新聞』とフォントのはなし

インターネットがようやくみんなのものになった頃からずっと、自分たちの日常周辺にあるものに目を向け、気付いたり味わったりさせ続けてくれているWebサイトがあります。 『ほぼ日刊イトイ新聞』さんです。中の人たちは、もしかしたらそんなつもりはないのかもしれません。 けれど、インターネットの「良心」は少なからずここから栄養をもらっているのではないかと思っています。 そんな ほぼ日さんが、モリサワのTypeSquareを導入されてから約1年が経過しました。 日頃、たくさんの個性的な記事をどんな風に制作しているのか、TypeSquareをどう活用していただいているのか、お話を聞いてきました。(以下、敬称略) 左から、システムご担当の斉藤妙子さん、デザイナーの岡村健一さんと田口智規さん ■記事1本ごとに、みんな手づくり — 「ほぼ日刊」としながら毎日新しい記事が更新されるほぼ日さん。一般的なニュースサイトとは違い、どれも決まったテンプレートではないデザインが特徴的です。ページ作りはどのように行われているのでしょうか。 岡村「だいたい、記事ごとに担当のデザイナーが1人ついて、それぞれが担当する形になっています。デザイナーは今10人くらいいますね」 コンテンツに合わせて、1ページずつ個性的なデザインが作られています — アートディレクターのような立場の方が、全体のディレクションをしているのでしょうか? 岡村「アートディレクターがいるわけではなく、みんなフラットに一人一人が責任を持って作って います。『ほぼ日手帳』のような大きな企画では外部からお手伝いの方も来ていただくので、そういう場合はディレクションが必要になることもありますが、基本的にはあまりないと思います」 — なるほど、担当した記事ごとにデザイナーさんの個性が出ているんですね。この体制はずっと変わらず続けていらっしゃるんですか? 田口「そうですね。最初の頃は特にデザインもなくテキストを流し込むだけでしたけど、12〜13年くらい前からページごとにデザイナーを立てて作るようになりました」 — PC版、ケイタイ版、スマホ版と、環境の変化に合わせて媒体も変わってこられましたが、文字を扱う上で何か課題になることはあったのでしょうか? 斉藤「PC版は基本27文字で改行しているんですけど、スマホでそれをやると1文字だけ落ちてしまったりするので、スマホ版では改行を消すという、うち独自のルールが生じてきています。 27文字というのは、誰が始めたのか......」 岡村「多分、糸井さんだと思いますよ」 田口「やっぱり、文字を読んでいてちょうどいい呼吸が入るのが27文字くらいというか。読んでいてリズムが出るというのかな」 — 情報としてのWebページとは全く発想が違いますね。 斉藤「基本、1ページ1ページ手作りなんです。やっぱりデザインとか、伝えたいコンテンツとして大切にしたいというところがあるので。そのために、なかなか全ページシステム化というのが難しくて。ここはレスポンシブ対応だけどここはしていない、というのが生まれてしまっている状態で、今はそこを移行中という感じですね」 ■Webフォントで作業効率化 — 1年ほど前からTypeSquareをお使いいただいていますが、導入のきっかけは何だったのでしょうか? 岡村「以前から『MORISAWA PASSPORT』を使っていたのですが、その無料枠ができた時でしたね(※)。それ以前は、欧文でGoogleフォントやAdobeのTypeKitを使ったり、あるプロジェクトの関連で別のWebフォントを使わせていただいたこともあって、意外に良いんじゃないかという手応えは持っていました。ちょうど、スマホ版を作る移行期とも重なっていました」 — 導入されてから、作業面で変わったことはありましたか? 田口「以前はわりといろいろなところで文字を画像化していたのですが、それをしなくてよくなりました。Illustratorで文字を打って、打ったら字詰めをして、できたら画像に書き出してHTMLで貼って、とやっていたのを、今は文字さえ打てばそのフォントで表示されるので、時間的にはかなり短縮にはなっていますね」 岡村「修正も楽ですよ」 田口「他の人が直そうとしても画像のリンクが切れていて修正できなかったり、というようなことも減ってきているはずです」 — システム面では何か変わったところはありましたか? 斉藤「そんなに変わってはいませんが、画像の点数が減ったのでサイズが結構軽くなったんじゃないかと。そこはすごく助かっています」 — ほぼ日さんは、システムを連携させる特別な契約でお使いいただいているんですよね。 田口「体感として、システム連携を導入してからの方が文字の読み込みは早くなっているんじゃないかと思います」 斉藤「速いということはやっぱり大きいので。導入方法も分かりやすいし、使いやすくて、導入コストもそんなになかったです。システム的にはまだちょっと途中段階で、もう少し自動化したいんですよね。例えばページを修正したタイミングでフォントファイルも修正できる形に作り直したり。もうちょっと便利になると思います」 (※)MORISAWA PASSPORT製品ご契約者に、追加料金なくTypeSquareをご利用いただけるプランです。年間1,000万PVまでご利用が可能。利用書体数に制限はありません。 ■デザインの「できた感」が全然違う — いろいろな種類のフォントをお使いいただいていますが、デザインの際はどのように選んでいらっしゃるんですか? 田口「だいたい、メインのタイトル(このページであれば『東京の虫を見る人』)を打って、ザーッと並べるんですよ。ゴシックだなと思ったらいろんなゴシックで。その中からこれかなというのを選んで、じゃあこのコンテンツはこのフォント……みたいなことを、僕は割としますね。デザイナーそれぞれが自由に決めるので、誰が一番に使うかはちょっと気にしているんですけど(笑)。社内で調整して決めているわけじゃないので」 同じゴシック系でもさまざまな表情が。こちらは「TBゴシック」を使用 — 他の方と使うフォントがかぶる場合もあるということですよね? 田口「かぶったら最悪ですよ(笑)。しかも特徴があって使いづらいものを上手に使われると、悔しかったりしますから。ちょっと癖のあるのを、うまく使えたらいいなと思っていますね。ベーシックなものを使いがちですが、コンテンツの内容に合わせて、変わった内容だったら変わった文字を使ってやろうとか、そういうのはちょっと楽しいです」 — 出来上がったページをご覧になって、読者の方や周囲の方から何か反応はありましたか? 田口「知り合いのデザイナーから、あ、Webフォントにしたなって言われました。その人もWebのデザインをするんですけど、自分の仕事では使えていないので、いいなーって(笑)」 — その方も、もうちょっと文字にこだわりたいという思いがあるのでしょうか? 田口「やっぱりデザイナーとしてはあると思います。システム標準のゴシック・明朝になるよりは、使いたい文字を指定できる方がデザイナーとしては嬉しいですよね」 岡村「紙のデザインでは自由にいろいろな書体を選べるじゃないですか。それがWebになった途端に選べないというのも変な話ですよね。だけど、TypeSquareを使うことでその制約がなくなった。デザイナーとしては、そのおかげでWebでもデザインの幅が広がってうれしいですね」 田口「標準のフォントを使った時と、自分の好きなフォントで組めた時では『できた感』が全然違います。自分が思い描いているイメージに近くなったというか。Webだからしょうがないと思っていた部分がきちんとコントロールできるようになったというのは、だいぶ違うところだと思います」 — 1ページずつ手づくりしていらっしゃるほぼ日さんの作り方にぴったりですね。本日はありがとうございました!


「工場萌え」でオトナも注目~Hondaが「バーチャル工場見学」にWebフォントを導入した理由とは

PCとスマホというまったく画面サイズの異なるデバイスにおいて、いかに美しいページを表示させるか。長らく課題となっている。その解のひとつが「Webフォント」だ。HondaのWebサイトにおいて、スマホでも美しいページを実現したWebフォントを導入した経緯について、Web担当者が語った。 「Web担当者Forum ミーティング 2017 春」の「マルチデバイス時代のウェブデザインに必要なインフラとは」と題した講演では本田技研工業(以下、Honda) のWeb担当者、谷口氏が登場。自社サイトでどのように活用しているのか? そのあらましを語り、モリサワの岡田が補足説明をした。 【本田技研工業株式会社 広報部 Web・社内広報課 主任 谷口 慎介氏(左)と株式会社 モリサワ エンタプライズ事業部 事業開発二部 フォントソリューション課 係長 岡田 茂久(右)】 各部門ごとにWebコンテンツを制作、広報部がそれをバックアップ Hondaでは、四輪・二輪・人事採用などの各事業部門が独自にWebコンテンツの制作を手がけている。なぜ各部門が動いているのか。その背景にあったのは、各部門によって直接の顧客は異なり、ニーズも刻々と変わっていくこと。顧客に最良のコンテンツを届けるには、より現場に近い社員が直接制作を手がけるべき――そんな発想に基づいたものという。 しかし、顧客を重視する一方で、各事業部門の制作者は必ずしもWeb開発技術に堪能というわけではない。 そこで谷口氏が所属する広報部がWebマスターとしてさまざまなバックアップを行う体制としている。サーバーの管理、CMSの管理はもちろん、コンテンツの確認をお客様視点で行っています。新車発表直後などのタイミングでは1日のサイト更新回数が100回近くに達するという。 「バーチャル工場見学」クルマ編でモリサワのWebフォントを導入 講演の主題であるWebフォントだが、Hondaが初めて導入したのは2015年にリニューアル公開した「バーチャル工場見学」クルマ編。ここでモリサワのクラウドフォントサービス「TypeSquare」が使われている。 【Webフォントが導入されたのはクルマ版のバーチャル工場見学ページ。バイク版は別に運用されている】 実際に訪問するかたちでの自動車工場見学は、小学校5年生のタイミングで行われることが多い。また秋に集中する傾向が強く、Hondaのバーチャル工場見学のページも秋になるとページビュー(PV)が増えるという。 バーチャル工場見学のコンテンツは2008年に公開されたものだ。このときも谷口氏が制作に携わったのだが、当時のPC画面サイズに合わせた580ピクセルで、2010年代中盤の基準からするとやや窮屈な印象となっていた。また、スマートフォンが急激に普及した時期でもあるため、Flashを利用したアニメーションが再生できないなどの課題も浮かび上がっていた。 【リニューアル前はページ幅を580ピクセルとしていたが、2017年の段階ではやや窮屈な印象。これを980ピクセルに拡大する狙いも】 さらにこのころ、大人の趣味としての「工場萌え」が世間的に認知されはじめていた。 そこで、時代に合わせたデザインや仕組みデザインや仕組みにし、さらに小学生の学習目的だけでなく、より幅広い層の好奇心を満たすことを狙ってリニューアルを進めた。 Webフォントを使いつつ2秒でページ表示できるのか? サービス継続性も重要視 2015年のリニューアルにあたって、谷口氏らが掲げたコンセプトは「スマートフォンでしっかり閲覧できること」。素材の撮影はHondaの鈴鹿製作所で行われたが、工場担当者側にも「工場萌え」が浸透しており、撮影にあたって多大な協力が得られた。 【リニューアルにあたってのコンセプト】 その素材をHTML化するにあたって初めて、制作スタッフがWebフォントの導入を進言し、それを受けた谷口氏も具体的な検討を始めた。 Webフォントは、ページの表示に使う文字フォントとして表示している各デバイスにインストールされている書体を使うのではなく、ネットから書体を取得して使う方式のこと。 HTMLのブラウザーでの表示では、一般的には端末にインストールされたデバイスフォントが利用されるが、ページデザイナーが意図したフォントがユーザーの環境に必ずあるとは限らない。Webフォントはこの問題を解消する目的で利用される。 【Hondaが導入したWebフォントサービス「TypeSquare」の仕組み】 フォントは、ページの見た目を決定的に左右する要素であり、デザイナーのこだわりも強い。古き良きWebデザイナーの世界では、テキストを画像化して表示するのもごく当たり前。しかしこの手法では、マルチデバイス対応にあたって弊害が出てくる。PCでの閲覧を想定したテキスト画像が、超高解像度ながら画面が小さいスマートフォンで表示すると、ジャギー(ギザギザ)が出てしまう。また、見出しなどの重要な文字列が画像になっていると、SEOでも不利になる。 ページ表示にかかる時間も危惧された。現在Hondaでは「(ページ表示完了まで)平均2秒」と規定しているが、フォントをクラウドからまるまるダウンロードしてそれだけのレベルが維持できるかは不安だったという。 さらには企業として利用するうえでWebフォントを継続的に利用したい中でWeb上には無料のWebフォントサービスもあるが、サービス継続性は必ずしも保証されていない。見かけ上は安上がりでも、利用していたWebフォントが数年後に突然終了すると、そこでまた開発コストが発生してしまう。そこで、「有償サービス」を利用することを選択することにした。 サブセット化でダウンロード時間を短縮 とはいえ、Webフォントはマルチデバイス依存がほぼ完全に解消できることから、導入に向けて動き出した。比較検討を繰り返すなかで、最終的に導入したのがモリサワの「TypeSquare」だった。 導入前の懸念であった表示時間の問題についてはTypeSquareの「サブセット化」機能が有効だった。日本語のフォントファイルは文字数の多さからファイル容量が大きく重くなりがちであり、ダウンロード時間もかかってしまう。しかしサブセット化することにより、サイトで実際に使う文字だけを抜き出し、必要な文字のみのフォントを配信するので、ダウンロード時間を軽減することができた。 講演では、バーチャル工場見学のサイトが実際に披露された。Webサイトの背景部分で工場の映像が再生されるなか、前面に表示された解説テキストをマウスドラッグで範囲指定(コピー)できるようになっており、これは紛れもなくテキスト部分に画像を使っていない証拠。また、動画再生にはFlashを使っていないので、スマートフォンでも問題なく再生されることが確認できた。 ページ表示速度については、規程の「2秒以内」に対し、Web解析ツールで調査したところ、5秒程度だった。動画がバックグラウンドで自動再生される高負荷なページという影響もあるが、情報の表示順を一部調整し、体感的に遅くならないような工夫を盛り込んだ。 なお、TypeSquareでは「スタンダードプラン」と「セルフホスティングプラン」が用意されている。 「スタンダードプラン」はまさに「クラウドフォント」としての位置付けで、WebサイトのコードにTypeSquareで提供されるタグを組込み、配信先のドメインを登録し、書体を指定するだけで、(フォントの保存場所を気にすることなく)サイトの閲覧者のブラウザに最適なサブセットフォントを配信し、表示させることができる。 「セルフホスティングプラン」は手動でWebのコンテンツに応じたサブセットフォントを用意し、Webサーバ上に自ら設置する方式である。こちらはWebサイトのコンテンツが変更になる度に作業が必要な点やスクリプトタグによる暗号化されたサブセットフォントを表示展開を行うため、利用される頻度は極めて少ないという。 現在は導入の簡便さや表示速度から「スタンダードプラン」が多く利用されている。また、企業の大規模な導入やシステム連携するような利用方法には「アドバンスドプラン」が用意されている。 【TypeSquareではさまざまなフォントを用意しているが、このうち実際に表示で使用する分だけを「サブセット化」し、読み込みスピードを確保した】 谷口氏はWebフォント導入を振り返って、特に大きな問題はなかったと評価。バーチャル工場見学以外のHonda公式サイト内コンテンツにもWebフォントを広めたいとしており、すでにバイクや汎用製品(除雪機・耕うん機・発電機など)、過去のプレスリリースを振り返る「Honda Chronicle」で一部導入した。 ただし、TypeSquareのようなクラウド型のWebフォントはPVに応じて料金が変わる。大規模導入にはコスト面の課題をクリアする必要もありそうだ。 欧米はもちろん、日本でもWebフォント普及へ 谷口氏に続いて、モリサワの岡田が補足説明を行った。 Webフォントは欧米で導入が進んでおり、米国ではダウ・ジョーンズ工業株 30種平均の採用銘柄企業30社中、29社が自社サイトにWebフォントを導入していた。(2017年4月20日時点) もちろん英語フォントはアルファベット26文字・数字・記号程度で構成されるため、JIS第一水準だけで3000字近い文字種を用意しなければならない日本語(漢字)フォントに比べて容量は小さく利用しやすい。また、海外ではコーポレートフォントなどのフォントを利用したブランド戦略を行う企業も多い。 ただ、それでも膨大な種類の漢字フォントが必要な日本において、Webフォント導入は徐々に進んでいると岡田氏は指摘。国際的ファッション誌の日本版サイト「VOGUE JAPAN」、オンラインデザインツール「Picky-Pics」、オンラインストア構築サービス「STORES.jp」などがTypeSquareを利用中という。 【「VOGUE JAPAN」でもすでに利用されている】 なお、TypeSquareでは書体数を制限した無料プラン(月1万PVまで)を用意。ページのヘッダー部にタグを埋め込む程度の簡単な手間でWebフォントの使い勝手を体験できる。有料プランについては、月100万PVまでの「スタンダードプランII」が月額4000円(税別)。ライセンス製品パッケージ「MORISAWA PASSPORT」のオプションプランもある。フォントは、ことばの意味を伝えるだけではなく、デザイン要素もかなり強いものだ。紙媒体のデザインのように文字を扱えるWebフォントは、Web上のユーザインタフェースとして顧客コミュニケーション改善にも役立つだろう。 TypeSquareへのお問い合わせはこちら