制作者の視点での EPUB 3 オーサリング最前線

EBOOK STRATEGY REPORT
JEPA Seminar

Published: April 09, 2013

proﬁle

YOUJI SAKAI
Instructional Designer | eBook Designer
境祐司

BOOKS

ウェブレイアウトの EPUB3スタンダード Webデザイン基礎
教科書デザインガイド改訂３版

InDesign CS6で作るEPUB 3 標準ガイドブック
森裕司, 境祐司, 林拓也, 向井領治

BOOKS
主な著書
※海外版、ムックを含むと60冊ほど

『速習Webデザイン Flash CS6』（技術評論社）、『InDesign CS6で作るEPUB 3 標準ガ
イドブック』（共著/翔泳社）、『スマートフォンサイトデザインの基本原則』（共著/
MdN）、『EPUB3 スタンダード・デザインガイド』（共著/マイナビ）、『ウェブレイアウ
トの教科書 PC・スマートフォン・タブレット時代の標準デザイン』（MdN）、『Webデ
ザイン基礎改訂3版 (速習Webデザイン) 』（技術評論社）、『電子書籍の作り方』『Web
デザイン標準テキスト ―変化に流されない制作コンセプトと基本スタイル』（技術評論
社）、『デザイナーなら絶対知っておくべき Webデザイン50の原則』（ソフトバンククリ
エイティブ）、『速習Webデザイン Flash CS4』（技術評論社）、『Webデザイン&スタイ
ルシート逆引き実践ガイドブック』（ソシム）、『3行レシピブログデザイン』（共著/翔泳
社）、『ネタ帳デラックスFlashテクニック』（共著/MdN）『速習Webデザイン
Dreamweaver CS3』『速習Webデザイン FlashCS3』（技術評論社）、『Flash逆引きデ
ザイン事典』（共著/翔泳社）、『スタイルシートデザインのネタ帳』（監修/MdN）、
『Makinga Rule for Web Design』（ソーテック）、『CSSビジュアルデザイン・メソッ
ド』（毎日コミュニケーションズ）、『XHTMLマークアップ＆スタイルシートリフォームデ
ザインガイドブック』（ソシム）、『改訂新版Webデザイン基礎』（技術評論社）など。

community

電子書籍メデア論
ィ
http://www.facebook.com/eBookStrategy

デザインの未来
http://www.facebook.com/TheFutureDesign

EPUB 3 オーサリング最前線
複雑・高度化してきた2012年以降の
EPUB
（電子出版）を総点検

日時 2013年4月9日15:00∼17:30
開催場所飯田橋：研究社英語センター
https://sites.google.com/site/jepasite/seminar/20130409

EPUBの基礎

EPUBを採用した電子書籍の種類と対応するストア

EPUBのビジネス

電子書籍のオーサリングコストについて考える

［実践］高校生でもわかるEPUB 電子書籍の作り方

次の「EPUB」を見据えた体制づくり

PART1

EPUBの基礎


EPUBのビジネス




EPUBの基礎


EPUBのビジネス




PART2

・広義のEPUB、狭義のEPUB
・電子書籍の「構造」「見た目のデザイン」
と
・アクセシビリティ

IDPF
International Digital Publishing Forum
インターナショナル
デジタルパブリッシング・フォーラム
http://idpf.org

参考にしている
Mobi
EPUBの歴史
Mobipocketを2005年に買収

OEBPS1.0
Open eBook Publication Structure
Apps
1999.9

2000 2007 2010 2012

.book
EPUB2.0 EPUB3.0
XMDF 2011.10.11

2007年 Kindle 開始 Kindle Format 8

iPad eBook format overview of the .epub ﬁle
http://youtu.be/vvGrFZdSDww
ジェレミー・ケンプ Jeremy Kemp
http://slisapps.sjsu.edu/facultypages/view.php?fac=kempj

2010年

狭義のEPUB 広義のEPUB
パーソナルドキュメント
書籍カタログ
パンフレット
漫画教材
絵本・写真集企業内ドキュメント
官公庁文書
実用書
製品マニュアル
教科書プロモーションツール
雑誌・新聞キオスクコンテンツ
etc...

