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

EBOOK STRATEGY REPORT

Published: April 09, 2013

JEPA Seminar

Instructional Designer | eBook DesignerYOUJI SAKAI

境祐司

profile

BOOKS

ウェブレイアウトの教科書

EPUB3スタンダードデザインガイド

Webデザイン基礎改訂３版

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

『速習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デザイン基礎』（技術評論社）など。

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

community

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

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

テキスト

EPUB3オーサリング最前線複雑・高度化してきた2012年以降の

EPUB（電子出版）を総点検

日時 2013年4月9日15:00～17:30開催場所 飯田橋：研究社英語センター

https://sites.google.com/site/jepasite/seminar/20130409

EPUBの基礎

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

EPUBのビジネス

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

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

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

EPUBの基礎

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

EPUBのビジネス

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

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

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

PART1

EPUBの基礎

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

EPUBのビジネス

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

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

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

PART2

EPUBの基礎

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

広義のEPUB、狭義のEPUB

electronic publication

IDPFInternational Digital Publishing Forum

http://idpf.org

インターナショナルデジタルパブリッシング・フォーラム

2000 2007 2010 2012

.bookXMDF

EPUB2.0

2007年 Kindle 開始

OEBPS1.0Open eBook Publication Structure

EPUB3.0

Apps

2011.10.11

1999.9

Mobipocketを2005年に買収

Kindle Format 8

Mobi参考にしている EPUBの歴史

iPad eBook format overview of the .epub filehttp://youtu.be/vvGrFZdSDww Jeremy Kemp

http://slisapps.sjsu.edu/facultypages/view.php?fac=kempjジェレミー・ケンプ

2010年

狭義のEPUB 広義のEPUB

書 籍 パーソナルドキュメントカタログ

パンフレット教 材

企業内ドキュメント官公庁文書

製品マニュアルプロモーションツールキオスクコンテンツ

etc...

漫 画絵本・写真集

実用書教科書

雑誌・新聞

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

20年前の読書端末

1993年NECデジタルブック電子書籍はフロッピーディスクで販売

デジタルブックに転送して読む

1993年NECデジタルブック

マーカー 自動めくり

文字拡大 拡大スクロール

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

マーカー 自動めくり

文字拡大 拡大スクロール

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

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

20年前の読書端末

1993年NECデジタルブック

マーカー 自動めくり

文字拡大 拡大スクロール

電子書籍の利点といわれる機能はすでに実現

20年前の読書端末

1993年NECデジタルブック

マーカー 自動めくり

文字拡大 拡大スクロール

電子書籍の利点といわれる機能はすでに実現

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

2000 2007 2010 2012

.bookXMDF

EPUB2.0

2007年 Kindle 開始

OEBPS1.0Open eBook Publication Structure

EPUB3.0

Apps

2011.10.11

1999.9

Mobipocketを2005年に買収

Kindle Format 8

EPUBの歴史

2000 2007

.bookXMDF

EPUB2.0

2007年 Kindle 開始

OEBPS1.0Open eBook Publication Structure

1999.9

Mobipocketを2005年に買収

1993

インターネット商用化

デジタルブック

EPUBの歴史

Windows 95

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

メタデータ

構造化された書 籍

電子書籍

電子書籍の内容を読み取って

適切に表示

リーディングシステム

電子書籍の仕組み

電子書籍の仕組み

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

書誌情報

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

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

自炊本と同じ

HTML5 CSS3XML SVG

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

W3CWorld Wide Web Consortium

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

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

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

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

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

アクセシビリティ

フォントサイズ

余白サイズ

行 間

画面色

明るさ

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

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

ポートレイトモード

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

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

列の数

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

ランドスケープモード

Kindleのガイドライン例

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

Kindleのガイドライン例

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

Kindleのガイドライン例

フォントサイズ

余白サイズ

行 間

画面色

明るさ

ページの背景色は上書きできません

