〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜コミック＆グラフィックノベル・プロダクションワーク

コミック＆グラフィックノベルプロダクションワーク

～Kindleダイレクトパブリッシング・EPUB 3HTML5ウェブコンテンツ～

ウェブで読む漫画／グラフィックノベルの表現・販売・プロモーション

2013年11月26日（火）PM18:30-20:30 ／東京都杉並区（セシオン杉並 2F 視聴覚教室）

Instructional Designer | eBook DesignerYOUJI SAKAI

境祐司

profile

『速習Webデザイン Flash CS6』（技術評論社）、『InDesign CS6で作るEPUB 3 標準ガイドブック』（共著/翔泳社）、『スマートフォンサイトデザインの基本原則』（共著/MdN）、『EPUB3 スタンダード・デザインガイド』（共著/マイナビ）、『ウェブレイアウトの教科書　PC・スマートフォン・タブレット時代の標準デザイン』（MdN）、『Webデザイン基礎改訂3版 (速習Webデザイン) 』（技術評論社）、『電子書籍の作り方』『Webデザイン標準テキスト ―変化に流されない制作コンセプトと基本スタイル』（技術評論社）、『デザイナーなら絶対知っておくべき Webデザイン50の原則』（ソフトバンククリエイティブ）、『速習Webデザイン Flash CS4』（技術評論社）、『Webデザイン&スタイルシート逆引き実践ガイドブック』（ソシム）、『3行レシピブログデザイン』（共著/翔泳社）、『ネタ帳デラックスFlashテクニック』（共著/MdN）『速習Webデザイン Dreamweaver CS3』『速習Webデザイン FlashCS3』（技術評論社）、『Flash逆引きデザイン事典』（共著/翔泳社）、『スタイルシートデザインのネタ帳』（監修/MdN）、『Makinga Rule for Web Design』（ソーテック）、『CSSビジュアルデザイン・メソッド』（毎日コミュニケーションズ）、『XHTMLマークアップ＆スタイルシートリフォームデザインガイドブック』（ソシム）、『改訂新版Webデザイン基礎』（技術評論社）など。

BOOKS主な著書※海外版、ムックを含むと60冊ほど

community

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

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

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








テキスト

本日は、毎年恒例の自主興行的な発表会（第3回）です

デザインの未来プロジェクト

https://www.facebook.com/TheFutureDesign

166-0011 東京都杉並区梅里1-3-3

学校法人阿佐ヶ谷学園高度情報化内http://commonstyle2011.wordpress.com/



http://commonstyle2011.wordpress.com

http://commonstyle2011.wordpress.com

固定レイアウトを制する！漫画・グラフィックノベル・写真集・絵本

アートブック・アートマガジン

Session-1: Kindleプロダクションワーク

Session-2: EPUB 3プロダクションワーク

Session-3: HTML5プロダクションワーク

Session-4: コンテンツの検証と販売

Session-5: ウェブプロモーション

Session-6: コミック・グラフィックノベル・写真集の新しい表現







作る！







発表する！

販売する！







プロモーションする！







新しい表現を模索する

Session-1:

Session-2: EPUB 3プロダクションワークSession-3: HTML5プロダクションワーク


Session-5: ウェブプロモーションSession-6: コミック・グラフィックノベル・写真集の新しい表現

Kindleプロダクションワーク

Session-1:Kindleプロダクションワーク

すぐ実践できる

Session-2: EPUB 3プロダクションワークSession-3: HTML5プロダクションワーク


Session-5: ウェブプロモーションSession-6: コミック・グラフィックノベル・写真集の新しい表現

基礎知識

電子書籍の技術


リフローと固定レイアウト


テキストが主体の書籍

漫画, 絵本, 写真集などビジュアルで構成されている本

iBookstore夢追い漫画家60年藤子不二雄A

iBookstore彼岸島 33

松本光司

iBookstore夢追い漫画家60年藤子不二雄A

iBookstore彼岸島 33

松本光司

リフロー

固定レイアウト




今日のテーマ

彼岸島 33iBookstore

松本光司

Readium(Google Chrome)で表示

写真集サンプル

Readium(Google Chrome)で表示


Himawari Reader Proでサンプルを表示

Androidスマートフォン


固定レイアウトの表現

固定レイアウトの表現横書き

固定レイアウトの表現縦書き

日本の漫画


横向きに固定


横向きに固定絵本など


