EPUB3で変わる電子書籍の表現力

2011年6月22日水曜日

EPUB3.0で変わる電子書籍の表現力

境祐司http: / /design-zero. tv /2010/ebook.html

@commonsty le

2011.06.21

JAGATセミナー

＜EPUB3.0に準拠した電子書籍の設計と制作＞


http://design-zero.tv/2010/ebook.html




Instructional Designer

自己紹介

境祐司インストラクショナルデザイナー


主な著書：

「デザイナーなら絶対知っておくべき Webデザイン50の原則」（ソフトバンククリエイティブ）、「速習Webデザイン Flash CS4」（技術評論社）、「Webデザイン&スタイルシート逆引き実践ガイドブック」（ソシム）、「3行レシピブログデザイン」（共著/翔泳社）、「ネタ帳デラックス Flashテクニック」（共著/MdN）「速習Webデザイン Dreamweaver CS3」「速習Webデザイン Flash CS3」（技術評論社）、「Flash逆引きデザイン事典」（共著/翔泳社）、「スタイルシートデザインのネタ帳」（監修/MdN）、『Making a Rule for Web Design』（ソーテック）、『CSSビジュアルデザイン・メソッド』（毎日コミュニケーションズ）、『XHTMLマークアップ＆スタイルシートリフォームデザインガイドブック』（ソシム）、『改訂新版 Webデザイン基礎』（技術評論社）など。


執筆した電子書籍関連の書籍、雑誌

発行：技術評論社／価格：1,449円


電子出版関連のPodcast配信中

http://admn.air-nifty.com/web_design/

日刊徒然音声雑記日刊イーブックストラテジー

Googleで「音声雑記」を検索


community

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


http://www.facebook.com/pages/dian-zi-shu-jimedia-lun/143512822352930




電子書籍の表現力＜EPUB3.0に準拠した電子書籍の設計と制作＞

EPUB3.0で変わる


［1］EPUBの基礎［2］電子書籍の設計［3］電子書籍の制作［4］電子書籍のビジネス

EPUB3.0で変わる電子書籍の表現力＜EPUB3.0に準拠した電子書籍の設計と制作＞


［1］EPUBの基礎EPUB3.0で変わる電子書籍の表現力＜EPUB3.0に準拠した電子書籍の設計と制作＞

・EPUBで作られる電子書籍の特長・EPUB2.0.1とEPUB3.0の違い・EPUB3.0で可能になる表現・機能と　電子書籍の種類


EPUBで作られる電子書籍の特長


EPUBで作られる電子書籍の特長


電子書籍を読むにはハードウェアが必要



スクリーンのサイズ・解像度比率が異なる

処理能力（性能）が異なる


デバイスを限定するか？できるだけ多くのデバイスに対応するか？



スクリーンサイズ、解像度、比率、性能が異なるデバイスに、それぞれ対応していたのでは、制作の難易度、コストが高くなる



でも、まだ市場が小さいので、デバイスを限定しないほうがよい？

スクリーンサイズ、解像度、比率、性能が異なるデバイスに、それぞれ対応していたのでは、制作の難易度、コストが高くなる


配布資料をご覧ください「EPUBの基礎」資料 -1


EPUBepub is a standard file format, developed by the IDPF, for reflowable digital books and publications.



EPUB2.0.1とEPUB3.0の違い


配布資料をご覧ください「EPUBの基礎」資料 -2






EPUB3.0で可能になる表現・機能と電子書籍の種類




EPUBに適した書籍は？



現在のEPUBは？



EPUB3.0は？



現在、アプリで作られている電子書籍・電子雑誌の一部がEPUB3.0やWebアプリに

移行する可能性


［2］電子書籍の設計EPUB3.0で変わる電子書籍の表現力＜EPUB3.0に準拠した電子書籍の設計と制作＞

・ダイナミックページネイションの考え方・構造化とメタデータ・ナビゲーション・ページデザイン・電子書籍のユーザビリティと　アクセシビリティ


ダイナミックページネイションの考え方



スクロールで閲覧するWebページをプリンタで印刷すると”ページ”になる



WebページをA5, A4, A3の用紙でそれぞれ印刷することを

考えてみよう



用紙の大きさにあわせて適切な文字サイズを算出しテキストおよび図版を流し込むイメージ



さまざまな環境にあわせて最適化する作業はコスト高


EPUBのリフロー処理はRationalな選択

まずは制作の敷居を下げて本の数を増やす


