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

3,015 views

Published on

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

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

Published in: Technology

〜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

×