紙の本には無い
電子書籍の利点とは？

1993年
NECデジタルブック
電子書籍はフロッピーディスクで販売
デジタルブックに転送して読む

1993年
電子書籍はフロッピーディスクで販売
デジタルブックに転送して読む

マーカー自動めくり

文字拡大拡大スクロール

マーカーを引く自動ページめくり



図版のズーム
文字を拡大できる
スクロール

20年前の読書端末
電子書籍の利点といわれる機能はすでに実現

1993年


誰でもPCショップで購入できた

20年前の読書端末
電子書籍の利点といわれる機能はすでに実現

1993年


EPUBの歴史

OEBPS1.0
Apps
1999.9

2000 2007 2010 2012

.book
EPUB2.0 EPUB3.0
XMDF 2011.10.11

2007年 Kindle 開始 Kindle Format 8

EPUBの歴史
インターネット商用化

OEBPS1.0

1999.9

1993 2000 2007

.book
デジタルブック EPUB2.0
XMDF

Windows 95 2007年 Kindle 開始

電子書籍の「構造」と
「見た目のデザイン」

電子書籍の仕組み

メタデータ

電子書籍の
内容を読み取って
構造化された
適切に表示
書籍

電子書籍リーディングシステム


マシンリーダブル機械が読める

メタデータを持つ構造化された本

書誌情報

本の内容を取得できるこの2つがないと
本のデジタルデータでしかない
自炊本と同じ

EPUBコンテンツで採用されている標準技術

HTML5 CSS3
XML SVG

W3C
World Wide Web Consortium
ワールドワイドウェブ・コンソーシアム
http://www.w3.org

電子書籍フォーマットの信頼性とは？

オープンな仕様で誰でも自由に
使えること

古い仕様が上書きされないこと

世界中のデザイナー、開発者が
情報を共有できること

リーディングシステムのアクセシビリティ機能

フォントサイズ

余白サイズ

行間

画面色

明るさ


ポートレイトモード

日本の電子出版を創ってきた男たち（ONDECK BOOKS）
インプレス R&D [ Next Publishing ]


列の数


ランドスケープモード

Kindleのガイドライン例

ページのマージン
・環境にあわせて初期値が指定されている
・読書システムの調整機能と重複するためスタイルの
上書きはできない


文字色と背景色
・body要素のcolor（文字色）,
background-color（背景色）は読書システムの
調整機能と重複するためスタイルは上書きできない
・div, span要素で文字色や背景色を指定でき、
読書システムの調整機能を無効にできるが非推奨



ページの背景色は余白サイズ

上書きできません
ページ内の要素の背景色は行間
上書きできますが
慎重に判断してください
画面色

明るさ

EPUBを採用した電子書籍の
種類と対応するストア

・シンプルなリフロー
・高度なリフロー
・固定レイアウト
・固定レイアウト（絶対配置タイプ）
・音声と同期する電子書籍
・ビデオやオーディオを含む電子書籍
・動的な表現、インタラクティブな表現を
含む電子書籍

電子書籍の特性と
表現手法について再確認

「本」は音楽や映像とは異なり
再生機を必要としない
小学生からおばあさんまで誰でも購入でき、すぐに読める

ところが...

電子書籍は再生機（読書システム）が
必要になった

ハードウェアが必要
スクリーンで本を読む
液晶ディスプレイ（スマートデバイス、PC）
E Inkディスプレイ（読書専用端末）

サイズ、解像度、比率などが異なる

デバイスごとに電子書籍を最適化する？

デスクトップ

スマートフォン
最適化は困難

ハードウェアが必要
スクリーンで本を読む
液晶ディスプレイ（スマートデバイス、PC）
E Inkディスプレイ（読書専用端末）

サイズ、解像度、比率などが異なる

1つのデザインを多種多様な
閲覧環境に対応させるのは難しい

個別に最適化していくと
膨大なコストがかかり
電子書籍がなかなか増えない

でも、マルチデバイス対応は必須

専用端末

ウェブブラウザ

パソコン

reﬂowable content
リフロー

ﬁxed-layout content
固定レイアウト

print replica
レプリカ

