特別授業:キンドルで漫画・絵本・写真集をリリースしよう!

特別授業:キンドルで漫画・絵本・写真集をリリースしよう!

Kindle Format 8 Basic Course:
本日は、昨年の特別授業の一部を掲載します。「中学生のためのEPUB 3 入門」とは別に、体験授業が設定されています。基本的に一回しか実施されないため、じっくり学ぶ時間がありません。あくまで「体験」することを目的としており、その分、誰でも参加できるようになっています。

Amazon Kindleの場合、Kindle Comic Creatorという無償のオーサリングツールが提供されており、授業で利用しやすいため、採用することになりました。
今回は、前半部分を掲載します。

尚、図版は昨年の11月26日に開催した発表会「コミック&グラフィックノベル・プロダクションワーク/Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ」で使用したスライド資料を使用しています。

 

 

追記(2014年3月2日):
Kindleパブリッシング・ガイドラインの2014年1月バージョンで、画像に関するガイドラインが変更されました。この記事は、2013年の内容をベースにしていますので、「[補足]新しいKINDLEパブリッシングガイドライン(2014年1月版)とスクリーンの高精細化について」も参照してください。

 

 

 

キンドルで漫画・絵本・写真集をリリースしよう![準備編]

 

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

まずは、今回作成する固定レイアウトの電子書籍について解説していきましょう。
電子書籍の技術には「リフロー」や「固定レイアウト」、「プリントレプリカ(PDF)」などがあります。

スライドNO.01

 

リフローは文字が主体の文芸書などで使用され、固定レイアウトは1ページ全体が画像で表現される漫画や絵本、写真集などで使われます。

 

スライドNO.02

 

 

固定レイアウトのパターン

固定レイアウトのパターンを見ていきましょう。
デバイスを縦向き(ポートレイトモード)にしたときは、シングルページ表示になり、横向き(ランドスケープモード)にすると、見開き表示になります。
「横書き」の本は下図のように、デバイスを横向きにすると、表紙が右側に配置され、ページの方向は左から右に進みます。
※Kindle Comic Creatorで指定できます。

 

スライドNO.03

 

 

日本の漫画のように「縦書き」の場合は、逆方向になります。ページは、右から左に進みます。

スライドNO.04

 

見開きが前提で描かれている絵本などは、横向き(ランドスケープモード)に固定されています。デバイスを縦向きにしても、ページは回転しません。

スライドNO.05

 

文章が主体の本に、見開きの写真が入っている場合は、リフローと固定レイアウトを組み合わせます。
※Kindleの場合、このパターンは作成できませんが、固定レイアウトであれば、文章を(座標値で指定する)「絶対配置」でレイアウトすることができます。例えば、絵本の中の文章を(画像ではなく)テキストで表示できます。

スライドNO.06

 

 

電子書籍フォーマットについて

電子書籍を作成するときに使われるフォーマットには、EPUB、Kindleフォーマット(Kindle Format 8/Mobi 7)、XMDFなどがあります。

スライドNO.07

 

 

現在、IDPFが策定している「EPUB 3」が事実上の標準フォーマットとして、業界に受け入れられており、国内でもEPUB 3で作られる電子書籍が増えています。

スライドNO.08

 

 

AmazonのKindleフォーマットは、2005年に買収したフランスのMobipocketのフォーマットをベースにしていますので、EPUBとは異なる技術です。

スライドNO.09

 

 

Amazonは、EPUB陣営には加わらず、独自に進めていますが、まったく互換性がないわけではありません。
オープンな技術のEPUBは情報が多く、制作ツールも充実しているため、AmazonもKindleフォーマットに変換するソースとしてEPUBを推奨しています。

スライドNO.10

 

 

EPUBもKindleフォーマットも、HTMLやCSSを採用した電子書籍フォーマットです。
KindleフォーマットはAmazonの技術ですから全ての情報が公開されているわけではありませんが、EPUBをサポートしている変換ツールを提供しています。現在、EPUB 3で作成し、Amazonの変換ツールで、Kindleフォーマットのファイルにする方法が定着しています。

