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

Preview:

DESCRIPTION

コミック&グラフィックノベル・プロダクションワーク 〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 ウェブで読む漫画/グラフィックノベルの表現・販売・プロモーション http://www.design-zero.tv/Webcast/Seminar_20131126/index.html 2013年11月26日(火)午後6時30分〜8時30分 セシオン杉並

Citation preview

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

~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冊ほど

テキスト

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

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

https://www.facebook.com/TheFutureDesign

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

作る!

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

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

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

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

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

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

発表する!

販売する!

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

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

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

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

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

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

プロモーションする!

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-4: コンテンツの検証と販売

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

Kindleプロダクションワーク

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

すぐ実践できる

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

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

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

事実上の標準規格

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から作成する方法

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

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

Kindle Format 8

EPUB 3から作成する方法

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

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

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

Kindle Format 8

Kindle Comic Creatorで作成する方法

固定レイアウト

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

解説します

準備前の基礎知識

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

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

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

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

最大256KB

最大800KB

KF8の仕様:データサイズリフロー:最大127KB固定レイアウト(コミック以外):最大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)

ページ画像の準備

今日、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の最高画質で書き出す

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

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になる)

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

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

JPEGminihttp://www.jpegmini.com/

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

01.jpg 283KB02.jpg 217KB03.jpg 176KB04.jpg 299KB

JPEGminiJPEG最高画質Photoshop

ImageOptimhttp://imageoptim.com/

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

01.png 266KB02.png 250KB03.png 205KB04.png 356KB

ImageOptimPNG(8bit)Photoshop

01.png 266KB02.png 250KB03.png 205KB04.png 356KB

ImageOptim

PNG(8bit)Photoshop

01.jpg 283KB02.jpg 217KB03.jpg 176KB04.jpg 299KB

JPEGmini

JPEG最高画質Photoshop

PNGJPEG

01.png 266KB02.png 250KB03.png 205KB04.png 356KB

ImageOptim

PNG(8bit)Photoshop

01.jpg 283KB02.jpg 217KB03.jpg 176KB04.jpg 299KB

JPEGmini

JPEG最高画質Photoshop

PNGJPEG

01.png 266KB02.png 250KB03.png 205KB04.png 356KB

ImageOptim

PNG(8bit)Photoshop

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

01.jpg 283KB02.jpg 217KB03.jpg 176KB04.jpg 299KB

JPEGmini

JPEG最高画質Photoshop

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

ページデザイン

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

表紙

表紙 目次 章扉

表紙 目次 章扉

表紙 目次 章扉

奥付

表紙 目次 章扉

奥付

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

表 紙

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

目次 章扉

左ページ 右ページ

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

03 04

左ページ 右ページ

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

11 奥付

左ページ 右ページ

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

本の表紙

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

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

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

幅:1200px高さ:1920px

本のページ

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

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

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

本のページ

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

パネルビューの作成(はい・いいえ)

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

左から右へ右から左へ

ページのサイズ

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

基本設定

基本設定

右から左へ 左から右へ(日本の漫画)

本の言語:日本語

Kindleパネルビュー:いいえ

本の組方向(横組/縦組):アンロック

本のページ進行方向(右開き/左開き):左から右へ

本のページサイズ:デフォルト(800x1280)

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

カバー画像の場所

保存先の場所

詳細設定

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

Kindle Comic Creatorの編集画面

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

Kindle Comic Creatorの編集画面

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

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

Kindle Comic Creatorの編集画面

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

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

Kindle Comic Creatorの編集画面

目次の項目になる

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

Kindle Comic Creatorの編集画面

保存する

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

Kindle Comic Creatorの編集画面

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

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

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

完成

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

保存フォルダの内容

KF8ブック(Mobiファイル)

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

http://amzn.to/17S81Oy

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

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

ページをチェックする

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

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

ランドスケープモード

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

NCX表示をチェックする

NCX表示をチェックする

NCX表示

デバイスの切り替え

Kindle Paperwhite

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

Kindle Paperwhite

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

要検討

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

iOSは特別な作業が必要

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

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

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

iTunesを起動する

Appをクリック

Kindleをクリック

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

iPad

ページをチェックする

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

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

Kindle for iPadのメニュー

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

Kindle for iPadのメニュー

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

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

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

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

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

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ストア

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

USのKindleストア

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

Kindle Comic Creator

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

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 Comic Creator

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

Kindle Fire HD

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

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

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

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

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

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

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

Nexus7

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

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

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

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

HTMLの知識が必要

PNGJPEG

PNGJPEG

PNGJPEG

全ページの画像ファイル

PNGJPEG

PNGJPEG

PNGJPEG

全ページの画像ファイル

「Text」フォルダ

part0000, part0001, part0002 ...

part0000, part0001, part0002 ...

Kindle Comic Creatorで保存したデータ

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固定レイアウト・パネルビュー

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

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

ダブルタップする

バーチャルパネルビュー

12

34

バーチャルパネルビュー

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

12

34

バーチャルパネルビュー

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

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

パネルビュー

ダブルタップする

スワイプする

パネルビュー

スワイプする

パネルビュー

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

Kindleパネルビュー:はい

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 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表示

Kindle Comic Creatorの保存データ

エディタで開く

<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 Comic Creatorの保存データ

Kindleプレビューツール

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

Kindleプレビューツール

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

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

Kindle Comic Creatorの保存データ

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に目次ページの指定を追加する

Kindleプレビューツール

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固定レイアウト・テキストポップアップ

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

ダブルタップ

<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

<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

ページの画像

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

<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

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

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

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

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

フォント埋め込み

固定レイアウト

固定レイアウト

固定レイアウト

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

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

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

@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

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

}

1224px

1632px

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

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

}

1224px

1632px

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

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

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

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

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

応用編-2

CSSによるページデザイン

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

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

cover nav表 紙 目 次

cover.xhtml nav.xhtml

page01 page02 photo

page01.xhtml page02.xhtml page03.xhtml

page04

page04.xhtml

固定レイアウト

見開きの写真

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

cover nav表 紙 目 次

cover.xhtml nav.xhtml

page01 page02 photo-left

page01.xhtml page02.xhtml page03.xhtml

固定レイアウト

page04

page04.xhtml

photo-right

合成された見開きの写真

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

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

Google Chrome

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など

ウェブの技術を策定

HTML5 CSS3

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

第1回(11日)のデモから

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

第1回(11日)のデモから

ウェブ漫画

Webtoons

http://bit.ly/17VfKeI

http://bit.ly/1dxsuus

ヨンジェウォン乱れ咲

スマホで読む漫画

HTML5 コミック

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

デモンストレーション

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

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

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

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

著者がイベントに登壇

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

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

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

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

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

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

電子書籍

イベント メディア

著者 著者

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

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

Session-6:

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

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

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

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

漫画は変わらない

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

漫画は変わらない

テクノロジー

漫 画

新しい技術と共に登場

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

ケータイコミック

漫 画

新しい技術と共に登場

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

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

ケータイコミック

漫 画

新しい技術と共に登場

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

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

ケータイコミック

漫 画

新しい技術と共に登場

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

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

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

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

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

Recommended