公開投稿
2025.12.10 10:00
動く電子書籍をつくる。
239
きっかけ。ドット絵の展示をいくつか拝見して、『やっぱドット絵はモニターで見るのが一番綺麗だな』という感想を持ったことです。
それなりのヲタクですから紙媒体をこよなく愛しています。昨今の同人誌印刷の綺麗さといったら驚くばかりではあるのですが、
ドットの色の再現を印刷物上で思い通りに再現するには、専門のスキルが必要でしょう。
ドット絵はモニターで見ることを前提に描くものなので、モニターで見てもらうのが一番、送り手と受け手の差異が小さく済むはずです。
そして何よりもアニメーションを見てもらいたい！ドット絵は動いてなんぼ教の信者としては、
動くともっと可愛いんですよ…！というもどかしさをどうにかしたかった。
という訳で行き着いたのが電子書籍です。これにアニメを組み込むことも可能なのでは？と。
調べたら、可能だという記事を見つけました。しかしここ以外にほとんど見つけることはできませんでした。少ない！
Epubに動画を入れてみよう：https://99nyorituryo.hatenablog.com/entry/2014/12/09/211144
でもわたしのスキルではこの記事だけではちょっとだいぶ難しい…
◆以下参考までに
ロマンサーでは動画に対応している、とあったので課金してみましたが、
イラスト集は画像を読み込んでEPUBにまとめる方の作り方になるので、動画を差し込む過程はありません。
（文字編集の方だったら可能だったのかもしれませんが）
ロマンサーは画像サイズ横幅800pxを超えると縮小されるので、イラスト集を作るには向いていませんね。
画像をEPUBにするのはさすがにCLIPSUTADIOに軍配が上がります。
同じサイズのJPEGでもロマンサーよりはるかに綺麗なJPEGにしてくれました。
とは言えJPEGなので、ドット屋としてはPNGかGIFの二択しかないので総入れ替えは必須なのですが…。
わたしのcssだのhtmlだののスキルは完全に平成腐女子のものです。
cssもhtmlも全く覚えてはいないけれど、書き方のサイトを見ながらカスタマイズができる程度。
しかし今はchatGPTがいる。こういうことには強い…はず。課金して、諸々聴きながら作りました。
GPTくんがいなかったら調べ物で3倍ぐらい時間かかったと思います。便利だねえ 嘘も超言ったけど。
◆◆◆
では作業の流れ。備忘録も兼ねているので、主に私向けに記載します。
私向けなので、一旦全部pngに差し替えてからMp4を更に差し替えていく手順で記載します。
いっぺんにやろうとすると絶対ミスをする体質なので…。
使用ソフト：当方はMac環境 クリスタ以外は無料アプリです。この環境で作成する前提で記載します。
・CLIPSUTADIO(EX)
・The Unarchiver：ZIP解凍 標準の解凍では解凍できなかったので。
・eCanCrusher：EPUB生成 フォルダをドラッグ&ドロップだけで生成してくれる。
・mi：xhtml.opfの編集
・Shutter Encoder：GIF→MP4変換、色調補正 GPTくんが勧めたアプリの中でも超優秀だった。
工程
下準備：ページに配置する画像をPNGで用意する
1：CLIPSUTADIOで元になるEPUBをつくる。
2：GIFをMP4に変換する。
3：JPEGを全てPNGに入れ替える。
4：xtml内のjpeg、jpgを全てpngに書き換え。opfも同様に書き換え。
5：動画ページをMP4へ差し替え。該当ページのxhtmlを書き換え、opfの記述も書き換え。
6：epubに変換。
◆動画を見開きで見せたい場合はこちらも：見開きにする
◆◆◆
◆pngとmp4が混在するepubを作ります。ibooksとThoriumで閲覧できます。他は未確認。
下準備
・ページレイアウト、1ページのピクセル数を決める。
※MP4を組み込む場合、画像サイズのピクセル数は偶数で。
・画像は全てドットエディターで作成、書き出しておきます。
・gifは20秒ぐらいの長さのタイムラインにして、gifで書き出しておきます。
（偶数と20秒ぐらいにする理由はのちほど）
1：CLIPSUTADIOで元になるEPUBをつくる。
・冊子版とは別に、EPUB用に専用のデータを作成します。単位はPX 解像度72
キャンパスサイズは作成するピクセル数、漫画用の設定は無し。あとは普通に表紙と必要なページ数で作成します。
・ファイルを生成したら画像をページに全て配置します。一括読み込みを使うと楽です。
・EPUBデータ出力設定でサイズを指定してEPUBを生成します。
（サイズ指定は必ずしも指定したサイズで出してくれる訳ではないのが面倒ですが…）
2：GIFをMP4に変換する。
◆変換だけなら変換してくれるサイトなどがあるのですが。やってみるとわかるのですが、
MP4に変換すると中間色が薄くなって、諧調というか、コントラストが劣化してしまうんですよね。
本当はEPUBがGIF対応していれば一番良いんですが、EPUBリーダーが非対応多いらしいんですよね。
GPTの言うことなので嘘かもしれませんが。
という訳でShutter Encoderで変換しつつ、補正をします。
・Shutter Encoder
H.264→.mp4選択するとこの画面になります。
ピクセル数が奇数だとエラーが出ます。これがあるので偶数で作成する必要があったのでした。
右側の設定をいじるのですが、ペンタブだとクリックしてもウィンドウが開かないのですよ〜 ここも20分ぐらい格闘しました。
こういうささいな箇所全てにひっかかる体質です。めんどくさいね。
できるだけ境界をぼかさないように画質を保持したい、とGPTに項目ぜんぶ入力して指定してもらったチェック箇所と数値を入れた
画像です。これにプラスしてもう一つのカラーグレーティングを開いて、色の調整をします。
必ず入れる調整は
・中間色マイナス10〜15（中間色の維持）
・スムージング/シャープニング プラス10〜15 （ドットのエッジを維持）
ここも入れたほうがいいよってとこがあったら教えて頂けると嬉しいです。
◆あとは処理を実行したのをgifと比べて微調整。プレビューはだいぶ嘘なので、生成して確認するしかないです。
これでEPUBに差し替えるPNGとMP４が揃いました。
3：JPEGを全てPNGに入れ替える。
◆CLIPSUTADIOで生成したEPUBの拡張子.epubをzipに書き換え。The Unarchiverで展開します。
タイトル名のフォルダが生成されます。中の階層はいじってはいけません。
imegesフォルダの中のjpegを全てpngに差し替えます。
・差し替えるpngのファイル名を対応するjpegのファイル名と同じに書き換えます。
（例：001.jpgだったらpngも001.pngとする）
・imagesフォルダ内のjpegファイルを削除（かどこかに避けておくか）
pngファイルに差し替えます。
4：xtml内のjpeg、jpgを全てpngに書き換え。opfも同様に書き換え。
・xhtmlフォルダ内の全ファイルをmiで開いて、
jpegをpngに置き換えます。マルチファイル一括変換を使うと楽です。
・opfを開いて＜image＞タグ内のjpeg、jpgを全てpngに置き換えます。
5：動画ページの画像をMP4へ差し替え。該当ページのxhtmlを書き換え、opfの記述も書き換え。
・imageフォルダ内 該当ページのpng(もしくはjpeg)を、ファイル名を揃えたmp4へ差し替えます。
・該当ページのxtml＜div＞タグ内を差し替えます。
※タグを表示させる方法がないので＜を全角で記載しています。英数半角になおしてください
＜video width="512" height="512" autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline"＞
＜source src="../image/i-005.mp4" type="video/mp4"/＞
＜/video＞
・opfを書き換え
imageタグ内の該当ページの記述を下記のように書き換え。
＜item id="image_006" href="images/image_006.png" media-type="image/png" /＞
↓
＜item id="image_006" href="images/image_006.mp4" media-type="video/mp4"/＞
6：epubに変換。
◆トップのタイトル名フォルダをeCanCrusherにドラッグ&ドロップすると、epubが生成されます
完成！
追記：動画を20秒にする理由
◆途中で入れるとこがなかったので追記で。
loopを入れているので、短いフレーム数のアニメーションでもループ再生してくれます。
ブラウザで見る分には大丈夫なのですが、ipadやiPhoneで確認すると、2ループ目から途中のフレームをすっとばす、
という事態が発生しまして…。GPTに相談した結果『ぜんぶ20秒ぐらいの長さにして、20秒間はちゃんと再生させる』
という方向にしました。mp4自体を軽くしてもiosでの再生は数秒停止することを避けられないので、
止まることを前提として、それまでは欠けなく再生させよう、という意図です。
20秒が最適かはわかりませんが、1Pに止まって見てくれる長さとしてはこのぐらいかと思います。
◆◆◆
私のhtmlやらcssやらのスキルは上に述べたように高いものではありません。
他にもっと入れた方がいい記述や、これを入れればこれが可能になる！などの項目があると思います。絶対。
ですが動画をEPUBに組み込む方法としては、本当にネット上に詳しいものが無くてですね…。
ドットに限らず、アニメを動いたまま作品にまとめる手法として、電子書籍はひとつの解決になるかと思います。
誰かの、その手助けになれましたら幸いです。
あと詳しい方、アドバイスやおすすめのタグとかコメント欄に残してくれるととても嬉しいです！
◆そんなこんなで2ヶ月右往左往してつくった紙の本+動くEPUBのセットの作品集です。
PDF+動かないEPUB+動くEPUB どれもがDLできます。電子の記事で何ですがやっぱ紙かわいいわ超かわいいわ…。
お求めいただけるとめっちゃ励みと糧になります。よろしくね。
ダウンロード版のみでも購入できます！
◆次の記事→見開きにする