EPUBだけではなくMobi, XMDF, .book, etc...

reﬂowable content
リフロー


print replica
レプリカ

reﬂowable content
リフロー


print replica
レプリカ

Amazon Kindleの「AZW4」など

reﬂowable content
リフロー

リフローの電子書籍はどのようなスクリーンでも
最低限の可読性を保証してくれる

可読性と再現性を分けて考えよう

・可読性が重視される出版物
テキストが主体の文芸書など

・再現性が重視される出版物
図版が多くレイアウトを崩せない雑誌など
ビジュアルで構成されている絵本、漫画、
写真集など

可読性が重視される出版物

・シンプルなリフロー
・高度なリフロー
・固定レイアウト（絶対配置タイプ）

再現性が重視される出版物

リフローか？固定レイアウトか？

固定レイアウトで
読めるの？

スマートフォンでも読める
コミックの見せ方とは？

［デモンストレーション 03］
KF8固定レイアウト・パネルビュー

Kingdom Come (New Edition) [Kindle Edition]
http://amzn.to/XEAQrv

雑誌はリフロー？固定レイアウト？

・可読性が重視される出版物
テキストが主体の文芸書など

・再現性が重視される出版物
図版が多くレイアウトを崩せない雑誌など
ビジュアルで構成されている絵本、漫画、
写真集など

スマートフォンでは読めない
タブレット推奨にする？

レイアウトも壊せない、記事の可読性も保証したい

.net
Apple Newsstand

スマートフォンでも雑誌を読んでほしい！

雑誌はハイブリッド仕様で
読者に提供する

technology review
http://www.amazon.com/Technology-Review/dp/B001AHPAX4

Amazon Kindle Storeで
販売されている雑誌

technology review

technology review

リフローに切り替わる

スマートフォンで雑誌を読む

Shape
http://amzn.to/PlvEmM

Shape

リフローモード

Shape

リフローで読む

Kindle, Google playで採用

Books on Google Play

プリントレプリカとリフローの切り替え

Technology Review [Kindle Edition]
http://amzn.to/VWn8vW


Harry Potter and the Philosopher's Stone (Book 1)
http://amzn.to/kRGcDk

リフローで再現性も高める

Usability of Web Photos
James Chudley
http://www.ﬁvesimplesteps.com/products/usability-of-web-photos

@font-face { フォント埋め込み
font-family: Prophecy Script;
font-style: normal;
font-weight: normal;
src:url("Fonts/Prophecy_Script.ttf");
}

p.letter {
font-family: "Prophecy Script";
}

TrueType

EPUB 3 Fixed-Layout Documents
http://idpf.org/epub/fxl/

・IDPFの情報文書（Informational Document）
・IDPF EPUB working group が作成
・2012年3月13日、IDPF 理事会によって承認

写真集サンプル
Readiumで表示

写真集サンプル
Androidスマートフォン
Himawari Reader Proで
サンプルを表示


・横向きでは合成された見開き
・縦向きでは見開きにしない


・合成された見開きにしない
・横向きで固定


・リフローのコンテンツ
・固定レイアウトの
右配置ページと左配置ページを
合成された見開きページとして表示
・リフローのページも見開き表示のまま


・横向きでは合成された見開き
・縦向きでは見開きにしない
・進行方向は右から左（日本のマンガ）

［デモンストレーション 02a］

Head First Mobile Web（79469 KB / 480 pages）
http://amzn.to/VWp9Zf

プリントレプリカの例
AZW4

（絶対配置タイプ）

固定レイアウト（絶対配置タイプ）
iPad at Work
Volume 2
Apple iBookstore

固定レイアウト（絶対配置タイプ）
iPad at Work
Volume 2
Apple iBookstore

画像ではないので本文検索や
辞書機能も利用可能

［デモンストレーション 02c］

iPad@work ¦ iBookstore
絶対配置の固定レイアウト（Apple）

音声と同期する電子書籍
（EPUB Media Overlays）

Readium : EPUB Media Overlays 3.0
http://vimeo.com/53999718

ビデオやオーディオを含む電子書籍
（HTML5 video/audio）

MPEG-4 9.0+ - - 3.0+ -