横向きに固定絵本など

デバイスを縦向きにしても回転しない



リフロー

電子書籍フォーマット

電子書籍フォーマット

iBookstore

掲載しているのは代表的なストア

EPUB 3, KF8/Mobi7, XMDF, .book ...

EPUB 3 | International Digital Publishing Forum http://idpf.org/epub/30

事実上の標準規格

http://idpf.org/epub/30


Kindle Format 8

独自技術

2000 2007 2010 2012

.bookXMDF EPUB2.0

2007年 Kindle 開始

OEBPS1.0Open eBook Publication Structure

EPUB 3.0

Apps

2011.10.11

1999.9

Mobipocketを2005年に買収

Kindle Format 8

EPUBとKindle Formatの歴史

HTML5 CSS3XML SVG

採用されている標準技術

Kindle Format 8

画像形式の種類GIF, JPEG, PNG, SVG

GIFGraphics Interchange Format

可逆圧縮／ラスタグラフィックス

JPEGJoint Photographic Experts Group

非可逆圧縮／ラスタグラフィックス

PNG-8, PNG-24, PNG-32Portable Network Graphics

PNG可逆圧縮／ラスタグラフィックス

SVGScalable Vector Graphics

ベクタグラフィックス

画像の圧縮とデータサイズ固定レイアウトの肝

例：Apple iBookstoreファイルサイズ上限は

「2GB」（1GB未満を推奨）

Anomaly アノマリー

612MB 1,106ページ！！

超ヘビー級・グラフィックノベル

Anomaly アノマリー

612MBをダウンロード...

Frankenweenie: An Electrifying Bookフランケンウィニー　エレクトリファイイング・ブック

Frankenweenie: An Electrifying Book

768MB ←高画質ビデオの埋め込み

フランケンウィニー　エレクトリファイイング・ブック

KindleプロダクションワークSession-1:

KindleプロダクションワークSession-1:

コンテンツの検証と販売Session-4:

＋

Kindleストアでリリースするまでのプロセス

固定レイアウトの作成方法

Kindle Format 8

EPUB 3から作成する方法

Kindle Format 8

Kindle Comic Creatorで作成する方法


固定レイアウト固定レイアウト

Kindle Format 8


EPUB 3 固定レイアウトを作成してKindle Format 8に変更する方法をお奨めしたい


Kindle Format 8


EPUB 3 固定レイアウトを作成してKindle Format 8に変更する方法をお奨めしたい


...が、難易度が高いため（EPUB 3とKF8両方の知識が必要）

Kindle Format 8

Kindle Comic Creatorで作成する方法


Amazonが無償で提供しているオーサリングツールを使って作成する方法を

解説します

準備前の基礎知識

KF8の仕様：データサイズリフロー：最大127KB固定レイアウト（コミック以外）：最大256KBコミック：最大800KB


<meta name="book-type" content="children" />記述なし

<meta name="book-type" content="comic" />

最大256KB

最大800KB


<meta name="book-type" content="comic" />最大800KB

Kindle Comic Creator

Kindle Comic Creatorhttp://www.amazon.com/kc2

サポートしているファイル形式

PDF（.pdf）JPEG（.jpg / .jpeg）TIFF（.tif / .tiff）PNG（.png）PPM（.ppm）

http://www.amazon.com/kc2

http://www.amazon.com/kc2

ページ画像の準備

今日、PDFファイルをもらい明日リリースしたい

今回はあえて過酷な条件で...

PDF

Acrobatで画像書き出し(C)デッサン力養成テキスト実行委員会

PDF

(C)デッサン力養成テキスト実行委員会

PNG 設定

解像度

5103x7158（600dpi）11ページで、71.4MB

01.png　7.5MB02.png　6.9MB03.png　7.1MB04.png　11.1MB

Photoshopでサイズ変更(C)デッサン力養成テキスト実行委員会

幅を1200px（縦は1683pxになる）

01.jpg　590KB02.jpg　500KB03.jpg　565KB04.jpg　840KB

縦を1920pxに広げる解像度を72dpiにするJPEGの最高画質で書き出す


Kindle Fire HD　Nexus 7（2012モデル）800x1280

Kindle Fire HDX　Nexus 7（2013モデル）1200x1920

Kindle Fire HDX 8.9"1600x2560

Kindle Fire HD　Nexus 7（2012モデル）800x1280

