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

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

WCAN 2012 Spring

境祐司 Youji Sakai

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

Instructional Designer境祐司

profile

YOUJI SAKAI

最新刊（12月～1月）

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

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

Webデザイン基礎改訂３版

community

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

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

Agenda今日お話すること

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

Web for All, Web on Everything

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

WHAT IS A EBOOK DESIGNER?

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

1980年代

マルチメディア

19881993

2012, 2013, 2014...

出版とウェブの融合

1990年代

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

DTPデザイナー

グラフィックデザイナー

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

DTPデザイナー

グラフィックデザイナー

ウェブデザイナー

DTPデザイナー

イーブックデザイナー

現在

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

Market電子書籍の市場

電子書籍の市場

携帯電話

パソコン

スマートデバイス等

電子書籍の定義

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

プラットフォーム

FORMATフォーマット

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

画像処理作業の場合

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

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

PSD JPEGGIFPNG

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

FLA SWFMP4

Illustratorで作成した図

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

ReadingSystemリーディングシステム

History電子書籍の歴史

電子書籍元年

EPUBの前身

EPUB2.0Kindle

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

INFORMATIONDESIGN

電子書籍の設計2

ワークフローを決定する

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

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

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

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

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

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

EPUB3EPUB2XMDF.bookPDFKF8

国内

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

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

フォーマットを決定する

Replica

Flowable Content

Flowable Content or Fixed

Replica

Flowable Content

Flowable Content or Fixed

※策定中

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

Interoperability相互に運用可能か？

Evolvability発展性があるか？

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

PDF?　アプリ?　HTML5?

HTMLCSS

JavaScript

Textテキスト

TEXT+IMAGEs

永続性

含有イメージデータ

JavaScript

TEXTIMAGES

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

OSとデバイス

iOSAndroidKindlekobo

Sony ReaderPC(Win, Mac)

電子書籍フォーマット

WebKitウェブキット系

RMSDKリーダーモバイルSDK系

proprietary technologyプロプライアタリ

アプリケーション

NativeAppsネイティブアプリ

WebAppsウェブアプリ

NativeAppsネイティブアプリ

WebAppsウェブアプリ

SMART DEVICE

DESKTOP

ibis readerhttp://ibisreader.com/

iOS, Android, Windows, Mac OS

PRODUCTIONWORK電子書籍の編集3

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

PRODUCTION WORK

http://idpf.org/epub/30

PRODUCTION WORK

Text Fontテキスト・フォント

PRODUCTION WORK

Layoutレイアウト

PRODUCTION WORK

Media Queriesメディアクエリ

PRODUCTION WORK

アドバンスドレイアウト

ADVANCEDLAYOUT

アドバンスドレイアウト

デジタルファースト

Advanced Adaptive Layout

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

EPUB3Advanced Adaptive

Layout

Advanced Adaptive Layout working grouphttp://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/

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

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

Technology

Html5　入門編その2

1. シンクタンクの仕事

RoHS2 小型同軸コネクタ · 2019-03-27 · 単位：mm //e PSH Seres のタログの仕様のの特仕様使用の仕様の 2 レセプタクル梱包仕様品名外部導体めっき

20090925 HTML5の過去、現在、未来

Html5のいま 2014

HTML5? HTML5!

HTML5 ビギナーのための AngularJS

1 HTML5 Web - jpcert.or.jp · ―トピック1― html5 を利用したwebアプリケーションのセキュリティ問題に関する調査報告書の公開 html5 は、whatwg

HTML5 時代の Web セキュリティ

私のi.M.A.C　― プランナーの思考や仕事の仕方について ― vol.01

HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

HTML5 IDE としての Visual Studio 2013

µITRON4.0仕様 - TRON ForumµITRON4.0仕様 Ver. 4.03.03 ii 仕様書の構成本仕様書は，µITRON4.0仕様（ないしは，µITRON4.0リアルタイムカーネル仕様）のC言語APIを規定するものである．仕様のバージョン番号は，仕様書の

Q（キュー）サイトに学ぶ、演出のためのHTML5

初めてのHtml5 20120612

Ie10正式リリース版のhtml5 css3

HTML5 Caravan 福岡・Adobe＆HTMLのスライド

vol23 1 003jp - NTTドコモ · Webアプリ (HTML5+JavaScript) Webアプリ (HTML5+JavaScript) Webアプリ (HTML5+JavaScript) 利用できる機能がWebブラウザの仕様に

デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI

ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013