EPUB3.0でつくる電子雑誌の可能性

EPUB3.0MAGAZINEdesigning

EPUB3.0でつくる電子雑誌の可能性

Instructional Designer境祐司

profile

YOUJI SAKAI

community

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

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

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








企業内のセミナーで使用したスライド資料です。公開できない部分は削除してあります。



EPUB3.0 MAGAZINE DESIGNING

MAGAZINE電子雑誌

format



PDFPDF版の電子雑誌



FLASHSWF版の電子雑誌



APPSアプリ版の電子雑誌



HTML5ウェブアプリ版の電子雑誌



3.0



3.0



LAYOUT



LAYOUT



Wired Reader on the iPadiPad版Wired

http://www.wired.com/magazine/ipad/






MAGAZINE

portrait

landscape

縦方向のレイアウト

横方向のレイアウト


MAGAZINE

portrait

landscape




MAGAZINE

portrait

landscape




MAGAZINE

portrait

landscape




MAGAZINE

portrait

landscape




MAGAZINE

portrait

landscape





GQ MagazineiPad版GQ Magazinehttp://www.gq.com/?us_site=y



http://www.gq.com/?us_site=y



MAGAZINElandscape横方向のレイアウト


MAGAZINElandscape横方向のレイアウト


MAGAZINEportrait縦方向のレイアウト

landscape横方向のレイアウト









LAYOUT PATTERN


MAGAZINE

portrait

landscape

portrait

landscape

Wired Reader on the iPadGQ Magazine

2 Layout Optimization1 Readable Page横方向は見開き、縦方向で最適化ページ縦方向と横方向のレイアウトを用意する


MAGAZINEportrait

landscape

portrait

landscape

FIXED REFLOW FIXED FIXEDTextZoom固定固定固定

リフロー



DYNAMIC PAGINATION

EPUB3.0 MAGAZINE DESIGNINGMAGAZINE

電子新聞

The New York Times – TimesReaderデスクトップ版TimesReader

http://www.nytimes.com/subscriptions/Multiproduct/lp5558.html?campaignId=38869

NEWSPAPER






電子新聞NEWSPAPER



TextZoom



RESIZE



RESIZE



RESIZE



PRINT



PRINT LAYOUT





EVOLVABILITY

EPUB3.0 MAGAZINE DESIGNINGEVOLVABILITY

MAGAZINE

Mobile Safari


MAGAZINE

Chrome Lite


MAGAZINE

Chrome LiteMobile Safari

SMART DEVICE


MAGAZINE

Chrome LiteMobile Safari

SMART DEVICE

DESKTOP


MAGAZINE


MAGAZINE

HTMLCSS

JavaScript

2011|2015|2020|2025|2030


MAGAZINE

HTMLCSS

JavaScript

2011|2015|2020|2025|2030


MAGAZINE

HTMLCSS

JavaScript

2011|2015|2020|2025|2030


MAGAZINE

HTMLCSS

JavaScript

2011|2015|2020|2025|2030


MAGAZINE

HTMLCSS

JavaScript

2011|2015|2020|2025|2030


HTMLCSS

JavaScript

2011|2015|2020|2025|2030

TEXT


2011|2015|2020|2025|2030|2040|2050...

TEXT

NEWTECHNOLOGY

NEWTECHNOLOGY

コンテンツの心臓部


TEXT+IMAGEs

含有イメージデータ


TEXT


TEXT

HTMLCSS

JavaScript

EXTENSION


TEXT

HTMLCSS

JavaScript

EXTENSION


TEXT

HTMLCSS

JavaScript

EXTENSION

WEB STANDARDS


EVOLVABILITY

TEXT

HTML

CSS

JavaScript

EXTENSION

WEBSTANDARDS

MAGAZINE

+

+

+

+

相互運用できること・発展性があること

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



PRODUCTION:BASIC


MAGAZINEPRODUCTION:BASIC


MAGAZINEPRODUCTION:BASIC

EPUBCONTENT

DOCUMENT3.0

h t t p : / / i d p f . o r g / e p u b / 3 0 / s p e c / e p u b 3 0 - c o n t e n t d o c s . h t m l

http://idpf.org/epub/30/spec/epub30-contentdocs.html




EPUB3.0 MAGAZINE DESIGNINGPRODUCTION:BASIC

EPUBCONTENT

DOCUMENT3.0

CSS Multi-Column Layouthttp://www.w3.org/TR/css3-multicol/

Media Querieshttp://www.w3.org/TR/css3-mediaqueries/

http://www.w3.org/TR/css3-fonts/

http://www.w3.org/TR/css3-fonts/

http://www.w3.org/TR/css3-multicol/


http://www.w3.org/TR/css3-mediaqueries/

http://www.w3.org/TR/css3-mediaqueries/



DEMONSTRATIONデモをご覧ください

WebKit Nightly Builds

DEMONSTRATIONWebKit開発版を使用します

design outlineSmartphone Tablet

EPUB3.0 MAGAZINE DESIGNING基本設計［初歩編］

Smartphone Tablet


Smartphone Tablet


Smartphone Tablet


Smartphone Tablet


Smartphone Tablet


iPhone 3GS, 4iPad

Galaxsy S IIHT03A

Optimus PadPC - Windows7PC - Mac OS X

DEMONSTRATION

STEP01step01.html

STEP01

STEP02step02.html

STEP02

STEP02

STEP03step03.html

STEP02

STEP02

STEP02

STEP04step04.html

2 1

2

1

STEP05step05.html

STEP06step06.html

1

2

3

1

2

1

STEP07step07.html

iPhone 3GS

Galaxsy S II

iPhone 3GS

Galaxsy S II

iPhone

PC

iPhone

1 2

1

PC

STEP08step08.html

iPad

iPad

STEP09,10step09.html, step10.html

1

1 2

1 2 3



HTML5 BASEDEPUB READER


MAGAZINE

ibis readerhttp://ibisreader.com/

http://ibisreader.com/

http://ibisreader.com/

http://flipboard.com/



MAGAZINE


MAGAZINE


MAGAZINEGalaxsy S II


MAGAZINE



PERSONALIZED MAGAZINE


MAGAZINE

ZITEhttp://zite.com/

http://zite.com

http://zite.com




MAGAZINE


MAGAZINE

Flipboardhttp://flipboard.com/

http://zite.com

http://zite.com




MAGAZINE


MAGAZINE

PERSONALIZEDMAGAZINE

CLOUD BOOKSHELF


MAGAZINE


CLOUD BOOKSHELF


MAGAZINE


CLOUD BOOKSHELF


MAGAZINE


CLOUD BOOKSHELF


MAGAZINE


CLOUD BOOKSHELF

DOWNLOAD

DOWNLOAD


MAGAZINE


DOWNLOAD

CLOUD BOOKSHELF

"rough consensus and running code"

3.0

"rough consensus and running code"

3.0

最初から完璧なものはできません、作ってみよう、動かしてみよう

EPUB3.0MAGAZINE DESIGNING

3.0

次回のセミナーは8月です。テーマはダイナミックページネイション人を魅了する美しいレイアウトとユーザビリティの共存を考えます



YOUJI SAKAIht tp : / /des ign-zero . tv /2010/ebook.h tml@commonsty le

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




Thank you for your attention.

community

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





Technology

EPUB3.0でつくる電子雑誌の可能性