HTML で絵本を作る

絵は描けなくても、動く絵本は作れます。1見開き＝1枚の HTML ファイルとして納品できます。生成 AI に作らせても構いません。ただし、静止画で足りる本ならこの道を通る必要はありません — お使いの道具から PDF で書き出すだけで済みます。ここから先は「動きが本質的に要る本」のための仕様です。こちらのビューアは安全のために HTML を閉じた箱の中で動かすので、その箱の中でできることと、できないことがあります。

静止画の絵本なら、この仕様は読まなくて構いません

お使いの道具（PowerPoint・Keynote・Illustrator など）から PDF で書き出すだけで、ページ数も大きさもこちらが読み取ります。絵本の作り方

必ず守ること

1. 絵本のフォルダの中で完結させる

画像・CSS・JavaScript は、絵本のフォルダに同梱して相対パスで参照してください（`art/whale.png` のように）。Web フォント、CDN、外部の画像やスクリプトは読み込めません。同梱したファイルは何ページから参照しても保存は1回だけなので、同じ絵を各ページに埋め込む必要はありません。

2. 固定 px で組まない

%・vw・vh で組んでください。ビューアは画面の大きさに合わせて箱の寸法を変え、スマホの縦画面では見開きを左右に切って1ページずつ送ります。固定 px で組むと、幅が変わった瞬間に構図が崩れます。

3. 見開きの寸法を伝える

入稿時に見開きの縦横比（例: 2000 × 1400）を申告してください。画像なら寸法を機械が読み取れますが、HTML には決まった大きさがないので、こちらから測る方法がありません。

箱の中でできること

使えます

HTML・CSS・JavaScript（すべてインライン）
CSS アニメーション / トランジション
タップ・クリック・キーボードへの反応
インライン SVG
data: URI で埋め込んだ画像・音声・フォント

使えません

外部のサイトからの読み込み（Web フォント・CDN・他サイトの画像）
通信（fetch / XMLHttpRequest / WebSocket）
保存（localStorage / sessionStorage / cookie）— 例外が出て止まります
別サイトへの遷移・ポップアップ・フォーム送信
ページの外（ビューア本体）への干渉

保存が使えないので、「読んだ位置を覚えておく」「しおりを挟む」といった仕掛けは作れません。ページ送りはビューアが持っているので、そちらに任せてください。

生成 AI に作らせる

このまま生成 AI に貼り付けて使えます。最後の1行だけ書き換えてください。

デジタル絵本の見開き1ページを、1枚の自己完結した HTML ファイルとして作ってください。

必ず守る条件:
- 外部のサイトを参照しない。画像などは絵本のフォルダに同梱し、相対パス（art/whale.png のような形）で参照する。Web フォント・CDN・外部画像は使わない
- fetch / XMLHttpRequest / WebSocket を使わない（通信は遮断されている）
- localStorage / sessionStorage / cookie を使わない（例外が出る）
- 固定 px でレイアウトしない。% と vw と vh で組む。ウィンドウの幅・高さが変わっても構図が保たれること
- 見開き（横長）として組む。想定する縦横比は 幅:高さ = 10:7
- 画面の左半分と右半分は、それぞれ独立した1ページとして表示されることがある。主役の要素を中央にまたがせすぎない
- prefers-reduced-motion: reduce のときはアニメーションを止める
- 本文の文字は 3vh 以上を目安に、読みやすい大きさにする

絵の内容と本文:
（ここに書く）

本を1冊まるごと作る

上のプロンプトは見開き1枚ぶんです。本を1冊まるごと作る場合は、こちらを使ってください。12見開きの例で書いてありますが、数は書き換えて構いません。最後の「絵本の中身」だけ埋めれば、そのまま貼り付けて使えます。

デジタル絵本を1冊、HTML で作ってください。全12見開き。**1見開き＝1枚の自己完結した HTML ファイル**で、合計12ファイルになります。

■ 最初に決めて、12枚すべてで守るもの

12枚が「1冊の本」に見えることが最優先です。次を先に決め、決めた値を全ファイルに同じ文字列で書いてください。ファイルごとに少しずつ変えると、めくるたびに別の本になります。

- 色: 地の色 / 主役の色 / 差し色 / 文字色（文字色は地の色との明暗差を十分に取る）
- 文字: フォント指定の1行 / 本文の大きさ（3.4vh 前後）/ 行間
- 版面: 本文を置く位置の決まり（例「左ページの上から26%、幅33%」）
- 動き: 時間と曲線（例 .5s ease-out）

■ 各ファイルが必ず満たすこと

