「ほしとくものおはなし」｜画像生成と会話するAIの魅力と可能性
https://note.com/chat_gpt777/n/ncaab54af6539
ブラウザで動く
インタラクティブ絵本
インストール不要 · HTML/CSS/SVG のみ · こども向け音声読み上げ対応
「あなたの物語が、ブラウザの中で命を吹き込まれる。」
「ほしとくものおはなし」は、ただ読むだけの絵本ではありません。
HTML、CSS、そしてSVG。Webの基本技術だけで構築された、動く物語のプラットフォームです。
このソフトウェアは、物語を「記述」するだけで、キャラクターを踊らせ、雨を降らせ、心温まる音楽（音声）を奏でることができます。
難しい環境構築も、重たい画像ファイルも必要ありません。
あなたが描きたい物語を、魔法のようなソースコードに変えて、世界中の子どもたちに届けませんか？
今日からあなたも、デジタルの童謡作家。
このソフトウェアのソースコードをコピーしてClaudeに貼り付け、自分の物語を貼り付けて、新しい物語を作成してと依頼するだけで、自分だけの物語が作れます。基本的なフレームはこのソフトウェアのような仕組みは保持したまま。
このソフトウェアについて
「ほしとくものおはなし」は、HTML・CSS・SVG・JavaScript だけで作られた インタラクティブな子ども向け絵本アプリです。サーバー不要、インストール不要。ブラウザで開くだけで、 アニメーションするキャラクターと音声読み上げが楽しめます。
ストーリー絵本
ほしくんとくもちゃんの友情を描いた全15ページの物語。 クリックやタップでページをめくるたびに、 キャラクターが動き、場面が変わります。
音声読み上げ
Web Speech API を使った日本語読み上げ機能。 声の種類・速さ・高さ・音量を細かく調整でき、 ▶ よむ / 一時停止 / とめるで確実に制御できます。
ミニゲーム
7ページ目では「ほしくんをクリックして水を集める」 インタラクティブゲームが登場。6回集めると物語が進む 仕掛けで、子どもが夢中になります。
SVGアニメーション
キャラクターのまばたき・浮遊・口パク・手振りなど、 すべてSVGとCSSだけで実現。画像ファイル不要で 軽量・高解像度を両立しています。
ほしとくものおはなし
https://pasopia.velvet.jp/2026/soft/index076.html
ほしとくものおはなし — ソフトウェア解説
https://pasopia.velvet.jp/2026/soft/ehon-overview.html
