Embed Size (px)
DESCRIPTION
制作者の視点での EPUB 3 オーサリング最前線 | 複雑・高度化してきた2012年以降のEPUB（電子出版）を総点検 | 日時 2013年4月9日15:00〜17:30 | 開催場所 飯田橋：研究社英語センター https://sites.google.com/site/jepasite/seminar/20130409
Citation preview
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
スマートフォンで雑誌を読む
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
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
livedoor Bloghttp://blog.livedoor.comライブドア ブログhttp://blog.livedoor.com/guide/ebook.html
クラウドブログサービス
日本語の縦書きEPUB 対応固定レイアウト対応
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
テキスト
![Ugo Santamaria [ePub]](https://img.pdfslide.tips/doc/110x75/617819796b211c0c2f56a846/ugo-santamaria-epub.jpg)
