せきぐち ひろゆき 関口浩之ソフトバンク テクノロジー株式会社 Web フォントエバンジェリスト 1960 年 群馬県桐生市出身 1984 年 電子機器メーカーにて日本語 DTPシステムやプリンタの製品開発 1995 年 ソフトバンク技研 ( 現ソフトバンク テクノロジー ) へ入社 1996 年

Transcription

1 今年 流行し始めた 日本語 Web フォントの現状と未来 ~SEO 効果やアクセシビリティで注目される Web フォントとは ~ [MT 東京 -01] Movable Type ケーススタディ Vol.1 ソフトバンク テクノロジー株式会社 2014 年 4 月 20 日 KDDI ウェブコミュニケーションズ東京本社セミナールーム

2 せきぐち ひろゆき 関口浩之ソフトバンク テクノロジー株式会社 Web フォントエバンジェリスト 1960 年 群馬県桐生市出身 1984 年 電子機器メーカーにて日本語 DTPシステムやプリンタの製品開発 1995 年 ソフトバンク技研 ( 現ソフトバンク テクノロジー ) へ入社 1996 年 大手インターネット検索サービスの立ち上げプロデューサ 1997 年 インターネット黎明期に大手インターネットサイトの運営責任者 2001 年 インターネット決済センターの立ち上げプロジェクトリーダー 2006 年 携帯アプリ iphone/ipadのビジネスアプリなどのプロデューサ 現在 Webフォントサービス フォントプラス エバンジェリスト パソコンは漢字トークや MS-DOS パソコン通信の時代から勤しむ 文字オタク IT オタク天体観測オタクテニスオタク 2

3 ところで 3

4 直訳すると movable type 活版印刷の + プレグレッシブ英和中辞典より 4

5 文字の豆知識 文字を観たことがありますか? 5

6 ファッション雑誌を 観察してみましょう 雑誌の表紙はさまざまな美しい書体でデザイン美を表現してます! 6

7 テレビのテロップ文字を 観察してしてみましょう コミックレゲエ スーラ 言葉のニュアンスに合った楽しい書体で表現しています! ロウディ くろかね スランプ 7

8 文字 (=Font 書体 ) って 単なるパーツじゃないよね? 8

9 9

10 事例 : 10

11 少し前のホームページの文字は 11

12 ホームページで使えるフォントは 2, 3 種類だった 12

13 13

14 HTML5 登場でブラウザ上に直接様々なフォントが表示できる! 14

15 Web フォントでこんなこともできちゃいます! 魚の泳ぐ様子をウェブフォントで表現しました 魚をクリックすると詳細説明が表示されます 魚の特徴に応じた書体選択と文字の動きが感動ものです 上下左右にスクロールすると多彩な魚がどんどん出現しますのでじっくり楽しんでください 魚は画像ではなく Web フォントなのです! Web フォントアワード 2011 最優秀作品 推奨ブラウザ : パソコンの Chrome/Firefox ご自身の Twitter アカウントまたは有名人アカウントを入力してみてください TwitterAPI でタイムライン取得し いろんな書体でモーションタイポグラフィを表現しました 文節分析し文字サイズ変更したり 3D で表示したり 読むのが楽しくなります 書体名も表示されますのであわせてお楽しみください Internet Explore では 3D に対応していません どちらも力作ですね じっくりお楽しみください! 15

16 16

17 システムフォントのお話 OS 毎に内蔵しているフォントは異なります Mac OS や ios Windows Android ヒラギノ MS P ゴシック / メイリオ新ゴ, マルベリなど Web フォントを利用すると 例 ) font-family: FOT- 筑紫明朝 Pro D ; デバイスや OS を気にせず 同一フォントで表示できます 17

18 導入はむずかしいの? システムフォント Web フォント ( コメット, アポロ, ニューシネマを使用 ) マークアップ方法は次ページにて 18

19 基本は 2 ステップです 1 FONTPLUS で発行するタグを貼り付ける 2 Font-family を指定する 19

