未分類

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フォント導入は徐々に進んでいると岡田氏は指摘。国際的ファッション誌の日本版サイト「VOUGUE JAPAN」、オンラインデザインツール「Picky-Pics」、オンラインストア構築サービス「STORES.jp」などがTypeSquareを利用中という。 【「VOUGUE JAPAN」でもすでに利用されている】 なお、TypeSquareでは書体数を制限した無料プラン(月1万PVまで)を用意。ページのヘッダー部にタグを埋め込む程度の簡単な手間でWebフォントの使い勝手を体験できる。有料プランについては、月100万PVまでの「スタンダードプランII」が月額4000円(税別)。ライセンス製品パッケージ「MORISAWA PASSPORT」のオプションプランもある。フォントは、ことばの意味を伝えるだけではなく、デザイン要素もかなり強いものだ。紙媒体のデザインのように文字を扱えるWebフォントは、Web上のユーザインタフェースとして顧客コミュニケーション改善にも役立つだろう。 TypeSquareへのお問い合わせはこちら


フォントでコミュニケーションする方法 その5 「フォントを味方につけるには? クリエイティブディレクター兼ショップオーナーの場合」

植物の種子や花をアクリルキューブに閉じ込めた標本プロダクト「Sola cube」を製造販売する「ウサギノネドコ」。京都の町家をリノベーションしたショップは、この「Sola cube」をはじめ、鉱物や植物、ウニの殻、骨などで満たされ、様々な自然の造形物に囲まれた博物館のような空間です。自然の造形美をテーマにしたプロダクトが誕生したきっかけや、その世界観をどんな風にホームページで表現したのか。代表の吉村紘一さんに話を伺いました。 — 「ウサギノネドコ」を初めて訪れましたが、まるで自然史博物館を訪れたときのようなワクワク感を感じる空間ですね。 吉村さん〉ありがとうございます。ウサギノネドコは自然の造形美と背景にある物語を楽しむことを伝える活動をしていますので、結果的に自然史博物館のような空間になっているかもしれません。様々な自然の造形物を使った「標本プロダクト」をオリジナルで製作してもいまして、メインプロダクトである「Sola cube」は植物の造形美をテーマに4cm角の透明アクリルキューブに植物の種子や花などを封入しています。 Sola cube — 最近は新たなシリーズも増えているとか? 吉村さん〉黄鉄鉱や紫水晶など鉱物を用いた「Sola cube Mineral」、ミクロ生物を3Dモデリングし、そのデータをレーザー彫刻した「Sola cube Micro」などもシリーズとして登場しています。ミクロ生物ならディテールまで忠実に表現していたり、学術論文をもとにして研究者の方に監修いただいたりと、科学模型的に使われることを目指したので、完成度の高さにはかなり自信があります。また、オブジェ的にも可愛いウニの殻をきのこに見立てた標本「Uninoco」などもあります。 Uninoco — 吉村さんは、ここを始められる前は広告代理店で広告制作に携わっていらっしゃったと伺いました。広告代理店の社員からものづくりの仕事へと転身されたというのも驚きです。 吉村さん〉大学時代は、3DCG制作のゼミを専攻していて、当時はアニメーションなどを作っていました。そのときに自分が作ったものが世に出るおもしろさを知りまして、広告代理店に行けば色々なメディアを横断して、様々なものづくりに関われるかなと入社しました。実際、マーケターやコピーライターとして広告制作に携わることで、様々なことに関わることはできました。ただ、広告はすでに“在るもの”をどう見せるかを考える仕事だったので、仕事に深く関われば関わるほど、根本のものづくりの部分からやりたいという思いがふつふつと湧いてきまして…。そんなときに作ろうと思ったのが、この「Sola cube」だったんですよ。 — どういったきっかけで、これを作ろうと思ったのですか? 吉村さん〉何か自分で表現できるもの、できれば手でリアルに感じられるものを作りたいと思っていたときに、たまたまモミジバフウを手に取ることがありました。なんて美しいんだと衝撃を受けたのと同時に、これを越えるものは作れなさそうだなという諦めの気持ちも覚えました。そうならば、新たにゼロからプロダクトを作るよりも、この美しさを伝えるものをプロダクトにした方がいいなという発想から生まれました。最初は自分自身でエポキシ樹脂を使って試作を作っていました。これがまさに初めて作ったモミジバフウを封入した試作品です。 — そして、このウサギノネドコへと行き着くわけですね。 吉村さん〉前職の広告代理店へは2001年に入社したのですが、そのときから10年経ったら独立しようとは思っていました。この「Sola cube」を2006年に考案して、ホームページなどで販売し始めたら、かなり反響がありまして。最初は知人ベースの口コミから始まって、東京・表参道のスパイラルマーケット(生活雑貨を通して、新しい生活提案を行うセレクトショップ)でも取り扱いが決まりました。そうやって、じわじわ広がったこともあり、2011年に独立して、ウサギノネドコをスタートさせました。 — しかし、この「Sola cube」をアーティスト作品ではなく、あくまでプロダクトとして販売されている理由は? 吉村さん〉アーティストのみなさんはご自身の表現を世に問うため作品を作っていらっしゃると思いますが、私の場合はあくまで自然の造形美を伝えることを主に置きたかったということがまず大きな理由です。もともと、自身の表現欲求に端を発してこのプロダクトは生まれましたが、自然の造形美が自分の表現よりも圧倒的に美しいことに気づいてしまったので、自分という存在は消して伝える側に徹しようと。あとは、アートの文脈に乗せるよりもプロダクトの世界に乗せた方が新しく見えるんじゃないかな、という考えもありました。ほとんどのプロダクトが機能的である中、「Sola cube」のように機能のないものが逆に異質に見えて目立つだろうなと。そこは前職で培ったマーケティング発想でのポジショニングを少し意識しています(笑)。また、たくさんの人に届けたいという思いもあったので、プロダクトの方がそれを実現出来るという思いもありました。 — ホームページを拝見したのですが、ここにも吉村さんが思い描く世界観がうまく反映されているように思いました。 吉村さん〉自然の造形美をテーマにしているので、博物館のようなテイストをホームページでは意識しています。webデザインは高橋彩さんという方に依頼したのですが、「標本ラベルのようなデザインプラットフォームを作って欲しい」とお願いをしました。メニューバーで囲み罫線を使うことや、フォントで明朝を使うことで、標本ラベル感を演出してもらったと思います。基本は游明朝という書体で表示されるデザインにはなっていますが、ホームページをご覧になるPCやスマートフォンの中にその書体がなければヒラギノ明朝、MS明朝、それでもなければどんな明朝でもいいから、とにかく明朝で表示してくれ!というデザインの設定にはなっています。アカデミックでスッキリした雰囲気を感じさせるために明朝で表示することにはこだわってもらいました。 — 確かにスッキリとカテゴライズされたデザインは、博物館っぽさを感じさせますね。 吉村さん〉あとは「Sola cube」というプロダクトが持つ余白感を意識してデザインしてもいます。行間や文字間にいたっても、広めの余白を作ることで、情報量が多い割には息苦しくなく、文章がスッと読み手に伝わるような、削ぎ落とされた印象にはなっているのではないかと思います。ウサギノネドコのロゴも同じ理由で少し余白を広めに取ったデザインにしています。 — その話を改めて伺うと、「ウサギノネドコ」という屋号は不思議な響きがあって、それを明朝でシンプルに表現されている点が気になります。 吉村さん〉ウサギノネドコは“ヒカゲノカズラ”という植物の呼び名なんです。フワフワとした感触の葉や茎をウサギにとっての居心地のいい住空間に見立てて、昔の人がそう呼んだのだとは思います。この店もお客様にとって居心地のいい空間を目指したかったこともありますし、自然の造形美をテーマにするにはピッタリの屋号だと感じ、そう名付けました。また、京都の町家は「鰻の寝床」ともいわれるので、それにひっかかっているのも面白いですし(笑)。 明朝にしたのは、かっちりしている中にも、どこか柔らかさを感じる書体が店のイメージと合うと思ったのと、カタカナ表記にしたのは、一見すると何の店か分からない感じがよかったからです。カタカナになると言葉があまり意味を持たなくなるというか、プレーンな雰囲気になりますよね。 — ちなみに、吉村さんが今後使ってみたいフォントはありますか? 吉村さん〉今後ウサギノネドコが紙媒体で何かを作るようなことがあれば、リュウミンとかは使ってみたいですね。明朝として定番ですし、とても美しいフォントだと思うので。と、明朝の話ばかりをしてしまったのですが、ゴシックでも 新ゴ、中ゴシックBBB、秀英角ゴシック銀あたりはシンプルかつスッキリしていて、ぜひ使ってみたいです。 リュウミン M-KL サンプル デジタル文字は美しく進化する — 今は町家の1階がショップで、2階が1日1客の宿、そして2015年にはその横にカフェをオープンさせるなど、展開が広がっていますね。 吉村さん〉宿とショップをオープンしてから3年でカフェをオープンしました。カフェも以前からやりたかったことなので開店することにしました。ショップがちょっとマニアックなので(笑)、カフェがある方が気軽に立ち寄ってもらえるかな、と。ショップ、宿、カフェといくつかの入口があって、どの入口からも自然の造形美を体験できる場にできたらいいなあと思っています。 今は「Sola cube」を中心に国内に約100店舗、海外に約30店舗と私たちのプロダクトの取り扱い店舗もだんだん増えてきたので、もう少し先の目標としては、またウサギノネドコの直営店を出店できればとは思っています。よくスタッフと話しているのは、「ウサギノネドコ ブラジル・アマゾン店」とかあったら面白いね、って。お店があって、すぐ近くには自然の造形美の宝庫があるという(笑)。世界各地にある自然の美しさをいろんな形で触れることができれば絶対楽しいでしょうね。   ウサギノネドコ京都店 京都府京都市中京区西ノ京南原町37 075-366-8933 〈ショップ〉11:00〜18:30 〈カフェ〉11:30〜20:00(ラストオーダー19:00) 木曜休み 〈宿〉定員2〜5名、IN15:00〜18:00、OUT10:00 宿泊料金・予約に関してはウェブサイトを参照 http://usaginonedoko.net/


