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

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

on

  • 1,569 views

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

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

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

Statistics

Views

Total Views
1,569
Views on SlideShare
1,561
Embed Views
8

Actions

Likes
0
Downloads
40
Comments
0

2 Embeds 8

http://s.deeeki.com 6
https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • コミック&グラフィックノベル プロダクションワーク ∼Kindleダイレクトパブリッシング・EPUB 3 HTML5ウェブコンテンツ∼ ウェブで読む漫画/グラフィックノベルの 表現・販売・プロモーション 2013年11月26日(火)PM18:30-20:30 /東京都杉並区(セシオン杉並 2F 視聴覚教室)
    • profile YOUJI SAKAI Instructional Designer | eBook Designer 境祐司
    • 主な著書 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デザイン基礎』(技術評論社)など。
    • community 電子書籍メデ ア論 ィ http://www.facebook.com/eBookStrategy デザインの未来 http://www.facebook.com/TheFutureDesign
    • テキスト
    • 本日は、 毎年恒例の 自主興行的な発表会 (第3回) です デザインの未来 プロジェクト 学校法人阿佐ヶ谷学園 高度情報化内 https://www.facebook.com/TheFutureDesign http://commonstyle2011.wordpress.com/ 166-0011 東京都杉並区梅里1-3-3
    • 固定レイアウトを制する ! 漫画・グラフィックノベル・写真集・絵本 アートブック・アートマガジン
    • 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: 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: コミック・グラフィックノベル・写真集の新しい表現
    • 基礎知識
    • 電子書籍の技術
    • 電子書籍の技術
    • リフローと固定レイアウト
    • ビジュアルで構成されている本 漫画, 絵本, 写真集など リフローと固定レイアウト テキストが主体の書籍
    • 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 2012 .book XMDF EPUB2.0 EPUB 3.0 2011.10.11 2007年 Kindle 開始 Kindle Format 8
    • 採用されている標準技術 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とKF8両方の知識が必要)
    • Amazonが無償で提供している オーサリングツールを使って作成する方法を 解説します Kindle Comic Creatorで作成する方法 Kindle Format 8 固定レイアウト
    • 準備前の基礎知識
    • KF8の仕様:データサイズ リフロー:最大127KB 固定レイアウト(コミック以外):最大256KB コミック:最大800KB
    • KF8の仕様:データサイズ リフロー:最大127KB 固定レイアウト(コミック以外):最大256KB コミック:最大800KB 最大256KB 記述なし <meta name="book-type" content="children" /> 最大800KB <meta name="book-type" content="comic" />
    • KF8の仕様:データサイズ リフロー:最大127KB 固定レイアウト(コミック以外):最大256KB コミック:最大800KB Kindle Comic Creator 最大800KB <meta name="book-type" content="comic" />
    • Kindle Comic Creator http://www.amazon.com/kc2 サポートしている ファイル形式 PDF(.pdf) JPEG(.jpg / .jpeg) TIFF(.tif / .tiff) PNG(.png) PPM(.ppm)
    • ページ画像の準備
    • 今回はあえて過酷な条件で... 今日、 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" 768x1024 iPad2 iPad mini 1536x2048 iPad Air iPad mini Retina
    • 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 04.jpg 299KB
    • 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 205KB 04.png 356KB
    • 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
    • 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
    • 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 ブラックジャックによろしく 第2巻(ダウンロード) http://mangaonweb.com/creatorOCComicDetail.do?no=30954&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</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>
    • 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"/> content.opfに 目次ページの指定を 追加する  <itemref idref="item-8" linear="yes"/> </spine> <guide>  <reference type="toc" title="目次" href="nav.html" /> </guide>
    • 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" 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; }
    • 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; }
    • 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; }
    • 4.2.3 必須条件#3: 背景画像として画像を設定 固定レイアウト本における画像は、(HTML <img>タ グを使用する代わりに)CSS background-imageプ ロパティを用いて背景画像として設定しなければなり ません。 HTML画像は背景画像として設定されていない場合、 領域拡大に影響されるため、児童用コンテンツや漫画 本においてこれは重要なポイントです。 背景画像が正しく設定されいない場合、ダブルタップ を行っても画像はイメージビューア内で開きません。
    • 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 { 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
    • 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%; div.textFrame { position:absolute; padding:0px; margin:0px; z-index: 100; } 1224px 1632px
    • テキスト配置の目次ページ クリッカブルマップの代替として
    • 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 page04.xhtml 表紙 目次
    • 見開きの写真ページを固定レイアウト cover nav cover.xhtml nav.xhtml page01 page02 photo page04 page01.xhtml page02.xhtml page03.xhtml page04.xhtml 表紙 目次 見開きの写真 固定レイアウト
    • 2ページを合成した固定レイアウト cover nav cover.xhtml nav.xhtml page01 page02 page01.xhtml page02.xhtml 表紙 目次 合成された見開きの写真 photo-left photo-right page03.xhtml 固定レイアウト page04 page04.xhtml
    • 対応している読書システムが少なく まだ不安定...
    • 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.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 3 HTML5ウェブコンテンツ∼ ウェブで読む漫画/グラフィックノベルの 表現・販売・プロモーション 2013年11月26日(火)PM18:30-20:30 /東京都杉並区(セシオン杉並 2F 視聴覚教室)
    • community 電子書籍メデ ア論 ィ http://www.facebook.com/eBookStrategy デザインの未来 http://www.facebook.com/TheFutureDesign