Kindle Fire HDX　Nexus 7（2013モデル）1200x1920

Kindle Fire HDX 8.9"1600x2560

iPad2　iPad mini768x1024

iPad Air　iPad mini Retina1536x2048

Kindle Fire HD, HDXAndroidの大半のタブレット

iPad, iPad mini

スクリーンの比率が異なる

Kindle Fire HD, HDXAndroidの大半のタブレット

iPad, iPad mini

どちらにあわせても上下もしくは左右に余白ができる

幅を1200px（縦は1683pxになる）


縦を1920pxに広げる解像度を72dpiにするJPEGの最高画質で書き出す

JPEGminihttp://www.jpegmini.com/

http://www.jpegmini.com

http://www.jpegmini.com



JPEGminiJPEG最高画質Photoshop

ImageOptimhttp://imageoptim.com/

http://imageoptim.com

http://imageoptim.com

01.png　283KB02.png　266KB03.png　221KB04.png　381KB


ImageOptimPNG（8bit）Photoshop


ImageOptim

PNG（8bit）Photoshop


JPEGmini

JPEG最高画質Photoshop

PNGJPEG


ImageOptim



JPEGmini


PNGJPEG


ImageOptim


PNG(C)デッサン力養成テキスト実行委員会


JPEGmini


JPEG (C)デッサン力養成テキスト実行委員会

ページデザイン


表紙

表紙目次章扉

表紙目次章扉

表紙目次章扉

奥付

表紙目次章扉

奥付

Photoshopで書き出し(C)デッサン力養成テキスト実行委員会

表紙


目次章扉

左ページ右ページ


03 04



11 奥付



本の表紙

Kindleでは本と表紙を分離マーケティングカバーと言います


マーケティングカバー幅：1800px高さ：2560px

幅：1200px高さ：1920px

本のページ


Kindle Comic Creatorhttp://www.amazon.co.jp/gp/feature.html?docId=3077699036

http://www.amazon.co.jp/gp/feature.html?docId=3077699036

http://www.amazon.co.jp/gp/feature.html?docId=3077699036

本のページ表紙マーケティングカバー

本のページ

デスクトップにフォルダを作成しておく

パネルビューの作成（はい・いいえ）

縦置き・横置きアンロック

左から右へ右から左へ

ページのサイズ

デバイスの方向を固定しない

基本設定

基本設定

右から左へ左から右へ（日本の漫画）

本の言語：日本語

Kindleパネルビュー：いいえ

本の組方向（横組／縦組）：アンロック

本のページ進行方向（右開き／左開き）：左から右へ

本のページサイズ：デフォルト（800x1280）

タイトル：本のタイトル著者：本の作者名出版社：出版社名もしくは発行人

カバー画像の場所

保存先の場所

詳細設定

ページ画像をすべて選択して読み込む

Kindle Comic Creatorの編集画面



全てを見開きページに設定



ページタイトルを変更する



目次の項目になる



保存する



KF8ブックとしてエクスポート


名前を付けて保存※拡張子「.mobi」を忘れずに

完成


保存フォルダの内容

KF8ブック（Mobiファイル）

本の検証Kindleプレビューツール

http://amzn.to/17S81Oy



デフォルトのデバイスモード：Kindle Fire HDデフォルトの方向：縦

書き出したMobiファイルをドラッグする

ページをチェックする


見開きページをチェックする

ランドスケープモード


NCX表示をチェックする

NCX表示をチェックする

NCX表示

デバイスの切り替え

Kindle Paperwhite


Kindle Paperwhite

Kindle Paperwhiteを対象デバイスにするか

要検討


iOSは特別な作業が必要

「本の変換に成功しました」と表示される

iOSの検証ファイル拡張子「.azk」

iOSデバイスを接続する（iPad, iPad mini, iPhone, iPod touch）

iTunesを起動する

Appをクリック

Kindleをクリック

追加をクリックazkファイルを読み込む

iPad

ページをチェックする


見開きページをチェックする(C)デッサン力養成テキスト実行委員会

Kindle for iPadのメニュー


Kindle for iPadのメニュー

NCX表示は反映されないAndroidも同じ


ページ番号を入力するNCX表示がないので


本の中に目次のページを追加するには？

Kindle Comic Creatorの詳細設定

Kindle Comic Creatorの詳細設定

目次のページ（HTML）を作成して読み込む必要がある

Kindle Fire HD, Kindle Paperwhiteは目次（NCX表示）が使用できる

