EBOOK STRATEGY REPORTJEPA Seminar               Published: April 09, 2013
profile          YOUJI SAKAIInstructional Designer | eBook Designer                境祐司
BOOKSウェブレイアウトの   EPUB3スタンダード    Webデザイン基礎   教科書        デザインガイド         改訂3版      InDesign CS6で作るEPUB 3 標準ガイドブック           ...
BOOKS主な著書※海外版、ムックを含むと60冊ほど『速習Webデザイン Flash CS6』(技術評論社)、『InDesign CS6で作るEPUB 3 標準ガイドブック』(共著/翔泳社)、『スマートフォンサイトデザインの基本原則』(共著/M...
community       電子書籍メデ ア論             ィ http://www.facebook.com/eBookStrategy         デザインの未来http://www.facebook.com/TheFu...
テキスト
EPUB 3 オーサリング最前線複雑・高度化してきた2012年以降の  EPUB     (電子出版)を総点検                  日時 2013年4月9日15:00∼17:30                  開催場所 飯田橋...
EPUBの基礎EPUBを採用した電子書籍の種類と対応するストア        EPUBのビジネス 電子書籍のオーサリングコストについて考える[実践]高校生でもわかるEPUB 電子書籍の作り方   次の「EPUB」を見据えた体制づくり
PART1         EPUBの基礎EPUBを採用した電子書籍の種類と対応するストア        EPUBのビジネス 電子書籍のオーサリングコストについて考える[実践]高校生でもわかるEPUB 電子書籍の作り方   次の「EPUB」を見...
EPUBの基礎EPUBを採用した電子書籍の種類と対応するストア        EPUBのビジネス 電子書籍のオーサリングコストについて考える[実践]高校生でもわかるEPUB 電子書籍の作り方   次の「EPUB」を見据えた体制づくり      ...
EPUBの基礎
・広義のEPUB、狭義のEPUB・電子書籍の「構造」 「見た目のデザイン」          と・アクセシビリティ
広義のEPUB、狭義のEPUB
electronic publication
IDPFInternational Digital Publishing Forumインターナショナルデジタルパブリッシング・フォーラムhttp://idpf.org
参考にしている                          Mobi                                                         EPUBの歴史                     ...
iPad eBook format overview of the .epub filehttp://youtu.be/vvGrFZdSDww                                          ジェレミー・ケンプ ...
狭義のEPUB   広義のEPUB          パーソナルドキュメント  書籍         カタログ            パンフレット  漫画          教材 絵本・写真集   企業内ドキュメント            官公...
紙の本には無い電子書籍の利点とは?
20年前の読書端末
1993年NECデジタルブック電子書籍はフロッピーディスクで販売   デジタルブックに転送して読む
1993年NECデジタルブック電子書籍はフロッピーディスクで販売   デジタルブックに転送して読む  マーカー              自動めくり  文字拡大          拡大スクロール
マーカーを引く    自動ページめくり マーカー       自動めくり 文字拡大      拡大スクロール            図版のズーム文字を拡大できる            スクロール
20年前の読書端末電子書籍の利点といわれる機能はすでに実現           1993年NECデジタルブック マーカー    自動めくり 文字拡大   拡大スクロール
誰でもPCショップで購入できた    20年前の読書端末電子書籍の利点といわれる機能はすでに実現           1993年NECデジタルブック マーカー    自動めくり 文字拡大   拡大スクロール
EPUBの歴史                              Mobipocketを2005年に買収OEBPS1.0Open eBook Publication Structure                          ...
EPUBの歴史                                                     Mobipocketを2005年に買収   インターネット商用化                       OEBPS1....
電子書籍の「構造」と「見た目のデザイン」
電子書籍の仕組みメタデータ            電子書籍の           内容を読み取って構造化された            適切に表示  書籍電子書籍     リーディングシステム
電子書籍の仕組み   マシンリーダブル   機械が読める   メタデータを持つ構造化された本  書誌情報本の内容を取得できる       この2つがないと              本のデジタルデータでしかない                 ...
EPUBコンテンツで採用されている標準技術    HTML5   CSS3     XML    SVG
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つのデザインを多種多様な閲覧環境に対応させるのは難しい
個別に最適化していくと  膨大なコストがかかり電子書籍がなかなか増えない
でも、マルチデバイス対応は必須    スマートフォン                       専用端末ウェブブラウザ                  パソコン
電子書籍のタイプ
reflowable content       リフローfixed-layout content      固定レイアウト   print replica       レプリカ
EPUBだけではなくMobi, XMDF, .book, etc...reflowable content              リフローfixed-layout content           固定レイアウト      print rep...
reflowable content         リフローfixed-layout content       固定レイアウト   print replica         レプリカ   Amazon Kindleの「AZW4」など
reflowable content       リフローfixed-layout content      固定レイアウト   print replica       レプリカ
reflowable content          リフローリフローの電子書籍はどのようなスクリーンでも    最低限の可読性を保証してくれる
可読性と再現性を分けて考えよう・可読性が重視される出版物 テキストが主体の文芸書など・再現性が重視される出版物 図版が多くレイアウトを崩せない雑誌など ビジュアルで構成されている絵本、漫画、 写真集など
可読性が重視される出版物・シンプルなリフロー・高度なリフロー・固定レイアウト・固定レイアウト(絶対配置タイプ)      再現性が重視される出版物
リフローか? 固定レイアウトか?
リフロー
固定レイアウト
固定レイアウトで読めるの?
スマートフォンでも読めるコミックの見せ方とは?
[デモンストレーション 03]           KF8固定レイアウト・パネルビューKingdom Come (New Edition) [Kindle Edition]               http://amzn.to/XEAQrv
雑誌はリフロー? 固定レイアウト?
・可読性が重視される出版物 テキストが主体の文芸書など・再現性が重視される出版物 図版が多くレイアウトを崩せない雑誌など ビジュアルで構成されている絵本、漫画、 写真集など   スマートフォンでは読めない     タブレット推奨にする?
レイアウトも壊せない、記事の可読性も保証したい                  .net                  Apple Newsstand
スマートフォンでも雑誌を読んでほしい!雑誌はハイブリッド仕様で  読者に提供する
technology reviewhttp://www.amazon.com/Technology-Review/dp/B001AHPAX4Amazon 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 review             http://www.amazon.com/Technology-Review/dp/B001AHPAX4リフローに切り替わる
technology reviewhttp://www.amazon.com/Technology-Review/dp/B001AHPAX4
スマートフォンで雑誌を読む
スマートフォンで雑誌を読む          Shape          http://amzn.to/PlvEmM
スマートフォンで雑誌を読む          Shape          http://amzn.to/PlvEmM         リフローモード
スマートフォンで雑誌を読む          Shape          http://amzn.to/PlvEmM          リフローで読む
Kindle, Google playで採用                Books on Google Play
[デモンストレーション 05]        プリントレプリカとリフローの切り替えTechnology Review [Kindle Edition]           http://amzn.to/VWn8vW
シンプルなリフロー
[デモンストレーション 01]Harry Potter and the Philosophers Stone (Book 1)                 http://amzn.to/kRGcDk
高度なリフロー
リフローで再現性も高める
Usability of Web Photos                                        James Chudleyhttp://www.fivesimplesteps.com/products/usabili...
Usability of Web Photos                                        James Chudleyhttp://www.fivesimplesteps.com/products/usabili...
Usability of Web Photos                                        James Chudleyhttp://www.fivesimplesteps.com/products/usabili...
フォント埋め込み
@font-face {                         フォント埋め込み font-family: Prophecy Script; font-style: normal; font-weight: normal; src:u...
Kinoppy   iBooks
固定レイアウト
EPUB 3 Fixed-Layout Documents           http://idpf.org/epub/fxl/・IDPFの情報文書(Informational Document)・IDPF EPUB working grou...
写真集サンプル          Readiumで表示
写真集サンプル          Readiumで表示
写真集サンプル          Androidスマートフォン          Himawari Reader Proで          サンプルを表示
固定レイアウト・固定レイアウト・横向きでは合成された見開き・縦向きでは見開きにしない
固定レイアウト
固定レイアウト・固定レイアウト・合成された見開きにしない・横向きで固定
固定レイアウト
固定レイアウト・リフローのコンテンツ・固定レイアウトの 右配置ページと左配置ページを 合成された見開きページとして表示・リフローのページも見開き表示のまま
固定レイアウト
固定レイアウト・固定レイアウト・横向きでは合成された見開き・縦向きでは見開きにしない・進行方向は右から左(日本のマンガ)
固定レイアウト
[デモンストレーション 02a]Head First Mobile Web(79469 KB / 480 pages)               http://amzn.to/VWp9Zf                           ...
固定レイアウト(絶対配置タイプ)
固定レイアウト(絶対配置タイプ)                   iPad at Work                   Volume 2                   Apple iBookstore
固定レイアウト(絶対配置タイプ)                   iPad at Work                   Volume 2                   Apple iBookstore
固定レイアウト(絶対配置タイプ)                   iPad at Work                   Volume 2                   Apple iBookstore       画像ではない...
[デモンストレーション 02c]iPad@work ¦ iBookstore絶対配置の固定レイアウト(Apple)
音声と同期する電子書籍(EPUB Media Overlays)
[デモンストレーション 10]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+ ...
iPad   DL Reader             代替情報
Miro Video Converterhttp://www.mirovideoconverter.com/
[デモンストレーション 06]Nixonland: The Rise of a President and the Fracturing of       America [Kindle Edition With Audio/Video]   ...
[デモンストレーション 07]The Voyage of the Dawn Treader (Enhanced Edition)     (Narnia) [Kindle Edition With Audio/Video]           ...
動的な表現、インタラクティブな   表現を含む電子書籍
iBookstore
iBookstore
インタラクティブブックならiBookstore
[デモンストレーション 04]Twas The Night Before Christmas (AniMotion)              [Kindle Edition]               http://amzn.to/VrpU...
EPUBのビジネス
・電子書籍・学習コンテンツ ・企業内ドキュメント・製品、サービスのマニュアル・官公庁の配布ドキュメント・販促ツール ・プロモーション・博物館、美術館のキオスク、企画展の インフォメーション
電子書籍
習得読書目的意識が明確で繰り返し読む併読・多読・乱読・本への投資    娯楽読書    楽しみの読書 多読ではなく精読の世界
消費される電子書籍ソーシャルメディアで消費されやすい エマージェンシーパブリッシング
消費される電子書籍ソーシャルメディアで消費されやすい エマージェンシーパブリッシング  買うだけでコミュニケーションに    参加できる(読まなくても)「ぼくも買った」とツイートできればよいもの
これも電子出版                       メールマガジンレイアウトテクノロジー              転送するだけ
これも電子出版   http://flipboard.com/
ソーシャルメディアの夜明けこれからの時代を楽しく生きるためのヒント著者:平野友康http://www.digitalstage.jp/book/yoake/
ソーシャルメディアの夜明けこれからの時代を楽しく生きるためのヒント著者:平野友康http://www.digitalstage.jp/book/yoake/     電子書籍が提供される     電子出版サービスBCCKSとの連携
複合型ビジネスモデル     電子書籍                     コミュニティ                      メディアA Book Apart                An Event Apart        ...
著者がイベントに登壇     電子書籍                     コミュニティ                      メディアA Book Apart                An Event Apart        ...
電子書籍の第1章をオンラインメディアに掲載     電子書籍                     コミュニティ                      メディアA Book Apart                An Event Ap...
学習コンテンツ(教科書、教材)
EPUBで配信されている    電子教科書434冊                OpenLearn                The Open University
EPUBで配信されている    電子教科書434冊                OpenLearn                The Open University
EPUBで配信されている    電子教科書434冊                OpenLearn                The Open University
OpenLearnThe Open Universityhttp://www.open.edu/openlearn/
iTunes U - Impacthttp://projects.kmi.open.ac.uk/itunesu/impact/                2013年3月25日                                 ...
iTunes U - Impacthttp://projects.kmi.open.ac.uk/itunesu/impact/                 2013年3月25日                                ...
企業内ドキュメント官公庁の配布ドキュメント
製品、サービスのマニュアル
eトリセツ                                           イートリセツ                                           取扱説明書アプリ(EPUB)           ...
ドコモビジネスオンライン                          導入事例:プロントコーポレーション様                         e株式会社プロントコーポレーション                        ...
販促ツール(電子版のパンフレット、チラシ)
フェルメール<地理学者>とオランダ・フランドル絵画展豊田市美術館2011年6月11日[土] ∼ 8月28日[日]http://www.museum.toyota.aichi.jp/exhibition/2011/special/vermeer....
フェルメール<地理学者>とオランダ・フランドル絵画展豊田市美術館2011年6月11日[土] ∼ 8月28日[日]http://www.museum.toyota.aichi.jp/exhibition/2011/special/vermeer....
プロモーション(電子化しにくい書籍の オンラインサンプル等)
絵本ナビ絵本を1回だけ全ページためしよみhttp://www.ehonnavi.net/browse_all/Actibookを採用http://ebook.digitalink.ne.jp
絵本ナビ     絵本を1回だけ     全ページためしよみ     http://www.ehonnavi.net/browse_all/試し読みのための電子書籍化     Actibookを採用     http://ebook.digit...
絵本を1回だけ     全ページためしよみ     http://www.ehonnavi.net/browse_all/             電子書籍を             売るわけではない試し読みのための電子書籍化     Acti...
博物館、美術館のキオスク企画展のインフォメーション
インタラクティブコンテンツの技術      Flashコンテンツ         ウェブアプリインタラクティブPDF        アプリ               高性能なタブレットを来場者に               貸し出すナビゲーターに
インタラクティブコンテンツの技術                  EPUB 3 コンテンツHTML5, CSS3, JavaScript, Media Overlays                       Reading System
The Monarch Butterfly - An Interactive Picture Book                                Elizabeth Castro                        ...
電子書籍のオーサリング コストについて考える
・手作業(エディタ等でハンドコーディング)・手作業(EPUB専用ツールで作業)・DTPソフトから書き出したEPUBを手直しする・ワードプロセッサから書き出したEPUBを手直しする・DTPソフトやワードプロセッサから修正なしの 最適化されたEPU...
体力勝負(消耗戦)に  陥る制作現場
EPUB 3の制作ノウハウは   まだ蓄積されていない電子書籍デザイナーは、勉強しながら作業、作業しながら勉強
・なんとなく出来てしまう なぜ、うまくいったのかわからない・バッドノウハウを使ってしまう とにかく締め切りに間に合わせたい
こんなことをやっていませんか?
*{     margin: 0;     padding: 0; }
*{     margin: 0;     padding: 0; }
デフォルトスタイルシートの   上書きを最小限におさえて、意図したデザインに近づけるための設計を        すること電子書籍デザイナーの腕の見せ所です
作業効率化の重要性
制作ガイドラインをつくる  (Amazon Kindleの例)                      日本語サポート補足資料                      (PDFリンク)                      http:/...
インナーコミュニティ・制作ガイドラインをつくる アクセシビリティ機能との      衝突を避けます     フォントサイズ    ページの背景色は      余白サイズ     上書きしませんページ内の要素の背景色は      行間    上書...
インナーコミュニティ・制作ガイドラインをつくる  どんな要望にも応えます      お任せください     フォントサイズ                  余白サイズページの背景色の上書きは   裏技で対応できます              ...
電子書籍の永続性について考えてみよう              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 2012Kindle eBooks from ePub: Automated or Manualhttp://www.to...
2012年2月13日Tools of Change for Publishing Conference New York 2012Kindle eBooks from ePub: Automated or Manualhttp://www.to...
2012年2月13日Tools of Change for Publishing Conference New York 2012Kindle eBooks from ePub: Automated or Manualhttp://www.to...
エディタ一ツール 一本で勝負!
デザイナーによる手作業(EPUB専用ツールで作業)
BlueGriffonFUSEe   Sigil   EPUB 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
EPUBMetadataEditorEPUBメタデータ エディターhttps://code.google.com/p/epub-metadata-editor/              無償  Winユーティリティ
DAISY Tobiデイジー トビhttp://www.daisy.org/project/tobiDAISY 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         対応         Kindle        対応  WinEPUBのコーディングなしで書き...
Word 2013http://office.microsoft.com/ja-jp/support/FX102832602.aspx※EPUBユーティリティが必要  Win
Smart ePubhttp://www.openend.co.jp/productsinfo/smartepub/index.html  Win                        Word                     ...
Word2ePubhttp://www.sgml-xml.jp/tools/Word2ePub.html業務用  Win                        Word                        ユーティリティ
Scrivener 2スクリブナーhttp://www.literatureandlatte.com/scrivener.php   EPUB 2         対応  Win     Mac
LibreOfficeリブレオフィスhttp://ja.libreoffice.org/   EPUB 2          対応                       無償  Win      MacWriter2ePub           ...
DTPソフトやワードプロセッサから 修正なしの最適化されたEPUBを       書き出す
InDesignCS6EPUB書き出しオプション
HTMLおよびCSSの   編集作業このプロセスは無くしたい
修正作業なし理想的なワークフロー
XML and InDesignStylish Structure:Publishing XML withAdobe InDesignDorothy J. Hoskinshttp://shop.oreilly.com/product/06369...
クラウドベースの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.comhttp://blog.livedoor.com/guide/ebook.htmlクラウドブログサービス日本語の縦書きEPUB 対応固定レイアウト対応
Tigris Plusティグリス プラスhttp://tigris.jp/クラウドEPUB 3 固定レイアウト対応
XMLで管理EPUB出力を自動化する
OReilly Media
OReilly Mediaオライリーメディアhttp://oreilly.comEbooks - OReilly Mediahttp://shop.oreilly.com/category/ebooks.do
Formats Available  PDF           EPUB                             Mobi    DAISY           Android .apk                    ...
On Your DeviceLaptop or desktop computer                    EPUB PDF              MOBI    DAISYiPad                       ...
2008年2月13日Tools of Change for Publishing ConferenceXML for Publishershttp://www.toccon.com/toc2008/public/schedule/detail/...
XMLでワンソースマルチユースを実現
[実践]高校生でもわかるEPUB電子書籍の作り方
・本の情報を用意しよう[メタデータ]・本の表現を検討しよう[リフロー/固定レイアウト]・本を構造化しよう[HTMLマークアップ]・表紙を用意しよう[カバー]・本の「見た目のデザイン」を考えよう[CSSスタイリング]・ストアごとのルールにあわせて...
無料のワードプロセッサEPUBプラグインを使用
無償、Win, Macどちらでも  HTML, CSSの知識必要なし 無償で使用できるオープンソースのLibreOfficeとEPUBエクスポートエクステンションWriter2ePub     LibreOffice       Writer2ePub...
Writer2ePub                         機能拡張http://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          (ウェブブラウザ内蔵)      ...
ストアごとのルールにあわせて  記述内容を変更しよう
制作ガイドライン(Amazon Kindleの例)                    Kindle                    パブリッシング・ガイドライン                    (PDFリンク)         ...
制作ガイドライン(Amazon Kindleの例)                    日本語サポート補足資料                    (PDFリンク)                    http://bit.ly/TOJCj4
将来の作り直しのために 本のオリジナル素材を   管理しよう
次の「EPUB」を見据えた体制づくり
・仕様の更新で変わる・リーディングシステムのアップデートで変わる・オーサリング環境で変わる・デバイスの進化(高精細化 処理能力向上)             ・ で変わる・デバイスの普及率で変わる・企業の思惑で変わる
数が増える                     本を探す仕組みの整備実装が進む高機能化でヘビー級のアプリに                            淘汰の可能性                        サービス向上で読者...
仕様の更新で変わる
リーディングシステムのアップデートで変わる
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...
オーサリング環境で変わる
iBooks Authorhttp://www.apple.com/jp/ibooks-author/
デバイスの進化(高精細化 処理能力向上)     ・       で     変わる
フルHDスマートフォン
普及率で変わる
StatCounter Global Statshttp://gs.statcounter.com/
2013年1∼3月StatCounter Global Statshttp://gs.statcounter.com/   Worldwide
2013年1∼3月StatCounter Global Statshttp://gs.statcounter.com/   Japan
企業の思惑で変わる
Browser              rendering engine   IE     Firefox   Chrome   Safari   OperaTrident   Gecko     WebKit   WebKit   Pres...
Browser              rendering engine   IE     Firefox   Chrome   Safari    OperaTrident   Gecko     WebKit   WebKit    Pr...
電子書籍オーサリングで理解しておきたいこと    リフロー・固定レイアウト      アクセシビリティ    作業の規模とツール選び   スタイルの上書きは最小限に        素材管理
電子書籍オーサリングで理解しておきたいこと リフロー・固定レイアウト[判断力]   アクセシビリティ[方針決め]  作業の規模とツール選び[効率化]スタイルの上書きは最小限に[制作ノウハウ]    素材管理[技術進化対応]
Thank you for your attention.ご清聴ありがとうございました
community       電子書籍メデ ア論             ィ http://www.facebook.com/eBookStrategy         デザインの未来http://www.facebook.com/TheFu...
テキストEBOOK STRATEGY REPORTJEPA Seminar                      Published: April 09, 2013
制作者の視点での EPUB 3 オーサリング最前線
制作者の視点での EPUB 3 オーサリング最前線
制作者の視点での EPUB 3 オーサリング最前線
制作者の視点での EPUB 3 オーサリング最前線
制作者の視点での EPUB 3 オーサリング最前線
Upcoming SlideShare
Loading in …5
×

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

12,524 views

Published on

制作者の視点での EPUB 3 オーサリング最前線 |
複雑・高度化してきた2012年以降のEPUB(電子出版)を総点検 |
日時 2013年4月9日15:00〜17:30 |
開催場所 飯田橋:研究社英語センター
https://sites.google.com/site/jepasite/seminar/20130409

Published in: Technology
1 Comment
26 Likes
Statistics
Notes
  • There are many casino games out there but out of some are skill based. Don't choose any luck based casino games like roulette, slots or craps as a profitable games. Because it all depends o luck.
    http://www.societyofslots.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
12,524
On SlideShare
0
From Embeds
0
Number of Embeds
96
Actions
Shares
0
Downloads
264
Comments
1
Likes
26
Embeds 0
No embeds

No notes for slide

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

  1. 1. EBOOK STRATEGY REPORTJEPA Seminar Published: April 09, 2013
  2. 2. profile YOUJI SAKAIInstructional Designer | eBook Designer 境祐司
  3. 3. BOOKSウェブレイアウトの EPUB3スタンダード Webデザイン基礎 教科書 デザインガイド 改訂3版 InDesign CS6で作るEPUB 3 標準ガイドブック 森 裕司, 境 祐司, 林 拓也, 向井 領治
  4. 4. 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デザイン基礎』(技術評論社)など。
  5. 5. community 電子書籍メデ ア論 ィ http://www.facebook.com/eBookStrategy デザインの未来http://www.facebook.com/TheFutureDesign
  6. 6. テキスト
  7. 7. EPUB 3 オーサリング最前線複雑・高度化してきた2012年以降の EPUB (電子出版)を総点検 日時 2013年4月9日15:00∼17:30 開催場所 飯田橋:研究社英語センター https://sites.google.com/site/jepasite/seminar/20130409
  8. 8. EPUBの基礎EPUBを採用した電子書籍の種類と対応するストア EPUBのビジネス 電子書籍のオーサリングコストについて考える[実践]高校生でもわかるEPUB 電子書籍の作り方 次の「EPUB」を見据えた体制づくり
  9. 9. PART1 EPUBの基礎EPUBを採用した電子書籍の種類と対応するストア EPUBのビジネス 電子書籍のオーサリングコストについて考える[実践]高校生でもわかるEPUB 電子書籍の作り方 次の「EPUB」を見据えた体制づくり
  10. 10. EPUBの基礎EPUBを採用した電子書籍の種類と対応するストア EPUBのビジネス 電子書籍のオーサリングコストについて考える[実践]高校生でもわかるEPUB 電子書籍の作り方 次の「EPUB」を見据えた体制づくり PART2
  11. 11. EPUBの基礎
  12. 12. ・広義のEPUB、狭義のEPUB・電子書籍の「構造」 「見た目のデザイン」 と・アクセシビリティ
  13. 13. 広義のEPUB、狭義のEPUB
  14. 14. electronic publication
  15. 15. IDPFInternational Digital Publishing Forumインターナショナルデジタルパブリッシング・フォーラムhttp://idpf.org
  16. 16. 参考にしている Mobi EPUBの歴史 Mobipocketを2005年に買収OEBPS1.0Open eBook Publication Structure Apps1999.9 2000 2007 2010 2012 .book EPUB2.0 EPUB3.0 XMDF 2011.10.11 2007年 Kindle 開始 Kindle Format 8
  17. 17. iPad eBook format overview of the .epub filehttp://youtu.be/vvGrFZdSDww ジェレミー・ケンプ Jeremy Kemp http://slisapps.sjsu.edu/facultypages/view.php?fac=kempj 2010年
  18. 18. 狭義のEPUB 広義のEPUB パーソナルドキュメント 書籍 カタログ パンフレット 漫画 教材 絵本・写真集 企業内ドキュメント 官公庁文書 実用書 製品マニュアル 教科書 プロモーションツール 雑誌・新聞 キオスクコンテンツ etc...
  19. 19. 紙の本には無い電子書籍の利点とは?
  20. 20. 20年前の読書端末
  21. 21. 1993年NECデジタルブック電子書籍はフロッピーディスクで販売 デジタルブックに転送して読む
  22. 22. 1993年NECデジタルブック電子書籍はフロッピーディスクで販売 デジタルブックに転送して読む マーカー 自動めくり 文字拡大 拡大スクロール
  23. 23. マーカーを引く 自動ページめくり マーカー 自動めくり 文字拡大 拡大スクロール 図版のズーム文字を拡大できる スクロール
  24. 24. 20年前の読書端末電子書籍の利点といわれる機能はすでに実現 1993年NECデジタルブック マーカー 自動めくり 文字拡大 拡大スクロール
  25. 25. 誰でもPCショップで購入できた 20年前の読書端末電子書籍の利点といわれる機能はすでに実現 1993年NECデジタルブック マーカー 自動めくり 文字拡大 拡大スクロール
  26. 26. EPUBの歴史 Mobipocketを2005年に買収OEBPS1.0Open eBook Publication Structure Apps1999.9 2000 2007 2010 2012 .book EPUB2.0 EPUB3.0 XMDF 2011.10.11 2007年 Kindle 開始 Kindle Format 8
  27. 27. EPUBの歴史 Mobipocketを2005年に買収 インターネット商用化 OEBPS1.0 Open eBook Publication Structure 1999.9 1993 2000 2007 .bookデジタルブック EPUB2.0 XMDF Windows 95 2007年 Kindle 開始
  28. 28. 電子書籍の「構造」と「見た目のデザイン」
  29. 29. 電子書籍の仕組みメタデータ 電子書籍の 内容を読み取って構造化された 適切に表示 書籍電子書籍 リーディングシステム
  30. 30. 電子書籍の仕組み マシンリーダブル 機械が読める メタデータを持つ構造化された本 書誌情報本の内容を取得できる この2つがないと 本のデジタルデータでしかない 自炊本と同じ
  31. 31. EPUBコンテンツで採用されている標準技術 HTML5 CSS3 XML SVG
  32. 32. W3CWorld Wide Web Consortiumワールドワイドウェブ・コンソーシアムhttp://www.w3.org
  33. 33. 電子書籍フォーマットの信頼性とは? オープンな仕様で誰でも自由に 使えること 古い仕様が上書きされないこと 世界中のデザイナー、開発者が 情報を共有できること
  34. 34. アクセシビリティ
  35. 35. リーディングシステムのアクセシビリティ機能 フォントサイズ 余白サイズ 行間 画面色 明るさ
  36. 36. リーディングシステムのアクセシビリティ機能 ポートレイトモード 日本の電子出版を創ってきた男たち(ONDECK BOOKS) インプレス R&D [ Next Publishing ]
  37. 37. リーディングシステムのアクセシビリティ機能 列の数
  38. 38. リーディングシステムのアクセシビリティ機能 ランドスケープモード
  39. 39. Kindleのガイドライン例ページのマージン・環境にあわせて初期値が指定されている・読書システムの調整機能と重複するためスタイルの 上書きはできない
  40. 40. Kindleのガイドライン例文字色と背景色・body要素のcolor(文字色), background-color(背景色)は読書システムの 調整機能と重複するためスタイルは上書きできない・div, span要素で文字色や背景色を指定でき、 読書システムの調整機能を無効にできるが非推奨
  41. 41. Kindleのガイドライン例 フォントサイズ ページの背景色は 余白サイズ 上書きできませんページ内の要素の背景色は 行間 上書きできますが 慎重に判断してください 画面色 明るさ
  42. 42. EPUBを採用した電子書籍の 種類と対応するストア
  43. 43. ・シンプルなリフロー・高度なリフロー・固定レイアウト・固定レイアウト(絶対配置タイプ)・音声と同期する電子書籍・ビデオやオーディオを含む電子書籍・動的な表現、インタラクティブな表現を 含む電子書籍
  44. 44. 電子書籍の特性と表現手法について再確認
  45. 45. 「本」は音楽や映像とは異なり 再生機を必要としない小学生からおばあさんまで誰でも購入でき、すぐに読める ところが... 電子書籍は再生機(読書システム)が 必要になった
  46. 46. ハードウェアが必要 スクリーンで本を読む 液晶ディスプレイ(スマートデバイス、PC) E Inkディスプレイ(読書専用端末)サイズ、解像度、比率などが異なる
  47. 47. デバイスごとに電子書籍を最適化する?
  48. 48. デバイスごとに電子書籍を最適化する?
  49. 49. デスクトップ スマートフォン最適化は困難
  50. 50. ハードウェアが必要 スクリーンで本を読む 液晶ディスプレイ(スマートデバイス、PC) E Inkディスプレイ(読書専用端末)サイズ、解像度、比率などが異なる 1つのデザインを多種多様な閲覧環境に対応させるのは難しい
  51. 51. 個別に最適化していくと 膨大なコストがかかり電子書籍がなかなか増えない
  52. 52. でも、マルチデバイス対応は必須 スマートフォン 専用端末ウェブブラウザ パソコン
  53. 53. 電子書籍のタイプ
  54. 54. reflowable content リフローfixed-layout content 固定レイアウト print replica レプリカ
  55. 55. EPUBだけではなくMobi, XMDF, .book, etc...reflowable content リフローfixed-layout content 固定レイアウト print replica レプリカ
  56. 56. reflowable content リフローfixed-layout content 固定レイアウト print replica レプリカ Amazon Kindleの「AZW4」など
  57. 57. reflowable content リフローfixed-layout content 固定レイアウト print replica レプリカ
  58. 58. reflowable content リフローリフローの電子書籍はどのようなスクリーンでも 最低限の可読性を保証してくれる
  59. 59. 可読性と再現性を分けて考えよう・可読性が重視される出版物 テキストが主体の文芸書など・再現性が重視される出版物 図版が多くレイアウトを崩せない雑誌など ビジュアルで構成されている絵本、漫画、 写真集など
  60. 60. 可読性が重視される出版物・シンプルなリフロー・高度なリフロー・固定レイアウト・固定レイアウト(絶対配置タイプ) 再現性が重視される出版物
  61. 61. リフローか? 固定レイアウトか?
  62. 62. リフロー
  63. 63. 固定レイアウト
  64. 64. 固定レイアウトで読めるの?
  65. 65. スマートフォンでも読めるコミックの見せ方とは?
  66. 66. [デモンストレーション 03] KF8固定レイアウト・パネルビューKingdom Come (New Edition) [Kindle Edition] http://amzn.to/XEAQrv
  67. 67. 雑誌はリフロー? 固定レイアウト?
  68. 68. ・可読性が重視される出版物 テキストが主体の文芸書など・再現性が重視される出版物 図版が多くレイアウトを崩せない雑誌など ビジュアルで構成されている絵本、漫画、 写真集など スマートフォンでは読めない タブレット推奨にする?
  69. 69. レイアウトも壊せない、記事の可読性も保証したい .net Apple Newsstand
  70. 70. スマートフォンでも雑誌を読んでほしい!雑誌はハイブリッド仕様で 読者に提供する
  71. 71. technology reviewhttp://www.amazon.com/Technology-Review/dp/B001AHPAX4Amazon Kindle Storeで販売されている雑誌
  72. 72. technology reviewhttp://www.amazon.com/Technology-Review/dp/B001AHPAX4
  73. 73. technology reviewhttp://www.amazon.com/Technology-Review/dp/B001AHPAX4固定レイアウト
  74. 74. technology reviewhttp://www.amazon.com/Technology-Review/dp/B001AHPAX4
  75. 75. technology review http://www.amazon.com/Technology-Review/dp/B001AHPAX4リフローに切り替わる
  76. 76. technology reviewhttp://www.amazon.com/Technology-Review/dp/B001AHPAX4
  77. 77. スマートフォンで雑誌を読む
  78. 78. スマートフォンで雑誌を読む Shape http://amzn.to/PlvEmM
  79. 79. スマートフォンで雑誌を読む Shape http://amzn.to/PlvEmM リフローモード
  80. 80. スマートフォンで雑誌を読む Shape http://amzn.to/PlvEmM リフローで読む
  81. 81. Kindle, Google playで採用 Books on Google Play
  82. 82. [デモンストレーション 05] プリントレプリカとリフローの切り替えTechnology Review [Kindle Edition] http://amzn.to/VWn8vW
  83. 83. シンプルなリフロー
  84. 84. [デモンストレーション 01]Harry Potter and the Philosophers Stone (Book 1) http://amzn.to/kRGcDk
  85. 85. 高度なリフロー
  86. 86. リフローで再現性も高める
  87. 87. Usability of Web Photos James Chudleyhttp://www.fivesimplesteps.com/products/usability-of-web-photos
  88. 88. Usability of Web Photos James Chudleyhttp://www.fivesimplesteps.com/products/usability-of-web-photos
  89. 89. Usability of Web Photos James Chudleyhttp://www.fivesimplesteps.com/products/usability-of-web-photos
  90. 90. フォント埋め込み
  91. 91. @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
  92. 92. Kinoppy iBooks
  93. 93. 固定レイアウト
  94. 94. EPUB 3 Fixed-Layout Documents http://idpf.org/epub/fxl/・IDPFの情報文書(Informational Document)・IDPF EPUB working group が作成・2012年3月13日、IDPF 理事会によって承認
  95. 95. 写真集サンプル Readiumで表示
  96. 96. 写真集サンプル Readiumで表示
  97. 97. 写真集サンプル Androidスマートフォン Himawari Reader Proで サンプルを表示
  98. 98. 固定レイアウト・固定レイアウト・横向きでは合成された見開き・縦向きでは見開きにしない
  99. 99. 固定レイアウト
  100. 100. 固定レイアウト・固定レイアウト・合成された見開きにしない・横向きで固定
  101. 101. 固定レイアウト
  102. 102. 固定レイアウト・リフローのコンテンツ・固定レイアウトの 右配置ページと左配置ページを 合成された見開きページとして表示・リフローのページも見開き表示のまま
  103. 103. 固定レイアウト
  104. 104. 固定レイアウト・固定レイアウト・横向きでは合成された見開き・縦向きでは見開きにしない・進行方向は右から左(日本のマンガ)
  105. 105. 固定レイアウト
  106. 106. [デモンストレーション 02a]Head First Mobile Web(79469 KB / 480 pages) http://amzn.to/VWp9Zf プリントレプリカの例 AZW4
  107. 107. 固定レイアウト(絶対配置タイプ)
  108. 108. 固定レイアウト(絶対配置タイプ) iPad at Work Volume 2 Apple iBookstore
  109. 109. 固定レイアウト(絶対配置タイプ) iPad at Work Volume 2 Apple iBookstore
  110. 110. 固定レイアウト(絶対配置タイプ) iPad at Work Volume 2 Apple iBookstore 画像ではないので本文検索や 辞書機能も利用可能
  111. 111. [デモンストレーション 02c]iPad@work ¦ iBookstore絶対配置の固定レイアウト(Apple)
  112. 112. 音声と同期する電子書籍(EPUB Media Overlays)
  113. 113. [デモンストレーション 10]Readium : EPUB Media Overlays 3.0 http://vimeo.com/53999718
  114. 114. ビデオやオーディオを含む電子書籍 (HTML5 video/audio)
  115. 115. MPEG-4 9.0+ - - 3.0+ - Ogg - 3.5+ 5.0+ - 10.50+WebM 9.0+ 4.0+ 6.0+ - 10.60+ VP8コーデック必要 ビデオ埋め込み
  116. 116. iPad DL Reader 代替情報
  117. 117. Miro Video Converterhttp://www.mirovideoconverter.com/
  118. 118. [デモンストレーション 06]Nixonland: The Rise of a President and the Fracturing of America [Kindle Edition With Audio/Video] http://amzn.to/UuOTLd ビデオ埋め込み
  119. 119. [デモンストレーション 07]The Voyage of the Dawn Treader (Enhanced Edition) (Narnia) [Kindle Edition With Audio/Video] http://amzn.to/120yt2x オーディオ埋め込み
  120. 120. 動的な表現、インタラクティブな 表現を含む電子書籍
  121. 121. iBookstore
  122. 122. iBookstore
  123. 123. インタラクティブブックならiBookstore
  124. 124. [デモンストレーション 04]Twas The Night Before Christmas (AniMotion) [Kindle Edition] http://amzn.to/VrpUHo KF8固定レイアウト・テキストポップアップ
  125. 125. EPUBのビジネス
  126. 126. ・電子書籍・学習コンテンツ ・企業内ドキュメント・製品、サービスのマニュアル・官公庁の配布ドキュメント・販促ツール ・プロモーション・博物館、美術館のキオスク、企画展の インフォメーション
  127. 127. 電子書籍
  128. 128. 習得読書目的意識が明確で繰り返し読む併読・多読・乱読・本への投資 娯楽読書 楽しみの読書 多読ではなく精読の世界
  129. 129. 消費される電子書籍ソーシャルメディアで消費されやすい エマージェンシーパブリッシング
  130. 130. 消費される電子書籍ソーシャルメディアで消費されやすい エマージェンシーパブリッシング 買うだけでコミュニケーションに 参加できる(読まなくても)「ぼくも買った」とツイートできればよいもの
  131. 131. これも電子出版 メールマガジンレイアウトテクノロジー 転送するだけ
  132. 132. これも電子出版 http://flipboard.com/
  133. 133. ソーシャルメディアの夜明けこれからの時代を楽しく生きるためのヒント著者:平野友康http://www.digitalstage.jp/book/yoake/
  134. 134. ソーシャルメディアの夜明けこれからの時代を楽しく生きるためのヒント著者:平野友康http://www.digitalstage.jp/book/yoake/ 電子書籍が提供される 電子出版サービスBCCKSとの連携
  135. 135. 複合型ビジネスモデル 電子書籍 コミュニティ メディアA Book Apart An Event Apart A List Aparthttp://www.abookapart.com http://aneventapart.com http://alistapart.com 出版社 会議ビジネス ブログメディア
  136. 136. 著者がイベントに登壇 電子書籍 コミュニティ メディアA Book Apart An Event Apart A List Aparthttp://www.abookapart.com http://aneventapart.com http://alistapart.com 出版社 会議ビジネス ブログメディア
  137. 137. 電子書籍の第1章をオンラインメディアに掲載 電子書籍 コミュニティ メディアA Book Apart An Event Apart A List Aparthttp://www.abookapart.com http://aneventapart.com http://alistapart.com 出版社 会議ビジネス ブログメディア
  138. 138. 学習コンテンツ(教科書、教材)
  139. 139. EPUBで配信されている 電子教科書434冊 OpenLearn The Open University
  140. 140. EPUBで配信されている 電子教科書434冊 OpenLearn The Open University
  141. 141. EPUBで配信されている 電子教科書434冊 OpenLearn The Open University
  142. 142. OpenLearnThe Open Universityhttp://www.open.edu/openlearn/
  143. 143. iTunes U - Impacthttp://projects.kmi.open.ac.uk/itunesu/impact/ 2013年3月25日 61,974,200 downloads
  144. 144. iTunes U - Impacthttp://projects.kmi.open.ac.uk/itunesu/impact/ 2013年3月25日 US 25.2% 中国 15.8% 日本 2.2% UK 13.0%
  145. 145. 企業内ドキュメント官公庁の配布ドキュメント
  146. 146. 製品、サービスのマニュアル
  147. 147. 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
  148. 148. ドコモビジネスオンライン 導入事例:プロントコーポレーション様 e株式会社プロントコーポレーション プロントビジネススクール GALAXY Tab PDF + ビデオ PDFのマニュアルを見ながら ビデオで確認できるhttp://www.docomo.biz/html/casestudy/movie/pronto.html
  149. 149. 販促ツール(電子版のパンフレット、チラシ)
  150. 150. フェルメール<地理学者>とオランダ・フランドル絵画展豊田市美術館2011年6月11日[土] ∼ 8月28日[日]http://www.museum.toyota.aichi.jp/exhibition/2011/special/vermeer.html
  151. 151. フェルメール<地理学者>とオランダ・フランドル絵画展豊田市美術館2011年6月11日[土] ∼ 8月28日[日]http://www.museum.toyota.aichi.jp/exhibition/2011/special/vermeer.htmlスマートフォン向け電子カタログMobileRoadieを採用http://www.mobileroadie.co.jp
  152. 152. プロモーション(電子化しにくい書籍の オンラインサンプル等)
  153. 153. 絵本ナビ絵本を1回だけ全ページためしよみhttp://www.ehonnavi.net/browse_all/Actibookを採用http://ebook.digitalink.ne.jp
  154. 154. 絵本ナビ 絵本を1回だけ 全ページためしよみ http://www.ehonnavi.net/browse_all/試し読みのための電子書籍化 Actibookを採用 http://ebook.digitalink.ne.jp
  155. 155. 絵本を1回だけ 全ページためしよみ http://www.ehonnavi.net/browse_all/ 電子書籍を 売るわけではない試し読みのための電子書籍化 Actibookを採用 http://ebook.digitalink.ne.jp
  156. 156. 博物館、美術館のキオスク企画展のインフォメーション
  157. 157. インタラクティブコンテンツの技術 Flashコンテンツ ウェブアプリインタラクティブPDF アプリ 高性能なタブレットを来場者に 貸し出すナビゲーターに
  158. 158. インタラクティブコンテンツの技術 EPUB 3 コンテンツHTML5, CSS3, JavaScript, Media Overlays Reading System
  159. 159. The Monarch Butterfly - An Interactive Picture Book Elizabeth Castro http://bit.ly/ZoE5Al EPUB 3 + JavaScript インタラクティブ ピクチャーブック
  160. 160. 電子書籍のオーサリング コストについて考える
  161. 161. ・手作業(エディタ等でハンドコーディング)・手作業(EPUB専用ツールで作業)・DTPソフトから書き出したEPUBを手直しする・ワードプロセッサから書き出したEPUBを手直しする・DTPソフトやワードプロセッサから修正なしの 最適化されたEPUBを書き出す・クラウドベースのEPUB発行システムを利用する・XMLで管理し、EPUB出力を自動化する
  162. 162. 体力勝負(消耗戦)に 陥る制作現場
  163. 163. EPUB 3の制作ノウハウは まだ蓄積されていない電子書籍デザイナーは、勉強しながら作業、作業しながら勉強
  164. 164. ・なんとなく出来てしまう なぜ、うまくいったのかわからない・バッドノウハウを使ってしまう とにかく締め切りに間に合わせたい
  165. 165. こんなことをやっていませんか?
  166. 166. *{ margin: 0; padding: 0; }
  167. 167. *{ margin: 0; padding: 0; }
  168. 168. デフォルトスタイルシートの 上書きを最小限におさえて、意図したデザインに近づけるための設計を すること電子書籍デザイナーの腕の見せ所です
  169. 169. 作業効率化の重要性
  170. 170. 制作ガイドラインをつくる (Amazon Kindleの例) 日本語サポート補足資料 (PDFリンク) http://bit.ly/TOJCj4
  171. 171. インナーコミュニティ・制作ガイドラインをつくる アクセシビリティ機能との 衝突を避けます フォントサイズ ページの背景色は 余白サイズ 上書きしませんページ内の要素の背景色は 行間 上書きできますが 極力避けます 画面色 A社 の方針 明るさ
  172. 172. インナーコミュニティ・制作ガイドラインをつくる どんな要望にも応えます お任せください フォントサイズ 余白サイズページの背景色の上書きは 裏技で対応できます 行間ページ内の要素の背景色も 上書きできます 画面色 B社 の方針 明るさ
  173. 173. 電子書籍の永続性について考えてみよう HTML TEXT IMAGES CSS JavaScript
  174. 174. 電子書籍の永続性について考えてみよう HTML TEXT IMAGES CSS切り捨てられる JavaScript 切り捨てられる
  175. 175. 電子書籍の永続性について考えてみよう HTML TEXT IMAGES最新のビジュアルエンジン・レイアウトテクノロジー
  176. 176. 電子書籍フォーマットの信頼性とは? オープンな仕様で誰でも自由に 使えること 古い仕様が上書きされないこと 世界中のデザイナー、開発者が 情報を共有できること
  177. 177. 電子書籍のアセット管理が重要になる TEXT +IMAGEs 含有イメージデータ
  178. 178. デザイナーによる手作業(エディタ等でハンドコーディング)
  179. 179. 2012年2月13日Tools of Change for Publishing Conference New York 2012Kindle eBooks from ePub: Automated or Manualhttp://www.toccon.com/toc2012/public/schedule/detail/21844 Joshua Tallent ジョシュア・タレント eBook Architects ※2013年2月5日、Firebrand  Technologiesに買収された
  180. 180. 2012年2月13日Tools of Change for Publishing Conference New York 2012Kindle eBooks from ePub: Automated or Manualhttp://www.toccon.com/toc2012/public/schedule/detail/21844 Joshua Tallent ジョシュア・タレント eBook Architects ※2013年2月5日、Firebrand  Technologiesに買収された
  181. 181. 2012年2月13日Tools of Change for Publishing Conference New York 2012Kindle eBooks from ePub: Automated or Manualhttp://www.toccon.com/toc2012/public/schedule/detail/21844 TextPad http://japan.textpad.com/ POSIX準拠の正規表現 付きの強力な検索置換 エンジン
  182. 182. エディタ一ツール 一本で勝負!
  183. 183. デザイナーによる手作業(EPUB専用ツールで作業)
  184. 184. BlueGriffonFUSEe Sigil EPUB Edition
  185. 185. FUSEeフュージーhttp://fusee.jp EPUB 3 対応 Win日本語のEPUBコーディングに最適
  186. 186. Sigilシジルhttp://code.google.com/p/sigil/ EPUB 2 対応 無償 Win Mac
  187. 187. BlueGriffonEPUB Editionブルーグリフォン EPUBエディションhttp://www.bluegriffon-epubedition.com/BGEE.html EPUB 3 対応 Win Mac
  188. 188. EPUBMetadataEditorEPUBメタデータ エディターhttps://code.google.com/p/epub-metadata-editor/ 無償 Winユーティリティ
  189. 189. DAISY Tobiデイジー トビhttp://www.daisy.org/project/tobiDAISY and EPUB 3talking books 無償 Win
  190. 190. DTPソフトから書き出した EPUBを手直しする
  191. 191. DTPソフトといえば
  192. 192. Adobe InDesign CS6 QuarkXPress 9
  193. 193. AdobeInDesign CS6アドビ インデザインhttp://www.adobe.com/jp/products/indesign.html EPUB 3 対応 Win Mac
  194. 194. QuarkXPress 9クォークエクスプレスhttp://www.quark.com/jp/Products/QuarkXPress/ EPUB 3 対応 Win Mac
  195. 195. EDICOLOR 10エディカラーhttp://ps.canon-its.jp/ec/ EPUB 3 対応 Win Mac
  196. 196. ワードプロセッサから書き出した EPUBを手直しする
  197. 197. 一太郎2013 玄http://www.justsystems.com/jp/products/ichitaro/ EPUB 3 対応 Kindle 対応 WinEPUBのコーディングなしで書き出しKindle (Mobi)にも対応
  198. 198. Word 2013http://office.microsoft.com/ja-jp/support/FX102832602.aspx※EPUBユーティリティが必要 Win
  199. 199. Smart ePubhttp://www.openend.co.jp/productsinfo/smartepub/index.html Win Word ユーティリティ
  200. 200. Word2ePubhttp://www.sgml-xml.jp/tools/Word2ePub.html業務用 Win Word ユーティリティ
  201. 201. Scrivener 2スクリブナーhttp://www.literatureandlatte.com/scrivener.php EPUB 2 対応 Win Mac
  202. 202. LibreOfficeリブレオフィスhttp://ja.libreoffice.org/ EPUB 2 対応 無償 Win MacWriter2ePub 機能拡張http://lukesblog.it/ebooks/ebook-tools/writer2epub/
  203. 203. DTPソフトやワードプロセッサから 修正なしの最適化されたEPUBを 書き出す
  204. 204. InDesignCS6EPUB書き出しオプション
  205. 205. HTMLおよびCSSの 編集作業このプロセスは無くしたい
  206. 206. 修正作業なし理想的なワークフロー
  207. 207. XML and InDesignStylish Structure:Publishing XML withAdobe InDesignDorothy J. Hoskinshttp://shop.oreilly.com/product/0636920027966.doワークフロー構築のヒント
  208. 208. クラウドベースのEPUB発行システムを利用する
  209. 209. CAS-UBキャスユービーhttp://www.cas-ub.com EPUB 3 対応クラウド実績と信頼感
  210. 210. PressBooksプレスブックhttp://pressbooks.com/クラウド Hugh McGuire http://hughmcguire.net
  211. 211. BookPressブックプレスhttp://ja.bookpress.meクラウド
  212. 212. でんでんコンバーターhttp://conv.denshochan.com/クラウド
  213. 213. パブーhttp://p.booklog.jpクラウド電子出版プラットフォーム
  214. 214. BCCKSブックスhttp://bccks.jp/クラウド電子出版プラットフォーム
  215. 215. livedoor Blogライブドア ブログhttp://blog.livedoor.comhttp://blog.livedoor.com/guide/ebook.htmlクラウドブログサービス日本語の縦書きEPUB 対応固定レイアウト対応
  216. 216. Tigris Plusティグリス プラスhttp://tigris.jp/クラウドEPUB 3 固定レイアウト対応
  217. 217. XMLで管理EPUB出力を自動化する
  218. 218. OReilly Media
  219. 219. OReilly Mediaオライリーメディアhttp://oreilly.comEbooks - OReilly Mediahttp://shop.oreilly.com/category/ebooks.do
  220. 220. Formats Available PDF EPUB Mobi DAISY Android .apk Ebook Usage, Devices, and Formats http://shop.oreilly.com/category/customer-service/ebooks.do
  221. 221. On Your DeviceLaptop or desktop computer EPUB PDF MOBI DAISYiPad EPUB PDF MOBI DAISYiPhone, iPod touch EPUB PDF MOBI DAISYKindle MOBIAndroid APK EPUB MOBI DAISYNook EPUB PDFSony Reader EPUBWindows Phone 7 EPUB PDF MOBI Ebook Usage, Devices, and Formats http://shop.oreilly.com/category/customer-service/ebooks.do
  222. 222. 2008年2月13日Tools of Change for Publishing ConferenceXML for Publishershttp://www.toccon.com/toc2008/public/schedule/detail/553 Keith Fahlgren キース・ファールグレン OReilly Media ※現在はSafari Books Online
  223. 223. XMLでワンソースマルチユースを実現
  224. 224. [実践]高校生でもわかるEPUB電子書籍の作り方
  225. 225. ・本の情報を用意しよう[メタデータ]・本の表現を検討しよう[リフロー/固定レイアウト]・本を構造化しよう[HTMLマークアップ]・表紙を用意しよう[カバー]・本の「見た目のデザイン」を考えよう[CSSスタイリング]・ストアごとのルールにあわせて記述内容を変更しよう・将来の作り直しのために本のオリジナル素材を 管理しよう
  226. 226. 無料のワードプロセッサEPUBプラグインを使用
  227. 227. 無償、Win, Macどちらでも HTML, CSSの知識必要なし 無償で使用できるオープンソースのLibreOfficeとEPUBエクスポートエクステンションWriter2ePub LibreOffice Writer2ePub KindleGen
  228. 228. Writer2ePub 機能拡張http://lukesblog.it/ebooks/ebook-tools/writer2epub/ プラグインをカスタマイズすれば 書き出すEPUB(HTML, CSS)を制御できる
  229. 229. デモンストレーション
  230. 230. それではEPUBの仕様について学習しよう...
  231. 231. いや、いきなり仕様の話をするのは やめておきましょう
  232. 232. とりあえず、電子書籍をつくってみましょう!
  233. 233. 本の情報を用意しよう [メタデータ]
  234. 234. 電子書籍の仕組み マシンリーダブル 機械が読める電子書籍はメタデータを持つ構造化された本です 書誌情報本の内容を取得できる この2つがないと 本のデジタルデータでしかない 自炊本と同じ
  235. 235. 本のタイトルや発行日使っている言語(もちろん日本語) 著者、出版社などの情報を まず書き出してください
  236. 236. メタエディター
  237. 237. 本の表現を検討しよう[リフロー/固定レイアウト]
  238. 238. リフローか? 固定レイアウトか?
  239. 239. 読者の気持ちになって 考えよう
  240. 240. 読者の気持ちになって 考えよう 小説が固定レイアウト(画像)だったら スマートフォンで読みやすいかな?タブレットなら画面が大きいから大丈夫?
  241. 241. 本を構造化しよう[HTMLマークアップ]
  242. 242. 電子書籍をつくります
  243. 243. 見出しのレベル・大見出し・中見出し・小見出し見出しのレベルを決めると目次が自動的につくられます
  244. 244. 章 節 項見出しのレベルを決めると目次が自動的につくられます
  245. 245. こんな感じで見出しのレベルを決めると目次が自動的につくられます
  246. 246. 本の原稿(テキスト)
  247. 247. 編集システムで開く Sigil
  248. 248. 大見出し タイトル見出しのレベル1を指定
  249. 249. 中見出し 章のタイトル見出しのレベル2を指定
  250. 250. 小見出し 節のタイトル見出しのレベル3を指定
  251. 251. EPUBファイルを書き出す
  252. 252. iBooksリーディングシステムで開く
  253. 253. 電子書籍が完成しました!
  254. 254. iBooks まったくデザイン していないけど....
  255. 255. でも、まったくデザインしていないのなら こうなりますよね?
  256. 256. iBooksリーディングシステムにはスタイルシートという見栄えを整える機能が備わっているのです
  257. 257. デフォルトスタイルシート と呼びます
  258. 258. デフォルトスタイルシートの見栄えに 満足できない人がいても大丈夫 フォントサイズ 余白サイズ 行間 画面色 明るさ
  259. 259. 表紙を用意しよう [カバー]
  260. 260. 本の表紙はビジュアルで訴求する 重要な要素です
  261. 261. 「表紙が魅力的だったから中身を知りたくなった」 というケースも 逆に、陳腐なイメージだと、本のタイトルで 興味持っても、購入をためらってしまうかも
  262. 262. 本の「見た目のデザイン」を 考えよう [CSSスタイリング]
  263. 263. iBooks 電子書籍は完成したけど、 タイトルを中央揃えに したい場合はどうしたら よいのだろう?
  264. 264. iBooks 電子書籍は完成したけど、 タイトルを中央揃えに したい場合はどうしたら よいのだろう? タイトルのスタイルだけ スタイルシートで 上書きすればよいのです
  265. 265. iBooks 背景に色をつけたい! 視覚障害を持つ人など ページを反転したい人たちがいます (だから反転機能があるのです) 背景に色をつけると 本を読めなくなってしまう 人が出てきます
  266. 266. iBooks 背景に色をつけられない なんて! 文字の読みやすさを 重視しなければいけない本なのか、 見た目のデザインを 重視しなければいけない本なのか、 一緒に考えてみましょう
  267. 267. 電子書籍の視覚表現の限界は 技術の進歩によって解決していきます デフォルトスタイルシートの 上書きを最小限におさえて、意図したデザインに近づけるための設計を すること電子書籍デザイナーの腕の見せ所です
  268. 268. 復習です
  269. 269. HTML(コンテンツ)の表示
  270. 270. デフォルトスタイルシート
  271. 271. デザイナーがデフォルトスタイルシートを上書きして、さらに見栄えを整える
  272. 272. HTML HTML HTML(コンテンツ) + + デフォルトCSS デフォルトCSS (ウェブブラウザ内蔵) + デザイナーが指定したCSS
  273. 273. ストアごとのルールにあわせて 記述内容を変更しよう
  274. 274. 制作ガイドライン(Amazon Kindleの例) Kindle パブリッシング・ガイドライン (PDFリンク) http://bit.ly/ScXZff
  275. 275. 制作ガイドライン(Amazon Kindleの例) 日本語サポート補足資料 (PDFリンク) http://bit.ly/TOJCj4
  276. 276. 将来の作り直しのために 本のオリジナル素材を 管理しよう
  277. 277. 次の「EPUB」を見据えた体制づくり
  278. 278. ・仕様の更新で変わる・リーディングシステムのアップデートで変わる・オーサリング環境で変わる・デバイスの進化(高精細化 処理能力向上) ・ で変わる・デバイスの普及率で変わる・企業の思惑で変わる
  279. 279. 数が増える 本を探す仕組みの整備実装が進む高機能化でヘビー級のアプリに 淘汰の可能性 サービス向上で読者に EPUB, Kindleが主流に DRMを意識させない ソーシャルDRMも増える
  280. 280. 仕様の更新で変わる
  281. 281. リーディングシステムのアップデートで変わる
  282. 282. iBooks
  283. 283. iBooks2010年4月2日 バージョン1.02010年7月19日 バージョン1.1.1 オーディオとビデオに対応
  284. 284. iBooks2010年4月2日 バージョン1.02010年7月19日 バージョン1.1.1 オーディオとビデオに対応2010年12月15日 バージョン1.2 固定レイアウトモードの追加
  285. 285. 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.1 Retinaディスプレイに対応
  286. 286. オーサリング環境で変わる
  287. 287. iBooks Authorhttp://www.apple.com/jp/ibooks-author/
  288. 288. デバイスの進化(高精細化 処理能力向上) ・ で 変わる
  289. 289. フルHDスマートフォン
  290. 290. 普及率で変わる
  291. 291. StatCounter Global Statshttp://gs.statcounter.com/
  292. 292. 2013年1∼3月StatCounter Global Statshttp://gs.statcounter.com/ Worldwide
  293. 293. 2013年1∼3月StatCounter Global Statshttp://gs.statcounter.com/ Japan
  294. 294. 企業の思惑で変わる
  295. 295. Browser rendering engine IE Firefox Chrome Safari OperaTrident Gecko WebKit WebKit Presto ウェブブラウザのエンジン
  296. 296. Browser rendering engine IE Firefox Chrome Safari OperaTrident Gecko WebKit WebKit Presto Blink WebKit (Blink ?)
  297. 297. 電子書籍オーサリングで理解しておきたいこと リフロー・固定レイアウト アクセシビリティ 作業の規模とツール選び スタイルの上書きは最小限に 素材管理
  298. 298. 電子書籍オーサリングで理解しておきたいこと リフロー・固定レイアウト[判断力] アクセシビリティ[方針決め] 作業の規模とツール選び[効率化]スタイルの上書きは最小限に[制作ノウハウ] 素材管理[技術進化対応]
  299. 299. Thank you for your attention.ご清聴ありがとうございました
  300. 300. community 電子書籍メデ ア論 ィ http://www.facebook.com/eBookStrategy デザインの未来http://www.facebook.com/TheFutureDesign
  301. 301. テキストEBOOK STRATEGY REPORTJEPA Seminar Published: April 09, 2013

×