電子書籍デザイナーのための Dreamweaverを使ったEPUB3.0 マガジンレイアウトの実践

徹底解説！電子書籍デザイナーのための
Dreamweaverを使ったEPUB3
マガジンレイアウトの実践
page2012無料セミナーゾーン（デジタルワークフロー・ソリューションZONE）
2012年2月10日 PM14:10 - 15:05

境祐司 Youji Sakai

profile

YOUJI SAKAI
Instructional Designer
境祐司

BOOKS
最新刊（12月∼1月）

ウェブレイアウトの EPUB3スタンダード Webデザイン基礎
教科書デザインガイド改訂３版

community

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

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

Agenda
今日お話すること

Web for All, Web on Everything

type
value
power of expression
future


徹底解説！電子書籍デザイナーのための
Dreamweaverを使ったEPUB3 マガジンレイアウトの実践

［1］電子雑誌の種類
［2］電子雑誌の付加価値
［3］電子雑誌の表現
［4］電子雑誌の未来


type
種類

type


type

Print Replica
プリントレプリカ


type
プリントレプリカはページをイメージで表現


type
プリントレプリカはデータサイズも処理も重たい？


type
小さなスクリーンでは縮小コピーのようになってしまう


type

Flowable Content
リフローコンテンツ


type
読書環境によってページ数が増減する


type
小さなスクリーンではリフローコンテンツの方が適している


type
レプリカとリフローコンテンツどちらもサポート


type
InDesign
（EPUBエクスポーター）とDigital Editions


type

DEFAULT STYLE
デフォルトスタイルの重要性について


type
デフォルトスタイルの設定（80%以上の読者を対象）


type
カスタマイズ機能の提供（その他の読者を対象）


type
デザイナーが設計するデフォルトスタイル
大半の読者に読みやすい紙面を提供できる


type
デザイナーが設計するデフォルトスタイル
大半の読者に読みやすい紙面を提供できる

デフォルトスタイルでは対応できない
少数の読者のためにカスタマイズ機能を搭載

カスタマイズ機能はコンテンツではなく
リーディングシステム側で提供


type

EXTENSION
拡張技術


type
リフローコンテンツの問題点


type
文字サイズやスクリーン幅で段組みに切り替える


type

今までどのように処理していたのか？


type
EPUB2 ＋拡張技術XPGT で対応


type

デザイナーが手作業で対応するのではなく
リーディングシステム側で処理する


type

ADVANCED
LAYOUT
アドバンスドレイアウト


type
XMDF3.0の高度なレイアウト処理


type

3.0


type
アドバンスドレイアウト


type
アドバンスドレイアウトでまったく新しい雑誌の構築


type
パッケージコンテンツとウェブコンテンツの融合

CLOUD
BOOKSHELF

PERSONALIZED
MAGAZINE

DOWNLOAD



value
付加価値

value

Usability
電子雑誌のユーザビリティ


value
事例：PixelMags

http://pixelmags.com/


value


value
Sports Auto
Boards Magazine - http://bit.ly/oGiHIx Audi Driver http://bit.ly/vzoCJ2
Cooler - http://bit.ly/pXtqHS Auto Express Magazine - http://bit.ly/rJbOuB
Dig BMX - http://bit.ly/oGVJmu Autoweek Magazine - http://bit.ly/pytf59
Dirt Mountain Biking - http://bit.ly/qmwHFL Banzi - http://bit.ly/ttX2VL
Karting Magazine - http://bit.ly/vNRti5 BMW Car - http://bit.ly/uu8cqt
Kingpin Skateboarding - http://bit.ly/mS7PiN GT Porsche - http://bit.ly/t1TBhA
Moto - http://bit.ly/q5abkS Land Rover Monthly - http://bit.ly/tJMR0X
Moto X - http://bit.ly/nTOxY5 Octane - http://bit.ly/vu90Gg
Onboard Snowboarding - http://bit.ly/pNbpNh Performance VW - http://bit.ly/vacEiW
Poker Player Magazine - http://bit.ly/tpVFeD Preformance BMW - http://bit.ly/uEy1M2
Powder - http://bit.ly/rLDga8 Preformance Ford - http://bit.ly/vRJlrZ
Ride UK BMX - http://bit.ly/nTU0M3 Retro Cars - http://bit.ly/ugyyp2
Sidewalk Skateboarding - http://bit.ly/pnsH2i Retro Ford - http://bit.ly/tSftNn
Surf Europe - http://bit.ly/nTan6b Total 911 - http://bit.ly/pnsH2i
The Bicycle Buyer - http://bit.ly/p0SaLK Total Honda - http://bit.ly/v28KGy
The Surfer's Path - http://bit.ly/puOK5e Total Impreza - http://bit.ly/sk665q
Whitelines Magazine - http://bit.ly/omr865 Total Nissan - http://bit.ly/vgKqGI
Classic Boats - http://bit.ly/uBjwMjYacht & Volkswagen Driver - http://bit.ly/rYNcBd
Yachting - http://bit.ly/rFzD1oArtist & I
llustrators - http://bit.ly/ul6md7
Cruise - http://bit.ly/rSye29
Racecar - http://bit.ly/utWXQM
Britian - http://bit.ly/tg70XI