Ogg - 3.5+ 5.0+ - 10.50+

WebM 9.0+ 4.0+ 6.0+ - 10.60+
VP8コーデック必要
ビデオ埋め込み

iPad DL Reader

代替情報

Miro Video Converter
http://www.mirovideoconverter.com/

Nixonland: The Rise of a President and the Fracturing of
America [Kindle Edition With Audio/Video]
http://amzn.to/UuOTLd

ビデオ埋め込み

The Voyage of the Dawn Treader (Enhanced Edition)
(Narnia) [Kindle Edition With Audio/Video]
http://amzn.to/120yt2x

オーディオ埋め込み

動的な表現、インタラクティブな
表現を含む電子書籍

インタラクティブブックならiBookstore


Twas The Night Before Christmas (AniMotion)
[Kindle Edition]
http://amzn.to/VrpUHo

KF8固定レイアウト・テキストポップアップ

・電子書籍
・学習コンテンツ・企業内ドキュメント
・製品、サービスのマニュアル
・官公庁の配布ドキュメント
・販促ツール・プロモーション
・博物館、美術館のキオスク、企画展の
インフォメーション

習得読書
目的意識が明確で繰り返し読む
併読・多読・乱読・本への投資

娯楽読書
楽しみの読書
多読ではなく精読の世界

消費される電子書籍
ソーシャルメディアで消費されやすい
エマージェンシーパブリッシング

消費される電子書籍
ソーシャルメディアで消費されやすい
エマージェンシーパブリッシング
買うだけでコミュニケーションに
参加できる(読まなくても)
「ぼくも買った」とツイートできればよいもの

これも電子出版
メールマガジン
レイアウトテクノロジー

転送するだけ

これも電子出版 http://ﬂipboard.com/

ソーシャルメディアの夜明け
これからの時代を
楽しく生きるためのヒント
著者：平野友康
http://www.digitalstage.jp/book/yoake/

ソーシャルメディアの夜明け
これからの時代を
楽しく生きるためのヒント
著者：平野友康
http://www.digitalstage.jp/book/yoake/

電子書籍が提供される
電子出版サービスBCCKSとの連携

複合型ビジネスモデル

電子書籍コミュニティメディア

A Book Apart An Event Apart A List Apart
http://www.abookapart.com http://aneventapart.com http://alistapart.com

出版社会議ビジネスブログメディア

著者がイベントに登壇




電子書籍の第1章をオンラインメディアに掲載




学習コンテンツ
（教科書、教材）

EPUBで配信されている
電子教科書434冊

OpenLearn
The Open University

OpenLearn
The Open University
http://www.open.edu/openlearn/

iTunes U - Impact
http://projects.kmi.open.ac.uk/itunesu/impact/ 2013年3月25日

61,974,200 downloads

iTunes U - Impact
http://projects.kmi.open.ac.uk/itunesu/impact/ 2013年3月25日

US 25.2%

中国 15.8%
日本
2.2%
UK 13.0%

企業内ドキュメント
官公庁の配布ドキュメント

製品、サービスのマニュアル

eトリセツ
イートリセツ
取扱説明書アプリ（EPUB）
MEDIAS N-04C
Xperia arc SO-01C
Optimus Pad L-06C

報道発表資料
ドコモスマートフォンの新モデル3機種を開発
-「MEDIAS N-04C」「XperiaTM arc SO-01C」は3月4日から事前予約開始-
＜2011年2月24日＞
http://http://www.nttdocomo.co.jp/info/news_release/2011/02/24_00_1.html#p03

ドコモビジネスオンライン
導入事例：プロントコーポレーション様

e株式会社プロントコーポレーション
プロントビジネススクール

GALAXY Tab

PDF + ビデオ
PDFのマニュアルを見ながら
ビデオで確認できる

http://www.docomo.biz/html/casestudy/movie/pronto.html

販促ツール
（電子版のパンフレット、チラシ）

フェルメール<地理学者>と
オランダ・フランドル絵画展
豊田市美術館
2011年6月11日[土] ∼ 8月28日[日]
http://www.museum.toyota.aichi.jp/exhibition/2011/special/vermeer.html

