PAGE2011「EPUBフォーマットの電子書籍を設計するための 5つのポイント」

徹底解説！EPUBフォーマットの電子書籍を設計するための5つのポイント

［2月3日 AM11:50-PM12:45］徹底解説！EPUBフォーマットの電子書籍を設計するための5つのポイント

デジタルワークフローソリューションZONEセミナー


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

境祐司

Instructional Designer

Youji Sakai

Twitter; @commonstyle


電子書籍のPodcast

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

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

Googleで「音声雑記」を検索


主な著書「デザイナーなら絶対知っておくべき 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デザイン基礎』（技術評論社）など。


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


電子書籍の作り方［新刊］12月9日発売

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


電子出版プロジェクト

イーブックストラテジー「デザインの未来」電子出版コミュニティベースドパブリッシングイベントベースドパブリッシング


1. 要件定義2. 書籍の設計3. 書籍のデザイン4. 書籍のオーサリング5. 書籍の検証


1. 要件定義・対象デバイス（ハードウェア）　専用端末, タブレット, スマートフォン、携帯電話, PC・対象プラットフォーム（流通）・配布形式、DRM


1. 要件定義対象デバイス（ハードウェア）は？


1. 要件定義

・文芸書に適している・長時間の読書に適している・グレースケール・軽量で省電力・単機能・安価

Kindle, Nook, Reader, etc...


1. 要件定義

・電子書籍はあくまで　コンテンツの一つ・ビジュアル要素の多い雑誌に　適している・マルチメディアに対応・高機能・読書専用端末よりも高価

iPad, iPhone, GALAXY Tab, GALAPAGOS, PC, Mac OS, etc...


1. 要件定義対象プラットフォームは？


1. 要件定義


1. 要件定義

・プロダクション契約・オーサリング環境の提供、ユーザサポート・技術情報の守秘義務・ライセンス料

企業が開発・提供するフォーマット


1. 要件定義

・誰でも自由に利用でき、商用目的でもOK・お金がかからない・今のところ、専門の知識が必要・ワークフローも構築する必要がある

オープンスタンダードフォーマット


1. 要件定義配布形式は？


1. 要件定義


1. 要件定義DRMは？


1. 要件定義・対象デバイス（ハードウェア）　専用端末, タブレット, スマートフォン、PC・対象プラットフォーム（流通）・企業のフォーマット、オープンスタンダード・記述フォーマット、交換フォーマット　閲覧フォーマット、配布(閲覧+DRM)フォーマット・DRM（強い・弱い・なし）


2. 書籍の設計・台割の作成・ページレイアウト（構成）・書籍の構造化・TOC・メタデータ・索引、脚注・マルチメディア


2. 書籍の設計書籍の再現か？デバイスに最適化したデザインか？


2. 書籍の設計

EPUBフォーマットの電子書籍とは？


EPUBの歴史


2. 書籍の設計 EPUBで何を表現する？


2. 書籍の設計 EPUBの構造


2. 書籍の設計

ナビゲーションコントロール目次・索引・脚注


2. 書籍の設計

リーンバックとリーンフォワードLean back - Lean forward


2. 書籍の設計


「小説」と「実用書」


2. 書籍の設計


「小説」と「実用書」ナビゲーションコントロールの設計も異なる


2. 書籍の設計

Enhanced eBookビデオ・オーディオの組み込み


2. 書籍の設計マルチメディアは？


2. 書籍の設計

日本語の組版表現EPUB 3.0


2. 書籍の設計


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/

2. 書籍の設計

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

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


2. 書籍の設計

EPUB3.0の仕様とリーダーアプリケーションの実装

「縦書きの表示がきれいじゃない」それは仕様の問題？実装の問題？


2. 書籍の設計

Aldus PageMaker 1.0（1987年）QuarkXPress 1.0（1989年）Adobe InDesign 1.0（1999年）

最初のバージョンを思い出してください


2. 書籍の設計

エディトリアル、タイポグラフィ専門家の意見によって実装レベルも向上