ページ内の要素の背景色は上書きできますが

慎重に判断してください

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

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

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

「本」は音楽や映像とは異なり再生機を必要としない

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

小学生からおばあさんまで誰でも購入でき、すぐに読める

ところが...

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

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

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

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

デスクトップ

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

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

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

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

個別に最適化していくと膨大なコストがかかり

電子書籍がなかなか増えない

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

専用端末

スマートフォン

パソコン

ウェブブラウザ

電子書籍のタイプ

fixed-layout content

reflowable content

print replica

リフロー

固定レイアウト

レプリカ

fixed-layout content

reflowable content

print replica

リフロー

固定レイアウト

レプリカ

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

fixed-layout content

reflowable content

print replica

リフロー

固定レイアウト

レプリカ

Amazon Kindleの「AZW4」など

fixed-layout content

reflowable content

print replica

リフロー

固定レイアウト

レプリカ

reflowable contentリフロー

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

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

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

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

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

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

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

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

リフロー

固定レイアウト

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

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

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

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

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

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

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

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

.netApple Newsstand

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

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

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

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

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

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

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

固定レイアウト

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

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

リフローに切り替わる

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

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

Shapehttp://amzn.to/PlvEmM

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

Shapehttp://amzn.to/PlvEmM

リフローモード

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

Shapehttp://amzn.to/PlvEmM

リフローで読む

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

Books on Google Play

Kindle, Google playで採用

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

［デモンストレーション 05］プリントレプリカとリフローの切り替え

シンプルなリフロー

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

［デモンストレーション 01］

高度なリフロー

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

Usability of Web Photoshttp://www.fivesimplesteps.com/products/usability-of-web-photos

James Chudley

Usability of Web Photoshttp://www.fivesimplesteps.com/products/usability-of-web-photos

James Chudley

Usability of Web Photoshttp://www.fivesimplesteps.com/products/usability-of-web-photos

James Chudley

フォント埋め込み

TrueType

@font-face {　font-family: Prophecy Script;　font-style: normal;　font-weight: normal;　src:url("Fonts/Prophecy_Script.ttf");}

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

フォント埋め込み

Kinoppy iBooks

固定レイアウト

EPUB 3 Fixed-Layout Documents

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

http://idpf.org/epub/fxl/

Readiumで表示写真集サンプル

Readiumで表示写真集サンプル

写真集サンプル

Himawari Reader Proでサンプルを表示

Androidスマートフォン

固定レイアウト

・固定レイアウト・横向きでは合成された見開き・縦向きでは見開きにしない

固定レイアウト

固定レイアウト

・固定レイアウト・合成された見開きにしない・横向きで固定

固定レイアウト

固定レイアウト

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

固定レイアウト

固定レイアウト

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

固定レイアウト

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

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

プリントレプリカの例AZW4

固定レイアウト（絶対配置タイプ）

iPad at WorkVolume 2Apple iBookstore

固定レイアウト（絶対配置タイプ）

iPad at WorkVolume 2Apple iBookstore

固定レイアウト（絶対配置タイプ）

iPad at WorkVolume 2Apple iBookstore

固定レイアウト（絶対配置タイプ）

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

iPad@work | iBookstore

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

絶対配置の固定レイアウト（Apple）

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

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

［デモンストレーション 10］

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

ビデオ埋め込み

MPEG-4

Ogg

WebM

9.0+

-

9.0+

-

3.5+

4.0+

-

5.0+

6.0+

3.0+

-

-

-

10.50+

10.60+VP8コーデック必要

iPad DL Reader

代替情報

Miro Video Converterhttp://www.mirovideoconverter.com/

Nixonland: The Rise of a President and the Fracturing of America [Kindle Edition With Audio/Video]

http://amzn.to/UuOTLd

［デモンストレーション 06］

ビデオ埋め込み

The Voyage of the Dawn Treader (Enhanced Edition) (Narnia) [Kindle Edition With Audio/Video]