タブレットやスマートフォンなどは目次（NCX表示）は使用できない

目次ページが必要な本かどうか考えてみる

本（コンテンツ）に組み込む目次ページを作成する必要がある

HTMLの知識が必要

ページのリンクを指定するため本の構成（KF8の構造）を知っておく必要がある

ページ数が少ない本なのでこのまま発行する

今回の制作指針では...

目次ページの組み込みは後で解説します

Kindleダイレクトパブリッシングで発行する

国際電子出版EXPO2013/7/5 東京ビックサイト

書く、作る、売る！ Kindleで個人が出版する時代

http://youtu.be/5nob1XTPxLo



1. 本の詳細

タイトルフリガナローマ字

内容紹介

出版者（オプション）ローマ字

本の著者等

言語発売日18歳未満の方に不適切な表現内容

ページめくりの方向

1. 本の詳細

タイトルフリガナローマ字

内容紹介

出版者（オプション）ローマ字

本の著者等

言語発売日18歳未満の方に不適切な表現内容

ページめくりの方向

USのKindleストアで表示される

2. 出版する権利を確認してください

3. お客様が本を見つけやすくする

4. 表紙のアップロード

5. 本のアップロード

カテゴリー検索キーワード（最大7つまで、オプション）

表紙のアップロード

本のアップロード

ブラウザー上でプレビューできる

7. 販売地域を確認してください

8. ロイヤリティの選択

9. Kindle MatchBook

10. Kindle本のレンタル

70%のロイヤリティ35%のロイヤリティ

例：35%のロイヤリティ

Amazon.com希望小売価格$0.99USD推定ロイヤリティ$0.35

Amazon.co.jp希望小売価格¥100推定ロイヤリティ¥35

電子書籍の出版

6時間後

国内のKindleストア


USのKindleストア



PDFファイルを変換する

漫画 on Webhttp://mangaonweb.com

ブラックジャックによろしくhttp://mangaonweb.com/creatorOCCategoryDetail.do?action=list&no=2&cn=1

ブラックジャックによろしく第2巻（ダウンロード）http://mangaonweb.com/creatorOCComicDetail.do?no=30954&cn=1

http://mangaonweb.com

http://mangaonweb.com

http://mangaonweb.com/creatorOCCategoryDetail.do?action=list&no=2&cn=1

http://mangaonweb.com/creatorOCCategoryDetail.do?action=list&no=2&cn=1

http://mangaonweb.com/creatorOCComicDetail.do?no=30954&cn=1


PDFファイル

Mobiファイル

ほぼ自動変換

PDFファイル

Mobiファイル25.5MB200ページ

PDFファイル

Mobiファイル25.5MB200ページ

449.3MB

Kindleダイレクトパブリッシングアップロードできるデータサイズ

50MB未満

25.5MB200ページ

449.3MB

50MB未満

PNGJPEG

PNGJPEG

PNGJPEG

PDFファイル全ページの画像ファイル

PNGJPEG

PNGJPEG

PNGJPEG

PDFファイル

全ページの画像ファイル

PNGJPEG

PNGJPEG

PNGJPEG

画像を圧縮

PNGJPEG

PNGJPEG

PNGJPEG

PDFファイル


PNGJPEG

PNGJPEG

PNGJPEG

画像を圧縮

本の中に目次ページを追加する


Kindle Fire HD, Kindle Paperwhiteは目次（NCX表示）が使用できる

Kindle Fire HD



何度も目次ページに戻らなくてもよいので便利


何度も目次ページに戻らなくてもよいので便利


タブレットやスマートフォンなどは目次（NCX表示）は使用できない

Nexus7




本（コンテンツ）に組み込む目次ページを作成する必要がある

HTMLの知識が必要

PNGJPEG

PNGJPEG

PNGJPEG


PNGJPEG

PNGJPEG

PNGJPEG


「Text」フォルダ

part0000, part0001, part0002 ...

part0000, part0001, part0002 ...

Kindle Comic Creatorで保存したデータ


保存する

保存フォルダの内容

Page-0, Page-1, Page-2 ...

html/Page-0.html と指定1ページ目の場合

詳細設定で目次のHTMLファイルを読み込む

次のパネルビューで解説します

パネルビューバーチャルパネルビュー

Kingdom Come (New Edition) [Kindle Edition]http://amzn.to/XEAQrv