（※開発の難易度が高くなるので...）

日本語の組版表現


2. 書籍の設計・EPUBフォーマットの構造・文芸書フォーマットか？雑誌フォーマットか？・ナビゲーションコントロールの重要性・リーンバックとリーンフォワード・マルチメディア対応・日本語組版の再現性


3. 書籍のデザイン・デフォルトページデザイン・図版の処理・ブックカバー（表紙）


3. 書籍のデザイン

ブックカバーの定義グラフィックデザイン



Apple iBooks



Kindle for iPad



Kobo iPad App



Bluefire App



ブックカバーはストアの「顔」になる



スケーラブルイメージデモをご覧ください



ランドスケープモード見開きの表現


3. 書籍のデザイン縦向きと横向き


3. 書籍のデザイン Apple iBooks


3. 書籍のデザイン Kindle for iPad



ユーザードリブンiPadとiPhoneに同じページデザインを

適用することの是非



PDFの電子書籍iPhoneで表示



PDFの電子書籍iPhoneで表示・縮小コピーのような表示・文字が読めない・読書にズームや　スクロール操作を強いる



EPUBの電子書籍iPhoneで表示・リフロー処理で　可読性が向上した・文字サイズの調整が可能・レイアウトデザインは　消滅した


3. 書籍のデザインレイアウト保持か？可読性の保証か？



ハイブリッドデザインの試みレイアウトを保持し、可読性を保証する



ページの画像化

・レイアウトデザインを　そのまま生かす・ビジュアルを楽しむ



テキスト情報を持つ

・記事を読むときは　リフロー処理のページ・文字サイズの調整も可能



電子雑誌で採用されている



小さな画面で読む電子書籍アジャスタブル（調整可能）であること



Apple iBooks



Kindle for iPhone



Kobo iPhone App



デフォルトのデザインデフォルトが適切にデザインされていれば大半の読者はカスタマイズなしで読める



デフォルトのデザイン70%



カスタマイズレベル１25%



カスタマイズレベル２5%



デフォルトマージン

デモをご覧ください

Digital Editionsの場合


3. 書籍のデザイン・ブックカバーのデザイン・スケーラブルイメージの処理・ランドスケープモードのデザイン・レイアウトの継承、可読性の保証・デフォルトのページデザイン


4. 書籍のオーサリング・XHTMLコーディング・CSSコーディング・検証（バリデーション）


4. 書籍のオーサリングワークフローの選択


企業が開発・提供するフォーマット


EPUBフォーマットのワークフロー


EPUBオーサリングツール

デモをご覧ください

Sigilhttp://code.google.com/p/sigil/

http://code.google.com/p/sigil/

http://code.google.com/p/sigil/


5. 書籍の検証・EPUBのバリデーション・ユーザビリティチェック・アクセシビリティチェック


5. 書籍の検証

EPUBの規格に準拠しているかチェック


5. 書籍の検証


5. 書籍の検証

EpubCheckhttp://code.google.com/p/epubcheck/

EPUB validatorhttp://threepress.org/document/epub-validate/

Threepress Consulting Inc.

http://code.google.com/p/epubcheck/






http://threepress.org/document/epub-validate/

http://threepress.org/document/epub-validate/


1. 要件定義2. 書籍の設計3. 書籍のデザイン4. 書籍のオーサリング5. 書籍の検証


オープンスタンダードと電子出版

community

電子書籍メディア論http://www.facebook.com/pages/dian-zi-shu-jimedia-lun/143512822352930

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




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

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

@commonsty le

EPUBフォーマットの電子書籍を設計するための5つのポイント

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




PAGE2011「EPUBフォーマットの 電子書籍を設計するための 5つのポイント」

Design

Transcript of PAGE2011「EPUBフォーマットの 電子書籍を設計するための 5つのポイント」

PAGE2011「EPUBフォーマットの電子書籍を設計するための 5つのポイント」

Transcript of PAGE2011「EPUBフォーマットの電子書籍を設計するための 5つのポイント」