Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
コミック&グラフィックノベル
プロダクションワーク
∼Kindleダイレクトパブリッシング・EPUB 3
HTML5ウェブコンテンツ∼
ウェブで読む漫画/グラフィックノベルの
表現・販売・プロモーション
2013年11月26日(火)PM18:3...
profile

YOUJI SAKAI
Instructional Designer | eBook Designer
境祐司
主な著書

BOOKS

※海外版、ムックを含むと60冊ほど

『速習Webデザイン Flash CS6』(技術評論社)、『InDesign CS6で作るEPUB 3 標準ガ
イドブック』(共著/翔泳社)、『スマートフォンサイトデザインの基本原...
community
電子書籍メデ ア論
ィ
http://www.facebook.com/eBookStrategy

デザインの未来
http://www.facebook.com/TheFutureDesign
テキスト
本日は、
毎年恒例の
自主興行的な発表会
(第3回)
です

デザインの未来 プロジェクト
学校法人阿佐ヶ谷学園 高度情報化内
https://www.facebook.com/TheFutureDesign

http://commonsty...
固定レイアウトを制する
!
漫画・グラフィックノベル・写真集・絵本
アートブック・アートマガジン
Session-1: Kindleプロダクションワーク
Session-2: EPUB 3プロダクションワーク
Session-3: HTML5プロダクションワーク
Session-4: コンテンツの検証と販売
Session-5: ウェブプロ...
Session-1: Kindleプロダクションワーク
Session-2: EPUB 3プロダクションワーク
Session-3: HTML5プロダクションワーク
Session-4: コンテンツの検証と販売

作る
!

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

発表する
!
Session-2: EPUB 3プロダクションワーク
Session-3: HTML5プロダクションワーク
Session-4: コンテンツの検証と販売
Session-...
Session-1: Kindleプロダクションワーク
Session-2: EPUB 3プロダクションワーク

プロモーションする
!

Session-3: HTML5プロダクションワーク
Session-4: コンテンツの検証と販売
Se...
Session-1: Kindleプロダクションワーク
Session-2: EPUB 3プロダクションワーク
Session-3: HTML5プロダクションワーク

新しい表現を模索する

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

Kindleプロダクションワーク
Session-2: EPUB 3プロダクションワーク
Session-3: HTML5プロダクションワーク
Session-4: コンテンツの検証と販売
Session-5: ウェブプ...
Session-1:

すぐ実践
できる

Kindleプロダクションワーク
Session-2: EPUB 3プロダクションワーク
Session-3: HTML5プロダクションワーク
Session-4: コンテンツの検証と販売
Sessi...
基礎知識
電子書籍の技術
電子書籍の技術
リフローと固定レイアウト
ビジュアルで構成されている本
漫画, 絵本, 写真集など

リフローと固定レイアウト
テキストが主体の書籍
iBookstore
夢追い漫画家60年
藤子不二雄A

iBookstore
彼岸島 33
松本光司
iBookstore
夢追い漫画家60年
藤子不二雄A

リフロー

固定レイアウト
iBookstore
彼岸島 33
松本光司
ビジュアルで構成されている本
漫画, 絵本, 写真集など

リフローと固定レイアウト
今日のテーマ
テキストが主体の書籍
iBookstore

彼岸島 33
松本光司
写真集サンプル
Readium(Google Chrome)で表示
写真集サンプル
Readium(Google Chrome)で表示
写真集サンプル
Androidスマートフォン
Himawari Reader Proで
サンプルを表示
固定レイアウトの表現
固定レイアウトの表現

横書き
日本の漫画

縦書き

固定レイアウトの表現
固定レイアウトの表現

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

横向きに固定
絵本など
固定レイアウトの表現

横向きに固定
絵本など

デバイスを縦向きにしても回転しない
固定レイアウトの表現

固定レイアウト

リフロー
電子書籍フォーマット
電子書籍フォーマット
EPUB 3, KF8/Mobi7, XMDF, .book ...
iBookstore

掲載しているのは代表的なストア
事実上の
標準規格
EPUB 3 ¦ International Digital Publishing Forum http://idpf.org/epub/30
Kindle Format 8
独自技術
EPUBとKindle Formatの歴史
Mobipocketを2005年に買収

OEBPS1.0

Apps

Open eBook Publication Structure

1999.9

2000

2007

2010

201...
採用されている標準技術

Kindle Format 8

HTML5

CSS3

XML

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

Graphics Interchange Format
可逆圧縮/ラスタグラフィックス
JPEG

Joint Photographic Experts Group
非可逆圧縮/ラスタグラフィックス
PNG

PNG-8, PNG-24, PNG-32
Portable Network Graphics
可逆圧縮/ラスタグラフィックス
SVG

Scalable Vector Graphics
ベクタグラフィックス
固定レイアウトの肝

画像の圧縮とデータサイズ
例:Apple iBookstore
ファイルサイズ上限は
「2GB」
(1GB未満を推奨)
Anomaly アノマリー
超ヘビー級・グラフィックノベル

Anomaly アノマリー

612MB 1,106ページ!
!
612MBをダウンロード...
フランケンウィニー エレクトリファイイング・ブック

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

Frankenweenie: An Electrifying Book

768MB

←高画質ビデオの埋め込み
Session-1:

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

Kindleプロダクションワーク

+
Session-4:

コンテンツの検証と販売
Kindleストアで
リリースするまでのプロセス
固定レイアウトの作成方法
EPUB 3から作成する方法

Kindle Format 8
固定レイアウト
固定レイアウト

Kindle Comic Creatorで作成する方法

Kindle Format 8
固定レイアウト
EPUB 3から作成する方法

Kindle Format 8
固定レイアウト
固定レイアウト

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

Kindle Format 8
固定レイアウト
固定レイアウト