20 Web フォント ( クラウドサービス ) 概要図 FONTPLUS クラウドサービス Web フォント配信フォーマット と 〇〇フォントください h1 { font-family: MatisseElegantoPro-DB ; } 必要な文字 ( グリフ ) だけ Web フォント配信 配信方式は二通り ( スマート / バリュー ) HTML, CSS など あなたの Web サーバ 20

21 海外の Web フォント事情 海外では Web フォントが当たり前のように使用されています /en_us/ グルーバルナビやバナー上の文字がコピペできます! お確かめください 21

22 海外の Web フォントサービス一覧 サービス名 Google Web Fonts Fonts.com Typekit Fontdeck Webtype WebINK Typotheque Web Type (Ascender) Fonts Live TypeFront Kernest Font Me Up URL

23 日本語 Web フォントサービス一覧 サービス名 会社名 FONTPLUS( フォントプラス ) 有名フォントメーカ書体 ( 約 700 書体 ) が全部使える百貨店型サイト ソフトバンク テクノロジー株式会社 TypeSquare( タイプスクウェア ) フォントメーカ最大手モリサワ直営店 株式会社モリサワ デコもじ シーサー株式会社 アマナイメージズ WEB フォント 株式会社アマナイメージズ もじでぱ 緑屋電気株式会社 23

24 日本語 Web フォント変遷 海外 Web フォントサービスに 遅れること 2 年 2011 年夏 FONTPLUS 始動 サイトオーナー層ブランディング 2014 年日本語 Web フォントをあたり前に利用する時代へ ディレクター主導グローバルナビや見出し 2014 年 4 月 WinXP サポート終了 コーダー主導テクニカルな活用 デザイナー主導スペシャルコンテンツ モダンブラウザ化加速! 2013 年表示速度の大幅改善で日本語 Web フォントが注目し始める大手企業も導入開始 2011 年アーリーアダプター期 2012 年先端技術好きな制作会社が特設サイト等で活用 2013 年 5 月 15 日に FONTPLUS は大幅な速度改善実施 24

25 25

26 日本語 Web フォントの表示速度が高速化された後 様々な業界の企業様や官公庁様などにおいて FONTPLUS の導入が加速しております 日本ケロッグ様 サイトリニューアルに際し 画像テキストをできるかぎり廃止し グローバルナビゲーションや見出しに Web フォントを導入 メインビジュルのキャッチコピーも Web フォント ( 丸ゴシックのスーラ ) を採用したところ サイト全体が美しくなりました ブランディング SEO 対策 Web 制作効率化が同時に実現できました ローテーションのメインビジュアルのキャッチはコピペできますので実際にお確かめください 26

27 小田原市様 年 12 月 小田原市公式ホームページのサイトリニューアルに際し 市町村公式ホームページとして日本で初めて日本語 Web フォントを導入しました Web アクセシビリティ向上のための [ 文字色変更 ] や [ 文字サイズ変更 ] 機能に実現において 画像文字ではなくテキスト (Web フォント ) を採用したことで格段に使いやすくなりました また Google 翻訳 API を活用し多言語対応しました 画像テキストだった箇所を限りなく Web フォントに置き換えたことで ブランディングを向上しつつ テキスト読上げ ( スクリーンリーダ ) や翻訳への対応が短期間で実現できました 27