フェルメール<地理学者>と
オランダ・フランドル絵画展
豊田市美術館
2011年6月11日[土] ∼ 8月28日[日]
http://www.museum.toyota.aichi.jp/exhibition/2011/special/vermeer.html

スマートフォン向け
電子カタログ

MobileRoadieを採用
http://www.mobileroadie.co.jp

プロモーション
（電子化しにくい書籍の
オンラインサンプル等）

絵本ナビ
絵本を１回だけ
全ページためしよみ
http://www.ehonnavi.net/browse_all/

Actibookを採用
http://ebook.digitalink.ne.jp

絵本ナビ

試し読みのための電子書籍化

Actibookを採用


電子書籍を
売るわけではない

試し読みのための電子書籍化

Actibookを採用

博物館、美術館のキオスク
企画展のインフォメーション

インタラクティブコンテンツの技術

Flashコンテンツウェブアプリ

インタラクティブPDF アプリ
高性能なタブレットを来場者に
貸し出すナビゲーターに

インタラクティブコンテンツの技術

EPUB 3 コンテンツ
HTML5, CSS3, JavaScript, Media Overlays
Reading System

The Monarch Butterﬂy - An Interactive Picture Book
Elizabeth Castro
http://bit.ly/ZoE5Al

EPUB 3 + JavaScript
インタラクティブ
ピクチャーブック

電子書籍のオーサリング
コストについて考える

・手作業（エディタ等でハンドコーディング）
・手作業（EPUB専用ツールで作業）
・DTPソフトから書き出したEPUBを手直しする
・ワードプロセッサから書き出したEPUBを手直しする
・DTPソフトやワードプロセッサから修正なしの
最適化されたEPUBを書き出す
・クラウドベースのEPUB発行システムを利用する
・XMLで管理し、EPUB出力を自動化する

体力勝負（消耗戦）に
陥る制作現場

EPUB 3の制作ノウハウは
まだ蓄積されていない

電子書籍デザイナーは、
勉強しながら作業、作業しながら勉強

・なんとなく出来てしまう
なぜ、うまくいったのかわからない

・バッドノウハウを使ってしまう
とにかく締め切りに間に合わせたい

こんなことをやっていませんか？

*{
margin: 0;
padding: 0;
}

デフォルトスタイルシートの
上書きを最小限におさえて、
意図したデザインに近づけるための設計を
すること

電子書籍デザイナーの腕の見せ所です

制作ガイドラインをつくる
（Amazon Kindleの例）

日本語サポート補足資料
（PDFリンク）
http://bit.ly/TOJCj4

インナーコミュニティ・制作ガイドラインをつくる

アクセシビリティ機能との
衝突を避けますフォントサイズ

ページの背景色は余白サイズ

上書きしません
ページ内の要素の背景色は行間
上書きできますが
極力避けます
画面色

A社の方針明るさ

インナーコミュニティ・制作ガイドラインをつくる

どんな要望にも応えます
お任せくださいフォントサイズ

余白サイズ
ページの背景色の上書きは
裏技で対応できます
行間
ページ内の要素の背景色も
上書きできます
画面色

B社の方針明るさ

電子書籍の永続性について考えてみよう

HTML
TEXT
IMAGES

CSS

JavaScript


HTML
TEXT
IMAGES

CSS
切り捨てられる

JavaScript
切り捨てられる


HTML
TEXT
IMAGES

最新のビジュアルエンジン・レイアウトテクノロジー

電子書籍のアセット管理が重要になる

TEXT
+IMAGEs
含有イメージデータ

デザイナーによる手作業
（エディタ等でハンドコーディング）

2012年2月13日
Tools of Change for Publishing Conference New York 2012
Kindle eBooks from ePub: Automated or Manual
http://www.toccon.com/toc2012/public/schedule/detail/21844

Joshua Tallent
ジョシュア・タレント

eBook Architects
※2013年2月5日、Firebrand
Technologiesに買収された

2012年2月13日
Tools of Change for Publishing Conference New York 2012
Kindle eBooks from ePub: Automated or Manual

TextPad
http://japan.textpad.com/

POSIX準拠の正規表現
付きの強力な検索置換
エンジン

