同じ4枚の画像から2つのマンガビューアを作る ― JSONでページ送りと縦読みを切り替える

この記事について
この記事は、生成AIを活用した自動生成フローで作成しています。Daily-Code-Samplesで公開している横向きページ送り版と縦読み版の実装、JSON、Character Sheetの実ファイルを確認し、同じコンテンツを異なるUIで再利用する考え方を整理しています。

検証ステータス：🧪 Daily Code実装済み・GitHub Pages公開済み／横向き・縦読みロジック確認済み／スマホ実機表示は未確認

マンガをWebに載せるだけなら、画像を上から4枚並べれば完成です。

でも、画像そのものと「どう読ませるか」を分けておくと、同じ4枚をPC向けのページ送りにも、スマホ向けの縦読みにも再利用できます。

今回のポイントはビューアの見た目より、コンテンツをJSONで持ち、表示側だけを変えたことです。

まず動いているものを見る
データは共通、見せ方だけ変える
1ページ分の情報をJSONで持つ
横向き版と縦読み版は何が違う？
JavaScript側で変わるのは表示方法
マンガ以外にも使える
キャラクターの正本も分けて管理する
4枚のマンガ画像
次に改善するなら
まとめ
関連リンク・実装
1. この記事の更新履歴
  1. 2026年9月13日

まず動いているものを見る

横向き版は1枚ずつ表示し、「前へ」「次へ」でページを切り替えます。縦読み版は同じ4枚を上から順に並べます。

データは共通、見せ方だけ変える

flowchart TD
    A[4枚のマンガ画像] --> B[JSON: ページ情報]
    B --> C{表示方法だけ変える}
    C --> D[PC向け: 1枚ずつ表示]
    C --> E[スマホ向け: 全ページを縦に表示]

横向き用とスマホ用に、別々の画像セットを作っているわけではありません。

元になる画像とページ情報は共通で、JavaScript側の表示方法だけを変えています。

1ページ分の情報をJSONで持つ

JSONには画像ファイル名だけでなく、タイトル、説明、代替テキスト、タグなども持たせます。

{
  "image": "./pages/page-02.svg",
  "alt": "画像と付帯データを分けて管理するPapanda",
  "title": "2ページ目：画像と付帯データを分けて持つ",
  "caption": "画像・タイトル・説明を1ページ分のデータとして扱う",
  "tags": ["JSON", "メタデータ"]
}

HTMLに説明文を直接埋め込むより、「1ページ分の情報」をデータとして管理した方が、別のUIでも同じ内容を使いやすくなります。

横向き版と縦読み版は何が違う？

項目	ページ送り版	縦読み版
読み方	前へ／次へ	下へスクロール
同時表示	基本1ページ	全ページ
中心となる考え方	現在位置を持つ	ページを順番に並べる
PC	見やすい	閲覧可能
スマホ	操作が必要	自然に読みやすい
元データ	同じ画像・同じページ情報を再利用

JavaScript側で変わるのは表示方法

ページ送り版は、「今どのページを表示しているか」という番号を持ち、その位置のデータだけを描画します。

縦読み版は「現在位置」を持たず、JSONにあるページを順番に画面へ追加します。

完成コードはブログ本文へ重複して載せず、Daily Code側へ集約します。

ブログは「なぜそう作るのか」、Daily Codeは「どう書けば動くのか」という役割分担にします。

マンガ以外にも使える

データと表示を分ける考え方は、マンガ専用ではありません。

用途	ページデータに持たせるもの	表示例
作業手順書	画像、手順、注意、担当	1手順ずつ／縦一覧
設備点検	写真、確認項目、正常例	現場スマホ向け縦表示
教育コンテンツ	図、説明、設問	スライド型／復習一覧
製品紹介	写真、特徴、リンク	カルーセル／一覧
社内マニュアル	画面キャプチャ、操作、補足	PC手順／スマホ手順