KF8固定レイアウト・パネルビュー

http://amzn.to/XEAQrv

http://amzn.to/XEAQrv

Amazonが提供しているKF8サンプル

パネルビューとバーチャルパネルビューの違い

ダブルタップする

バーチャルパネルビュー

12

34


ダブルタップすると1/4の領域が画面一杯に拡大スワイプでズーム領域をスクロール

12

34


ダブルタップすると1/4の領域が画面一杯に拡大スワイプでズーム領域をスクロール

固定レイアウトの本には自動的に搭載される

パネルビュー

ダブルタップする

スワイプする

パネルビュー

スワイプする

パネルビュー

拡大する領域を指定しなければいけない

Kindleパネルビュー：はい

http://www.design-zero.tv/Webcast/Seminar_20131126/告知ページから素材をダウンロードできます

http://www.design-zero.tv/Webcast/Seminar_20131126/

http://www.design-zero.tv/Webcast/Seminar_20131126/

KDP_Tutorial_20130517

空のフォルダ

フォルダ名：

Kindleパネルビュー：はい

ドラッグして順番を変更

パネル検出は便利な機能だが少女漫画などは無理

（コマが矩形とは限らない）

Kindle Fire HD

Kindle Fire HD

ダブルタップ

Kindle Paperwhite

目次（NCX表示）の修正

Kindle Comic Creatorの保存データ


Kindle端末で表示される目次

奥付裏表紙

奥付裏表紙

Page-0.htmlPage-1.htmlPage-2.htmlPage-3.html

エピソード01-02エピソード03-04エピソード05目次の項目目次の項目目次の項目

・エピソード01-02・エピソード03-04・エピソード05・奥付

html/Page-0.html

html/ Page-1.html

html/ Page-2.html

html/ Page-4.html

NCX表示


エディタで開く

<navPoint playOrder="1" id="toc-1">　<navLabel>　　<text>エピソード01-02</text>　</navLabel>　<content src="html/Page-0.html"/></navPoint>

<navPoint playOrder="2" id="toc-2">　<navLabel>　　<text>エピソード03-04</text>　</navLabel>　<content src="html/Page-1.html"/></navPoint>

<navPoint playOrder="3" id="toc-3">　<navLabel>　　<text>エピソード05</text>　</navLabel>　<content src="html/Page-2.html"/></navPoint>

<navPoint playOrder="4" id="toc-4">　<navLabel>　　<text>奥付</text>　</navLabel>　<content src="html/Page-4.html"/></navPoint>

Kindleプレビューツール

content.opfをドラッグする



「Kindleプレビューアにより本が正常にコンパイルされました」と表示される


・エピソード01-02・エピソード03-04・エピソード05・奥付

Kindleプレビューツールで変換されたファイル


Kindle Comic Creatorで開くと書き変わってしまうので注意！

追加する

電子書籍の中の目次ページを追加する

nav.html目次ページを作成する

<manifest>　<item href="nav.html" id="item-9" media-type="application/xhtml+xml"/></manifest>

<spine toc="ncx">　<itemref idref="item-9" linear="yes"/>　<itemref idref="item-3" linear="yes"/>　<itemref idref="item-4" linear="yes"/>　<itemref idref="item-5" linear="yes"/>　<itemref idref="item-6" linear="yes"/>　<itemref idref="item-7" linear="yes"/>　<itemref idref="item-8" linear="yes"/></spine>

<guide>　<reference type="toc" title="目次" href="nav.html" /></guide>

content.opfに目次ページの指定を追加する


content.opfをドラッグする

Nexus7

Nexus7

目次ページが表示されリンクも機能するが

小さすぎる

見栄えはCSSで指定する必要がある

簡単なCSSを追加

Nexus7

電子書籍の中の目次ページ

Kindle Paperwhite

Kindle Paperwhite

HTMLではなく画像

Kindle Paperwhite

HTMLではなく画像

NCX表示があるので致命的な問題ではない

6時間後

Kindle for iOS

Kindle for iOS

問題なし

問題なし

Kindle for iOS

CSSが適用されていない...

KindleFire HDAndroid iOS

テキストポップアップ

Twas The Night Before Christmas (AniMotion) [Kindle Edition]http://amzn.to/VrpUHo

KF8固定レイアウト・テキストポップアップ

http://amzn.to/VrpUHo

http://amzn.to/VrpUHo