フォントでコミュニケーションする方法 その4 「Webデザイナーが心がけている、タイポグラフィのあれこれ」

お客さまと直接会って話すことが叶わないWebサイトにとって、文字は商品やサービスの良さを伝えるために大切な要素。また、「美しく読みやすい」文字組みをデザインするためには、フォント・文字サイズ・太さ(ウエイト)・行間隔(行間)・文字間隔(字間・カーニング)など、文字同士のバランスを取ることが求められます。この文字組みの技法は “タイポグラフィ” と呼ばれ、適切なタイポグラフィを用いてデザインすることが、良いコミュニケーションを取るためにとても重要なのです。 シリーズ「フォントでコミュニケーションする方法」では、デザイナーがフォントに対して日々感じていることを対談形式でご紹介。今回も3名の女性Webデザイナーの皆さまに、タイポグラフィについて考えていることをざっくばらんに語っていただきました。 フォントは決まった! さて、次はどうしよう? ほとんどのWebサイトには、読ませるための「テキスト(文字)」が存在します。例えば、商品やサービスの説明、クチコミ、プロフィール、Q&A、お店や会社の概要etc. 数えだすとキリがありませんよね。つまり、テキストはWebサイトにおいて多くの面積を占めることになり、タイポグラフィを適当にしてしまうと、デザインも適当な印象になってしまいがち。そうならないように、デザイナーは何を意識しているのでしょうか。 ■時代によって、Webサイトに求められるタイポグラフィは変化する? — みなさんは、Webサイトの文字部分のデザインをするとき、どのようなことを意識しているんですか? デザイナーA:デザイナーは誰でもそうだと思いますけれど、まずは「美しくて読みやすい」ことですよね。 デザイナーB:かつてはファーストビュー(Webサイトで最初に表示される画面領域のこと)に、言いたいメッセージを全部収めて欲しい! というオーダーが多かったんです。ただ、ディスプレイの限られたエリアに必要な文字要素を収めようと思ったら、字間や行間を詰めたデザインにする必要があったりで。でも、詰めすぎると読みにくいし、正直、読む気が起こらないというか…。最近は比較的そのようなオーダーも減ってきて、読みやすい文字組みができてうれしいです。 デザイナーC:モバイル環境への対応や、レスポンシブデザインが普及していくことで、どんな端末でも「スクロールさせること」がネガティブ要因ではなくなってきていますしね。 デザイナーA:あと、行長(1行あたりの文字数)も意識しています。長くて1行40文字くらいがいいと思っているんですけれど、最近はディスプレイが大きくなってきているから、多少は文字数越えても大丈夫かなって。 — なるほど、その時代で多くの人が使っている端末に適したタイポグラフィがあるんですね。 ■タイポグラフィで余白をデザインしたい — ちなみに字間や行間って、広い方が文字組みはキレイに見えますか? デザイナーB:一概にそうとも言えないんですけれど、“読ませる文字”をアプリケーションにお任せで流し込むと「若干読みづらいかな?」という印象を受けることがあって、私は少し広めに取ることが多いです。 デザイナーC:広げすぎると、それはそれで何だかパラパラして一定量以上の文章を読ませるのには向かないから、そのバランスが難しいですね。“見せる文字”、例えばキャッチコピーやブランドコンセプトのような短文は行間が広いのがハマるんですけれど。 デザイナーA:詩的な文章は行間広めなほうが雰囲気でますよね。あと、“読ませる文字”でも、写真につけるキャプションは行間広めでもしっくりきます。文字を“読ませたい”のか、それとも“見せたい”のか。そこをきちんと理解してタイポグラフィを考えると、「美しくて読みやすい」文字がデザインできるんだと思います。 デザイナーB:あと、行間って一般的に150%から170%くらいが読みやすいとされているんですけれど、最近はクライアントさんによっては200%くらい取ることもあります。 — 例えば、どんなクライアントさんですか? デザイナーB:手作り感があったり、素材にこだわっていたり、女性向けだったり。柔らかい印象のクライアントさんですね。いいデザインって、行間や余白の使い方が上手いんだと思います。 ■私たちがこだわる、タイポグラフィのあれこれ — 他にタイポグラフィでこだわっていることって、ありますか? デザイナーA:個人の好みが出てくるんですけれど、私は、カタカナは詰めた方がキレイだと思っていて。細かい話をすると、小さい「ッ」や「イ」「ト」を見ると詰めたくてウズウズします。あと、例えばWebサイトで「Q&A」のコーナーを作る時、「Q」のヒゲ部分(スワッシュ)は細くてシュッ! と伸びているほうがキレイだと思うので、Q&Aの部分だけヒゲの立派な(笑)別のフォントを選んだりします。 デザイナーB:当たり前のことかもしれませんが、見出しと本文とでヒエラルキーを意識します。見出しは「見出しらしく」フォントサイズを上げてウエイトを太らせ、必要であれば色も変える。ジャンプ率が高いと元気な印象を受けるし、低いと知的で上品な雰囲気が出ると思っています。でも、低すぎると見出しっぽく見えないから、バランスが難しいですね。 デザイナーC:私は、文字に長体(文字を縦長に変形させる)をかけると文字組みがスタイリッシュになるし、限られたスペースにたくさんの文字を流し込めておトク? なので、よく使います。あらかじめ長体のかかったコンデンス書体もありますし、WebフォントならCSSで自由に長体がかけられるので、デザインの可能性が広がりますね~。 — どのフォントを選ぶかに加え、全体の並び方のバランスを取ることも重要なんですね。これから私も、もっと意識して文字組みを見るようにします。深くて面白い世界ですね…。 (次回へ続く)