絵本のWebページにする

絵・文・声をまとめて、スマホでページをめくれる絵本にします。Claude Code に、ファイルの置き方と仕様を渡して作ってもらいます。

フォルダにそろえる

images/page01.png〜、audio/page01.mp3〜、お話の文を story.txt に。名前の付け方をそろえておくと、頼み方が簡単になります。

名前の付け方をそろえておくと、「page01 の絵と page01 の声を同じページに」と簡単に伝えられます。

仕様メモを書く

「左右のスワイプかボタンでページをめくる」「ページを開くと読み上げが流れる（自動再生できないときは再生ボタン）」「文字は大きく」「外部のサービスは使わない」。仕様メモの書き方

作ってもらい、スマホで触る

できたら、スマホのブラウザで開いて触ります。ボタンの大きさ、文字の大きさ、音の始まり方を直してもらいます。

そのまま使える頼み方の例

（Claude Code で）
このフォルダの素材で、スマホで読めるデジタル絵本のWebページを作ってください。
- 素材：images/page01.png〜page08.png、audio/page01.mp3〜page08.mp3、story.txt（1ページ1段落）
- 1画面1ページ。絵を大きく、その下に文
- 左右のスワイプと、大きな「まえ」「つぎ」ボタンでめくる
- ページを開くと読み上げが流れる。ブラウザが自動再生を止めたときは、大きな再生ボタンを出す
- 文字は大きく、ひらがなが読みやすいフォントで
- HTML・CSS・JavaScript だけで、外部のサービスやライブラリは使わない
まず計画を出して、止まってください。

できたらチェック

素材をそろえて、絵本のページを作ってもらった
スマホで触って直してもらった

このステップ：0 / 2