エディタ一ツール
一本で勝負！

デザイナーによる手作業
（EPUB専用ツールで作業）

BlueGriﬀon
FUSEe Sigil EPUB Edition

FUSEe
フュージー
http://fusee.jp

EPUB 3 対応

Win

日本語のEPUBコーディングに最適

Sigil
シジル
http://code.google.com/p/sigil/

EPUB 2 対応

無償
Win Mac

BlueGriﬀon
EPUB Edition
ブルーグリフォン EPUBエディション
http://www.bluegriﬀon-epubedition.com/BGEE.html

EPUB 3 対応

Win Mac

EPUB
Metadata
Editor
EPUBメタデータエディター
https://code.google.com/p/epub-metadata-editor/

無償
Win

ユーティリティ

DAISY Tobi
デイジートビ
http://www.daisy.org/project/tobi

DAISY and EPUB 3
talking books
無償
Win

DTPソフトから書き出した
EPUBを手直しする

Adobe InDesign CS6 QuarkXPress 9

Adobe
InDesign CS6
アドビインデザイン
http://www.adobe.com/jp/products/indesign.html

EPUB 3 対応

Win Mac

QuarkXPress 9
クォークエクスプレス
http://www.quark.com/jp/Products/QuarkXPress/

EPUB 3 対応

Win Mac

EDICOLOR 10
エディカラー
http://ps.canon-its.jp/ec/

EPUB 3 対応

Win Mac

ワードプロセッサから書き出した
EPUBを手直しする

一太郎2013 玄
http://www.justsystems.com/jp/products/ichitaro/

EPUB 3 対応 Kindle 対応

Win

EPUBのコーディングなしで書き出し
Kindle
（Mobi）にも対応

Word 2013
http://oﬃce.microsoft.com/ja-jp/support/FX102832602.aspx

※EPUBユーティリティが必要

Win

Smart ePub
http://www.openend.co.jp/productsinfo/smartepub/index.html

Win

Word

Word2ePub
http://www.sgml-xml.jp/tools/Word2ePub.html

業務用

Win

Word

Scrivener 2
スクリブナー
http://www.literatureandlatte.com/scrivener.php

EPUB 2 対応

Win Mac

LibreOﬃce
リブレオフィス
http://ja.libreoﬃce.org/

EPUB 2 対応

無償
Win Mac

Writer2ePub 機能拡張
http://lukesblog.it/ebooks/ebook-tools/writer2epub/

DTPソフトやワードプロセッサから
修正なしの最適化されたEPUBを
書き出す

InDesign
CS6
EPUB書き出しオプション

HTMLおよびCSSの
編集作業

このプロセスは無くしたい

修正作業なし

理想的なワークフロー

XML and InDesign
Stylish Structure:
Publishing XML with
Adobe InDesign
Dorothy J. Hoskins
http://shop.oreilly.com/product/0636920027966.do

ワークフロー構築のヒント

クラウドベースの
EPUB発行システムを利用する

CAS-UB
キャスユービー
http://www.cas-ub.com

EPUB 3 対応

クラウド

実績と信頼感

PressBooks
プレスブック
http://pressbooks.com/

クラウド

Hugh McGuire
http://hughmcguire.net

BookPress
ブックプレス
http://ja.bookpress.me

クラウド

でんでんコンバーター
http://conv.denshochan.com/

クラウド

パブー
http://p.booklog.jp

クラウド
電子出版プラットフォーム

BCCKS
ブックス
http://bccks.jp/

クラウド
電子出版プラットフォーム

livedoor Blog
ライブドアブログ
http://blog.livedoor.com
http://blog.livedoor.com/guide/ebook.html

クラウド
ブログサービス

日本語の縦書きEPUB 対応
固定レイアウト対応

Tigris Plus
ティグリスプラス
http://tigris.jp/

クラウド

EPUB 3 固定レイアウト対応

XMLで管理
EPUB出力を自動化する

O'Reilly Media
オライリーメディア
http://oreilly.com

Ebooks - O'Reilly Media
http://shop.oreilly.com/category/ebooks.do

Formats Available

PDF EPUB Mobi

