目 次 1.はじめに Webフォントでコンテンツの 世 界 が 変 わる 4 インターネット 上 の 様 々なコンテンツへの 活 用 5 2.Webフォントとは? 拡 大 しても 文 字 がきれい 7 修 正 作 業 が 簡 単 8 文 字 が 本 来 持 っている 表 現 力 9 アクセシビリティ



Similar documents
参加表明書・企画提案書様式

事例でわかる!スマートフォン対応手法カタログ

はじめに 欧米では google webfontsやfonts.comなどを活用して 見出しや リード文などをWebフォントで表現することは 当たり前のように普及 しています 昨今 フォントプラス Fontplus ソフトバンク テクノロジー社 や TypeSquare モリサワ社 の登場でプロフェ

Microsoft Word - FBE3A91F.doc

PowerPoint プレゼンテーション

1.2. ご 利 用 環 境 推 奨 ブラウザ Internet Explorer Google Chrome(バージョン 32 時 点 で 動 作 確 認 済 み) Mozilla Firefox(バージョン 26 時 点 で 動 作 確 認 済 み) Safari 7

平成17年度高知県県産材利用推進事業費補助金交付要綱

改 定 履 歴 改 訂 日 改 訂 理 由 及 び 内 容 承 認 者 確 認 者 改 訂 者 05/8/7 新 版 発 行 05/0/5 推 奨 動 作 環 境 を 追 記

WEB保守パック申込

TIPS - 棚 割 りを 開 始 するまで Liteを 起 動 し 企 業 情 報 の 追 加 を 行 い 棚 割 を 行 う 企 業 の 追 加 をして 下 さい 企 業 情 報 の 追 加 時 に エラーメッセージが 表 示 された 場 合 別 途 TIPS トラブルが 発 生 した 場 合

スライド 1

1 林 地 台 帳 整 備 マニュアル( 案 )について 林 地 台 帳 整 備 マニュアル( 案 )の 構 成 構 成 記 載 内 容 第 1 章 はじめに 本 マニュアルの 目 的 記 載 内 容 について 説 明 しています 第 2 章 第 3 章 第 4 章 第 5 章 第 6 章 林 地

項 目 設 定 設 置 可 能 項 目 数 100 項 目 投 票 フォームの 設 置 可 能 投 票 項 目 数 1 項 目 (10 選 択 肢 ) 必 須 項 目 設 定 条 件 項 目 設 定 添 付 ファイル 合 計 容 量 入 力 項 目 を 必 須 項 目 に 設 定 できます フォーム

もくじ はじめに 本 書 はスマートフォンやタブレットのアプリ LINE の 設 定 を 行 うためのマニュアルとなります 詳 しい 操 作 方 法 については メーカーホームページ 上 の 基 本 的 な 使 い 方 を 参 照 ください LINE 基 本 的 な 使 い 方

1 本 店 の 申 請 において 代 理 人 を 立 てない 場 合 電 子 証 明 書 の 利 用 者 は 代 表 者 で 取 得 してください 6 電 子 証 明 書 の 利 用 者 は 誰 にすればよいのですか? 2 本 店 の 申 請 で 代 理 人 を 立 てる または 支 店 の 申 請

<4D F736F F D20819C486F70658F6F93588ED297708AC7979D89E696CA837D836A B E A2E646F63>

新 生産管理システム ご提案書 2002年10月15日 ムラテック情報システム株式会社

Flash基礎Chapter1_3稿.indd

一般競争入札について

2 Wee とは Wee はホームページの 更 新 ツールです Wee は サイトの 枠 組 みをWeb 製 作 業 者 が 作 成 し 更 新 は お 客 様 に 自 由 にしていただこうというコンセプトの 製 品 です インターネットに 繋 がる 場 所 ならどこからでも ブラウザでホームページ

<4D F736F F D2090C389AA8CA72D92F18F6F2D D F ED28CFC82AF91808DEC837D836A B E838B A815B816A2E646F6378>

CENTNET 導 入 の 手 引 き 変 更 履 歴 No. 変 更 日 変 更 番 号 変 更 枚 数 備 考 /07/ 版 発 行 - システムリプレースにより 全 面 刷 新 //07/ 版 発 行 3 誤 字 等 の 修 正 /

4 応 募 者 向 けメニュー 画 面 が 表 示 されます 応 募 者 向 けメニュー 画 面 で [ 交 付 内 定 時 の 手 続 を 行 う] [ 交 付 決 定 後 の 手 続 を 行 う]をクリックします 10

預 金 を 確 保 しつつ 資 金 調 達 手 段 も 確 保 する 収 益 性 を 示 す 指 標 として 営 業 利 益 率 を 採 用 し 営 業 利 益 率 の 目 安 となる 数 値 を 公 表 する 株 主 の 皆 様 への 還 元 については 持 続 的 な 成 長 による 配 当 可

全設健発第     号

1 書 誌 作 成 機 能 (NACSIS-CAT)の 軽 量 化 合 理 化 電 子 情 報 資 源 への 適 切 な 対 応 のための 資 源 ( 人 的 資 源,システム 資 源, 経 費 を 含 む) の 確 保 のために, 書 誌 作 成 と 書 誌 管 理 作 業 の 軽 量 化 を 図