スライドNO.11

 

 

画像の圧縮とデータサイズ

固定レイアウトの電子書籍を作成するときに、最も重要になってくるのが「画像の圧縮とデータサイズ」です。画像データはテキストデータより、かなり大きくなるため注意が必要です。
ベタ面の多い(アニメの絵のような)画像は、GIFやPNGで最適化できますが、デジカメで撮った自然画などはJPEGを使い、圧縮率を決めることになります。圧縮率を高くすればデータは小さくなりますが、画質が劣化します。逆に、画質を優先するとデータが大きくなります。

スライドNO.12

 

 

AppleのiBookstoreは、ファイルサイズの上限が「2GB」になっており、Retinaディスプレイに対応した高画質な写真集やグラフィックノベルが多数、発売されています。また、高画質ビデオやサウンドなどが含まれている電子書籍もあります。

スライドNO.13

 

 

例えば、iBookstoreで販売されているグラフィックノベル「Anomaly」は、1,106ページすべてフルカラーの画像で、データサイズは「612MB」あります。
このように、きれいな高解像度の画像を使うと、データサイズも大きくなります。

スライドNO.14

 

 

もっとすごいのは、「Frankenweenie An Electrifying Book」です。高画質ビデオが埋め込まれているため、「768MB」もあります。
iBookstoreの場合は、iOSデバイス(iPadやiPhone、iPod touch)だけが対象なので、ハードウェアのパフォーマンスを最大限に生かすことができます。Androidは、処理能力の低い安価な機種も混在しており、(あまりにも数が多いので)検証も難しいため、データサイズが大きなコンテンツは注意が必要です。

スライドNO.15

 

 

 

Kindle Comic Creatorを使った作業の流れ

それでは、具体的にKindle Comic Creatorを使った作業の流れを見ていきましょう。

スライドNO.16

 

 

固定レイアウトの電子書籍を作成する方法は2つあります。
EPUB 3の固定レイアウトで作成した電子書籍をKindleの固定レイアウトフォーマットに変更する方法と、Kindle Comic Creatorを使う方法です。

スライドNO.17

 

 

EPUB 3から変換する方が、自由度が高く、コントロールしやすいのですが、EPUB 3の固定レイアウトの仕様を理解しておく必要があるため、ここでは知識なしでも使えるKindle Comic Creatorを利用します。

スライドNO.18

 

 

Kindleの場合は、先ほど紹介したiBookstoreとは異なり、使用できる画像のデータサイズが決められています。文字が主体のリフローで画像を使う場合、最大127KBになります。また、固定レイアウトでも、漫画以外は最大256KBです。漫画のみ最大800KBという仕様になっています。
※コーディング(コードを記述する方法)で電子書籍を作成できる人であれば、簡単に指定できます。

スライドNO.19

 

 

ただし、Kindle Comic Creatorを使用すれば、漫画以外(絵本や写真集、グラフィックノベルなど)であっても最大800KBの仕様で作成することができます。

スライドNO.20

 

 

Kindle Comic Creatorがサポートしている画像形式は、PDF、JPEG、PNG、TIFF、PPMなどです。通常は、JPEGもしくはPNGを使いますが、PDFファイルを使いたい場合は、そのまま読み込むと、自動的にKindleフォーマットに変換してくれます。
※満足のいく変換結果になるかどうかは、PDFファイルの内容(解像度など)によりますので、期待せず、まずは試してみることをお奨めします。

スライドNO.21

 

 

PDFファイルを電子書籍にする

今回は、PDFファイルの文書(11ページ)を固定レイアウトの電子書籍にしてみます。
ここでは、PDFファイルをそのまま読み込むのではなく、一度、全ページを画像ファイルで書き出します。手間ですが、こうすれば画像の圧縮率も選べますし、ページの内容にあわせて最適化しやすいからです。

スライドNO.22

 

 