DAISY Android .apk

Ebook Usage, Devices, and Formats
http://shop.oreilly.com/category/customer-service/ebooks.do

On Your Device

Laptop or desktop computer EPUB PDF MOBI DAISY

iPad EPUB PDF MOBI DAISY

iPhone, iPod touch EPUB PDF MOBI DAISY

Kindle MOBI

Android APK EPUB MOBI DAISY

Nook EPUB PDF

Sony Reader EPUB

Windows Phone 7 EPUB PDF MOBI

Ebook Usage, Devices, and Formats
http://shop.oreilly.com/category/customer-service/ebooks.do

2008年2月13日
Tools of Change for Publishing Conference

XML for Publishers

Keith Fahlgren
キース・ファールグレン

O'Reilly Media
※現在はSafari Books Online

XMLでワンソース
マルチユースを実現

［実践］高校生でもわかる
EPUB電子書籍の作り方

・本の情報を用意しよう［メタデータ］
・本の表現を検討しよう［リフロー／固定レイアウト］
・本を構造化しよう［HTMLマークアップ］
・表紙を用意しよう［カバー］
・本の「見た目のデザイン」を考えよう
［CSSスタイリング］
・ストアごとのルールにあわせて記述内容を変更しよう
・将来の作り直しのために本のオリジナル素材を
管理しよう

無料のワードプロセッサ
EPUBプラグインを使用

無償、Win, Macどちらでも
HTML, CSSの知識必要なし

無償で使用できるオープンソースのLibreOﬃceと
EPUBエクスポートエクステンションWriter2ePub

LibreOﬃce

Writer2ePub KindleGen

Writer2ePub 機能拡張
http://lukesblog.it/ebooks/ebook-tools/writer2epub/

プラグインをカスタマイズすれば
書き出すEPUB(HTML, CSS)を制御できる

デモンストレーション

それでは
EPUBの仕様について学習しよう...

いや、いきなり仕様の話をするのは
やめておきましょう

とりあえず、電子書籍を
つくってみましょう！

本の情報を用意しよう
［メタデータ］


マシンリーダブル機械が読める

電子書籍はメタデータを持つ構造化された本です

書誌情報

本の内容を取得できるこの2つがないと
本のデジタルデータでしかない
自炊本と同じ

本のタイトルや発行日
使っている言語（もちろん日本語）
著者、出版社などの情報を
まず書き出してください

本の表現を検討しよう
［リフロー／固定レイアウト］

読者の気持ちになって
考えよう

読者の気持ちになって
考えよう

小説が固定レイアウト（画像）だったら
スマートフォンで読みやすいかな？
タブレットなら画面が大きいから大丈夫？

本を構造化しよう
［HTMLマークアップ］

電子書籍をつくります

見出しのレベル
・大見出し
・中見出し
・小見出し

見出しのレベルを決めると
目次が自動的につくられます

章
節

項

見出しのレベルを決めると
目次が自動的につくられます

こんな感じで
見出しのレベルを
決めると目次が
自動的につくられます

本の原稿（テキスト）

編集システムで開く
Sigil

大見出し
タイトル

見出しのレベル1を指定

中見出し
章のタイトル


小見出し
節のタイトル


EPUBファイルを書き出す

iBooks

リーディングシステムで開く

電子書籍が完成しました！

iBooks

まったくデザイン
していないけど....

でも、まったくデザインしていないのなら
こうなりますよね？

iBooks

リーディングシステムには
スタイルシートという
見栄えを整える機能が備わって
いるのです

デフォルトスタイルシート
と呼びます

デフォルトスタイルシートの見栄えに
満足できない人がいても大丈夫


余白サイズ

行間

画面色

明るさ

表紙を用意しよう
［カバー］

本の表紙はビジュアルで訴求する
重要な要素です

「表紙が魅力的だったから中身を知りたくなった」
というケースも
逆に、陳腐なイメージだと、本のタイトルで
興味持っても、購入をためらってしまうかも

本の「見た目のデザイン」を
考えよう
［CSSスタイリング］

iBooks

電子書籍は完成したけど、
タイトルを中央揃えに
したい場合はどうしたら
よいのだろう？