EPUBのリフロー処理はRationalな選択

まずは制作の敷居を下げて本の数を増やす

リフローによって破綻しないテキスト主体の文芸書から


EPUB3.0は作業を高度化・複雑化するがEmotionalな

魅力的に感じるブックデザインを提供できるようになる


構造化・メタデータ


構造化とメタデータ


配布資料をご覧ください「電子書籍の設計・制作」資料 -1






構造化とメタデータTitle: 電子書籍メディア論 II - 本の設計Author: 境祐司Language: JapanesePublisher: monkeyish studioISBN: 978-4-7741-4505-1（「電子書籍の作り方」（技術評論社）のISBN）Editor: 境祐司Book designer: 境祐司Markup editor: 境祐司Sourse: http://www.facebook.com/eBookStrategyRights: Copyright © 2011 monkeyish studio, All rights reserved.Date of publication: 2011/06/03Description:電子書籍の利点の一つに「アクセシビリティ」があります。視覚障碍者や紙の本を読むことが困難な人たちは、録音図書や大活字本などでしか情報を得られませんでした。ウェブにはあらゆる人に等しく情報を提供できるメディアとして普及していますが、「ウェブの標準技術」を採用しているEPUBにも、ユニバーサルな仕組みが継承されています。本書はマルチデバイス対応やアクセシブルな電子書籍について解説しています。Subject: 電子出版Subject: 電子書籍Subject: EPUBSubject: コンピュータ / EPUBSubject: COMPUTERS / EPUB


構造化とメタデータTitle: 電子書籍メディア論 II - 本の設計Author: 境祐司Language: JapanesePublisher: monkeyish studioISBN: 978-4-7741-4505-1（「電子書籍の作り方」（技術評論社）のISBN）Editor: 境祐司Book designer: 境祐司Markup editor: 境祐司Sourse: http://www.facebook.com/eBookStrategyRights: Copyright © 2011 monkeyish studio, All rights reserved.Date of publication: 2011/06/03Subject: 電子出版Subject: 電子書籍Subject: EPUBSubject: コンピュータ / EPUBSubject: COMPUTERS / EPUB




電子書籍にアクセスして得られる情報


「探せる本」にする


直感的に本を探したい

構造化とメタデータ2011年6月22日水曜日

ナビゲーション


HeadingSelector

TOCTable of Contents


電子書籍はコンテンツとUIが分離しているリーディングシステムに

十分なデータを与える必要がある


電子書籍デザイン論


ページデザイン

iBooks Stanza


iBooks

Stanza


Stanzaでは図版が切れてしまう


スマートデバイスで読む電子書籍には”縦”と”横”がある


Reading System電子書籍のデザイン作業で必要なのは

の詳細な情報


CSSが指定されていないEPUBファイルを検証



iBooks Stanza



iBooks Stanza


iBooks

Stanza


iBooks Stanza


iBooks


iBooks Stanza


CSSを指定したEPUBファイルを検証


Stanza


kobo


iBooks Stanza kobo


リーディングシステムの初期設定を確認しておく


リーディングシステムの初期設定［iBooks］


［両端揃え］をオフにする有効になるプロパティがある


リーディングシステムの初期設定［Stanza］


リーディングシステムのデフォルトスタイルとは？


Webブラウザを参考にする


CSS2.1 User Agent Style Sheet Defaultshttp://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm


http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm

http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm

Internet Explorer User Agent Style Sheets http://www.iecss.com/


http://www.iecss.com

http://www.iecss.com

Adobe Digital Editionsのデフォルトスタイル


Adobe Digital Editions


Adobe Digital Editions


リーディングシステムのデフォルトスタイル

デザイナーのスタイルで上書きする


iBooks Stanza

デザイナーのスタイルで上書きする


デフォルトスタイル

デフォルトスタイルのリセット


デフォルトスタイル CSSリセット



*{　　margin: 0;　　padding: 0;　　border: 0;　　font-size: 100%;　　line-height: 1;　　font-weight: normal;　　font-style: normal;　　text-decoration: none;}



デフォルトスタイル CSSリセット



リーディングシステムの推奨スタイル


推奨スタイルON デフォルトのリセット

デフォルトスタイルと推奨スタイル


推奨スタイルOFF デフォルトのリセット



kobo


kobo

Page Presentation


推奨スタイルOFF 推奨スタイルON


iBooks Stanza



推奨スタイルON 推奨スタイルOFF

デフォルトスタイルと推奨スタイル［kobo］


