縦スクロールEPUBこそはスマートフォンに対応した新しい時代のマンガ表現です。しかしアマゾンを始めとした電子書店では買えません。対応するリーダーも一部に留まります。その実装を促すために情報を整理してみました。

1. 縦スクロールEPUBの現状
小形克宏（電脳マヴォ合同会社）
@ogwata
2017年9月24日
HTML5 conference
1

2. 自己紹介
• 零細マンガ・エージェント会社の役員
• マンガ編集者／営業／法務／雑用係
• 作家のエージェントとしてマンガをプロバイダー各
社に販売
2

3. 電子書籍の
売上の8割はマンガ
出典：株式会社インプレス ニュースリリース 2017.07.27
3

4. 電子書籍になって
マンガは読みやすくなった？
• 固定型EPUBとは、過去の資産を画像化して手軽に
作り、ネットで儲けるのに都合よいフォーマット
• 過去の資産を食い潰しているだけで、新たな変化に
対応したものではない
• 電子書籍になってマンガ表現は何か変わったの？
• 若いマンガ読者は今の電子マンガを読んで幸せ？
4

5. 固定型EPUB（マンガ）の欠点
• スマホでは文字が小さくなってしまう
• スマホでは見開きが表示しづらい
• →作家の意図した読み方ができない
• 画像なのでアクセシビリティ皆無
5

6. そこで縦スクロールマンガ
• スクリーン表示を目的に、韓国のWEBTOONによ
って生み出された方式
• スマホで表示しても文字は大きく読みやすい
• 自然な読み心地、スマホに最適化したマンガ表現
• これをEPUB化したのが縦スクロールEPUB
• 実演（Murasaki）
6

7. 縦スクロールEPUBの作り方①
1. 縦スクロールマンガの画像ファイルを用意し、同
じ幅の複数のファイルに切り分け、1から順番にフ
ァイル名をつけておく
2. CSSスタイルシートに以下のように指定
7
div.resizeimage img { height: 100%; }
img {display: block;}

8. 縦スクロールEPUBの作り方②
3. OPFドキュメントで名前空間を以下のように指定
prefix="rendition:
http://www.idpf.org/vocab/rendition/#"
4. OPFドキュメントで、metadata要素を以下のよう
に指定
<meta property="rendition:layout">reflowable</meta>
<meta property="rendition:flow">scrolled-doc</meta>
8

9. 縦スクロールEPUBの実装
• 対応している電子書店はない
• 対応しているリーダーも少ない
• 電子書店に実装を促すのはそう簡単なことではない
• 一方で、対応するリーダーに呼びかけを実装を増やして
いけば、やがて電子書店も対応するのでは
• 村田真氏（IDEF）と共に開発用ドキュメントやサンプル
データ（CC BY SA 3.0）、調査結果を公開
9

10. リーダーの実装状況①
10

11. リーダーの実装状況②
11

12. リーダーの実装状況③
12

13. リーダーの実装状況④
13

14. サンプルの公開
• サンプルEPUB
• 『鳥の眼』（©ムライ、電脳マヴォ合同会社）
http://www.mavo.co.jp/epub/20170906_torinome.epub
• ソースコード
• epub3-samples/30/vertically-scrollable-manga/
https://github.com/IDPF/epub3-
samples/tree/master/30/vertically-scrollable-manga
14

15. 開発ドキュメント
• 村田真氏（JEPA CTO）が縦スクロールEPUBに関
するドキュメントを執筆、公開
• Creating Vertically Scrollable EPUB Manga
• How to Support Vertically-Scrollable EPUB
Manga
15

16. 情報を集約した小社ブログ記事
• 縦スクロールEPUBサンプル『鳥の眼』の公開
• http://www.mavo.co.jp/20170923/
16

17. 開発者のみなさん、
縦スクロールを実装して
！
17