iBooks

電子書籍は完成したけど、
タイトルを中央揃えに
したい場合はどうしたら
よいのだろう？

タイトルのスタイルだけ
スタイルシートで
上書きすればよいのです

iBooks

背景に色をつけたい！

視覚障害を持つ人など
ページを反転したい人たちがいます
（だから反転機能があるのです）
背景に色をつけると
本を読めなくなってしまう
人が出てきます

iBooks

背景に色をつけられない
なんて！

文字の読みやすさを
重視しなければいけない本なのか、
見た目のデザインを
重視しなければいけない本なのか、
一緒に考えてみましょう

電子書籍の視覚表現の限界は
技術の進歩によって解決していきます

デフォルトスタイルシートの
上書きを最小限におさえて、
意図したデザインに近づけるための設計を
すること

電子書籍デザイナーの腕の見せ所です

HTML(コンテンツ)の表示

デフォルトスタイルシート

デザイナーがデフォルトスタイルシートを
上書きして、さらに見栄えを整える

HTML HTML HTML
（コンテンツ）＋＋
デフォルトCSS デフォルトCSS
（ウェブブラウザ内蔵）＋
デザイナーが指定したCSS

ストアごとのルールにあわせて
記述内容を変更しよう

制作ガイドライン

Kindle
パブリッシング・ガイドライン
（PDFリンク）
http://bit.ly/ScXZﬀ

制作ガイドライン

日本語サポート補足資料
（PDFリンク）
http://bit.ly/TOJCj4

将来の作り直しのために
本のオリジナル素材を
管理しよう

次の「EPUB」を
見据えた体制づくり

・仕様の更新で変わる
・リーディングシステムのアップデートで変わる
・オーサリング環境で変わる
・デバイスの進化（高精細化処理能力向上）
・
で変わる
・デバイスの普及率で変わる
・企業の思惑で変わる

数が増える
本を探す仕組みの整備
実装が進む
高機能化でヘビー級のアプリに
淘汰の可能性

サービス向上で読者に
EPUB, Kindleが主流に DRMを意識させない
ソーシャルDRMも増える

リーディングシステムの
アップデートで変わる

iBooks
2010年4月2日バージョン1.0
2010年7月19日バージョン1.1.1
オーディオとビデオに対応

iBooks
固定レイアウトモードの追加

iBooks
固定レイアウトモードの追加

.ibooksフォーマットの追加
Retinaディスプレイに対応

オーサリング環境で変わる

iBooks Author
http://www.apple.com/jp/ibooks-author/

デバイスの進化
（高精細化処理能力向上）
・で
変わる

フルHD

StatCounter Global Stats
http://gs.statcounter.com/

2013年1∼3月
http://gs.statcounter.com/ Worldwide

2013年1∼3月
http://gs.statcounter.com/ Japan

Browser
rendering engine

IE Firefox Chrome Safari Opera
Trident Gecko WebKit WebKit Presto

ウェブブラウザのエンジン

Browser
rendering engine

IE Firefox Chrome Safari Opera
Trident Gecko WebKit WebKit Presto

Blink WebKit
（Blink ?）

電子書籍オーサリングで理解しておきたいこと

リフロー・固定レイアウト
アクセシビリティ
作業の規模とツール選び
スタイルの上書きは最小限に
素材管理

電子書籍オーサリングで理解しておきたいこと

リフロー・固定レイアウト［判断力］
アクセシビリティ［方針決め］
作業の規模とツール選び［効率化］
スタイルの上書きは最小限に［制作ノウハウ］
素材管理［技術進化対応］

Thank you for your attention.
ご清聴ありがとうございました

テキスト

EBOOK STRATEGY REPORT
JEPA Seminar

Published: April 09, 2013

制作者の視点での EPUB 3 オーサリング最前線

Recommended

Recommended

More Related Content

Similar to 制作者の視点での EPUB 3 オーサリング最前線

Similar to 制作者の視点での EPUB 3 オーサリング最前線 (20)

More from Youji Sakai

More from Youji Sakai (11)

Recently uploaded

Recently uploaded (8)

制作者の視点での EPUB 3 オーサリング最前線