value
Lifestyle Entertainment
Company Magazine UK - http://bit.ly/ojxKg8 Best UK - http://bit.ly/uEXD7I
Cosmopolitan UK - http://bit.ly/nnCNHn Real People UK - http://bit.ly/vBRwhZ
ELLE Magazine UK - http://bit.ly/prjCCf Reveal UK - http://bit.ly/ugjhYb
Esquire UK - http://bit.ly/r63B2f SciFi Now - http://bit.ly/r8dW7I
ForteanTimes Magazine http://bit.ly/tOXGCe The Student Magazine - http://bit.ly/v4pTNf
Harper's Bazaar UK - http://bit.ly/mQImSn Viz Magazine - http://bit.ly/rPTgsb
Prima Baby UK - http://bit.ly/mX8bxW
Prima UK - http://bit.ly/pmH9aB Gaming
Red Magazine UK - http://bit.ly/tpz43V 360 Magazine - http://bit.ly/ndSfNx
Zest UK - http://bit.ly/n8tlpm GamesTM - http://bit.ly/ocTpJD
Play Magazine - http://bit.ly/odbRFS
Photography Retro Gamer - http://bit.ly/nex4kQ
Digital Photographers - http://bit.ly/sjPiEI X360 - http://bit.ly/nKsMtF
Digital SLR - http://bit.ly/uYutkB
Photography for Beginners - http://bit.ly/sLe7hT Health
Health and Fitness - http://bit.ly/q5CZDE
Art and Design Men's Health UK - http://bit.ly/rfh7XU
3D Artist - http://bit.ly/oyKmpi Men’s ﬁtness - http://bit.ly/r3AIsA
Advanced Photoshop - http://bit.ly/r3tVkm Runner's World UK - http://bit.ly/rpNbgF
Digital Artist http://bit.ly/tyhUKR Triathlete Europe - http://bit.ly/rzpHra
iCreate Magazine - http://bit.ly/q9wham
Photoshop® Creative http://bit.ly/sQf2DE


value
Home Professional Magazines
Coast UK - http://bit.ly/tR1AM7 AEC - http://bit.ly/tYoHro
Country Living UK - http://bit.ly/nRZjEG Psychologies Magazine UK http://bit.ly/tiTqhh
ELLE Decoration UK - http://bit.ly/rPKs8I
Good Housekeeping UK - http://bit.ly/odC2PP
House Beautiful UK - http://bit.ly/qpZ0vQ

Tech
Apps Magazine - http://bit.ly/o25IPi
Computer Shopper - http://bit.ly/sN57cY
Computing Magazine - http://bit.ly/vQbVT9
Custom PC - http://bit.ly/uFjr84
How It Works Magazine - http://bit.ly/nyfy6v
Linux User & Developer - http://bit.ly/qdi64a
MicroMart http://bit.ly/uQ7hix
MacUser - http://bit.ly/t1IgBo
Smartphone Essentials - http://bit.ly/nPeagu
T3 Danmark - http://bit.ly/uqZgqb - (German)
Web Designer - http://bit.ly/p3yyNR
Web User - http://bit.ly/sIUuM3


value

電子雑誌の立ち読み試し読み
・


value

雑誌を選択


value

全ページ
閲覧可能


value

全ページ
閲覧可能
本文は文字が小さくて読めないが
何が書かれているか、見出しや
図版などで判断できる


value
電子雑誌の立ち読み試し読み
・
・電子書籍であれば「最初の10ページだけ」
「1章だけ」等の試し読みは有効
・電子雑誌は、全ページチェック可能に
しなければいけない


value

データ形式読者アカウント
・


value

データ形式の
確認


value

読者アカウント


value

電子雑誌のダウンロード


value

雑誌を購入


value

ダウンロード


value

ダウンロードが
完了するまで
待たなければいけない？


value