28 FONTPLUS( クラウド ) 導入事例 事例掲載の許諾をいただいたサイトの一部です 大江戸温泉物語様グローバルナビゲーションや見出し キャッチコピーに Web フォント ( 筑紫明朝 ) を採用 サイトブランディングと SEO 対策 作業効率化を実現 鬼怒川金谷ホテル様 バリュー方式ホテル名 住所や電話番号を画像文字からWebフォントに置き換えたら住所がコピペができる 電話がタップしてできる お客様から喜ばれました 報徳会館様メインビジュアルのムービーやパララックスのキャプション文字にライラを採用 神前結婚式場にマッチした書体ですね 可読性も抜群です 日本調剤様サイト全体に優しさを出すためにモトヤマルベリ ( 丸ゴシック体 ) を採用 ブランディングの向上に加え お薬 処方箋 が身近に感じられるようになりました よしもとクリエイティブエージェンシー様 Web フォントを使用すれば様々な書体で楽しさをアピールできます 動画サムネイル + キャッチコピー併記でコンテンツ内容が的確に伝わります 20 世紀フォックスジャパン様映画に相応しい書体と言えば字幕用フォントです Web フォント適用部分を限定 ( 映画キャプションのみ ) させることで映画の世界観を見事に表現 28

29 ピクシィブ様デザイン性と見やすさの観点で導入を検討 FONTPLS は導入企業が非常に多いですし価格も予算内だったので安心して導入できました SOY&CO. 様観光ガイドやレシピ本を読む感覚で読むことができます Web フォントが高速化されたので全文 Web フォント適用しましたがストレスありません あなたに会いたい!( 千貫りこさん ) Web クリエイター千貫りこさんのブログサイト 女性ならではの感性で各業界で活躍している方々を取材 使用している書体が素敵ですね ノベルゲーム ( 言語社様 ) バリュー方式 Web フォントを使用している作品は 森川空のルール シリーズです タイトルクレジット後の小説本文は日本語 Web フォントです 読者が書体選択 ( サリーちゃんのパパ様 ) ブログ読者が自由に書体選択できる斬新な実験サイト 例えば くるくるかわいい を選択し [ 切り替える ] ボタンをクリックしてください 第 1 回 Web フォントアワード 2011 受賞作品 タイポマップ ( こへ様 ) Webフォントでタイポマップ プルダウンメニューで言語や文字 (1 文字 or 単語 ) の切替 面積や人口等の切替も可能 文字をクリックすると詳細も 第 1 回 Webフォントアワード2011 受賞作品 フォントプラス導入事例特設サイトもご覧ください 29

30 FONTPLUS エンタープライズ版の事例 FONTPLUS エンタープライズ版は Web フォント変換サーバを OEM 提供したり 独自 API で高度なシステム連携を実現するための仕組みです 下記 2 つは業務提携して新たなジネスモデルを一緒に構築した事例です 利用者が CSS やプログラミングの知識一切なしで日本語 Web フォントを利用できるよう システムを共同開発しました レンタルサーバ事業者 ソーシャルメディア事業者やゲーム事業者 大規模サイトを運営している企業 および自社書体 ( コーポレートフォント ) を所有している企業様等にてご利用いただいてます 通常の FONTPLUS クラウド版 (Web オンライン決済でお申し込み ) の仕様や価格とは異なりますので 詳細は弊社までお問合せください 1 ACCESS HTML5 対応デジタルサイネージ SIGNESS が Web フォントに対応 プレスリリース : いままでのサイネージシステムは動画ファイルを液晶画面等に動画ビューアで再生するのが一般的でした 今回の HTML5 ベースで開発したオーサリングシステムでは キャンペーンに適した装飾書体を Web フォントで誰でも簡単に綺麗にコンテンツ制作できます コンテンツが HTML5 ベースですので 閲覧端末は液晶テレビではなく Android や ipad などのタブレットのブラウザで再生できる仕組みです お手軽かつ低コストで新世代のデジタルサイネージが実現しました 2 デジタルステージ ホームページ作成ソフト BiND7/6.5 LiVE2 が Web フォントに対応 取材記事 : 特設サイト : デジタルステージのレンタルサーバのバックエンドにフォントプラスを設置することでバリューライセンス ( サブセット方式 ) とスマートライセンス ( オーサリングプレビュー ) をシステム連携しました 利用者はCSS3やプログラム知識は一切不要で プロフェッショナル書体が200 書体以上ご利用できます 丸明オールドで有名なカタオカデザインワークスの書体と 筑紫明朝やマティス ラグランパンチ等で有名なフォントワークスの書体に対応しています 30