Amazonが提供しているKF8サンプル

固定レイアウト - グラフィックノベル・絵本KindleGen Examples - Samples

KindleGen Examples - Samples固定レイアウト - グラフィックノベル・絵本

テキストポップアップ

Kindle Fire HD

Kindle Fire HD

ダブルタップ

Kindle Paperwhite

文字は大きくて読みやすいが見た目がよくない

見栄えはCSSで指定する必要がある

応用編-1

スワップイメージフォント埋め込み

テキスト配置の目次ページクリッカブルマップの代替として

スワップイメージ

Scot's Blog: Templateshttp://authoradventures.blogspot.jp/p/templates.html

http://authoradventures.blogspot.jp/p/templates.html

http://authoradventures.blogspot.jp/p/templates.html

ダブルタップ

<img src="../images/door-closed.jpg" alt="" class="fullpage"/><div class="txt mag13-1"> <a class="app-amzn-magnify" data-app-amzn-magnify='{"targetId":"mag13-1-magTarget", "ordinal":1}'> <p class="balloon">Who could that be?</p> </a></div>

div.target-mag13-1 { position: absolute; display: none; font-size: 150%; background-image: url("../images/door-open-overlay.jpg"); background-repeat: no-repeat;}

HTML

CSS



HTML

CSS

ページの画像

ページ画像の上に重なる背景画像



HTML

CSS

4.2.3 必須条件#3: 背景画像として画像を設定

固定レイアウト本における画像は、(HTML <img>タグを使用する代わりに)CSS background-imageプロパティを用いて背景画像として設定しなければなりません。HTML画像は背景画像として設定されていない場合、領域拡大に影響されるため、児童用コンテンツや漫画本においてこれは重要なポイントです。背景画像が正しく設定されいない場合、ダブルタップを行っても画像はイメージビューア内で開きません。

Kindleでのパブリッシング: 出版者ガイドライン4.2.2 必須条件 #2: 領域拡大の使用(ポップアップ)

ダウンロードKindleパブリッシング・ガイドラインhttp://bit.ly/T3e4J2

http://bit.ly/T3e4J2

http://bit.ly/T3e4J2

フォント埋め込み


CircularFLOサーキュラーFLOhttp://www.circularsoftware.com/open-sample-circularflo-ebook/

http://www.circularsoftware.com/open-sample-circularflo-ebook/







埋め込まれているフォント

@font-face { font-family:"Minion Pro"; font-style:normal; font-weight:normal; src : url(../Fonts/font00042.otf);}



h2 { font-family:"Minion Pro", serif;}

body{width:1224px;height:1632px;margin: 0;

}

div.textFrame {position:absolute; padding:0px; margin:0px; z-index: 100;

}

1224px

1632px


}

1224px

1632px

left: 16%; top: 3.6%;height: 0.8%; width: 24%;


}

1224px

1632px

left: 16%; top: 3.6%;height: 0.8%; width: 24%;

テキスト配置の目次ページクリッカブルマップの代替として


CircularFLOサーキュラーFLOhttp://www.circularsoftware.com/open-sample-circularflo-ebook/







日本語フォントを埋め込めば見栄えが向上

応用編-2

CSSによるページデザイン

http://www.design-zero.tv/Webcast/Seminar_20131126/demo.html









Kindle Paperwhite

スクリーンの幅が狭い場合は全段

指定した値より大きい場合は2段組

メディアクエリを活用した例Session-2: EPUB 3プロダクションワークで解説します

EPUB 3プロダクションワークSession-2:

EPUB 3 | International Digital Publishing Forum http://idpf.org/epub/30

事実上の標準規格







Apple iBookstore

Apple iBookstore

Apple iBookstore

固定レイアウトの電子書籍

リフローの電子書籍

リフローと固定レイアウトを組み合わせた電子書籍

リフローのみ

cover nav表紙目次

cover.xhtml nav.xhtml

page01 page02 page03 page04

page01.xhtml page02.xhtml page03.xhtml page04.xhtml

見開きの写真ページを固定レイアウト



page01 page02 photo

page01.xhtml page02.xhtml page03.xhtml

page04

page04.xhtml


見開きの写真

2ページを合成した固定レイアウト



page01 page02 photo-left

page01.xhtml page02.xhtml page03.xhtml


page04

page04.xhtml

photo-right

合成された見開きの写真

対応している読書システムが少なくまだ不安定...