EPUB 3 固定レイアウトを作成して
Kindle Format 8に変更する方法をお奨めしたい
...が、難易度が高いため
(EPUB 3とK...
Amazonが無償で提供している
オーサリングツールを使って作成する方法を
解説します

Kindle Comic Creatorで作成する方法

Kindle Format 8
固定レイアウト
準備前の基礎知識
KF8の仕様:データサイズ
リフロー:最大127KB
固定レイアウト(コミック以外):最大256KB
コミック:最大800KB
KF8の仕様:データサイズ
リフロー:最大127KB
固定レイアウト(コミック以外):最大256KB
コミック:最大800KB
最大256KB
記述なし
<meta name="book-type" content="children" />
...
KF8の仕様:データサイズ
リフロー:最大127KB
固定レイアウト(コミック以外):最大256KB
コミック:最大800KB
Kindle Comic Creator

最大800KB
<meta name="book-type" conte...
Kindle Comic Creator
http://www.amazon.com/kc2

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

PDF(.pdf)
JPEG(.jpg / .jpeg)
TIFF(.tif / .tiff)
PNG(.png)
...
ページ画像の準備
今回はあえて過酷な条件で...

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

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

Acrobatで画像書き出し
PDF

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

設定
解像度
5103x7158(600dpi)
11ページで、71.4MB

01.png 7.5MB
02.png 6.9MB
03.png 7.1MB
04.png 11.1MB
(C)デッサン力養成テキスト実行委員会

Photoshopでサイズ変更
幅を1200px(縦は1683pxになる)
縦を1920pxに広げる
解像度を72dpiにする
JPEGの最高画質で書き出す

01.jpg 590KB
02.jpg 500KB
03.jpg 565KB
04.jpg 840KB
(C)デッサ...
800x1280
Kindle Fire HD Nexus 7
(2012モデル)

1200x1920
Kindle Fire HDX Nexus 7
(2013モデル)

1600x2560
Kindle Fire HDX 8.9"
800x1280
Kindle Fire HD Nexus 7
(2012モデル)

1200x1920
Kindle Fire HDX Nexus 7
(2013モデル)

1600x2560
Kindle Fire HDX 8.9"

76...
Kindle Fire HD, HDX
Androidの大半のタブレット
iPad, iPad mini

スクリーンの比率が異なる
Kindle Fire HD, HDX
Androidの大半のタブレット
iPad, iPad mini

どちらにあわせても上下もしくは左右に余白ができる
幅を1200px(縦は1683pxになる)
縦を1920pxに広げる
解像度を72dpiにする
JPEGの最高画質で書き出す

01.jpg 590KB
02.jpg 500KB
03.jpg 565KB
04.jpg 840KB
JPEGmini
http://www.jpegmini.com/
Photoshop
JPEG最高画質

JPEGmini

01.jpg 590KB
02.jpg 500KB
03.jpg 565KB
04.jpg 840KB

01.jpg 283KB
02.jpg 217KB
03.jpg 176KB
...
ImageOptim
http://imageoptim.com/
Photoshop
PNG
(8bit)

ImageOptim

01.png 283KB
02.png 266KB
03.png 221KB
04.png 381KB

01.png 266KB
02.png 250KB
03.png 20...
Photoshop
JPEG最高画質

Photoshop
PNG
(8bit)

JPEGmini

ImageOptim

01.jpg 283KB
02.jpg 217KB
03.jpg 176KB
04.jpg 299KB

01.pn...
Photoshop
JPEG最高画質

Photoshop
PNG
(8bit)

JPEGmini

ImageOptim

01.jpg 283KB
02.jpg 217KB
03.jpg 176KB
04.jpg 299KB

01.pn...
Photoshop
PNG
(8bit)

ImageOptim
01.png 266KB
02.png 250KB
03.png 205KB
04.png 356KB
(C)デッサン力養成テキスト実行委員会

PNG
Photoshop
JPEG最高画質

JPEGmini
01.jpg 283KB
02.jpg 217KB
03.jpg 176KB
04.jpg 299KB
JPEG

(C)デッサン力養成テキスト実行委員会
ページデザイン
(C)デッサン力養成テキスト実行委員会
表紙
表紙

目次

章扉
表紙

目次

章扉
表紙

目次

章扉

奥付
表紙

目次

章扉

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

Photoshopで書き出し
表紙

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

目次

右ページ

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

章扉
左ページ

03

右ページ

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

04
左ページ

11

右ページ

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

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

(C)デッサン力養成テキスト実行委員会
マーケティングカバー
幅:1800px
高さ:2560px

本のページ
幅:1200px
高さ:1920px

(C)デッサン力養成テキスト
実行委員会
Kindle Comic Creator
http://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)
Appをクリック

iTunesを起動する
Kindleをクリック
追加をクリック
azkファイルを読み込む
iPad
ページをチェックする

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

見開きページをチェックする
Kindle for iPadの
メニュー

(C)デッサン力養成テキスト実行委員会
Kindle for iPadの
メニュー

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

(C)デッサン力養成テキスト実行委員会
NCX表示がないので

ページ番号を入力する

(C)デッサン力養成テキスト実行委員会
本の中に
目次のページを追加するには?
Kindle Comic Creatorの詳細設定
目次のページ
(HTML)
を作成して
読み込む必要がある

Kindle Comic Creatorの詳細設定
Kindle Fire HD, Kindle Paperwhiteは
目次
(NCX表示)
が使用できる
タブレットやスマートフォンなどは
目次
(NCX表示)
は使用できない
目次ページが必要な本かどうか
考えてみる
本
(コンテンツ)
に
組み込む目次ページを
作成する必要がある

HTMLの知識が必要
ページのリンクを指定するため
本の構成
(KF8の構造)
を知っておく必要がある
今回の制作指針では...

ページ数が少ない本なので
このまま発行する
目次ページの組み込みは後で解説します
Kindleダイレクト
パブリッシングで発行する
書く、
作る、
売る!Kindleで個人が出版する時代

国際電子出版EXPO
2013/7/5 東京ビックサイト
http://youtu.be/5nob1XTPxLo
1. 本の詳細
タイトル
フリガナ
ローマ字

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

出版者
(オプション)
ページめくりの方向
ローマ字
内容紹介
本の著者等
1. 本の詳細
タイトル
フリガナ
ローマ字

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

出版者
(オプション)
ページめくりの方向
ローマ字
内容紹介
本の著者等

USのKindleストアで表示される
2. 出版する権利を確認してください
3. お客様が本を見つけやすくする
カテゴリー
検索キーワード
(最大7つまで、オプション)

4. 表紙のアップロード
5. 本のアップロード
表紙のアップロード
ブラウザー上で
プレビューできる

本のアップロード
7. 販売地域を確認してください
8. ロイヤリティの選択
70%のロイヤリティ
35%のロイヤリティ

9. Kindle MatchBook
10. Kindle本のレンタル
例:
35%のロイヤリティ

Amazon.com
希望小売価格
$0.99USD
推定ロイヤリティ
$0.35
Amazon.co.jp
希望小売価格
¥100
推定ロイヤリティ
¥35
電子書籍の出版
6時間後
国内のKindleストア
(C)デッサン力養成テキスト実行委員会
USのKindleストア
(C)デッサン力養成テキスト実行委員会
PDFファイルを変換する

Kindle Comic Creator
漫画 on Web
http://mangaonweb.com

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

ブラッ...
PDFファイル

ほぼ自動変換

Mobiファイル
PDFファイル

25.5MB
200ページ

Mobiファイル
PDFファイル

449.3MB

25.5MB
200ページ

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

50MB未満
50MB未満
449.3MB

25.5MB
200ページ
PDFファイル

JPEG
PNG

JPEG
PNG

JPEG
PNG

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

PDFファイル

画像を圧縮

JPEG
PNG

JPEG
PNG

JPEG
PNG

JPEG
PNG

JPEG
PNG

JPEG
PNG
全ページの
画像ファイル

PDFファイル

画像を圧縮

JPEG
PNG

JPEG
PNG

JPEG
PNG

JPEG
PNG

JPEG
PNG

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

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

(C)デッサン力養成テキスト実行委員会
(C)デッサン力養成テキスト実行委員会
何度も目次ページに
戻らなくてもよいので便利

(C)デッサン力養成テキスト実行委員会
何度も目次ページに
戻らなくてもよいので便利

(C)デッサン力養成テキスト実行委員会
タブレットやスマートフォンなどは
目次
(NCX表示)
は使用できない
Nexus7

(C)デッサン力養成テキスト実行委員会
(C)デッサン力養成テキスト実行委員会
(C)デッサン力養成テキスト実行委員会
本
(コンテンツ)
に
組み込む目次ページを
作成する必要がある

HTMLの知識が必要
全ページの
画像ファイル
JPEG
PNG

JPEG
PNG

JPEG
PNG
全ページの
画像ファイル
JPEG
PNG

JPEG
PNG

JPEG
PNG
「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ファイルを読み込む
次のパネルビューで解説します
バーチャルパネルビュー
パネルビュー
KF8固定レイアウト・パネルビュー
Kingdom Come (New Edition) [Kindle Edition]
http://amzn.to/XEAQrv
パネルビューと
バーチャルパネルビューの違い
Amazonが提供しているKF8サンプル
バーチャルパネルビュー

ダブルタップする
バーチャルパネルビュー

2

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

4

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

2

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

4

3

固定レイアウトの本には自動的に搭載される
パネルビュー

ダブルタップする
パネルビュー

スワイプする
パネルビュー

スワイプする

拡大する領域を指定しなければいけない
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端末で表示される目次
裏表紙

奥付
裏表紙

奥付
目次の項目

目次の項目

エピソード05

Page-3.html

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

エピソード01-02

Page-2.html

Page-1.html

Page-0.html
NCX表示

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

html/Page-0.html
html/ Page-1.html
html/ Page-2.html
html/ Page-4.html
Kindle Comic Creatorの保存データ

エディタで開く
<navPoint playOrder="1" id="toc-1">

<navPoint playOrder="3" id="toc-3">

 <navLabel>

 <navLabel>

  <text>エピソード01-02</te...
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">
 <itemre...
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 HD
Android

iOS
テキストポップアップ
KF8固定レイアウト・テキストポップアップ
Twas The Night Before Christmas (AniMotion)
[Kindle Edition]
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:
Templates
http://authoradventures.blogspot.jp/p/templates.html
ダブルタップ
HTML
<img src="../images/door-closed.jpg" alt="" class="fullpage"/>
<div class="txt mag13-1">
<a class="app-amzn-magnify"
...
HTML
<img src="../images/door-closed.jpg" alt="" class="fullpage"/>
<div class="txt mag13-1">
<a class="app-amzn-magnify"
...
HTML
<img src="../images/door-closed.jpg" alt="" class="fullpage"/>
<div class="txt mag13-1">
<a class="app-amzn-magnify"
...
4.2.3 必須条件#3: 背景画像として画像を設定
固定レイアウト本における画像は、(HTML <img>タ
グを使用する代わりに)CSS background-imageプ
ロパティを用いて背景画像として設定しなければなり
ません。
HTM...
Kindleでのパブリッシング:
出版者ガイドライン
4.2.2 必須条件 #2:
領域拡大の使用(ポップアップ)

ダウンロード
Kindleパブリッシング・ガイドライン
http://bit.ly/T3e4J2
フォント埋め込み
CircularFLO
サーキュラーFLO
http://www.circularsoftware.com/opensample-circularflo-ebook/

固定レイアウト
固定レイアウト
固定レイアウト
固定レイアウト
埋め込まれているフォント
@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 {
fo...
body{
width:1224px;
height:1632px;
margin: 0;
}
div.textFrame {
position:absolute;
padding:0px;
margin:0px;
z-index: 100;
...
left: 16%;
top: 3.6%;
height: 0.8%;
width: 24%;
div.textFrame {
position:absolute;
padding:0px;
margin:0px;
z-index: 100;
...
left: 16%;
top: 3.6%;
height: 0.8%;
width: 24%;
div.textFrame {
position:absolute;
padding:0px;
margin:0px;
z-index: 100;
...
テキスト配置の目次ページ
クリッカブルマップの代替として
CircularFLO
サーキュラーFLO
http://www.circularsoftware.com/opensample-circularflo-ebook/

固定レイアウト
電子書籍の中の目次ページ
電子書籍の中の目次ページ

日本語フォントを
埋め込めば
見栄えが向上
応用編-2
CSSによるページデザイン
http://www.design-zero.tv/Webcast/Seminar_20131126/demo.html
http://www.design-zero.tv/Webcast/Seminar_20131126/demo.html
http://www.design-zero.tv/Webcast/Seminar_20131126/demo.html
メディアクエリを活用した例
Session-2: EPUB 3プロダクションワークで解説します

スクリーンの幅が狭い場合は全段
指定した値より
大きい場合は2段組

Kindle Paperwhite
Session-2:

EPUB 3プロダクションワーク
事実上の
標準規格
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

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

cover

nav

cover.xhtml

nav.xhtml

page01

page02

photo

page04

page01.xhtml

page02.xhtml

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

cover

nav

cover.xhtml

nav.xhtml

page01

page02

page01.xhtml

page02.xhtml

表紙

目次

合成された見開きの写真

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

Readiumを対象に
http://bit.ly/14Xgzzm
2種類のストーリーを
1つのEPUBファイルに収録
メディアクエリで切り替える
メディアクエリ

Media Queries
Media Queries
幅が480px以下の場合
@media screen and (max-width: 480px) {
 h1 {
  color: red;
 }
}
Media Queries
幅が480px以下の場合
@media screen and (max-width: 480px) {
 h1 {
  color: red;
 }
}

ウィンドウの幅が480px以下の場合
見出しの色を赤にする
スクリーンの幅が狭い場合は全段

例:

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

Himawari Reader Android 4.2)
(
固定レイアウトのデメリット
固定レイアウトでは
読めない

広い
狭い
タブレット

スマートフォン
タブレット

フルバージョン

スマホ最適化
ショートバージョン
スマートフォン
フルバージョン
タブレット

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

スマートフォン
デモンストレーション
Session-3:

HTML5プロダクションワーク
HTML5 CSS3 XML
SVG SMIL
W3C
World Wide Web Consortium
ワールドワイドウェブ・コンソーシアム
http://www.w3.org

HTML, CSS,
XMLなど
ウェブの技術を
策定
第1回
(11日)
のデモから

HTML5

CSS3
HTMLでマガジンも作成できる
第1回
(11日)
のデモから

Financial Times
http://www.ft.com
ビデオ:02_20131111_FT_Web_App.mp4
ウェブ漫画
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....
著者がイベントに登壇

電子書籍

コミュニティ

メディア

A Book Apart

An Event Apart

A List Apart

http://www.abookapart.com

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

電子書籍

コミュニティ

メディア

A Book Apart

An Event Apart

A List Apart

http://www.abookapart.com

http://a...
電子書籍
著者

著者

イベント

メディア

出演・講演

記事の執筆

著者
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=3...
新しい技術と共に登場
ビデオ漫画
マルチメディア
ウェブ漫画
ケータイコミック
+
漫画

ブラックジャックによろしく
第2巻(ダウンロード)
http://mangaonweb.com/creatorOCComicDetail.do?no=3...
新しい技術と共に登場
ビデオ漫画
マルチメディア
ウェブ漫画
ケータイコミック
+
漫画

ブラックジャックによろしく
第2巻(ダウンロード)
http://mangaonweb.com/creatorOCComicDetail.do?no=3...
コミック&グラフィックノベル
プロダクションワーク
∼Kindleダイレクトパブリッシング・EPUB 3
HTML5ウェブコンテンツ∼
ウェブで読む漫画/グラフィックノベルの
表現・販売・プロモーション
2013年11月26日(火)PM18:3...
community
電子書籍メデ ア論
ィ
http://www.facebook.com/eBookStrategy

デザインの未来
http://www.facebook.com/TheFutureDesign
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
Prochain SlideShare
Chargement dans…5
×

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

コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜
ウェブで読む漫画/グラフィックノベルの表現・販売・プロモーション
http://www.design-zero.tv/Webcast/Seminar_20131126/index.html

2013年11月26日(火)午後6時30分〜8時30分
セシオン杉並

  • Soyez le premier à commenter

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

  1. 1. コミック&グラフィックノベル プロダクションワーク ∼Kindleダイレクトパブリッシング・EPUB 3 HTML5ウェブコンテンツ∼ ウェブで読む漫画/グラフィックノベルの 表現・販売・プロモーション 2013年11月26日(火)PM18:30-20:30 /東京都杉並区(セシオン杉並 2F 視聴覚教室)
  2. 2. profile YOUJI SAKAI Instructional Designer | eBook Designer 境祐司
  3. 3. 主な著書 BOOKS ※海外版、ムックを含むと60冊ほど 『速習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デザイン基礎』(技術評論社)など。
  4. 4. community 電子書籍メデ ア論 ィ http://www.facebook.com/eBookStrategy デザインの未来 http://www.facebook.com/TheFutureDesign
  5. 5. テキスト
  6. 6. 本日は、 毎年恒例の 自主興行的な発表会 (第3回) です デザインの未来 プロジェクト 学校法人阿佐ヶ谷学園 高度情報化内 https://www.facebook.com/TheFutureDesign http://commonstyle2011.wordpress.com/ 166-0011 東京都杉並区梅里1-3-3
  7. 7. 固定レイアウトを制する ! 漫画・グラフィックノベル・写真集・絵本 アートブック・アートマガジン
  8. 8. Session-1: Kindleプロダクションワーク Session-2: EPUB 3プロダクションワーク Session-3: HTML5プロダクションワーク Session-4: コンテンツの検証と販売 Session-5: ウェブプロモーション Session-6: コミック・グラフィックノベル・写真集の新しい表現
  9. 9. Session-1: Kindleプロダクションワーク Session-2: EPUB 3プロダクションワーク Session-3: HTML5プロダクションワーク Session-4: コンテンツの検証と販売 作る ! Session-5: ウェブプロモーション Session-6: コミック・グラフィックノベル・写真集の新しい表現
  10. 10. Session-1: Kindleプロダクションワーク 発表する ! Session-2: EPUB 3プロダクションワーク Session-3: HTML5プロダクションワーク Session-4: コンテンツの検証と販売 Session-5: ウェブプロモーション Session-6: 販売する ! コミック・グラフィックノベル・写真集の新しい表現
  11. 11. Session-1: Kindleプロダクションワーク Session-2: EPUB 3プロダクションワーク プロモーションする ! Session-3: HTML5プロダクションワーク Session-4: コンテンツの検証と販売 Session-5: ウェブプロモーション Session-6: コミック・グラフィックノベル・写真集の新しい表現
  12. 12. Session-1: Kindleプロダクションワーク Session-2: EPUB 3プロダクションワーク Session-3: HTML5プロダクションワーク 新しい表現を模索する Session-4: コンテンツの検証と販売 Session-5: ウェブプロモーション Session-6: コミック・グラフィックノベル・写真集の新しい表現
  13. 13. Session-1: Kindleプロダクションワーク Session-2: EPUB 3プロダクションワーク Session-3: HTML5プロダクションワーク Session-4: コンテンツの検証と販売 Session-5: ウェブプロモーション Session-6: コミック・グラフィックノベル・写真集の新しい表現
  14. 14. Session-1: すぐ実践 できる Kindleプロダクションワーク Session-2: EPUB 3プロダクションワーク Session-3: HTML5プロダクションワーク Session-4: コンテンツの検証と販売 Session-5: ウェブプロモーション Session-6: コミック・グラフィックノベル・写真集の新しい表現
  15. 15. 基礎知識
  16. 16. 電子書籍の技術
  17. 17. 電子書籍の技術
  18. 18. リフローと固定レイアウト
  19. 19. ビジュアルで構成されている本 漫画, 絵本, 写真集など リフローと固定レイアウト テキストが主体の書籍
  20. 20. iBookstore 夢追い漫画家60年 藤子不二雄A iBookstore 彼岸島 33 松本光司
  21. 21. iBookstore 夢追い漫画家60年 藤子不二雄A リフロー 固定レイアウト iBookstore 彼岸島 33 松本光司
  22. 22. ビジュアルで構成されている本 漫画, 絵本, 写真集など リフローと固定レイアウト 今日のテーマ テキストが主体の書籍
  23. 23. iBookstore 彼岸島 33 松本光司
  24. 24. 写真集サンプル Readium(Google Chrome)で表示
  25. 25. 写真集サンプル Readium(Google Chrome)で表示
  26. 26. 写真集サンプル Androidスマートフォン Himawari Reader Proで サンプルを表示
  27. 27. 固定レイアウトの表現
  28. 28. 固定レイアウトの表現 横書き
  29. 29. 日本の漫画 縦書き 固定レイアウトの表現
  30. 30. 固定レイアウトの表現 横向きに固定
  31. 31. 固定レイアウトの表現 横向きに固定 絵本など
  32. 32. 固定レイアウトの表現 横向きに固定 絵本など デバイスを縦向きにしても回転しない
  33. 33. 固定レイアウトの表現 固定レイアウト リフロー
  34. 34. 電子書籍フォーマット
  35. 35. 電子書籍フォーマット EPUB 3, KF8/Mobi7, XMDF, .book ... iBookstore 掲載しているのは代表的なストア
  36. 36. 事実上の 標準規格 EPUB 3 ¦ International Digital Publishing Forum http://idpf.org/epub/30
  37. 37. Kindle Format 8 独自技術
  38. 38. EPUBとKindle Formatの歴史 Mobipocketを2005年に買収 OEBPS1.0 Apps Open eBook Publication Structure 1999.9 2000 2007 2010 2012 .book XMDF EPUB2.0 EPUB 3.0 2011.10.11 2007年 Kindle 開始 Kindle Format 8
  39. 39. 採用されている標準技術 Kindle Format 8 HTML5 CSS3 XML SVG
  40. 40. 画像形式の種類 GIF, JPEG, PNG, SVG
  41. 41. GIF Graphics Interchange Format 可逆圧縮/ラスタグラフィックス
  42. 42. JPEG Joint Photographic Experts Group 非可逆圧縮/ラスタグラフィックス
  43. 43. PNG PNG-8, PNG-24, PNG-32 Portable Network Graphics 可逆圧縮/ラスタグラフィックス
  44. 44. SVG Scalable Vector Graphics ベクタグラフィックス
  45. 45. 固定レイアウトの肝 画像の圧縮とデータサイズ
  46. 46. 例:Apple iBookstore ファイルサイズ上限は 「2GB」 (1GB未満を推奨)
  47. 47. Anomaly アノマリー
  48. 48. 超ヘビー級・グラフィックノベル Anomaly アノマリー 612MB 1,106ページ! !
  49. 49. 612MBをダウンロード...
  50. 50. フランケンウィニー エレクトリファイイング・ブック Frankenweenie: An Electrifying Book
  51. 51. フランケンウィニー エレクトリファイイング・ブック Frankenweenie: An Electrifying Book 768MB ←高画質ビデオの埋め込み
  52. 52. Session-1: Kindleプロダクションワーク
  53. 53. Session-1: Kindleプロダクションワーク + Session-4: コンテンツの検証と販売
  54. 54. Kindleストアで リリースするまでのプロセス
  55. 55. 固定レイアウトの作成方法
  56. 56. EPUB 3から作成する方法 Kindle Format 8 固定レイアウト 固定レイアウト Kindle Comic Creatorで作成する方法 Kindle Format 8 固定レイアウト
  57. 57. EPUB 3から作成する方法 Kindle Format 8 固定レイアウト 固定レイアウト EPUB 3 固定レイアウトを作成して Kindle Format 8に変更する方法をお奨めしたい
  58. 58. EPUB 3から作成する方法 Kindle Format 8 固定レイアウト 固定レイアウト EPUB 3 固定レイアウトを作成して Kindle Format 8に変更する方法をお奨めしたい ...が、難易度が高いため (EPUB 3とKF8両方の知識が必要)
  59. 59. Amazonが無償で提供している オーサリングツールを使って作成する方法を 解説します Kindle Comic Creatorで作成する方法 Kindle Format 8 固定レイアウト
  60. 60. 準備前の基礎知識
  61. 61. KF8の仕様:データサイズ リフロー:最大127KB 固定レイアウト(コミック以外):最大256KB コミック:最大800KB
  62. 62. KF8の仕様:データサイズ リフロー:最大127KB 固定レイアウト(コミック以外):最大256KB コミック:最大800KB 最大256KB 記述なし <meta name="book-type" content="children" /> 最大800KB <meta name="book-type" content="comic" />
  63. 63. KF8の仕様:データサイズ リフロー:最大127KB 固定レイアウト(コミック以外):最大256KB コミック:最大800KB Kindle Comic Creator 最大800KB <meta name="book-type" content="comic" />
  64. 64. Kindle Comic Creator http://www.amazon.com/kc2 サポートしている ファイル形式 PDF(.pdf) JPEG(.jpg / .jpeg) TIFF(.tif / .tiff) PNG(.png) PPM(.ppm)
  65. 65. ページ画像の準備
  66. 66. 今回はあえて過酷な条件で... 今日、 PDFファイルをもらい 明日リリースしたい
  67. 67. PDF (C)デッサン力養成テキスト 実行委員会 Acrobatで画像書き出し
  68. 68. PDF (C)デッサン力養成テキスト 実行委員会
  69. 69. PNG 設定
  70. 70. 解像度
  71. 71. 5103x7158(600dpi) 11ページで、71.4MB 01.png 7.5MB 02.png 6.9MB 03.png 7.1MB 04.png 11.1MB
  72. 72. (C)デッサン力養成テキスト実行委員会 Photoshopでサイズ変更
  73. 73. 幅を1200px(縦は1683pxになる) 縦を1920pxに広げる 解像度を72dpiにする JPEGの最高画質で書き出す 01.jpg 590KB 02.jpg 500KB 03.jpg 565KB 04.jpg 840KB (C)デッサン力養成テキスト実行委員会
  74. 74. 800x1280 Kindle Fire HD Nexus 7 (2012モデル) 1200x1920 Kindle Fire HDX Nexus 7 (2013モデル) 1600x2560 Kindle Fire HDX 8.9"
  75. 75. 800x1280 Kindle Fire HD Nexus 7 (2012モデル) 1200x1920 Kindle Fire HDX Nexus 7 (2013モデル) 1600x2560 Kindle Fire HDX 8.9" 768x1024 iPad2 iPad mini 1536x2048 iPad Air iPad mini Retina
  76. 76. Kindle Fire HD, HDX Androidの大半のタブレット iPad, iPad mini スクリーンの比率が異なる
  77. 77. Kindle Fire HD, HDX Androidの大半のタブレット iPad, iPad mini どちらにあわせても上下もしくは左右に余白ができる
  78. 78. 幅を1200px(縦は1683pxになる) 縦を1920pxに広げる 解像度を72dpiにする JPEGの最高画質で書き出す 01.jpg 590KB 02.jpg 500KB 03.jpg 565KB 04.jpg 840KB
  79. 79. JPEGmini http://www.jpegmini.com/
  80. 80. Photoshop JPEG最高画質 JPEGmini 01.jpg 590KB 02.jpg 500KB 03.jpg 565KB 04.jpg 840KB 01.jpg 283KB 02.jpg 217KB 03.jpg 176KB 04.jpg 299KB
  81. 81. ImageOptim http://imageoptim.com/
  82. 82. Photoshop PNG (8bit) ImageOptim 01.png 283KB 02.png 266KB 03.png 221KB 04.png 381KB 01.png 266KB 02.png 250KB 03.png 205KB 04.png 356KB
  83. 83. Photoshop JPEG最高画質 Photoshop PNG (8bit) JPEGmini ImageOptim 01.jpg 283KB 02.jpg 217KB 03.jpg 176KB 04.jpg 299KB 01.png 266KB 02.png 250KB 03.png 205KB 04.png 356KB JPEG PNG
  84. 84. Photoshop JPEG最高画質 Photoshop PNG (8bit) JPEGmini ImageOptim 01.jpg 283KB 02.jpg 217KB 03.jpg 176KB 04.jpg 299KB 01.png 266KB 02.png 250KB 03.png 205KB 04.png 356KB JPEG PNG
  85. 85. Photoshop PNG (8bit) ImageOptim 01.png 266KB 02.png 250KB 03.png 205KB 04.png 356KB (C)デッサン力養成テキスト実行委員会 PNG
  86. 86. Photoshop JPEG最高画質 JPEGmini 01.jpg 283KB 02.jpg 217KB 03.jpg 176KB 04.jpg 299KB JPEG (C)デッサン力養成テキスト実行委員会
  87. 87. ページデザイン
  88. 88. (C)デッサン力養成テキスト実行委員会
  89. 89. 表紙
  90. 90. 表紙 目次 章扉
  91. 91. 表紙 目次 章扉
  92. 92. 表紙 目次 章扉 奥付
  93. 93. 表紙 目次 章扉 奥付
  94. 94. (C)デッサン力養成テキスト実行委員会 Photoshopで書き出し
  95. 95. 表紙 (C)デッサン力養成テキスト 実行委員会
  96. 96. 左ページ 目次 右ページ (C)デッサン力養成テキスト実行委員会 章扉
  97. 97. 左ページ 03 右ページ (C)デッサン力養成テキスト実行委員会 04
  98. 98. 左ページ 11 右ページ (C)デッサン力養成テキスト実行委員会 奥付
  99. 99. 本の表紙
  100. 100. Kindleでは 本と表紙を分離 マーケティングカバー と言います (C)デッサン力養成テキスト実行委員会
  101. 101. マーケティングカバー 幅:1800px 高さ:2560px 本のページ 幅:1200px 高さ:1920px (C)デッサン力養成テキスト 実行委員会
  102. 102. Kindle Comic Creator http://www.amazon.co.jp/gp/feature.html?docId=3077699036
  103. 103. 本のページ 表紙 マーケティングカバー
  104. 104. 本のページ
  105. 105. デスクトップにフォルダを作成しておく
  106. 106. 基本設定 パネルビューの作成 (はい・いいえ) 縦置き・横置き アンロック 左から右へ 右から左へ ページのサイズ デバイスの方向を固定しない
  107. 107. 基本設定 右から左へ (日本の漫画) 左から右へ
  108. 108. 本の言語:日本語
  109. 109. Kindleパネルビュー:いいえ
  110. 110. 本の組方向(横組/縦組):アンロック
  111. 111. 本のページ進行方向(右開き/左開き):左から右へ
  112. 112. 本のページサイズ:デフォルト(800x1280)
  113. 113. タイトル:本のタイトル 著者:本の作者名 出版社:出版社名もしくは発行人
  114. 114. カバー画像の場所
  115. 115. 保存先の場所
  116. 116. 詳細設定
  117. 117. ページ画像をすべて選択して読み込む
  118. 118. Kindle Comic Creatorの編集画面 (C)デッサン力養成テキスト実行委員会
  119. 119. Kindle Comic Creatorの編集画面 全てを見開きページに設定 (C)デッサン力養成テキスト実行委員会
  120. 120. Kindle Comic Creatorの編集画面 ページタイトルを変更する (C)デッサン力養成テキスト実行委員会
  121. 121. Kindle Comic Creatorの編集画面 目次の項目になる (C)デッサン力養成テキスト実行委員会
  122. 122. Kindle Comic Creatorの編集画面 保存する (C)デッサン力養成テキスト実行委員会
  123. 123. Kindle Comic Creatorの編集画面 KF8ブックとしてエクスポート (C)デッサン力養成テキスト実行委員会
  124. 124. 名前を付けて保存 ※拡張子「.mobi」を忘れずに
  125. 125. 完成 (C)デッサン力養成テキスト実行委員会
  126. 126. 保存フォルダの内容 KF8ブック (Mobiファイル)
  127. 127. 本の検証 Kindleプレビューツール http://amzn.to/17S81Oy
  128. 128. デフォルトのデバイスモード: Kindle Fire HD デフォルトの方向: 縦
  129. 129. 書き出したMobiファイルをドラッグする
  130. 130. ページをチェックする (C)デッサン力養成テキスト実行委員会
  131. 131. ランドスケープモード 見開きページをチェックする (C)デッサン力養成テキスト実行委員会
  132. 132. NCX表示をチェックする
  133. 133. NCX表示 NCX表示をチェックする
  134. 134. デバイスの切り替え
  135. 135. Kindle Paperwhite (C)デッサン力養成テキスト実行委員会
  136. 136. Kindle Paperwhiteを 対象デバイスにするか 要検討 Kindle Paperwhite (C)デッサン力養成テキスト実行委員会
  137. 137. iOSは特別な作業が必要
  138. 138. 「本の変換に成功しました」と表示される
  139. 139. iOSの検証ファイル 拡張子 「.azk」
  140. 140. iOSデバイスを接続する (iPad, iPad mini, iPhone, iPod touch)
  141. 141. Appをクリック iTunesを起動する
  142. 142. Kindleをクリック
  143. 143. 追加をクリック azkファイルを読み込む
  144. 144. iPad
  145. 145. ページをチェックする (C)デッサン力養成テキスト実行委員会
  146. 146. (C)デッサン力養成テキスト実行委員会 見開きページをチェックする
  147. 147. Kindle for iPadの メニュー (C)デッサン力養成テキスト実行委員会
  148. 148. Kindle for iPadの メニュー NCX表示は反映されない Androidも同じ (C)デッサン力養成テキスト実行委員会
  149. 149. NCX表示がないので ページ番号を入力する (C)デッサン力養成テキスト実行委員会
  150. 150. 本の中に 目次のページを追加するには?
  151. 151. Kindle Comic Creatorの詳細設定
  152. 152. 目次のページ (HTML) を作成して 読み込む必要がある Kindle Comic Creatorの詳細設定
  153. 153. Kindle Fire HD, Kindle Paperwhiteは 目次 (NCX表示) が使用できる
  154. 154. タブレットやスマートフォンなどは 目次 (NCX表示) は使用できない
  155. 155. 目次ページが必要な本かどうか 考えてみる
  156. 156. 本 (コンテンツ) に 組み込む目次ページを 作成する必要がある HTMLの知識が必要
  157. 157. ページのリンクを指定するため 本の構成 (KF8の構造) を知っておく必要がある
  158. 158. 今回の制作指針では... ページ数が少ない本なので このまま発行する 目次ページの組み込みは後で解説します
  159. 159. Kindleダイレクト パブリッシングで発行する
  160. 160. 書く、 作る、 売る!Kindleで個人が出版する時代 国際電子出版EXPO 2013/7/5 東京ビックサイト http://youtu.be/5nob1XTPxLo
  161. 161. 1. 本の詳細 タイトル フリガナ ローマ字 言語 発売日 18歳未満の方に 不適切な表現内容 出版者 (オプション) ページめくりの方向 ローマ字 内容紹介 本の著者等
  162. 162. 1. 本の詳細 タイトル フリガナ ローマ字 言語 発売日 18歳未満の方に 不適切な表現内容 出版者 (オプション) ページめくりの方向 ローマ字 内容紹介 本の著者等 USのKindleストアで表示される
  163. 163. 2. 出版する権利を確認してください 3. お客様が本を見つけやすくする カテゴリー 検索キーワード (最大7つまで、オプション) 4. 表紙のアップロード 5. 本のアップロード
  164. 164. 表紙のアップロード
  165. 165. ブラウザー上で プレビューできる 本のアップロード
  166. 166. 7. 販売地域を確認してください 8. ロイヤリティの選択 70%のロイヤリティ 35%のロイヤリティ 9. Kindle MatchBook 10. Kindle本のレンタル
  167. 167. 例: 35%のロイヤリティ Amazon.com 希望小売価格 $0.99USD 推定ロイヤリティ $0.35 Amazon.co.jp 希望小売価格 ¥100 推定ロイヤリティ ¥35
  168. 168. 電子書籍の出版
  169. 169. 6時間後
  170. 170. 国内のKindleストア (C)デッサン力養成テキスト実行委員会
  171. 171. USのKindleストア (C)デッサン力養成テキスト実行委員会
  172. 172. PDFファイルを変換する Kindle Comic Creator
  173. 173. 漫画 on Web http://mangaonweb.com ブラックジャックによろしく http://mangaonweb.com/creatorOCCategoryDetail.do?action=list&no=2&cn=1 ブラックジャックによろしく 第2巻(ダウンロード) http://mangaonweb.com/creatorOCComicDetail.do?no=30954&cn=1
  174. 174. PDFファイル ほぼ自動変換 Mobiファイル
  175. 175. PDFファイル 25.5MB 200ページ Mobiファイル
  176. 176. PDFファイル 449.3MB 25.5MB 200ページ Mobiファイル
  177. 177. Kindleダイレクトパブリッシング アップロードできるデータサイズ 50MB未満
  178. 178. 50MB未満 449.3MB 25.5MB 200ページ
  179. 179. PDFファイル JPEG PNG JPEG PNG JPEG PNG 全ページの 画像ファイル
  180. 180. 全ページの 画像ファイル PDFファイル 画像を圧縮 JPEG PNG JPEG PNG JPEG PNG JPEG PNG JPEG PNG JPEG PNG
  181. 181. 全ページの 画像ファイル PDFファイル 画像を圧縮 JPEG PNG JPEG PNG JPEG PNG JPEG PNG JPEG PNG JPEG PNG
  182. 182. 本の中に目次ページを追加する Kindle Comic Creator
  183. 183. Kindle Fire HD, Kindle Paperwhiteは 目次 (NCX表示) が使用できる
  184. 184. Kindle Fire HD (C)デッサン力養成テキスト実行委員会
  185. 185. (C)デッサン力養成テキスト実行委員会
  186. 186. 何度も目次ページに 戻らなくてもよいので便利 (C)デッサン力養成テキスト実行委員会
  187. 187. 何度も目次ページに 戻らなくてもよいので便利 (C)デッサン力養成テキスト実行委員会
  188. 188. タブレットやスマートフォンなどは 目次 (NCX表示) は使用できない
  189. 189. Nexus7 (C)デッサン力養成テキスト実行委員会
  190. 190. (C)デッサン力養成テキスト実行委員会
  191. 191. (C)デッサン力養成テキスト実行委員会
  192. 192. 本 (コンテンツ) に 組み込む目次ページを 作成する必要がある HTMLの知識が必要
  193. 193. 全ページの 画像ファイル JPEG PNG JPEG PNG JPEG PNG
  194. 194. 全ページの 画像ファイル JPEG PNG JPEG PNG JPEG PNG
  195. 195. 「Text」 フォルダ
  196. 196. part0000, part0001, part0002 ...
  197. 197. part0000, part0001, part0002 ...
  198. 198. Kindle Comic Creatorで 保存したデータ
  199. 199. Kindle Comic Creatorの編集画面 保存する
  200. 200. 保存フォルダの内容
  201. 201. Page-0, Page-1, Page-2 ... html/Page-0.html と指定 1ページ目の場合
  202. 202. 詳細設定で目次のHTMLファイルを読み込む
  203. 203. 次のパネルビューで解説します
  204. 204. バーチャルパネルビュー パネルビュー
  205. 205. KF8固定レイアウト・パネルビュー Kingdom Come (New Edition) [Kindle Edition] http://amzn.to/XEAQrv
  206. 206. パネルビューと バーチャルパネルビューの違い Amazonが提供しているKF8サンプル
  207. 207. バーチャルパネルビュー ダブルタップする
  208. 208. バーチャルパネルビュー 2 1 ダブルタップすると 1/4の領域が画面一杯に拡大 スワイプで ズーム領域をスクロール 4 3
  209. 209. バーチャルパネルビュー 2 1 ダブルタップすると 1/4の領域が画面一杯に拡大 スワイプで ズーム領域をスクロール 4 3 固定レイアウトの本には自動的に搭載される
  210. 210. パネルビュー ダブルタップする
  211. 211. パネルビュー スワイプする
  212. 212. パネルビュー スワイプする 拡大する領域を指定しなければいけない
  213. 213. Kindleパネルビュー:はい
  214. 214. 告知ページから素材をダウンロードできます http://www.design-zero.tv/Webcast/Seminar_20131126/
  215. 215. フォルダ名: KDP_Tutorial_20130517 空のフォルダ
  216. 216. Kindleパネルビュー:はい
  217. 217. ドラッグして順番を変更
  218. 218. パネル検出は便利な機能だが 少女漫画などは無理 (コマが矩形とは限らない)
  219. 219. Kindle Fire HD
  220. 220. Kindle Fire HD ダブルタップ
  221. 221. Kindle Paperwhite
  222. 222. 目次 (NCX表示) の修正
  223. 223. Kindle Comic Creatorの保存データ
  224. 224. Kindle Comic Creatorの保存データ Kindle端末で表示される目次
  225. 225. 裏表紙 奥付
  226. 226. 裏表紙 奥付
  227. 227. 目次の項目 目次の項目 エピソード05 Page-3.html 目次の項目 エピソード03-04 エピソード01-02 Page-2.html Page-1.html Page-0.html
  228. 228. NCX表示 ・エピソード01-02 ・エピソード03-04 ・エピソード05 ・奥付 html/Page-0.html html/ Page-1.html html/ Page-2.html html/ Page-4.html
  229. 229. Kindle Comic Creatorの保存データ エディタで開く
  230. 230. <navPoint playOrder="1" id="toc-1"> <navPoint playOrder="3" id="toc-3">  <navLabel>  <navLabel>   <text>エピソード01-02</text>   <text>エピソード05</text>  </navLabel>  </navLabel>  <content src="html/Page-0.html"/>  <content src="html/Page-2.html"/> </navPoint> </navPoint> <navPoint playOrder="2" id="toc-2"> <navPoint playOrder="4" id="toc-4">  <navLabel>  <navLabel>   <text>エピソード03-04</text>   <text>奥付</text>  </navLabel>  </navLabel>  <content src="html/Page-1.html"/>  <content src="html/Page-4.html"/> </navPoint> </navPoint>
  231. 231. Kindleプレビューツール content.opfを ドラッグする Kindle Comic Creatorの保存データ
  232. 232. Kindleプレビューツール 「Kindleプレビューアにより本が正常に コンパイルされました」と表示される
  233. 233. Kindleプレビューツール ・エピソード01-02 ・エピソード03-04 ・エピソード05 ・奥付
  234. 234. Kindleプレビューツールで変換されたファイル
  235. 235. Kindle Comic Creatorで開くと 書き変わってしまうので注意! Kindle Comic Creatorの保存データ
  236. 236. 電子書籍の中の目次ページを追加する 追加する
  237. 237. 目次ページを作成する nav.html
  238. 238. <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"/> content.opfに 目次ページの指定を 追加する  <itemref idref="item-8" linear="yes"/> </spine> <guide>  <reference type="toc" title="目次" href="nav.html" /> </guide>
  239. 239. Kindleプレビューツール content.opfを ドラッグする
  240. 240. Nexus7
  241. 241. Nexus7
  242. 242. 目次ページが表示され リンクも機能するが 小さすぎる
  243. 243. 見栄えはCSSで指定する必要がある
  244. 244. 簡単なCSSを追加
  245. 245. Nexus7
  246. 246. 電子書籍の中の目次ページ
  247. 247. Kindle Paperwhite
  248. 248. Kindle Paperwhite HTMLではなく画像
  249. 249. Kindle Paperwhite HTMLではなく画像 NCX表示があるので 致命的な問題ではない
  250. 250. 6時間後
  251. 251. Kindle for iOS
  252. 252. Kindle for iOS 問題なし 問題なし
  253. 253. Kindle for iOS CSSが適用 されていない...
  254. 254. KindleFire HD Android iOS
  255. 255. テキストポップアップ
  256. 256. KF8固定レイアウト・テキストポップアップ Twas The Night Before Christmas (AniMotion) [Kindle Edition] http://amzn.to/VrpUHo
  257. 257. Amazonが提供しているKF8サンプル
  258. 258. 固定レイアウト - グラフィックノベル・絵本 KindleGen Examples - Samples
  259. 259. 固定レイアウト - グラフィックノベル・絵本 KindleGen Examples - Samples テキストポップアップ
  260. 260. Kindle Fire HD
  261. 261. Kindle Fire HD ダブルタップ
  262. 262. Kindle Paperwhite
  263. 263. 文字は大きくて読みやすいが 見た目がよくない
  264. 264. 見栄えはCSSで指定する必要がある
  265. 265. 応用編-1
  266. 266. スワップイメージ フォント埋め込み テキスト配置の目次ページ クリッカブルマップの代替として
  267. 267. スワップイメージ
  268. 268. Scot's Blog: Templates http://authoradventures.blogspot.jp/p/templates.html
  269. 269. ダブルタップ
  270. 270. 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> CSS div.target-mag13-1 { position: absolute; display: none; font-size: 150%; background-image: url("../images/door-open-overlay.jpg"); background-repeat: no-repeat; }
  271. 271. 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> ページの画像 CSS div.target-mag13-1 { position: absolute; ページ画像の上に重なる背景画像 display: none; font-size: 150%; background-image: url("../images/door-open-overlay.jpg"); background-repeat: no-repeat; }
  272. 272. 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> CSS div.target-mag13-1 { position: absolute; display: none; font-size: 150%; background-image: url("../images/door-open-overlay.jpg"); background-repeat: no-repeat; }
  273. 273. 4.2.3 必須条件#3: 背景画像として画像を設定 固定レイアウト本における画像は、(HTML <img>タ グを使用する代わりに)CSS background-imageプ ロパティを用いて背景画像として設定しなければなり ません。 HTML画像は背景画像として設定されていない場合、 領域拡大に影響されるため、児童用コンテンツや漫画 本においてこれは重要なポイントです。 背景画像が正しく設定されいない場合、ダブルタップ を行っても画像はイメージビューア内で開きません。
  274. 274. Kindleでのパブリッシング: 出版者ガイドライン 4.2.2 必須条件 #2: 領域拡大の使用(ポップアップ) ダウンロード Kindleパブリッシング・ガイドライン http://bit.ly/T3e4J2
  275. 275. フォント埋め込み
  276. 276. CircularFLO サーキュラーFLO http://www.circularsoftware.com/opensample-circularflo-ebook/ 固定レイアウト
  277. 277. 固定レイアウト
  278. 278. 固定レイアウト
  279. 279. 固定レイアウト
  280. 280. 埋め込まれているフォント
  281. 281. @font-face { font-family:"Minion Pro"; font-style:normal; font-weight:normal; src : url(../Fonts/font00042.otf); }
  282. 282. @font-face { font-family:"Minion Pro"; font-style:normal; font-weight:normal; src : url(../Fonts/font00042.otf); }
  283. 283. @font-face { font-family:"Minion Pro"; font-style:normal; font-weight:normal; src : url(../Fonts/font00042.otf); } h2 { font-family:"Minion Pro", serif; }
  284. 284. body{ width:1224px; height:1632px; margin: 0; } div.textFrame { position:absolute; padding:0px; margin:0px; z-index: 100; } 1224px 1632px
  285. 285. left: 16%; top: 3.6%; height: 0.8%; width: 24%; div.textFrame { position:absolute; padding:0px; margin:0px; z-index: 100; } 1224px 1632px
  286. 286. left: 16%; top: 3.6%; height: 0.8%; width: 24%; div.textFrame { position:absolute; padding:0px; margin:0px; z-index: 100; } 1224px 1632px
  287. 287. テキスト配置の目次ページ クリッカブルマップの代替として
  288. 288. CircularFLO サーキュラーFLO http://www.circularsoftware.com/opensample-circularflo-ebook/ 固定レイアウト
  289. 289. 電子書籍の中の目次ページ
  290. 290. 電子書籍の中の目次ページ 日本語フォントを 埋め込めば 見栄えが向上
  291. 291. 応用編-2
  292. 292. CSSによるページデザイン
  293. 293. http://www.design-zero.tv/Webcast/Seminar_20131126/demo.html
  294. 294. http://www.design-zero.tv/Webcast/Seminar_20131126/demo.html
  295. 295. http://www.design-zero.tv/Webcast/Seminar_20131126/demo.html
  296. 296. メディアクエリを活用した例 Session-2: EPUB 3プロダクションワークで解説します スクリーンの幅が狭い場合は全段 指定した値より 大きい場合は2段組 Kindle Paperwhite
  297. 297. Session-2: EPUB 3プロダクションワーク
  298. 298. 事実上の 標準規格 EPUB 3 ¦ International Digital Publishing Forum http://idpf.org/epub/30
  299. 299. 電子書籍の技術
  300. 300. ビジュアルで構成されている本 漫画, 絵本, 写真集など リフローと固定レイアウト テキストが主体の書籍
  301. 301. Apple iBookstore
  302. 302. Apple iBookstore
  303. 303. Apple iBookstore
  304. 304. リフローの電子書籍 固定レイアウトの電子書籍 リフローと固定レイアウトを 組み合わせた電子書籍
  305. 305. リフローのみ cover nav cover.xhtml nav.xhtml page01 page02 page03 page04 page01.xhtml page02.xhtml page03.xhtml page04.xhtml 表紙 目次
  306. 306. 見開きの写真ページを固定レイアウト cover nav cover.xhtml nav.xhtml page01 page02 photo page04 page01.xhtml page02.xhtml page03.xhtml page04.xhtml 表紙 目次 見開きの写真 固定レイアウト
  307. 307. 2ページを合成した固定レイアウト cover nav cover.xhtml nav.xhtml page01 page02 page01.xhtml page02.xhtml 表紙 目次 合成された見開きの写真 photo-left photo-right page03.xhtml 固定レイアウト page04 page04.xhtml
  308. 308. 対応している読書システムが少なく まだ不安定...
  309. 309. Google Chrome Readiumを対象に http://bit.ly/14Xgzzm
  310. 310. 2種類のストーリーを 1つのEPUBファイルに収録 メディアクエリで切り替える
  311. 311. メディアクエリ Media Queries
  312. 312. Media Queries 幅が480px以下の場合 @media screen and (max-width: 480px) {  h1 {   color: red;  } }
  313. 313. Media Queries 幅が480px以下の場合 @media screen and (max-width: 480px) {  h1 {   color: red;  } } ウィンドウの幅が480px以下の場合 見出しの色を赤にする
  314. 314. スクリーンの幅が狭い場合は全段 例: 指定した値より大きい場合は2段組 Himawari Reader Android 4.2) (
  315. 315. 固定レイアウトのデメリット
  316. 316. 固定レイアウトでは 読めない 広い 狭い
  317. 317. タブレット スマートフォン
  318. 318. タブレット フルバージョン スマホ最適化 ショートバージョン スマートフォン
  319. 319. フルバージョン タブレット スマホ最適化 ショートバージョン スマホ最適化 フルバージョン スマートフォン
  320. 320. デモンストレーション
  321. 321. Session-3: HTML5プロダクションワーク
  322. 322. HTML5 CSS3 XML SVG SMIL
  323. 323. W3C World Wide Web Consortium ワールドワイドウェブ・コンソーシアム http://www.w3.org HTML, CSS, XMLなど ウェブの技術を 策定
  324. 324. 第1回 (11日) のデモから HTML5 CSS3 HTMLでマガジンも作成できる
  325. 325. 第1回 (11日) のデモから Financial Times http://www.ft.com ビデオ:02_20131111_FT_Web_App.mp4
  326. 326. ウェブ漫画
  327. 327. Webtoons http://bit.ly/17VfKeI http://bit.ly/1dxsuus
  328. 328. ヨンジェウォン 乱れ咲
  329. 329. スマホで読む漫画
  330. 330. HTML5 コミック
  331. 331. Adobe Edge Animate CCによるコミック作成
  332. 332. デモンストレーション
  333. 333. Session-5: ウェブプロモーション
  334. 334. 事例: 個人出版のプロモーション
  335. 335. http://www.amazon.com/dp/B00AGFU5VS
  336. 336. http://anythingsimple.com/books/ape/ http://www.guykawasaki.com/ape/
  337. 337. http://youtu.be/135KGCLqC6Q
  338. 338. ショットガンアプローチ http://youtu.be/135KGCLqC6Q
  339. 339. https://twitter.com/GuyKawasaki フォロワー数:1,399,789
  340. 340. 知名度があっても 一筋縄ではいかない
  341. 341. 知名度のない私たちは どうすればよい?
  342. 342. 電子書籍リリース
  343. 343. 作成開始 電子書籍リリース
  344. 344. 発売後よりこの期間が重要
  345. 345. 開始 発売
  346. 346. 開始 発売
  347. 347. 事例: タイアップ プロモーション ・
  348. 348. 複合型ビジネスモデル 電子書籍 コミュニティ メディア A Book Apart An Event Apart A List Apart http://www.abookapart.com http://aneventapart.com http://alistapart.com 出版社 会議ビジネス ブログメディア
  349. 349. 著者がイベントに登壇 電子書籍 コミュニティ メディア A Book Apart An Event Apart A List Apart http://www.abookapart.com http://aneventapart.com http://alistapart.com 出版社 会議ビジネス ブログメディア
  350. 350. 電子書籍の第1章をオンラインメディアに掲載 電子書籍 コミュニティ メディア A Book Apart An Event Apart A List Apart http://www.abookapart.com http://aneventapart.com http://alistapart.com 出版社 会議ビジネス ブログメディア
  351. 351. 電子書籍 著者 著者 イベント メディア 出演・講演 記事の執筆 著者
  352. 352. Session-6: コミック グラフィックノベル ・ 写真集の新しい表現
  353. 353. 漫画や小説などの人気作品は、新しいテクノロジーと 共に復活し、新しい読者を開拓してきました。
  354. 354. ラジオドラマ、テレビアニメ、映画、家庭用ビデオが 普及し始めた80年代前半には「ビデオ漫画」(漫画 の原稿を使った動的な映像表現)なども作られ、
  355. 355. マルチメディアブームの90年代前半は「CD-ROMコ ンテンツ」、インターネットが商用化された90年代 半ば以降はShockwaveなどの「ウェブ上のデジタル コミック」、そして、1999年のiモード登場から数年 を経て「ケータイコミック」が大きな市場を形成
  356. 356. 漫画は変わらない ブラックジャックによろしく 第2巻(ダウンロード) http://mangaonweb.com/creatorOCComicDetail.do?no=30954&cn=1
  357. 357. 漫画は変わらない 新しい技術と共に登場 テクノロジー + 漫画 ブラックジャックによろしく 第2巻(ダウンロード) http://mangaonweb.com/creatorOCComicDetail.do?no=30954&cn=1
  358. 358. 新しい技術と共に登場 ビデオ漫画 マルチメディア ウェブ漫画 ケータイコミック + 漫画 ブラックジャックによろしく 第2巻(ダウンロード) http://mangaonweb.com/creatorOCComicDetail.do?no=30954&cn=1
  359. 359. 新しい技術と共に登場 ビデオ漫画 マルチメディア ウェブ漫画 ケータイコミック + 漫画 ブラックジャックによろしく 第2巻(ダウンロード) http://mangaonweb.com/creatorOCComicDetail.do?no=30954&cn=1
  360. 360. 新しい技術と共に登場 ビデオ漫画 マルチメディア ウェブ漫画 ケータイコミック + 漫画 ブラックジャックによろしく 第2巻(ダウンロード) http://mangaonweb.com/creatorOCComicDetail.do?no=30954&cn=1
  361. 361. コミック&グラフィックノベル プロダクションワーク ∼Kindleダイレクトパブリッシング・EPUB 3 HTML5ウェブコンテンツ∼ ウェブで読む漫画/グラフィックノベルの 表現・販売・プロモーション 2013年11月26日(火)PM18:30-20:30 /東京都杉並区(セシオン杉並 2F 視聴覚教室)
  362. 362. community 電子書籍メデ ア論 ィ http://www.facebook.com/eBookStrategy デザインの未来 http://www.facebook.com/TheFutureDesign

    Soyez le premier à commenter

    Identifiez-vous pour voir les commentaires

  • fumihiroy

    Aug. 26, 2014
  • mashcosan

    Sep. 11, 2014
  • mr_children9

    Nov. 21, 2014
  • nobynoby

    Dec. 11, 2014
  • takuromizobe

    Sep. 2, 2015
  • ssuserd27172

    Sep. 20, 2015
  • ray2q

    Oct. 19, 2015
  • ssuserea08b31

    Mar. 10, 2016
  • ssuser4776df

    Dec. 7, 2018

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

Vues

Nombre de vues

3 866

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

70

Actions

Téléchargements

60

Partages

0

Commentaires

0

Mentions J'aime

9

×