イーブックデザイナーの仕事／HTML5ブックデザインの可能性

イーブックデザイナーの仕事HTML5 ブックデザインの可能性

WCAN 2012 Spring

境祐司 Youji Sakai

2012年3月10日(土) 名古屋国際会議場会議室 141+142

Instructional Designer境祐司

profile

YOUJI SAKAI

最新刊（12月～1月）

BOOKS

ウェブレイアウトの教科書

EPUB3スタンダードデザインガイド

Webデザイン基礎改訂３版

community

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

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

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








Agenda今日お話すること

［1］イーブックデザイナーとは［2］電子書籍の計画［3］電子書籍の編集［4］電子出版の将来

Web for All, Web on Everything

イーブックデザイナーの仕事HTML5 ブックデザインの可能性

1


WHAT IS A EBOOK DESIGNER?

イーブックデザイナーとは



1980年代







マルチメディア

DTP



1985

19881993







2012, 2013, 2014...



出版とウェブの融合



1990年代






DTP




DTP

マルチメディアクリエーター

DTPデザイナー

グラフィックデザイナー




DTP

マルチメディアクリエーター

DTPデザイナー

グラフィックデザイナー

ウェブデザイナー




DTPデザイナー

イーブックデザイナー

現在



イーブックデザイナーは専門職として成り立つか？



Market電子書籍の市場



電子書籍の市場





携帯電話

パソコン

スマートデバイス等







電子書籍の定義





リーディングシステムフォーマット

プラットフォーム





FORMATフォーマット







中間フォーマットと配布フォーマット




画像処理作業の場合




デジタルカメラで撮った写真




PSDデジタルカメラで撮った写真




PSD JPEGGIFPNG

デジタルカメラで撮った写真




FLA SWFMP4

Illustratorで作成した図




EPUB Kindle Format原稿（テキスト）図版



ReadingSystemリーディングシステム













History電子書籍の歴史





電子書籍元年





EPUBの前身





EPUB2.0Kindle



Historyマークアップ言語の歴史











1986

1969



1986

1969

1999


INFORMATIONDESIGN

電子書籍の設計2



ワークフローを決定する





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

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

http://development.fusenetwork.co.jp

http://development.fusenetwork.co.jp





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



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



SVG



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



採用するフォーマットの特性を理解する



EPUB3EPUB2XMDF.bookPDFKF8




国内



EPUB3









採用するフォーマットの仕様を理解する



EPUB3











採用するフォーマットの表現力を把握する







フォーマットを決定する















Replica

Flowable Content

Flowable Content or Fixed







Replica

Flowable Content





※策定中



アセット管理の方針を決める


Interoperability相互に運用可能か？

Evolvability発展性があるか？



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


PDF?　アプリ?　HTML5?



EPUB


HTMLCSS

JavaScript

Textテキスト



TEXT+IMAGEs

永続性

含有イメージデータ




HTML

CSS

JavaScript

TEXTIMAGES



対象とするリーディングシステムを決定する



OSとデバイス



iOSAndroidKindlekobo

Sony ReaderPC(Win, Mac)



電子書籍フォーマット



WebKitウェブキット系

RMSDKリーダーモバイルSDK系

proprietary technologyプロプライアタリ



アプリケーション



NativeAppsネイティブアプリ

WebAppsウェブアプリ



NativeAppsネイティブアプリ

WebAppsウェブアプリ



SMART DEVICE



SMART DEVICE

DESKTOP



ibis readerhttp://ibisreader.com/

http://ibisreader.com/

http://ibisreader.com/

http://flipboard.com/




iOS, Android, Windows, Mac OS


PRODUCTIONWORK電子書籍の編集3


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

PRODUCTION WORK

http://idpf.org/epub/30






CSS3

PRODUCTION WORK


PRODUCTION WORK


PRODUCTION WORK

Text Fontテキスト・フォント

CSS3


PRODUCTION WORK


PRODUCTION WORK


PRODUCTION WORK


PRODUCTION WORK

Layoutレイアウト

CSS3


PRODUCTION WORK


PRODUCTION WORK


PRODUCTION WORK


PRODUCTION WORK


PRODUCTION WORK

Media Queriesメディアクエリ

CSS3


PRODUCTION WORK


PRODUCTION WORK


アドバンスドレイアウト

ADVANCEDLAYOUT



アドバンスドレイアウト



デジタルファースト
















Advanced Adaptive Layout

AAL



アドバンスド・アダプティブ・レイアウト

EPUB3Advanced Adaptive

Layout

Advanced Adaptive Layout working grouphttp://code.google.com/p/epub-revision/source/browse/wiki/AALMemberList.wiki?r=3858

http://code.google.com/p/epub-revision/source/browse/wiki/AALMemberList.wiki?r=3858

http://code.google.com/p/epub-revision/source/browse/wiki/AALMemberList.wiki?r=3858


FUTURE OF THEEBOOK

電子書籍の未来4


FUTURE OF THE EBOOK

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


FUTURE OF THE EBOOK

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


FUTURE OF THE EBOOK

レイアウトテクノロジー


FUTURE OF THE EBOOK


http://flipboard.com

http://flipboard.com




FUTURE OF THE EBOOK

TwitterのツイートもFacebookのウォールも2chまとめサイトも

何でもパブリッシュできる


高度なレイアウト表現・記事を入れ替える・記事単位で販売ソーシャルメディアで共有する・編集する



PERSONALIZEDMAGAZINE

DOWNLOAD

CLOUD BOOKSHELF

所有する電子書籍・情報消費される電子書籍


最後にLAST MESSAGE

ウェブデザイナーの仕事をしながら電子書籍のプロジェクトに

携わるには

電子書籍の市場はまだ小さいがイーブックデザイナーも少ない

待っていても仕事は来ない発注したくてもできない状況（電子書籍に関する情報が少ないため）

［参考］HTML5を普及させるためにGoogle, Appleがやったこと

ショーケース・サイトを公開する

ウェブデザインのスキルを生かす

領域外の技術習得は必要だが可能な限り

今は電子書籍制作の受注ではなく

提案とプロトタイプ


イーブックデザイナー


イーブックデザイナーウェブサイトをつくらないウェブデザイナー

現在電子出版業界で活躍している人は

もし電子書籍に興味があるなら

ゴーフォーブローク

Go For Broke

Thank you for your attention.

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

community

電子書籍メディア論h t t p : / / www. f a c eboo k . c om / eBoo kS t r a t e g y





Technology

イーブックデザイナーの仕事／HTML5ブックデザインの可能性