Adobe AcrobatでPDFファイルを開いて、ページを画像として書き出します。
※「Pdf2Jpg.net」などの無償で使用できるウェブサービスもありますが、詳細な設定ができませんので、Acrobatをお奨めします(AcrobatはAdobe Creative Cloudに含まれています)。画質にこだわらない場合はウェブサービスを試してみてください。

スライドNO.23

 

 

ファイルメニューの[別名で保存]を選びます。

スライドNO.24

 

 

ダイアログが表示されますので、フォーマットを[PNG]にして、[設定]をクリックします。

スライドNO.25

 

 

[PNGとして保存の設定]ダイアログでは、[変換]を設定します。ここでは、解像度を「236.22 ピクセル/cm」にしました。

スライドNO.26

 

 

書き出した結果です。
画像ファイルのサイズは、5103×7158ピクセル。11ページで、71.4MBになりました。1ページのデータサイズは、絵の内容によって異なります。
この画像ファイルを電子書籍の「オリジナル」データとして管理しておきます。

スライドNO.27

 

 

Adobe Photoshopで画像サイズを変更

それでは、適切な画像ファイルにしていきますので、Adobe Photoshopで画像の大きさを変更します。

スライドNO.28

 

 

ここでは、ページの大きさを「幅:1200ピクセル」にしました。高さは、1683ピクセルになりますが、1920ピクセルに広げます(なぜ高さを変更するかは次で説明します)。
解像度を72dpiに変更して、JPEGの「最高画質」で書き出します。この後、Photoshopよりも(画質を落とさず)高圧縮できるユーティリティを使いますので、JPEGの「最高画質」を選びました。
※1つひとつ処理するのは面倒なので、アクションに作業を登録して自動化しています。

スライドNO.29

 

 

デバイスのスクリーンサイズとページの比率

ページの大きさは、Kindle Comic Creatorの推奨サイズ(800×1280ピクセル)を基本にしています。今回は、Kindle Fire HDXのスクリーンサイズ「1200×1920ピクセル」にあわせました。
Kindle FireやAndroidのスマートデバイスは、ほぼ同じ比率なので、問題ありません。iPadだけ比率が大きく異なるため、縦方向で見たとき、左右に余白ができてしまいます。

スライドNO.30

 

 

下図を見ていただければ、よくわかると思います。iPadの比率にあわせてしまうと、Kindle Fire HDやAndroidの大半のデバイスで、上下に余白ができます。
どちらを選んでもかまいませんが、今回はKindleおよびAndroidにあわせます。
※iPhone 5以降は、Kindle Fire HDやAndroidの比率で問題ありません。iPadのみ注意が必要ということです。

スライドNO.31

 

 

 

画像圧縮ユーティリティを使用する

さて、画像の圧縮に進みましょう。Adobe Photoshopで書き出したJPEG「最高画質」のファイルを「JPEGmini」という画像圧縮ユーティリティを使って、データサイズを小さくしていきます。
※JPEGminiには無償で使える体験版があります(複数の画像をまとめて圧縮できない等の制約があります)。

スライドNO.32

 

 

比較してみましょう。かなり小さくなりました。Photoshopで低画質(高圧縮)にするより、JPEGminiを使ったほうが画質を保持したままデータサイズを小さくできます。

スライドNO.33

 

 

PNGファイルの場合は、「ImageOptim」(MacOS X用)というユーティリティがあります。
Windowsには「PNGGauntlet」や「Caesium」などがあります。

スライドNO.34

 

 

PhotoshopのPNG(8bit)書き出しより小さくなります。

スライドNO.35

 

 

JPEGとPNGの比較です。今回の場合、ページ内に余白が多いのですが、濃淡のある絵なので、PNGよりもJPEGで書き出した方が最適化できそうです。

スライドNO.36

 

 

ちなみに、こちらのページはPNGの方が17KBほど小さくなり、

スライドNO.37

 

 

残りの密度の高いページは、すべてJPEGの方が小さくなっています。
小さくなったといっても20〜60KB程度ですが、ページ数の多い電子書籍になると、データサイズ全体で大きな差が出てきますので、軽視できません。