http://amzn.to/120yt2x

［デモンストレーション 07］

オーディオ埋め込み

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

iBookstore

iBookstore

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

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

［デモンストレーション 04］

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

EPUBのビジネス

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

電子書籍

習得読書

娯楽読書

目的意識が明確で繰り返し読む

楽しみの読書

併読・多読・乱読・本への投資

多読ではなく精読の世界

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

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

買うだけでコミュニケーションに参加できる(読まなくても)

「ぼくも買った」とツイートできればよいもの

レイアウトテクノロジー

これも電子出版メールマガジン

転送するだけ

これも電子出版http://flipboard.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

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

著者がイベントに登壇

A Book Apart An Event Apart A List Apart出版社 会議ビジネス ブログメディア

http://www.abookapart.com http://aneventapart.com http://alistapart.com

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

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

A Book Apart An Event Apart A List Apart出版社 会議ビジネス ブログメディア

http://www.abookapart.com http://aneventapart.com http://alistapart.com

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

OpenLearnThe Open University

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

OpenLearnThe Open University

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

OpenLearnThe Open University

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

http://www.open.edu/openlearn/

OpenLearnThe Open University

http://projects.kmi.open.ac.uk/itunesu/impact/iTunes U - Impact

2013年3月25日

61,974,200 downloads

http://projects.kmi.open.ac.uk/itunesu/impact/iTunes U - Impact

2013年3月25日

US

中国

UK日本

25.2%

15.8%

13.0%2.2%

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

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

eトリセツイートリセツ

http://http://www.nttdocomo.co.jp/info/news_release/2011/02/24_00_1.html#p03

報道発表資料ドコモ スマートフォンの新モデル3機種を開発

-「MEDIAS N-04C」「XperiaTM arc SO-01C」は3月4日から事前予約開始-＜2011年2月24日＞

MEDIAS N-04CXperia arc SO-01COptimus Pad L-06C

取扱説明書アプリ（EPUB）

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

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

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

GALAXY Tab

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

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

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

フェルメール<地理学者>とオランダ・フランドル絵画展豊田市美術館2011年6月11日[土] ～ 8月28日[日]

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

http://www.mobileroadie.co.jpMobileRoadieを採用

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

http://www.ehonnavi.net/browse_all/

絵本ナビ絵本を１回だけ全ページためしよみ

http://ebook.digitalink.ne.jpActibookを採用

http://www.ehonnavi.net/browse_all/

絵本ナビ絵本を１回だけ全ページためしよみ

http://ebook.digitalink.ne.jpActibookを採用

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

http://www.ehonnavi.net/browse_all/

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

絵本を１回だけ全ページためしよみ

http://ebook.digitalink.ne.jpActibookを採用

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

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

インタラクティブPDF アプリ

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

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

高性能なタブレットを来場者に貸し出すナビゲーターに

EPUB 3 コンテンツ

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

HTML5, CSS3, JavaScript, Media OverlaysReading System

http://bit.ly/ZoE5AlElizabeth Castro

The Monarch Butterfly - An Interactive Picture Book

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

+ JavaScript

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

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

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

勉強しながら作業、作業しながら勉強

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

電子書籍デザイナーは、

・なんとなく出来てしまう

・バッドノウハウを使ってしまう

なぜ、うまくいったのかわからない

とにかく締め切りに間に合わせたい

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

* {margin: 0;padding: 0;

}

* {margin: 0;padding: 0;

}

デフォルトスタイルシートの上書きを最小限におさえて、

意図したデザインに近づけるための設計をすること

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

作業効率化の重要性

http://bit.ly/TOJCj4

日本語サポート補足資料（PDFリンク）

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

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

フォントサイズ

余白サイズ

行 間

画面色

明るさ

ページの背景色は上書きしません

ページ内の要素の背景色は上書きできますが

極力避けます

アクセシビリティ機能との衝突を避けます