PowerPoint プレゼンテーション

2 役 員 の 報 酬 等 の 支 給 状 況 平 成 27 年 度 年 間 報 酬 等 の 総 額 就 任 退 任 の 状 況 役 名 報 酬 ( 給 与 ) 賞 与 その 他 ( 内 容 ) 就 任 退 任 2,142 ( 地 域 手 当 ) 17,205 11,580 3,311 4 月 1

入札方式別操作

PowerPoint プレゼンテーション

基 本 編 1 らんらん パスワード 変 更 の 方 法 (1) 下 記 1~2のいずれかの 方 法 で らんらんかしわ ( 以 下 らんらん という)の TOPページへ 入 る 1かしわシティネットの 右 バナーの 下 から2 番 目 らんらん をクリック 又 は 2Yahoo,Googleで ら

<4D F736F F D20819C B78AFA95DB91538C7689E68DEC90AC289

目 次 1. Web メールのご 利 用 について Web メール 画 面 のフロー 図 Web メールへのアクセス ログイン 画 面 ログイン 後 (メール 一 覧 画 面 ) 画 面 共 通 項 目

平成27年度大学改革推進等補助金(大学改革推進事業)交付申請書等作成・提出要領

Microsoft PowerPoint - 報告書(概要).ppt

2 1.ヒアリング 対 象 (1) 対 象 範 囲 分 類 年 金 医 療 保 険 雇 用 保 険 税 備 考 厚 生 年 金 の 資 格 喪 失 国 民 年 金 の 加 入 老 齢 給 付 裁 定 請 求 など 健 康 保 険 の 資 格 喪 失 国 民 健 康 保 険 の 加 入 健 康 保 険

調 査 結 果 トピック1: 性 年 代 別 利 用 率 の 利 用 率 は 男 女 ともに 各 年 代 で 大 きく 伸 長 している 2011 年 9 月 の 調 査 では の 年 代 別 利 用 率 は 男 女 とも が 最 も 高 く が 23.9% が 20.5%だったが 今 年 の 調

2 科 学 研 究 費 助 成 事 業 のトップページ 画 面 が 表 示 されます [ 研 究 者 ログイン]をクリック します 掲 載 している 画 面 は 例 示 です 随 時 変 更 されます 3 科 研 費 電 子 申 請 システムの 応 募 者 ログイン 画 面 が 表 示 されます e

<4D F736F F D208ED089EF95DB8CAF89C193FC8FF38BB CC8EC091D492B28DB88C8B89CA82C982C282A282C42E646F63>

Microsoft Word - 311Tools_END

<4D F736F F D F4390B3208A948C E7189BB8CE F F8C668DDA97702E646F63>

目 次 ログインする 前 に... 4 メンバー 管 理 編 ( 管 理 者 )... 5 ログインする... 6 トップページについて... 7 メンバー 管 理 をする... 8 メンバー 管 理 画 面 について 医 療 機 関 指 定 新 規 追 加 指 定...

03_主要処理画面.xlsx

1 光 回 線 工 事 1 2 光 回 線 工 事 光 提 供 機 器 光 回 線 工 事 内 容 説 明 本 参 考 回 線 工 事 間 機 器 設 置 場 所 検 討 宅 内 配 線 端 末 機 器 等 準 備 提 携 申 込

スライド 1

(Microsoft Word - \203A \225\345\217W\227v\227\314 .doc)

社 会 福 祉 協 議 会 様 の 運 営 する 以 下 の 相 談 業 務 をサポートします 1. 日 常 生 活 自 立 支 援 事 業 2. 成 年 後 見 制 度 事 業 3. 高 齢 者 ふれあい 相 談 センター 事 業 ( 高 齢 者 の 何 でも 相 談 支 援 ) 4. 資 金 貸

Memo

<4D F736F F D203193FA8AD45F95CA8E86325F89898F4B315F94F093EF8AA98D AD97DF914F82CC8FEE95F182CC8EFB8F C28E8B89BB2E646F63>

学校教育法等の一部を改正する法律の施行に伴う文部科学省関係省令の整備に関する省令等について(通知)

PowerPoint プレゼンテーション

「災害用伝言板(web171)」の提供について~「災害用ブロードバンド伝言板(web171)」に新機能を追加しリニューアル~

平成25年度 独立行政法人日本学生支援機構の役職員の報酬・給与等について

2 課 題 管 理 ( 科 学 研 究 費 補 助 金 ) 画 面 が 表 示 されます 補 助 事 業 期 間 終 了 後 欄 の[ 入 力 ] をクリックします [ 入 力 ]ボタンが 表 示 されていない 場 合 には 所 属 する 研 究 機 関 の 事 務 局 等 へお 問 い 合 わせく

平 成 24 年 度 年 金 額 改 定 通 知 書 年 金 振 込 通 知 書 ( 表 面 ) 参 考 1 XXX-XXXX 杉 並 区 高 井 戸 西 ねんきんマンション101 振 替 加 算 額 老 齢 厚 生 老 齢 基 礎 XXXX-XXXXXX-XXXX

2. データを 検 索 する なごやコレクションのデータを 検 索 するための 方 法 として キーワード 検 索 詳 細 検 索 の 二 通 りの 検 索 方 法 が あります 2.1. キーワードから 探 す キーワードを 入 力 する トップページの 入 力 ボックスに 検 索