ダウンロード中でも
読める


value
ダウンロードしながら読み始める


value
電子雑誌のダウンロード
・レプリカの電子雑誌はデータサイズが大きい
・データサイズが大きいことを読者に伝える
・ダウンロードしながら読み始めることができる
ストリーミングを採用


value

電子雑誌の本文検索


value

検索で探す


value

過去に買ったバックナンバー
すべてが本文検索の対象
購入した雑誌だけが検索対象ではない


value

電子雑誌の可読性


value

Think!
シンク
東洋経済新報社
GALAPAGOS STORE
http://www.toyokeizai.net/shop/magazine/think/


value
レプリカの問題点（小さなスクリーンでは縮小コピー）


value

プリントレプリカ


value

記事は電子書籍のように読める


value
ハイブリッドアプローチ
大きなスクリーン小さなスクリーン

レプリカリフロー


value
Usability
電子雑誌のユーザビリティ

イーブックデザイナーの重要な仕事



power
of
expression
表現力

power of expression

power
of
expression


power of expression

CSS3


power of expression


power of expression

CSS3
Text Font
テキスト・フォント


power of expression

CSS3
Layout
レイアウト


power of expression

CSS3
Media Queries
メディアクエリ


power of expression

WEB
STANDARDS
オープンスタンダード技術


power of expression
EPUB3

http://idpf.org/epub/30


power of expression
EPUB3 アドバンスドレイアウト


power of expression

DREAMWEAVER


power of expression

FUSEe
一般的なEPUB電子書籍オーサリングはFUSEeが良い

http://development.fusenetwork.co.jp/


power of expression

DREAMWEAVER
高度なリフローコンテンツを設計するため


power of expression
EPUBを構成するファイルの拡張子を登録


power of expression
EPUBを構成するファイルの拡張子を登録

※注意 .epub は登録しない


power of expression

EPUBの構造をローカルサイトに構築


power of expression

SVG


power of expression

MathML


power of expression

MathML
プレビューエンジンはGecko


power of expression

vertical-writing


power of expression

vertical-writing
プレビューエンジンはWebKit


power of expression

Packaging
EPUBファイルの圧縮・解凍


power of expression
Windows環境


power of expression

Mac OS X環境
フォルダをドラッグするだけで圧縮・解答

デモンストレーションをご覧ください


power of expression

Kindle Edition
Amazon Kindle Format


power of expression
KindleGen

変換精度を高めるためバージョンを分ける


power of expression

Reading System
リーディングシステム


power of expression

Browser-based
ブラウザ上で展開する場合


power of expression

SMART DEVICE


power of expression

SMART DEVICE

DESKTOP


power of expression

ibis reader
http://ibisreader.com/


power of expression
iOS, Android, Windows, Mac OS



future
未来

future

CONTENTS IS KING
コンテンツ・イズ・キング


future

雑誌
GALAPAGOS STORE


future

雑誌を選択


future

有料メールマガジン


future
ページネイションカスタマイズ本文検索


future

定期購読


future
EPUB Content

CSS HTML

JavaScript


future
Text
テキスト

CSS HTML

JavaScript


future

TEXT
+IMAGEs
含有イメージデータ


future
電子書籍・電子雑誌の技術


future
Interoperability
相互に運用可能か？

Evolvability
発展性があるか？


future
永続性

TEXT
+IMAGEs
含有イメージデータ


future

電子書籍ストアの定期購読商品
有料メールマガジン


future


future http://ﬂipboard.com/


継承と改革
・プリントレプリカは可能な限り自動化

継承と改革
・セルフパブリッシングはCMS

継承と改革
・書籍リフローコンテンツは
エディトリアルツールからのエクスポート

継承と改革
・書籍リフローコンテンツは
エディトリアルツールからのエクスポート
・高度なリフローコンテンツは
アプリもしくはウェブ開発のワークフロー

Thank you for your attention.
ご清聴ありがとうございました

community

電子書籍メデア論
ィ
h t t p : / / w w w. f a c e b o o k . c o m / e B o o k S t r a t e g y

電子書籍デザイナーのための Dreamweaverを使ったEPUB3.0 マガジンレイアウトの実践

電子書籍デザイナーのための Dreamweaverを使ったEPUB3.0 マガジンレイアウトの実践

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Mehr von Youji Sakai

Mehr von Youji Sakai (13)

Kürzlich hochgeladen

Kürzlich hochgeladen (9)

電子書籍デザイナーのための Dreamweaverを使ったEPUB3.0 マガジンレイアウトの実践