A社の方針

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

フォントサイズ

余白サイズ

行 間

画面色

明るさ

ページの背景色の上書きは裏技で対応できます

ページ内の要素の背景色も上書きできます

どんな要望にも応えますお任せください

B社の方針

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

HTML

CSS

JavaScript

TEXTIMAGES

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

HTML

CSS

JavaScript

TEXTIMAGES

切り捨てられる

切り捨てられる

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

HTML

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

TEXTIMAGES

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

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

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

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

TEXT+IMAGEs

含有イメージデータ

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

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

Tools of Change for Publishing Conference New York 2012Kindle eBooks from ePub: Automated or Manual

2012年2月13日

http://www.toccon.com/toc2012/public/schedule/detail/21844

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

ジョシュア・タレント

Tools of Change for Publishing Conference New York 2012Kindle eBooks from ePub: Automated or Manual

2012年2月13日

http://www.toccon.com/toc2012/public/schedule/detail/21844

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

ジョシュア・タレント

Tools of Change for Publishing Conference New York 2012Kindle eBooks from ePub: Automated or Manual

2012年2月13日

http://www.toccon.com/toc2012/public/schedule/detail/21844

TextPadhttp://japan.textpad.com/

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

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

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

FUSEe Sigil BlueGriffonEPUB Edition

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

EPUB 3 対応

Win

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

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

EPUB 2 対応

Win Mac

無 償

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

EPUB 3 対応

Win Mac

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

ユーティリティ

Win

無 償

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

DAISY and EPUB 3talking books

Win

無 償

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

DTPソフトといえば

Adobe InDesign CS6 QuarkXPress 9

AdobeInDesign 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 対応

Win

Kindle 対応

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

Word 2013http://office.microsoft.com/ja-jp/support/FX102832602.aspx

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

Win

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

Wordユーティリティ

Win

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

Wordユーティリティ

業務用

Win

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

EPUB 2 対応

Win Mac

LibreOfficeリブレオフィスhttp://ja.libreoffice.org/

EPUB 2 対応

Writer2ePubhttp://lukesblog.it/ebooks/ebook-tools/writer2epub/

機能拡張

Win Mac

無 償

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

書き出す

InDesignCS6EPUB書き出しオプション

HTMLおよびCSSの編集作業

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

修正作業なし

理想的なワークフロー

XML and InDesign

http://shop.oreilly.com/product/0636920027966.do

Stylish Structure: Publishing XML with Adobe InDesignDorothy J. Hoskins

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

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

CAS-UBhttp://www.cas-ub.com

EPUB 3 対応

キャスユービー

クラウド

実績と信頼感

PressBookshttp://pressbooks.com/プレスブック

クラウド

http://hughmcguire.netHugh McGuire

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

クラウド

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

クラウド

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

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

BCCKShttp://bccks.jp/ブックス

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

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

クラウドブログサービス

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

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

クラウド

EPUB 3 固定レイアウト対応

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

O'Reilly Media

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

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

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

Formats Available

PDF EPUB Mobi

DAISY Android .apk

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

Laptop or desktop computeriPadiPhone, iPod touchKindleAndroidNookSony ReaderWindows Phone 7

EPUB PDF

EPUB PDF

EPUB PDF

MOBI

APK EPUB

EPUB PDF

EPUB

EPUB PDF

MOBI

MOBI

MOBI

MOBI

MOBI

On Your Device

DAISY

DAISY

DAISY

DAISY

Tools of Change for Publishing Conference

XML for Publishers

2008年2月13日

http://www.toccon.com/toc2008/public/schedule/detail/553

Keith FahlgrenO'Reilly Media※現在はSafari Books Online

キース・ファールグレン

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

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

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

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

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

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

LibreOffice

Writer2ePub KindleGen

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

Writer2ePubhttp://lukesblog.it/ebooks/ebook-tools/writer2epub/

機能拡張

デモンストレーション

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

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

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

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

