ウェブフォントの魅力とこれから Webデザインの新しい潮流 ソフトバンク テクノロジー株式会社 Webフォントエバンジェリスト 関口 浩之 1
はじめに 欧米では google webfontsやfonts.comなどを活用して 見出しや リード文などをWebフォントで表現することは 当たり前のように普及 しています 昨今 フォントプラス Fontplus ソフトバンク テクノロジー社 や TypeSquare モリサワ社 の登場でプロフェショナル向け書体が Webページでも簡単に表現できるようになり 日本語環境において Webフォントが本格的に使える条件が整ってきました 今年が 日本語Webフォント元年 といわれています 本日のセミ ナーで 実際の導入事例やデモサンプルをご覧いただきながら Webフォントや文字の楽しさを一緒に学んでいただけると幸いです 2
講師プロフィール 関口 浩之 ソフトバンク テクノロジー株式会社 Webフォントエバンジェリスト / シニアコンサルタント Webフォント事業開発部 1960年生まれ 群馬県桐生市出身 電子機器メーカーにて日本語DTPシステムやプリンタの製品 企画の仕事を10年間経験した後 1995年にソフトバンクへ転職 Yahoo! JapanなどのInternet 関連の様々な新規事業の立ち上げに従事 現在 日本語Webフォントサービス フォントプラス FONTPLUS の普及のため 日本全国 飛び回っている デザイン性に優れた美しい文字をCSS3でブラウザに楽しく表現できるWebデザインの新たな世界 を知っていただきたい 3
今年 Webフォントが注目されています いままで デザイン書体をブラウザで表示させるためには 画像化する必要がありました HTML5とCSS3の普及と 日本語Webフォントサービスの登場により デザイン性の高 い文字を画像化しなくても 表現できるようになりました 画像ツールで作成した文字 png や jpg だと 拡 大 Webフォントで表現すれば 拡大しても綺麗 4
ウェブフォントって 基礎編 5
日本語Webフォントとは ブラウザに表示される文字って何のフォント Mac OS / ios ヒラギノ Windows: MSゴシック, メイリオ Android: 新ゴ, マルベリなど システムフォントです OSや端末ごとに 内蔵している日本語フォントは異なります 6
日本語Webフォントとは なので バナーや見出しやリード文は こだわりの書体で表現してました でも 拡大すると ギザキザが 画像文字だとビットマップデータ なので拡大すると残念な結果に アウトラインフォントがブラウザに 直接 表現できないかなぁ 7
日本語Webフォントとは Webフォントサービスを活用しよう フォントプラス クラウドサービス フォント ください はい どーぞ Webフォントも配信 Webサーバー 企業様サイトやCMSサービス 8
日本語Webフォントとは 拡大しても綺麗 スマホやタブレットでは すっごく きれい コピペができる 読み上げ 翻訳 辞書 検索も SEOフレンドリー レスポンシィブデザイン 文字修正時の時間短縮 9
事例紹介 10
Webフォントでコンテンツの世界が変わる② 文字には表現力がある こんなコンテンツも作成できる 魚らしい文字で 魚らしい動きで 文字が泳ぐ 制作者 ニフティ株式会社 クリエイティブデザイン部 ウェブフォントデザインアワード2011 最優秀作品 マイナビ Wed Designing / Softbank Technology 開催 11
Webフォントでコンテンツの世界が変わる③ Webチラシやランディングページの制作に EC店長は 商品画像だけ用意すれば Webページが作れる http://fontplus.sakura.ne.jp/popdemo/ ラグランパンチ Webチラシの管理画面モック例 くろかね 筑紫ゴシック ポップハピネス レゲエ このようなテンプレートがあると 特売商材を 店長がデジカメで写真撮影してツールで 特売情報を修正すれば Photoshop使い のデザイナーさんが急に休んでも ランディン グページが10分で作成できます 12
ウェブフォント 活用メリット 13
コンテンツの修正作業が楽ちん 画像文字の場合 画像編集ツールで修正 を行いますが Webフォントなら 該当 箇所のテキスト修正だけです 修正例 ハンバーグ と 唐揚げ を入れ替える際は htmlエディタで数秒で修正完了 14
滞在時間アップやコンバージョン改善に 文字は制作者の気持ちを 表現するための重要な 要素です 書体を変更することで 滞在時間がアップしたり クリックレートが倍になる 事例もあります font-familyで書体指定 [ デバイスフォント MSゴシック] Sample① [モトヤ 装飾アポロ6] Sample② [白舟 白雨] Sample③ [FONTWORKS スーラキャピー] 15
アクセシビリティの改善に 画像文字をWebフォントに置き換えることによりアクセシビリティ 観点で大きなメリットがあります テキストコピーが可能 ウェブサイトを閲覧するユーザは 引用したい文字をテキストコピーしたいと考えます 画像文字はコピーできませんが Webフォント文字はテキストコピーできます 読み上げ 翻訳に対応 Webフォントは文字の読み上げ 翻訳に対応しやすく ユニバーサルデザインにフレン ドリーです 画像文字は 読み上げや翻訳に直接対応できません 文字サイズ変更に対応 文字サイズを [小][中][大]で選択するユーザインターフェースが多くの サイトで採用されています Webフォントは文字サイズ変更に柔軟に対応できます ブラウザのページ内テキスト検索に対応 ブラウザのページ内文字検索ができます 画像文字は検索対象になりません また altタグにて代替テキストを記述してもページ内検索の対象にはなりません 住所や店名 見出しなどをコピーしようとしたら コピーできなくてがっかりしたこ とありませんか Webフォントを活用すればデザイン性高い文字を表現できるので ユーザーエクスペリエンス観点でも有効な手段と言えますね 16
SEO対策にもフレンドリー SEO対策は さまざまな書籍やサイトで紹介されています が これをやれば確実というものはありません ただ テキストで表現しない限り ワード検索に認識して もらえません いままでは 画像のalt属性にテキスト記載 するのが通例でした これからは 画像文字をWebフォン トに置き換えすることが 効果的なSEO対策のひとつに言 えそうです 画像文字をWebフォント文字に置き換えたからと言って検 索結果がすぐに上位になるわけではありませんが 対策を しないでいると 本来ヒットするべきページがヒットせ ず 集客面で大きな機会損失を招く可能性が高くなります 見出し要素やキャプションなど キーワードと関連性の高 い情報はテキストで表現することが重要です 17
レスポンシッブデザインにもフレンドリー [Media Queriesを使用して作成したサンプル] ブラウザ幅を 変更すると リフローします Media Queries とはディスプレイサイズによって 表示方法 CSS を切り替える技術です 画像も大きさを可変にできますが 文字が画像で 作成されていると縮小の際に文字まで小さくなって しまいます Webフォントを活用すれば 表現はそのままに 文字なので折り畳むことができます 18
フォントプラス FONTPLUS ご紹介 19
フォントプラスの特徴 O 国内外の主要フォントメーカーのフォント600書体以上が利用可能 フォントプラスは印刷業界で長年の実績をもつ一流フォントベンダーが 協力しており 2012年10月1日現在 フォントワークス モトヤ イワタ 白舟 モリサワ のWebフォントが利用できます 中国語 韓国語にも対応しました O 独自のサブセット化技術 フォントのサブセット化とは 特定の文字のみを抽出して新しいフォントを 作成することで フォントファイルのサイズを小さくし Webフォントに 適したサイズにする仕組みです O OS/ブラウザ/デバイスなどさまざまな環境へ対応 スマートフォンやタブレット等のブラウザにも対応 Windows/Mac の両OS に対応し ブラウザは Internet Explorer FireFox Safari Chrome 等の主要ブラウザに対応しています パソコンのみならずスマートフォン/パブレッド等のブラウザにも対応 20
新感覚のテキストパレット Webフォント 主要フォントメーカーのWebフォントパレットが一式揃う フォントワークス イワタ HTML5 モトヤ CSS3 Javascript など フォントプラス 600書体も使えるよ モリサワ 白舟 方正 中国語 YoonDesign 韓国語 Webフォント表示例 font-family: HOT-隼風 Std R 21
今年はWebフォント普及元年 Webフォントのニーズの高まり ブラウザで表示できる文字 画像文字を除く は ウェブサイトを閲覧するパソコンや スマーフォン タブレットにインストールされているデバイスフォントに依存してました Webフォントを活用すれば デバイスにフォントがインストールされていなくても さまざまなデザイン文字を自由に表示させることができます HTML5/CSS3時代のWeb 制作おいては必須アイテムになりつつあります 日本語Webフォントが今まで利用されなかった理由 欧米フォントは1書体あたりのフォントデータの容量は数十キロバイトにすぎませんが 日本語は漢字 仮名文化ですので文字数が非常に多彩であり 1書体あたり数メガ 数十 メガバイトのデータサイズになってしまいます そのため ページにアクセスする度に日 本語フォントを読み込んでいてはサーバに負担がかかるうえ 閲覧者にも大きなストレス となっていました 近年 サブセット化技術により この問題が解決されたのです サブセット化 フォントプラスでは 日本語フォントをWebフォントとして扱うために すべての文 字をダウンロードさせる方式ではなく Webページ内で使われている文字だけを抽出 し 必要な文字のみのフォントデータを配信します フォントプラスでは二つの配信方式があります リアルタイムでサブセットを取得する方式の スマートラ イセンス と 事前バッチ処理でサブセットを取得する方式の バリューライセンス Webサイトの特性にあ わせて選択してください 22
ライセンス サブセット方式 は二種類 フォントプラス クラウド版 には二つのライセンス方式があります 導入方法は次ページ以降でご説明します スマートライセンス リアルタイム取得型 バリューライセンス 事前バッチ取得型 Webフォント表示比較 スマートライセンスはこちら バリューライセンスはこちら Webフォント適応なしはこちら 大規模サイトやポータル事業等を運営している企業様向けに エン タープライズ版もご用意しておりますので 別途 ご相談ください 23
スマートライセンス導入方法 スマートライセンス リアルタイム取得型 のHTML/CSの記述イメージです html 例 ccs 例 FONT+管理画面で Javascriptタグが発行されます ので htmlファイルのhead内に適用してください あとは スタイルシート側で 要素単位に fontfamilyを指定するだけです 複数ドメインでご利用で きます なお ご利用にあたっては初期導入費用 1万円 税 抜 とプリペイドチケット 最小チケットは1千円/ 月/10万PV wを ご購入ください 24
バリューライセンス導入方法 バリューライセンス バッチ取得型 では Webフォント表示させたい文字を事前にお客 様のWebサーバへ事前にアップロードする方式です バリューラインセンスをご利用の際は FONT+管理画面にて Webフォントを適用する HTML CSSファイルをアップロードしてください すぐに HTML CSSファイルと一 緒にサブセット化されたフォントファイルがダウンロードできますのでWebサーバへアッ プしてください FONTPLUSでは スマートライセンス と バリューライセンス があります スマートライセンス はJavascriptタグをheadに記入するだけで導入できます 一方 バリューライセンス は ページ更新をする都度 上記のような作業が必要になりますが 高速な表示が可能です 静的ページやアクセスが集中するようなページにはお勧めです 詳しくは フォントプラスのサイトをご参照ください なお エンタープライズ版では バリュー方式のサブセットプロセスをAPI連携等で自動化する 仕組みをお提案いたします 25
100文字 1書体 をサブセット したケースのデータ容量 26
ブラウザとWebフォント形式対応表 FONTPLUSはパソコン タブレット スマホの主要ブラウザに対応しています FONTPLUSのブラウザ対応表 配信フォーマット一覧 FONTPLUS 対応状況 EOT Internet Explorer 4 5 Internet Explorer 6 7 Internet Explorer 8 Internet Explorer 9, 10 Firefox 3.5 Firefox 3.6 Firefox 3.7以降 Safari 3.1 5 Safari 5.1 Chrome 4 5 Chrome 6以降 ios 3.x 4.1 ios 4.2 ios 5.0 Android 2.2, 2.3, 3.x, 4.x以降 ブラウザ TTF OTF SVG WOFF 27
付録 日本語Webフォントサービス一覧 サービス名 FONTPLUS フォントプラス 主要フォントメーカーの書体が すべて使用できる百貨店型 会社名 ソフトバンク テクノロジー株式会社 TypeSquare タイプスクウェ ア 株式会社モリサワ デコもじ シーサー株式会社 アマナイメージズ WEBフォント 株式会社 アマナイメージズ もじでぱ 緑屋電気株式会社 2012年10月1日現在 600書体以上利用可能 フォントワークス モトヤ イワタ 白舟 モリサワ 中国語/韓国語にも 対応 フォント業界最大手の直営サイト 28
付録 欧文Webフォントサービス一覧 サービス名 URL Google Web Fonts http://www.google.com/webfonts Fonts.com http://webfonts.fonts.com/ Typekit http://typekit.com/ Fontdeck http://fontdeck.com/ Webtype http://www.webtype.com/ WebINK http://www.webink.com/ Typotheque http://www.typotheque.com/webfonts/ Web Type (Ascender) http://www.ascenderfonts.com/webfonts/ Fonts Live http://www.fontslive.com/ TypeFront http://typefront.com/ Kernest http://kernest.com/ Font Me Up http://fontmeup.com/ 29
付録 用語集 HTML5 エイチティーエムエル ファイブ とは HTMLの5回目に当たる大幅な改定版である HTML5 はW3C [*3] 2008年1月22日にドラフト 草案 が発表された 現在 2014年までの正式勧告を目指 して策定が行われている 改訂の主要目的のひとつとして人間にも読解可能でコンピューターやディバ イス ウェブブラウザ 構文解析器など にも矛盾せず読解されるとともに最新のマルチメディアをサ ポートする言語に向上することである HTML5ではHTML4だけでなくXHTML1やDOM2HTML 特に JavaScript)も加える意向である 引用元 ウィキペディア CSS シーエスエス は Cascading Style Sheets カスケーディング スタイル シート の略語 HTMLやXMLの要素をどのように修飾 表示 するかを指示するW3C [*3] による仕様の一つ 文書の 構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの 具体的な仕様の一つ CSSはHTMLで表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ 新たなデザイ ン機能を備える また 次のような特徴を持つ ページを表示するメディアに合わせてスタイルシー トを切り替えることで メディアごとに表示を変化させることができる ユーザーエージェント 多 くの場合ウェブブラウザ ウェブサイト制作者 ユーザがそれぞれ定義したCSSのもたらす効果を重ね 合わせる カスケードする ことができる 引用元 ウィキペディア W3C だぶりゅーすりーしー *3 とは World Wide Web Consortiumの略語 インターネットの WWW ワールド ワイド ウェブ に関する規格化や標準化などを行う団体 W3コンソーシアム WWWコンソーシアムともいう 引用元 ニッポニカ プラス 小学館 ウェブアクセシビリティ Web Accessibility とは 本来 高齢者 障がい者がウェブを簡単に利用 できるようにするため ウェブアクセシビリティの確保 向上を図ること である 引用元 ウェブアクセシビリティ基盤委員会 http://waic.jp/ ユニバーサルデザイン Universal Design UDと略記することもある とは 文化 言語 国籍の違い 老若男女といった差異 障害 能力の如何を問わずに利用することができる施設 製品 情報の設計 デザイン をいう IT関連のデザイン例としては パソコンの操作をキーボードやマウスだけでな く他の入力手段に対応させる パソコンの画面表示を見やすく工夫する 音声での出力に配慮した 画面表示 構成にする などがある 引用元 ウィキペディア 30
付録 日本語活字の歴史 欧州における活版印刷技術の歴史は 15世紀までさかのぼり ドイツのヨハネ ス グーテンベルクが活版印刷機の実用化に成功したと言われています 日本 においては日本語の文字数の多さから 鋳造活字の組版の歴史は欧米に比べて その歴史は浅いようです キリシタン版 16世紀 古活字版 木活字印刷 江戸時代 活版印刷 鋳造活字 写真植字 写植 DTP デスクトップ パブリッシング Web化 オープン化 鋳造活字 日本語はその文化の特性上 漢字 ひながな カタカナがあり また 日本語 字体が持つ美しさから デジタル化 Webオープン化した後も フォントに重 要性を置くWebクリ エータも少なくない 昨年後半より 日本語Webフォン トサービスが各社から開始され Webの世界においても美しい文字の活用が普 及すると考えます 引用元 ウィキベディア http://ja.wikipedia.org/wiki/%e6%b4%bb%e5%ad%97 活字 フォント http://ja.wikipedia.org/wiki/%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88 字体 http://ja.wikipedia.org/wiki/%e5%ad%97%e4%bd%93 31
フォントプラス サービス提供元 ソフトバンク テクノロジー株式会社 http://fontplus.jp/ 32