1. 外部のサイトを参照しない。画像などは絵本のフォルダに同梱し、相対パス（art/whale.png のような形）で参照する。Web フォント・CDN・外部画像は使わない
2. fetch / XMLHttpRequest / WebSocket を使わない（通信は遮断されている）
3. localStorage / sessionStorage / cookie / indexedDB を使わない（例外が出てその場で止まる）
4. 長さは % と vw と vh のみ。px を使わない
5. 見開き（横長）として組む。想定する縦横比は 幅:高さ = 10:7
6. 本文の文字は 3vh 以上
7. prefers-reduced-motion: reduce のときはアニメーションを止める
8. <html lang="ja"> と <title> を書く。<title> は「3. こうろ」のように番号と小見出し
9. 絵には alt、または role="img" と aria-label で説明を付ける。本文の書き写しではなく、何が描かれているかを書く

■ 見開きは左右に割られる

スマホの縦画面では、見開きが中央あたりで左右に切られ、1ページずつ表示されます。

- 画面の 46%〜54% に主役を置かない（顔・題字・押させたいもの）。ここが切れ目になる
- 左半分だけ、右半分だけを見ても、それぞれ絵として成立させる
- 文は左右どちらかに寄せる。中央をまたいで組まない

■ 絵の作り方（容量に直結します）

1ファイル＝1見開きなので、埋め込んだ絵はページ数だけ複製されます。12枚なら12倍です。

- 図形と線で描けるものはインライン SVG で描く。1枚あたり数 KB で済みます
- 写真や厚塗りの絵は、絵本のフォルダに1枚置いて各ページから相対パスで参照する。同梱したファイルは何ページから参照しても保存は1回だけです（data: URI で埋め込むとページ数だけ複製されます）
- SVG を埋め込むときは <svg> の width / height 属性を外す。残すとその実寸（px）で表示され、入れ物の % を無視します

■ 12見開きの組み立て

- 1〜2: はじまり。だれが、どこにいるか
- 3〜5: ふつうの日常。この世界のきまりを見せる
- 6〜8: ずれが起きる
- 9〜10: いちばん大きい場面。一番いい絵をここに置く
- 11〜12: おさまる。最後の一行で締める

各見開きの本文は2〜3行まで。絵に語らせてください。

■ さわると動く仕掛け

各ページに1つまで。多いと読み聞かせの邪魔になります。押せることが分かるよう、対象をわずかに動かしておく（呼吸するくらいの幅で）。

■ 出力

01.html から 12.html まで、ファイル名を明記して順に出してください。1ファイルずつ小分けでも構いません。

■ 絵本の中身

- 題名:
- 登場するもの:
- 話:
- 色の方針:

（ここに書く）

最小のひな形

自分で書く場合の出発点です。これだけで1ページとして成立します。

<!doctype html>
<html lang="ja">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>1. ページの題</title>
<style>
  html, body { margin: 0; height: 100%; }
  body {
    height: 100vh;
    overflow: hidden;
    background: #1b2a4a;
    color: #f7f1e3;
    font-family: system-ui, sans-serif;
  }
  .txt {
    position: absolute;
    left: 4%; top: 8%;
    max-width: 38%;
    font-size: 3.4vh;
    line-height: 1.8;
  }
  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
  }
</style>
<body>
  <p class="txt">ここに本文。</p>
</body>

納品前に確かめる

外部を読み込んでいないかどうかは納品前の検査に貼り付ければ機械が判定します（貼り付けた内容は送信されません）。以下は、目で確かめる項目です。

そのファイル1つだけをブラウザで開いて、意図どおりに表示される
通信を切った状態でも、見た目が変わらない（＝外部参照が無い証拠）
ウィンドウの幅と高さを変えても、構図が崩れない
左半分だけ、右半分だけを見ても、それぞれ絵として成立している
OS の「視差効果を減らす」設定を入れても、読める

よくある失敗

絵を data: URI で埋め込んでいる

埋め込むと、同じ絵がページ数だけ複製されます。ehonstand は容量でも課金するので、12見開きなら12倍の請求になります。絵はフォルダに1枚置いて、各ページから相対パスで参照してください。

中央に主役を置いている

スマホの縦画面では見開きが左右に切られます。切れ目は中央より少し外側で、4% ぶんは両側に写るようにしていますが、大きなモチーフをノドにまたがせると割れます。

読んだ位置を保存しようとしている

保存は使えません。例外が出てその場でページが止まります。ページ送りはビューアの仕事です。

px で組んでいる

手元では合っていても、別の端末や横画面で崩れます。長さは % か vw / vh で書いてください。

そもそも HTML にすべきか

水彩・厚塗り・写真のような絵

お使いの道具から書き出すだけで済みます。HTML に包む意味がありません

PDF

フラットな図形・線画

拡大しても劣化せず、多くの場合むしろ軽い。CSS アニメーションも動きます

SVG

触れて動く・分岐する

画像では届かない表現のための選択肢。動きが本質的に要る本にだけ使ってください

HTML

迷ったら、まず静止画で作ってください。お使いの道具から PDF で書き出すのがいちばん確実で、こちらの作業も要りません。ehonstand は容量でも課金するので、動かす必要のない本を HTML にすると、作家が損をします。

掲載基準もあわせてご確認ください