電子書籍の仕組み

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

書誌情報

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

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

自炊本と同じ

本のタイトルや発行日使っている言語（もちろん日本語）

著者、出版社などの情報をまず書き出してください

メタエディター

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

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

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

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

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

タブレットなら画面が大きいから大丈夫？

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

電子書籍をつくります

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

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

項

章

節

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

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

本の原稿（テキスト）

編集システムで開くSigil

大見出しタイトル

見出しのレベル1を指定

中見出し章のタイトル

見出しのレベル2を指定

小見出し節のタイトル

見出しのレベル3を指定

EPUBファイルを書き出す

iBooks

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

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

iBooks

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

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

iBooks

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

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

フォントサイズ

余白サイズ

行 間

画面色

明るさ

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

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

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

「表紙が魅力的だったから中身を知りたくなった」というケースも

逆に、陳腐なイメージだと、本のタイトルで興味持っても、購入をためらってしまうかも

本の「見た目のデザイン」を考えよう

［CSSスタイリング］

iBooks

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

iBooks

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

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

iBooks

背景に色をつけたい！

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

iBooks

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

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

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

デフォルトスタイルシートの上書きを最小限におさえて、

意図したデザインに近づけるための設計をすること

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

復習です

HTML(コンテンツ)の表示

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

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

HTML HTML HTML＋ ＋

デフォルトCSS デフォルトCSS＋

デザイナーが指定したCSS

（コンテンツ）

（ウェブブラウザ内蔵）

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

http://bit.ly/ScXZff

Kindleパブリッシング・ガイドライン（PDFリンク）

制作ガイドライン（Amazon Kindleの例）

http://bit.ly/TOJCj4

日本語サポート補足資料（PDFリンク）

制作ガイドライン（Amazon Kindleの例）

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

管理しよう

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

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

淘汰の可能性

ソーシャルDRMも増える

実装が進む

数が増える

EPUB, Kindleが主流にサービス向上で読者にDRMを意識させない

本を探す仕組みの整備

高機能化でヘビー級のアプリに

仕様の更新で変わる

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

iBooks

iBooks2010年4月2日 バージョン1.02010年7月19日 バージョン1.1.1

オーディオとビデオに対応

iBooks2010年4月2日 バージョン1.02010年7月19日 バージョン1.1.1

オーディオとビデオに対応2010年12月15日 バージョン1.2

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

iBooks2010年4月2日 バージョン1.02010年7月19日 バージョン1.1.1

オーディオとビデオに対応2010年12月15日 バージョン1.2

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

2012年1月19日 バージョン2.0.ibooksフォーマットの追加

2012年3月7日 バージョン2.1Retinaディスプレイに対応

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

iBooks Authorhttp://www.apple.com/jp/ibooks-author/

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

変わる

フルHDスマートフォン

普及率で変わる

StatCounter Global Statshttp://gs.statcounter.com/

StatCounter Global Statshttp://gs.statcounter.com/ Worldwide

2013年1～3月

StatCounter Global Statshttp://gs.statcounter.com/ Japan

2013年1～3月

企業の思惑で変わる

Browser

Firefox Chrome Safari OperaIEGecko WebKit WebKit PrestoTrident

rendering engine

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

Browser

Firefox Chrome Safari OperaIEGecko WebKit WebKit PrestoTrident

rendering engine

Blink WebKit（Blink ?）

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

リフロー・固定レイアウトアクセシビリティ

作業の規模とツール選びスタイルの上書きは最小限に

素材管理

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

リフロー・固定レイアウト［判断力］アクセシビリティ［方針決め］

作業の規模とツール選び［効率化］スタイルの上書きは最小限に［制作ノウハウ］

素材管理［技術進化対応］

Thank you for your attention.

ご清聴ありがとうございました

community

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

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

EBOOK STRATEGY REPORT

Published: April 09, 2013

JEPA Seminar

テキスト