汎用的なリーディングシステム


企業が運用する電子書籍ストアの専用クライアントとして

無料配布されているEPUBビューア



デフォルトスタイルを知らずに試行錯誤しても意図したとおりの

見栄えを得られない


iBooks


iBooksCSSリセット


Stanza


StanzaCSSリセット中央揃えのまま


iBooks Stanza

強制的に上書きする



通常の指定：.headingright { 　　　　　text-align:right; }

Stanzaで強制的にスタイルを適用させる指定：.headingright { 　　　　　text-align:right !important; }




この方法はお奨めできない




この方法はお奨めできない（あくまで暫定処置として）


リーディングシステムの文字サイズ・フォント変更による

影響は？


文字サイズの変更


文字サイズの変更


フォントの変更


デスクトップで読む電子書籍可変ウィンドウ



ブックカバー画像切れてしまう


ブックカバー画像の横幅658ピクセルを超えない「max-width: 100%;」


パソコンのディスプレイによってはウィンドウを最大表示にすると下部が隠れてしまう


#coverlayout img { height: 100%; }


Digital Editionsの場合、伸縮を可能にすると、画像が劣化するので許容の範囲かどうかチェックしたほうがよい


可変するウィンドウで電子書籍を読むときのメリット・デメリット

（※スマートデバイスは固定ウィンドウ）


フォント埋め込み






IPAex明朝 (Ver.001.03)/IPAexMincho(Ver.001.03)http://ossipedia.ipa.go.jp/ipafont/index.html

911 Porschahttp://www.freepremiumfonts.com/free-font/911-porscha.aspx

You Rook Marbeloushttp://www.freepremiumfonts.com/free-font/you-rook-marbelous.aspx

@font-face { font-family: "IPAex Mincho"; font-style: normal; font-weight: normal; src:url("../Fonts/ipaexm.ttf");}

@font-face { font-family: "You Rook Marbelous"; font-style: normal; font-weight: normal; src:url("../Fonts/YouRookMarbelous.ttf");}


http://ossipedia.ipa.go.jp/ipafont/index.html

http://ossipedia.ipa.go.jp/ipafont/index.html

http://www.freepremiumfonts.com/free-font/911-porscha.aspx

http://www.freepremiumfonts.com/free-font/911-porscha.aspx

http://www.freepremiumfonts.com/free-font/you-rook-marbelous.aspx

http://www.freepremiumfonts.com/free-font/you-rook-marbelous.aspx

@font-face { font-family: "IPAex Mincho"; font-style: normal; font-weight: normal; src:url("../Fonts/ipaexm.ttf");}

@font-face { font-family: "You Rook Marbelous"; font-style: normal; font-weight: normal; src:url("../Fonts/YouRookMarbelous.ttf");}