31 お役立ち情報 FONTPLUS インタービュー記事 2014 年 1 月開催のデベロッパーカンファレンス MTDDC 名古屋 でのインタビュー記事です Web 制作会社の立場で複数案件で Web フォントを導入するケースもご説明しています TIPS サイト "FONTPLUSTIPS" コーディングチップスが満載 また書体や文字組みに関する詳しい解説なども掲載しています タイプデザインや Web エンジニアで活躍している大谷秀映氏が出稿しています 31

32 日本語 Web フォントは高速表示の時代へ 日本語 Web フォントを利用したいけど表示が遅いからなぁ と思っている方が多いのではないでしょうか? ご存じの方がまだ少ないのですが 昨年 FONTPLUS は Web フォントの表示速度を大幅に改善しました 下記の動画でお確かめください 新旧 FONTPLUS の速度比較 左が旧 FONTPLUS(2013 年 5 月 14 日まで ) 右が現行の FONTPLUS です 以前はシステムフォントが表示された後 一呼吸してから Web フォントが表示されていました 現行の FONTPLUS ではシステムフォントの表示が感じられないケースも多くなりました 2013 年 5 月 14 日までの旧フォントプラス 2013 年 5 月 15 日以降の現行フォントプラス ( 注 ) 表示速度はそのページのコンテンツ構成やお客様の Web サーバのコンディション 閲覧者ブラウザのレンダリング性能などに左右されます 32

33 文字詰め機能リリース ( 新機能 ) 通常モード ( 文字詰めなし ) モック : 文字詰め機能は二種類 1 プロポーショナルメトリクス &pm=1 タグ モック : この方式では IE8 以前のブラウザではポロポーショナルメトリクスは動作しませんが通常の Web フォント表示になります プロポーショナルメトリクスの詳細 2 余白なし詰め + LetterSpacing &t=0 タグ モック : この方式 ( 字面の両側余白削除 + letter-spacing 調整 ) では IE8/7/6 の古いブラウザでも動作します 文字詰め機能の詳細 33

34 ヒラギノ書体追加リリース ( 新書体 ) FONTPLUS は国内外有名フォントメーカと提携し 約 700 書体が使える百貨店型 Web フォントサービスです これだけのプロフェッショナル書体が Web フォントとして使えるのは FONTPLUS だけ! 今後もフォントメーカとの提携を増やしてゆきます 2014 年 2 月ヒラギノ書体を追加リリース Windows マシン上のブラウザでヒラギノ書体が表示できる! モック : 年 2 月に大日本スクリーン製造と業務提携しヒラギノ書体が FONTPLUS で使用できるようになりました 34

35 FONTPLUS の料金体系 FONTPLUS クラウドサービス デザイナー御用達のプロ用フォントが 700 書体使える! 中国語 韓国語 ヒラギノ書体 価格体系 Web フォント形式 と 〇〇フォントください 必要な文字 ( グリフ ) だけ Web フォント配信 配信方式は二通り ( スマート / バリュー ) Web サーバ HTML, CSS など スマートライセンスのランニング費用は 100 万 PV 換算で 1 万円 ( 税抜 ) と非常にリーズナブルな料金体系です 書体数の制限や登録ドメイン数の制限はありません バリューライセンスは更新頻度の少ないキャンペーンページなどの静的ページに適しています ランニング費用はスマートライセンスの 1/3 の料金です ただしバリューライセンスはドメイン単位です 35

36 36

37 新しい絵の具 Web フォントを使用して 例 : font-family パール Pro M 事例 : サイトブランディング! 37

38 さらに SEO 対策制作効率 UP アクセシビリティ向上 ユーザエクスペリエンス向上 38

39 Web Design 表現の新しいアプローチ 日本語 Webフォント 一度ご検討ください 本資料にて記載されている会社名 製品名 サービス名は 当社または各社の商標もしくは登録商標です 39

40 40