スライドNO.38

 

 

 

表紙や章扉など、本に必要なページを追加する

さて、画像ファイルを確認してみましょう。11ページのPDFファイルだったので、画像ファイルも11あります。

スライドNO.39

 

 

電子書籍にするには、必ず「表紙」を用意します。あと、目次ページや章扉、奥付などもあったほうがよいでしょう。

スライドNO.40

 

 

目次については後で詳しく説明しますが、目次の画像ファイルを用意しても、(当然ですが)本の目次として機能しません。ページの作り方も説明しますが、かなり難易度が高くなります。
Kindle Fireなどの専用デバイスには、すべての電子書籍共通の目次機能があり、この機能については、Kindle Comic Creatorが自動的に作成してくれます。ただし、本の中の「目次ページ」は作成してくれません。

スライドNO.41

 

 

[補足]
Kindleデバイス(Kindle Fire HDなど)には、下図のようにタップ一回で、目次の画面を表示することができます。専用用語では「NCX表示」と言います。Kindle Comic Creatorは、この目次を自動的に作成します。
※「NCX表示」は、電子書籍の中の「目次ページ」ではありません。

スライドNO.41-2

 

 

[補足]

とても便利な目次機能(NCX表示)ですが、iOSやAndroid向けに提供されているKindleアプリには搭載されていません。つまり、電子書籍の中に「目次の機能をもつ」のページが必要になるということです。
目次ページは、HTMLで作成する必要があります。Kindle Comic Creatorでは、作成したHTMLファイルを読み込むことで追加できます(後で解説します)。

スライドNO.41-3

 

 

 

準備したページを見ていきます。まずは「表紙」です。

スライドNO.42

 

 

次は「目次」と「章扉」です。
※目次ついては、この場合たんなる画像ですから、目次の機能はありません。上の[補足]で書いたとおりです。

スライドNO.43

 

 

ヘッダーや罫線などを追加すると、より見やすくなります。趣味の本づくりであっても、視覚表現は重要です。

スライドNO.44

 

 

今回は「奥付」のページも用意しました。

スライドNO.45

 

 

Kindleの電子書籍の「表紙」について

Kindleストアでは表紙をマーケティングカバーとして扱います。
電子書籍と表紙(マーケティングカバー)は分離しているので注意しましょう。Kindleダイレクトパブリッシングでは、電子書籍と表紙を別々にアップロードします。電子書籍の中の表紙とアップロードする表紙が同じであれば、電子書籍の中の表紙が削除されますので問題ありません。異なる場合は、表紙が2つになってしまいます。

スライドNO.46

 

 

電子書籍の表紙(マーケティングカバー)は、ストアでも利用されます。購入ページにサムネイルとして表示されます。

スライドNO.47

 

 

表紙をAmazonが推奨しているサイズにしておくと、このように拡大表示することができます。

スライドNO.48

 

 

今回は、ページの画像サイズをKindle Fire HDXにあわせて、1200×1920ピクセルにしましたが、表紙の推奨サイズはさらに大きくなります(幅1800ピクセル)。
繰り返しになりますが、電子書籍と表紙は分離していますので、異なるサイズになってもかまいません。
※Kindle Comic Creatorの推奨サイズは、Kindle Fire HDのスクリーンサイズ「800×1280ピクセル」です。

スライドNO.49

 

 

それでは、Kindle Comic Creatorで電子書籍を作成していきましょう。

スライドNO.50

 次回は、後半を掲載します。

 

追記(2014年3月2日):
Kindleパブリッシング・ガイドラインの2014年1月バージョンで、画像に関するガイドラインが変更されました。この記事は、2013年の内容をベースにしていますので、「[補足]新しいKINDLEパブリッシングガイドライン(2014年1月版)とスクリーンの高精細化について」も参照してください。

 

 

投稿日:2014年2月11日

 

 

マガジンで連載されているコンテンツ一覧は「ARTICLES」をご覧ください

マガジンで連載中の記事コンテンツ


Be first to comment

CAPTCHA