h1 { margin:0; font-size:3em; line-height: 90%; text-align: right !important; font-family:"You Rook Marbelous", sans-serif; color:#f06;}



iBooksフォント埋め込み

<?xml version="1.0" encoding="UTF-8"?><display_options><platform name="*"><option name="specified-fonts">true</option></platform></display_options>


<?xml version="1.0" encoding="UTF-8"?><display_options><platform name="*"><option name="specified-fonts">true</option></platform></display_options>

この方法はお奨めできない（あくまで暫定処置として）


EPUB 2.0.1リーディングシステムでバッドノウハウは避ける

結論

ウェブデザインのテクニックは基本的に通用しない


EPUB 2.0.1リーディングシステムでバッドノウハウは避ける

結論

ウェブデザインのテクニックは基本的に通用しない

ただし、事業に影響しない実験的な試みはノウハウ獲得につながる


EPUB 3.0では表現の可能性が広がる

結論EPUB 2.0.1リーディングシステムで

バッドノウハウは避けるウェブデザインのテクニックは基本的に通用しない


”紙”に近づく電子書籍・”紙”から離れる電子書籍


電子書籍のユーザビリティと　アクセシビリティ


DAISY Consortiumhttp://www.daisy.org/

電子書籍のアクセシビリティ

DAISYの配付フォーマットEPUB３と統合


http://www.daisy.org

http://www.daisy.org

ウェブコンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0http://www.jsa.or.jp/stdz/instac/commitee-acc/W3C-WCAG/WCAG20/index.html

Web Content Accessibility Guidelines (WCAG) 2.0http://www.w3.org/TR/WCAG20/


http://www.jsa.or.jp/stdz/instac/commitee-acc/W3C-WCAG/WCAG20/index.html

http://www.jsa.or.jp/stdz/instac/commitee-acc/W3C-WCAG/WCAG20/index.html

http://www.w3.org/TR/WCAG20/

http://www.w3.org/TR/WCAG20/

認知・理解・操作可能・堅牢


配布資料をご覧ください「電子書籍の設計・制作」資料 -5

EPUB Media Overlays 3.0


［3］電子書籍の制作EPUB3.0で変わる電子書籍の表現力＜EPUB3.0に準拠した電子書籍の設計と制作＞

・制作ツール／開発環境・タグ付けの作業（EPUB2.0.1）・ページデザインの作業（EPUB2.0.1）・EPUB3.0に準拠する方法（※2011年6月現在）・EPUB3.0 - 高度なページレイアウト（※2011年6月現在）・EPUB3.0 - マルチメディアの埋め込み（※2011年6月現在）・EPUB3.0 - 縦組み、ルビ、圏点（※2011年6月現在）・EPUBファイルの検証


WebKit Nightly Buildsデモンストレーションで使います


制作ツール／開発環境

デモをご覧ください


タグ付けの作業（EPUB2.0.1）

大見出し中見出し小見出し段落

<h1> </h1>

<h2> </h2>

<h3> </h3>

<p> </p>


タグ付けの作業（EPUB2.0.1）



ページデザインの作業（EPUB2.0.1）



EPUB3.0に準拠する方法（※2011年6月現在）



EPUB3.0 - 高度なページレイアウト（※2011年6月現在）

CSS Text Level 3改行規則、行組版（詰め、字間、揃えなど）、行頭・行末処理（ぶら下げなど）、文字装飾、文字変換の仕様http://www.w3.org/TR/css3-text/

CSS Writing Modes Module Level 3書字方向（縦書き（日本、中国、台湾）Right-To-Left（アラビア語、ヘブライ語など）逆方向の古代モンゴル語）、縦中横、論理方向などの仕様http://dev.w3.org/csswg/css3-writing-modes/


http://dev.w3.org/csswg/css3-writing-modes/

http://dev.w3.org/csswg/css3-writing-modes/


SVG（Scalable Vector Graphics）

MathMLマスエムエル、Mathematical Markup Language

数式を記述するためのマークアップ言語


MathMLMathematical Markup Language数式を記述するためのマークアップ言語





EPUB3.0 - マルチメディアの埋め込み（※2011年6月現在）

HTML5 <video><video src='myVideo' id='videoElement' />


EPUB3.0 - マルチメディアの埋め込み（※2011年6月現在）



EPUB3.0 - 縦組み、ルビ、圏点（※2011年6月現在）





















EPUBファイルの検証



EPUBファイルの検証

EPUB CheckCSS Validator


［4］電子書籍のビジネスEPUB3.0で変わる電子書籍の表現力＜EPUB3.0に準拠した電子書籍の設計と制作＞

・EPUBは国内の商業出版で普及するか？・アプリ版電子書籍とEPUBの棲み分け・EPUB3.0とスマートデバイスを　対象とした新市場の動向


EPUBは国内の商業出版で普及するか？

Lean-forwardとlean-back（例：小説, テレビ）（例：実用書, スマートテレビ）


Lean-forwardとlean-back

Jakob Nielsen's Alertbox, June 9, 2008:Writing Style for Print vs. Web

http://www.useit.com/alertbox/print-vs-online-content.html







教育


アプリ版電子書籍とEPUBの棲み分け



アプリ版電子書籍とEPUBの棲み分け


EPUB3.0とスマートデバイスを　対象とした新市場の動向

Web for AllWeb on Everything

W3Cのミッション



Web for All

Web on Everything

ウェブの国際化、あらゆる人が等しく利用できるアクセシビリティ、特定の環境に依存しない等

パソコンだけではなく、携帯電話やスマートフォン、デジタルテレビ、キオスクなど、さまざまな機器でアクセスできる等


EPUB3.0とスマートデバイスを　対象とした新市場の動向Buy Once, Read Everywhere.



iPhoneからAndroidに乗り換えても電子書籍を引き継ぐことができる



Web for AllWeb on Everything


継承と革新次世代の電子書籍キーワード


community


スライド資料はFacebookで公開されます






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

境祐司http: / /design-zero. tv /2010/ebook.html

@commonsty le

EPUB3.0で変わる電子書籍の表現力JAGATセミナー






community







Technology

EPUB3で変わる電子書籍の表現力