工 事 名 能 代 南 中 学 校 体 育 館 非 構 造 部 材 耐 震 改 修 工 事 ( 建 築 主 体 工 事 ) 入 札 スケジュール 手 続 等 期 間 期 日 期 限 等 手 続 きの 方 法 等 1 設 計 図 書 等 の 閲 覧 貸 出 平 成 28 年 5 月 24 日 ( 火

PowerPoint プレゼンテーション

「シンセツくん」簡易マニュアル 低圧新増設 街灯一括申込み編

SXF 仕 様 実 装 規 約 版 ( 幾 何 検 定 編 ) 新 旧 対 照 表 2013/3/26 文 言 変 更 p.12(1. 基 本 事 項 ) (5)SXF 入 出 力 バージョン Ver.2 形 式 と Ver.3.0 形 式 および Ver.3.1 形 式 の 入 出 力 機 能 を

4 参 加 資 格 要 件 本 提 案 への 参 加 予 定 者 は 以 下 の 条 件 を 全 て 満 たすこと 1 地 方 自 治 法 施 行 令 ( 昭 和 22 年 政 令 第 16 号 ) 第 167 条 の4 第 1 項 各 号 の 規 定 に 該 当 しない 者 であること 2 会 社

Microsoft Word - 資料5-1_資料掲載_ver docx

花 巻 市 条 件 付 一 般 競 争 入 札 について 花 巻 市 では 入 札 における 透 明 性 公 平 性 の 向 上 を 図 り より 一 層 の 競 争 性 を 確 保 するために 条 件 付 一 般 競 争 入 札 を 実 施 します 条 件 付 一 般 競 争 入 札 について 条

<4D F736F F F696E74202D2082C882E982D982C DD8ED88EE688F882CC82B582AD82DD C668DDA9770>

はじめに この 平 成 28 年 度 地 域 型 住 宅 グリーン 化 事 業 適 用 申 請 書 記 入 の 手 引 き は 申 請 者 のみなさん が 申 請 書 の 作 成 と 評 価 業 務 をスムーズに 行 うため 申 請 書 の 書 き 方 を 手 引 きするものです 申 請 書 を 本

<4D F736F F D ED28FDA8DD7837D836A B2E646F6378>

第 40 回 中 央 近 代 化 基 金 補 完 融 資 推 薦 申 込 み 公 募 要 綱 1 公 募 推 薦 総 枠 30 億 円 一 般 物 流 効 率 化 促 進 中 小 企 業 高 度 化 資 金 貸 付 対 象 事 業 の 合 計 枠 2 公 募 期 間 平 成 28 年 6 月 20

する ( 評 定 の 時 期 ) 第 条 成 績 評 定 の 時 期 は 第 3 次 評 定 者 にあっては 完 成 検 査 及 び 部 分 引 渡 しに 伴 う 検 査 の 時 とし 第 次 評 定 者 及 び 第 次 評 定 者 にあっては 工 事 の 完 成 の 時 とする ( 成 績 評 定


私立大学等研究設備整備費等補助金(私立大学等

電子申告直前研修会(所得税編)

1.3 利 用 方 法 図 1 国 立 国 会 図 書 館 デジタルコレクション 送 信 サービスの 対 象 資 料 本 文 の 閲 覧 は 図 書 館 サービスカウンター 備 え 付 けの 専 用 パソコン(1 台 )のみでの 利 用 となります 利 用

あいち電子調達共同システム

2 出 願 資 格 審 査 前 記 1の 出 願 資 格 (5) 又 は(6) により 出 願 を 希 望 する 者 には, 出 願 に 先 立 ち 出 願 資 格 審 査 を 行 いますので, 次 の 書 類 を 以 下 の 期 間 に 岡 山 大 学 大 学 院 自 然 科 学 研 究 科 等

Microsoft Word - 不正アクセス行為の禁止等に関する法律等に基づく公安

<4D F736F F F696E74202D D382E982B382C68AF1958D8BE090A C98AD682B782E B83678C8B89CA81698CF6955C A2E >

基 本 操 作 2

1 EC サイトの 構 築 (ア) 基 本 要 件 サイト 全 体 を CMS で 管 理 できること 商 品 登 録 数 を 100 以 上 可 能 とし 拡 張 できること 会 員 登 録 したユーザーにメールマガジンを 送 ることが 出 来 るようにすること Facebook や twitte

SILAND.JP テンプレート集

<4D F736F F F696E74202D F C A082B882AF816082E ED2834B F91808DEC90E096BE95D C782AF A95D2816A E C5817A2E B8CDD8AB B83685D>

<4D F736F F F696E74202D B E E88E68C9A90DD8BC65F E DC58F4994C52E >

ミルビィとは 導 入 一 例 2

小 売 電 気 の 登 録 数 の 推 移 昨 年 8 月 の 前 登 録 申 請 の 受 付 開 始 以 降 小 売 電 気 の 登 録 申 請 は 着 実 に 増 加 しており これまでに310 件 を 登 録 (6 月 30 日 時 点 ) 本 年 4 月 の 全 面 自 由 化 以 降 申

2 県 公 立 高 校 の 合 格 者 は このように 決 まる (1) 選 抜 の 仕 組 み 選 抜 の 資 料 選 抜 の 資 料 は 主 に 下 記 の3つがあり 全 高 校 で 使 用 する 共 通 の ものと 高 校 ごとに 決 めるものとがあります 1 学 力 検 査 ( 国 語 数

4.5. < 参 加 表 明 書 を 提 出 する> 調 達 案 件 一 覧 の 表 示 対 象 となる 案 件 を 検 索 し 調 達 案 件 一 覧 に 表 示 させます 参 加 したい 案 件 の 調 達 案 件 名 称 行 - 入 札 参 加 資 格 確 認 申 請 / 技 術 資 料 /

<4D F736F F D204D46834E A6D92E8905C8D905F93B193FC819593FA8E9F95D C5292E646F63>

PowerPoint プレゼンテーション

Microsoft Word 役員選挙規程.doc

k_setumeikai_siryo

KINGSOFT Office 2016 動 作 環 境 対 応 日 本 語 版 版 共 通 利 用 上 記 動 作 以 上 以 上 空 容 量 以 上 他 接 続 環 境 推 奨 必 要 2

研究者総覧システム

工 事 名 渟 城 西 小 学 校 体 育 館 非 構 造 部 材 耐 震 改 修 工 事 ( 建 築 主 体 工 事 ) 入 札 スケジュール 手 続 等 期 間 期 日 期 限 等 手 続 きの 方 法 等 1 設 計 図 書 等 の 閲 覧 貸 出 平 成 28 年 2 月 23 日 ( 火

Sol-007 内部統制一元管理 _ppt [互換モード]

検 討 検 討 の 進 め 方 検 討 状 況 簡 易 収 支 の 世 帯 からサンプリング 世 帯 名 作 成 事 務 の 廃 止 4 5 必 要 な 世 帯 数 の 確 保 が 可 能 か 簡 易 収 支 を 実 施 している 民 間 事 業 者 との 連 絡 等 に 伴 う 事 務 の 複 雑

事前チェック提出用現況報告書作成ツール入力マニュアル(法人用)

検 索 出 力 画 面

<4D F736F F D208DE3905F8D8291AC8B5A8CA48A948EAE89EF8ED0208BC696B18BA492CA8E64976C8F BD90AC E378C8E89FC92F994C5816A>

(7) 公 共 施 設 における 建 築 物 (1 敷 地 における 延 床 面 積 の 合 計 が 5,000 m2 以 上 )の 劣 化 につ いての 調 査 ( 劣 化 度 調 査 健 全 度 調 査 等 )の 実 績 があること (8) 公 共 施 設 における 建 築 物 (1 敷 地 に

平 成 24 年 分 年 末 調 整 作 業 手 順 1. 書 類 の 確 認 年 末 調 整 を 行 なうにあたって 以 下 の 書 類 を 受 理 及 び 確 認 を 行 います 平 成 24 年 分 給 与 所 得 者 の 扶 養 控 除 等 ( 異 動 ) 申 告 書 平 成 24 年 分

POWER EGG V2.01 ユーザーズマニュアル ファイル管理編

Transcription:

日 本 語 Webフォント フォントプラス クラウドサービス(スマートライセンス&バリューライセンス) 2012 年 6 月 25 日 ソフトバンク テクノロジー 株 式 会 社 -1-

目 次 1.はじめに Webフォントでコンテンツの 世 界 が 変 わる 4 インターネット 上 の 様 々なコンテンツへの 活 用 5 2.Webフォントとは? 拡 大 しても 文 字 がきれい 7 修 正 作 業 が 簡 単 8 文 字 が 本 来 持 っている 表 現 力 9 アクセシビリティの 向 上 10 SEO 対 策 にもフレンドリー 11 無 限 に 広 がるWebフォントの 世 界! 12 Webフォントの 特 徴 (まとめ) 13 3.スマートデバイス Webフォント スマートデバイス 向 けWebページ 制 作 15 Webフォント リキッドレイアウト 17 4.フォントプラスご 紹 介 フォントプラスの 特 徴 19 今 年 が 日 本 語 Webフォント 普 及 元 年 20 フォントプラスサービスの 種 類 21 スマートライセンス 22 Webフォント 適 用 TIPS(スマートライセンス) 23 バリューライセンス 24 Webフォント 導 入 TIPS(バリューライセンス) 25 動 作 環 境 27 フォントプラス クラウドサービス 価 格 表 28 付 録 A: 用 語 集 30 付 録 B: 日 本 語 活 字 考 察 32-2-

はじめに -3-

Webフォントでコンテンツの 世 界 が 変 わる 今 までデザイン 文 字 をWebで 表 現 するには 文 字 を 画 像 化 する 必 要 が ありました しかし ウェブフォントを 利 用 することで 画 像 化 せずに タイポグラフィを 生 かしたWebコンテンツが 簡 単 に 作 成 できるようにな りました Web フォント 適 用 前 ( 画 像 文 字 ) 拡 大 表 示 Webフォント 適 用 後 -4-

インターネット 上 の 様 々なコンテンツへの 活 用 JPG PNG タブレット 向 け Webコンテンツ パソコン 向 け Webコンテンツ FLUSH スマホ 向 け Webコンテンツ PDF 電 子 新 聞 電 子 書 籍 電 子 カタログ HTML5+CSS3 CSS3+Webフォント キオスク 端 末 デジタルサイネージ epub ゲーム コンテンツ Internet 常 時 接 続 家 電 (テレビ レコーダー 他 ) デバイス 組 込 フォント 他 -5-

Webフォントとは? -6-

拡 大 しても 文 字 がきれい 画 像 で 作 成 した 文 字 は 拡 大 するとギザギザが でてきます ウェブフォント 文 字 は 拡 大 しても ぼやけず きれいなフォントを キープします ブラウザによりアンチエイリアス 処 理 が 異 なりますので 綺 麗 さには 違 いがあります ipad 等 のタブレット 端 末 やiPhone/Android 等 のスマートフォンの 急 速 な 普 及 により 拡 大 表 示 操 作 が 簡 単 にできるデバイスが 増 えてきています 視 認 性 可 読 性 の 観 点 からもWebフォントのニーズが 今 高 まっています -7-

修 正 作 業 が 簡 単 画 像 で 表 現 している 文 字 を 修 正 する 場 合 画 像 編 集 ツール 上 で 修 正 を 行 いますが Webフォントなら 該 当 箇 所 のテキストを 編 集 するだけで 更 新 作 業 が 行 えます 修 正 例 例 えば 左 図 の ハンバーグ と 唐 揚 げ を 入 れ 替 える 際 は htmlエディタで 文 字 修 正 する だけです -8-

文字が本来持っている表現力 文字は 感情や感性を表 現するための重要な素材 です Webフォントは 文字が持つ表現力をWeb やタブレット端末でも可 能にし 豊かな想像性を 生み出します Sample① Sample① [モトヤ 装飾アポロ6] font-familyで書体指定 [ デバイスフォント例 MSゴシック] Sample② Sample② [白舟 白雨] Sample③ Sample③ [FONTWORKS スーラキャピー] -9-

アクセシビリティの 向 上 画 像 で 表 現 しているデザイン 文 字 を Webフォントに 置 き 換 えることにより アクセシビリティ 観 点 での 大 きなメリットがあります 文 字 の 読 み 上 げ 機 能 翻 訳 ソフトに 対 応 Webフォントは 文 字 の 読 み 上 げ 機 能 や 翻 訳 ソフトの 変 換 に 対 応 できます ( 画 像 で 作 成 した 文 字 は テキスト( 文 字 列 )では 無 いため 変 換 されません ) テキストコピーが 可 能 ウェブサイトを 閲 覧 するユーザは 引 用 したい 文 字 をテキストコピーしたいものです 画 像 で 作 成 された 文 字 はコピーできませんが Webフォントで 作 成 した 文 字 はテキストコピーできます 文 字 サイズ 変 更 機 能 画 像 文 字 は 拡 大 縮 小 の 際 にサイズの 影 響 を 受 け 見 栄 えが 悪 くなりますが Webフォントは サイトの 文 字 サイズを [ 小 ][ 中 ][ 大 ]で 選 択 したり 自 由 に 表 示 を 変 更 しても サイズに 合 わせて 表 示 します ブラウザのページ 内 検 索 ページ 内 で 文 字 を 検 索 したい 時 画 像 で 作 成 した 文 字 や 画 像 alt タグにて 代 替 テキストを 記 述 して も 検 索 の 対 象 にはなりませんが Web フォントならページ 内 の 文 字 検 索 ができます 画 像 で 作 成 した 文 字 とWebフォントで 作 成 した 文 字 は ユーザにとって 見 た 目 変 わらないケースが 多 いと 思 います しかしながら 制 作 者 にとっても 利 用 者 に とっても 日 本 語 WebフォントがWebの 世 界 に 大 きな 変 革 をもたらします -10-

SEO 対 策 にもフレンドリー 検 索 エンジンは 常 にサイトテーマを 理 解 しようと 努 めています なぜならば 検 索 キーワードに 最 もマッチするサイトをユーザに 教 えてあげることが 検 索 エンジンの 役 割 だからです 検 索 エンジンへの 外 的 SEO 対 策 は さまざまな 書 籍 やサイトで 紹 介 されていますが これをやれば 確 実 というものはありません ただし テキストで 表 現 しない 限 り ワード 検 索 に 認 識 してもらえませんので 画 像 のalt 属 性 に 記 載 するのが 通 例 でした 画 像 文 字 をWebフォント 文 字 に 置 き 換 えたからと 言 って 検 索 結 果 がすぐに 上 位 になる わけではありませんが 対 策 をしないでいると 本 来 ヒットするべきページがヒット せず 集 客 面 で 大 きな 機 会 損 失 を 招 く 可 能 性 が 高 くなります チリも 積 もれば の 観 点 で 見 出 し 要 素 やキャプションなど キーワードと 関 連 性 の 高 い 情 報 はテキス トで 表 現 することがSEO 対 策 の 基 本 になります Webフォントがその 解 決 策 のひとつ と 言 えます -11-

無 限 に 広 がるWebフォントの 世 界! 日 本 語 Webフォントの 適 用 範 囲 は 無 限 に 広 がっています キャンペーンページ ブログ ゲーム 放 送 出 版 等 の 分 野 で 活 用 が 開 始 されました Webフォントという 新 しい 素 材 をどう 調 理 するかはアイデア 次 第 です [ 注 ] 事 例 によっては 推 奨 ブラウザが 異 なります http://pr.fontplus.jp/sample/02/ ご 自 身 のTwitterIDを 入 力! http://www.hylind.net/greatfont/index.html 読 み 手 が 書 体 を 選 択 できる! http://kuri.nifty.com/seesea/index.htm 漢 字 をクリックすると 魚 の 説 明 が 表 示! http://colamune.com/typomap/ [ 統 計 ]ボタンで 面 積 や 人 口 など 選 択 可 能! http://www.kotonoca.com/ Webフォントの 上 手 な 活 用 例! -12-

Webフォントの 特 徴 (まとめ) ユーザデバイス 側 (PC タブレット スマートフォン 等 )の 環 境 にフォントがインストー ルされていなくてもサイトから Webフォントをダウンロードすることで 指 定 したフォン トをブラウザに 表 示 させる 技 術 です Webフォントはデザイン 表 現 力 を 増 すだけでなく Web 開 発 者 にとって 文 字 を 画 像 化 する 手 間 が 省 け 修 正 も 簡 単 になるという 大 きな 利 点 が あります テキストの 編 集 SEO 効 果 の 見 込 み ファイルサイズ テキストのコピー アンチエイリアス Webフォントの 場 合 テキストエディタで 編 集 高 い 小 さい できる かかる 画 像 の 場 合 画 像 編 集 ツールで 編 集 低 い 大 きい できない かからない 日 本 語 の 課 題 文 字 データ 量 が 大 きい [1 書 体 (アウトラインフォント)あたりのデータ 容 量 ] 日 本 語 中 国 語 約 3~15Mバイト 韓 国 語 約 500K~2Mバイト 英 語 約 50K~200Kバイト フォントプラス が 解 決 します -13-

スマートデバイス Webフォント -14-

スマートデバイス 向 けWebページ 制 作 スマートフォンやスマートパッドにおけるWebフォント 活 用 の 効 果 をいくつか ご 紹 介 します Webアクセシビリティの 向 上 スマートフォンやスマートパッドにおいては 端 末 毎 に システムフォントが 異 なっています iphoneやipad 等 のiOS 系 デバイスではヒラギノ 書 体 が 標 準 のシステムフォントとして 使 用 されています Android 系 デバイスでは メーカー 毎 にシステムフォ ントが 異 なるようです Webアクセシビリティ 観 点 では どんなデバイスから Webページを 見 ても 同 じ 書 体 で 表 示 されることが 求 め られます Webフォントがその 解 決 策 のひとつかも しれません [システムフォントの 搭 載 事 例 ] iphone ヒラギノ Android(SH-03C) モリサワ 新 ゴ R 拡 大 表 示 における 可 読 性 視 認 性 の 向 上 スマートデバイスの 特 徴 として 拡 大 縮 小 の 操 作 を 誰 でも 簡 単 に 行 うことができます 画 像 文 字 は 拡 大 すると 画 像 の 劣 化 が 生 じますが Webフォントで 表 現 された 文 字 は 拡 大 しても 非 常 にきれいです スマートフォンやスマートパッドでは アウトラインフォントの 変 換 処 理 が 非 常 に 優 れており Webフォントとの 相 性 は 抜 群 です -15-

テキストコピー 単 語 検 索 機 能 の 活 用 Webフォントで 作 成 したテキストは コピーすることができます 重 要 なメッセージや 住 所 などを 画 像 文 字 ( 装 飾 デザイン 文 字 )で 表 現 していると カット&ペーストできません Web 訪 問 者 は 気 になる 文 章 やメッセージをコピペしたいというニーズは 高 いと 言 えます 画 像 文 字 はコピーしようすると 画 像 を 保 存 ( 例 )と 表 示 されます また Webフォントで 表 現 すれば 単 語 検 索 機 能 にも 対 応 します 読 み 上 げ 翻 訳 への 対 応 ユニバーサルデザインに 配 慮 したWebページも これからは 大 切 です Webフォントを 活 用 すれば デザイン 性 の 高 い 見 出 しや キャッチフレーズをWebフォントで 表 現 できます テキストなので 視 覚 障 害 の 方 々への 読 み 上 げ 機 能 の 提 供 もしや すくなります もちろん 翻 訳 にも 簡 単 に 対 応 できます 読 み 上 げ 機 能 は スマートデバイスだけでなく 今 後 デジタル サイネージ 等 の 店 頭 や 公 共 における 端 末 での 利 用 シーンが 増 えて くると 思 われます ユニバーサルデザイン 観 点 から Webフォ ントが 注 目 されています -16-

Webフォント リキッドレイアウト [Media Queries メディアクエリ を使用して作成されたWebサイト] Media Queries メディアクエリ とはディスプレイサイズ によって表示方法 CSS を切り替える技術です 画像も大きさを可変にできますが 文字が画像で作成されて いると縮小の際に文字まで小さくなってしまいます Webフォントを活用すれば 表現はそのままに 文字なの で折り畳むことができます -17-

フォントプラス ご 紹 介 -18-

フォントプラスの 特 徴 国 内 有 名 フォントベンダーのフォント600 書 体 以 上 が 利 用 可 能 フォントプラスは 印 刷 業 界 で 長 年 の 実 績 をもつ 一 流 フォントベンダーが 協 力 しており 2012 年 6 月 25 日 現 在 フォントワークス モトヤ イワタ 白 舟 書 体 モリサ ワ 方 正 のWebフォントが 利 用 できます 読 み 込 みもスムーズ! 独 自 のサブセット 化 技 術 フォントのサブセット 化 とは 特 定 の 文 字 のみを 抽 出 して 新 しいフォントを 作 成 する ことで フォントファイルのサイズを 小 さくし Webフォントに 適 したサイズにする 仕 組 みです OS/ブラウザ/デバイスなどさまざまな 環 境 へ 対 応! スマートフォンやタブレット 等 のブラウザにも 対 応 Windows/Mac の 両 OS に 対 応 し ブラウザは InternetExplorer FireFox Safari Chrome 等 の 主 要 ブラウザに 対 応 しています パソコンのみならず スマートフォンや スマートパッド 等 のブラウザにも 対 応 -19-

今 年 が 日 本 語 Webフォントの 普 及 元 年 Webフォントのニーズの 高 まり ブラウザで 表 示 できる 文 字 ( 画 像 文 字 を 除 く)は ウェブサイトを 閲 覧 するパソコンや スマーフォン タブレットにインストールされているデバイスフォントに 依 存 してました Webフォントを 活 用 すれば デバイスにフォントがインストールされていなくても さまざまなデザイン 文 字 を 自 由 に 表 示 させることができます HTML5/CSS3 時 代 のWeb 制 作 おいては 必 須 アイテムになりつつあります 日 本 語 Webフォントが 今 まで 利 用 されなかった 理 由 欧 米 フォントは1 書 体 あたりのフォントデータの 容 量 は 数 十 キロバイトにすぎませんが 日 本 語 は 漢 字 仮 名 文 化 ですので 文 字 数 が 非 常 に 多 彩 であり 1 書 体 あたり 数 メガ~ 数 十 メガバイトのデータサイズになってしまいます そのため ページにアクセスする 度 に 日 本 語 フォントを 読 み 込 んでいてはサーバに 負 担 がかかるうえ 閲 覧 者 にも 大 きなスト レスとなっていました 近 年 サブセット 化 技 術 により この 問 題 が 解 決 されたのです サブセット 化 フォントプラスでは 日 本 語 フォントをWebフォントとして 扱 うために すべての 文 字 をダウンロードさせる 方 式 ではなく Webページ 内 で 使 われている 文 字 だけを 抽 出 し 必 要 な 文 字 のみのフォントデータを 配 信 します フォントプラスでは 二 つの 配 信 方 式 があります リアルタイムでサブセットを 取 得 する 方 式 の スマートライセンス スマートライセンス と 事 前 バッチ 処 理 でサブセットを 取 得 する 方 式 の バリューライセンス バリューライセンス です です Webサイトの 特 性 にあわせて 選 択 してください -20-

フォントプラスサービスの 種 類 フォントプラス クラウドサービスには 二 つのライセンス 方 式 があります 詳 しくは 次 ページ 以 降 でご 説 明 します クラウドサービス スマートライセンス バリューライセンス なお 大 規 模 ECサイトやポータル 事 業 を 運 営 している 企 業 様 CMS(コンテ ンツマネジメントシステム) 連 携 のWebサイトを 運 営 の 企 業 様 は オンプレ ミス 構 築 型 のエンタープライズサービスをご 用 意 しておりますので 別 途 ご 相 談 ください -21-

スマートライセンス サイト 閲 覧 者 からのページアクセス 毎 に 必 要 な 文 字 列 のみWebフォントを 生 成 し リアルタイム 配 信 します 導 入 方 法 は 非 常 にシンプルです 次 ページ 参 照 デバイスフォント 表 示 後 にWeb Webフォントを 上 書 きする 仕 組 みです Web Webフォントサービスの 一 般 的 な 方 式 です なお jquery jqueryのdelayとfadeinを 活 用 し システムフォントからWebフォントの 表 示 チラツキを 軽 減 することも 可 能 です 閲 覧 ユーザ Font+クラウドサービス 600 書 体 以 上 Webフォント 参 照 配 布 用 サブセット 1 書 体 あたりの フルセットのデー タ 容 量 は3~12 Mバイト JavaScript 配 布 フォン ト 生 成 受 付 ホームページ 閲 覧 利 用 フォント 要 求 Webフォント 利 用 サイト 申 請 ( 入 会 時 ) Webサーバ HTML CSS JavaScript アップロード ( 入 会 時 ) JavaScriptタグ 挿 入 ホームページ 制 作 -22-

Webフォント 適 用 TIPS(スマートライセンス:リアルタイム 取 得 型 ) スマートライセンス(リアルタイム 取 得 型 )のHTML/CSS 適 用 イメージです 例 : html をエディタ 表 示 例 : style.ccs をエディタ 表 示 FONT+ 管 理 画 面 で Webフォントを 適 用 するドメインを 指 定 します その 際 そのサイトに 埋 め 込 むためのJava Scriptタグが 発 行 されますので htmlファイルのhead 内 に 適 用 してください あとは スタイルシート 側 で 指 定 したい 要 素 単 位 に font-familyを 指 定 するだけです 複 数 のドメインを 指 定 できます ただし PVに 応 じて クラウド 利 用 料 が 異 なります プリペイド 購 入 方 式 -23-

バリューライセンス あらかじめ 必 要 なWebフォントを 事 前 にFONT+ 管 理 画 面 から 取 得 し Webサーバへ 配 置 する 方 式 です 次 ページ 参 照 閲 覧 者 がページアクセス 時 に 直 接 Web Webフォントを 表 示 させる 仕 組 みです デバイスフォントを 表 示 せずにWeb Webフォントを 直 接 表 示 します FONT+ FONT+オリジナルの 配 信 方 式 です 閲 覧 ユーザ Font+クラウドサービス Webフォント 変 換 使 用 文 字 の サブセット 化 フォント 生 成 Webフォント 生 成 受 付 600 書 体 以 上 1 書 体 あたりの フルセットのデー タ 容 量 は3~12 Mバイト ホームページ 閲 覧 サブセット フォントデータ 付 き ZIPで 即 時 返 却 html+cssファイルを ZIP 化 してアップロード Webサーバ HTML CSS アップロード Webフォント 用 サブセット ホームページ 制 作 -24-

Webフォント 導 入 TIPS(バリューライセンス:バッチ 取 得 型 ) バリューライセンス(バッチ 取 得 型 )では Webフォント 表 示 させたい 文 字 (サブ セット)を 事 前 に 公 開 Webサーバへアップロードする 必 要 があります バリューラインセンスのクラウドサービスをご 利 用 の 際 は FONT+ 管 理 画 面 にて 使 用 するWebサーバのドメインを 登 録 後 Webフォントを 適 用 するHTML CSSファ イルをアップロードしてください すぐに HTML CSSファイルと 一 緒 にサブセッ トフォントファイルがダウンロードできますので 公 開 Webサーバへ 適 用 してください クラウドサービスでは ページ 更 新 をする 都 度 (Webフォントに 関 連 する 記 述 変 更 ) FONT+ 管 理 画 面 へログインし HTMLファイルとCSSファイルのアップロード 作 業 およびダウンロード 作 業 が 必 要 です なお エンタープライズ 型 (オンプレミス 導 入 型 )では Web 制 作 側 のシステムと 連 携 させる 仕 組 みを 提 案 し(API 機 能 の 活 用 ) 効 率 の 良 い 制 作 ワークフローをご 提 供 いたします -25-

100 文 字 (1 書 体 )をサブセット したケースのデータ 容 量 -26-

動 作 環 境 ブラウザWebフォント 対 応 表 ブラウザ フォント 形 式 FONT+ EOT TTF OTF SVG WOFF 対 応 状 況 Internet Explorer 4~5 ( 非 対 応 ) Internet Explorer 6~7 Internet Explorer 8 Internet Explorer 9~ 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~ Android 2.2, 2.3, 3.x 2012 年 6 月 現 在 -27-

フォントプラス クラウドサービス 価 格 表 クラウドサービス スマートライセンス (リアルタイム 取 得 型 )は 複 数 ドメイン 指 定 が 可 能 です ウェブフォントが 適 用 されたページ 表 示 回 数 の 総 数 が カウントされます 購 入 したPV 数 残 が 少 なくなると 管 理 者 へメールでご 連 絡 しますので 追 加 でPVチケットをご 購 入 ください なお PV 数 が 消 化 された 場 合 はウェブフォントが 適 用 されませんが デバイスフォントで 表 示 されます バリューライセンス (バッチ 取 得 型 )は サブセットをお 客 様 のWebサーバへアップする 方 式 ですので PV 数 に 応 じた 料 金 体 系 で はありませんが 1バリューライセンスが 指 定 できるドメインは1つになりますので ステージングサーバや 複 数 の 商 用 サイトに 適 用 する 際 は 複 数 ライセンスの 購 入 をお 願 いいたします ( 注 )クラウドサービスでは どちらのライセンスにおいても 1htmlページで 変 換 可 能 最 大 文 字 数 は1,000グリフ/1 書 体 です エンタープライス 版 について ポータルサイト 運 営 企 業 様 アクセス 数 の 多 い 大 規 模 サイト 運 営 企 業 様 パフォーマンスを 求 めるお 客 様 におきましては 専 用 サーバに フォントプラスエンジンをインストールした 構 築 型 (オンプレミス 型 )をご 提 案 いたします 費 用 につきましては 別 途 ご 相 談 ください エンタープライズ 版 (フォントプラスサーバー 構 築 型 )の1ライセンス 費 用 は 初 期 200 万 円 ~となります -28-

付 録 A 用 語 集 -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-

付 録 B 日 本 語 活 字 考 察 -31-

日 本 語 活 字 の 歴 史 欧 州 における 活 版 印 刷 技 術 の 歴 史 は 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 書 体 http://ja.wikipedia.org/wiki/%e3%82%bf%e3%82%a4%e3%83%97%e3%83%95%e3%82%a7%e3%83%bc%e3%82%b9 (タイプフェース) -32-