Readiumを対象にhttp://bit.ly/14Xgzzm

Google Chrome

http://bit.ly/14Xgzzm

http://bit.ly/14Xgzzm

2種類のストーリーを1つのEPUBファイルに収録メディアクエリで切り替える

Media Queriesメディアクエリ

Media Queries

@media screen and (max-width: 480px) {　h1 {　　color: red;　}}

幅が480px以下の場合

Media Queries

@media screen and (max-width: 480px) {　h1 {　　color: red;　}}

幅が480px以下の場合

ウィンドウの幅が480px以下の場合見出しの色を赤にする

Himawari Reader（Android 4.2）

スクリーンの幅が狭い場合は全段

指定した値より大きい場合は2段組

例：

固定レイアウトのデメリット

固定レイアウトでは読めない

広い

狭い

タブレット

スマートフォン

タブレット


フルバージョン

スマホ最適化ショートバージョン

タブレットフルバージョン

スマホ最適化ショートバージョン

スマホ最適化フルバージョン


デモンストレーション

HTML5プロダクションワークSession-3:

HTML5 CSS3 XMLSVG SMIL

W3CWorld Wide Web Consortium

http://www.w3.orgワールドワイドウェブ・コンソーシアム

HTML, CSS,XMLなど

ウェブの技術を策定

http://www.w3.org

http://www.w3.org

HTML5 CSS3

HTMLでマガジンも作成できる

第1回（11日）のデモから

Financial Timeshttp://www.ft.comビデオ：02_20131111_FT_Web_App.mp4

第1回（11日）のデモから

http://www.ft.com

http://www.ft.com

ウェブ漫画

Webtoons

http://bit.ly/17VfKeI

http://bit.ly/1dxsuus





ヨンジェウォン乱れ咲

スマホで読む漫画

HTML5 コミック

Adobe Edge Animate CCによるコミック作成

デモンストレーション

ウェブプロモーションSession-5:

個人出版のプロモーション事例：

http://www.amazon.com/dp/B00AGFU5VS



http://anythingsimple.com/books/ape/ http://www.guykawasaki.com/ape/





http://youtu.be/135KGCLqC6Q



http://youtu.be/135KGCLqC6Q

ショットガンアプローチ



https://twitter.com/GuyKawasaki

フォロワー数：1,399,789



知名度があっても一筋縄ではいかない

知名度のない私たちはどうすればよい？

電子書籍リリース

電子書籍リリース作成開始

発売後よりこの期間が重要

発売開始

発売開始

タイアップ・プロモーション事例：

電子書籍コミュニティメディア

A Book Apart An Event Apart A List Apart出版社会議ビジネスブログメディア

複合型ビジネスモデル

http://www.abookapart.com http://aneventapart.com http://alistapart.com

http://www.abookapart.com


http://aneventapart.com


http://alistapart.com



著者がイベントに登壇










電子書籍の第1章をオンラインメディアに掲載









電子書籍

イベントメディア

著者著者

著者記事の執筆出演・講演

コミック・グラフィックノベル写真集の新しい表現

Session-6:

漫画や小説などの人気作品は、新しいテクノロジーと共に復活し、新しい読者を開拓してきました。

ラジオドラマ、テレビアニメ、映画、家庭用ビデオが普及し始めた80年代前半には「ビデオ漫画」（漫画の原稿を使った動的な映像表現）なども作られ、

マルチメディアブームの90年代前半は「CD-ROMコンテンツ」、インターネットが商用化された90年代半ば以降はShockwaveなどの「ウェブ上のデジタルコミック」、そして、1999年のiモード登場から数年を経て「ケータイコミック」が大きな市場を形成


漫画は変わらない




漫画は変わらない

テクノロジー

漫画

＋

新しい技術と共に登場




ケータイコミック

漫画

＋


ビデオ漫画マルチメディアウェブ漫画





漫画

＋







漫画

＋





コミック＆グラフィックノベルプロダクションワーク

～Kindleダイレクトパブリッシング・EPUB 3HTML5ウェブコンテンツ～

ウェブで読む漫画／グラフィックノベルの表現・販売・プロモーション

2013年11月26日（火）PM18:30-20:30 ／東京都杉並区（セシオン杉並 2F 視聴覚教室）

community

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

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









Technology

〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック＆グラフィックノベル・プロダクションワーク

〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜コミック＆グラフィックノベル・プロダクションワーク