インストール不要 · HTML/CSS/SVG のみ · こども向け音声読み上げ対応
「ほしとくものおはなし」は、HTML・CSS・SVG・JavaScript だけで作られた
インタラクティブな子ども向け絵本アプリです。
サーバー不要、インストール不要。ブラウザで開くだけで、
アニメーションするキャラクターと音声読み上げが楽しめます。
ほしくんとくもちゃんの友情を描いた全15ページの物語。 クリックやタップでページをめくるたびに、 キャラクターが動き、場面が変わります。
Web Speech API を使った日本語読み上げ機能。 声の種類・速さ・高さ・音量を細かく調整でき、 ▶ よむ / ⏸ 一時停止 / ⏹ とめる で確実に制御できます。
7ページ目では「ほしくんをクリックして水を集める」 インタラクティブゲームが登場。6回集めると物語が進む 仕掛けで、子どもが夢中になります。
キャラクターのまばたき・浮遊・口パク・手振りなど、 すべてSVGとCSSだけで実現。画像ファイル不要で 軽量・高解像度を両立しています。
絵本としての体験を高める10の機能を搭載しています。
表紙を含む全16画面。物語の流れに沿って 場面・演出・インタラクションが変化します。
月・星・木々が輝く夜空のタイトル画面。流れ星アニメーション付き。
主人公のほしくんが夜空から落ちてくる。目線追跡・まばたきアニメーション。
ビルの夜景シーン。窓の明かりが光るピクセルアート風のまち並みを表示。
大きな白い雲キャラ「くもちゃん」が登場。クリックで手を振る反応あり。
ほしくんがバウンスアニメで飛び跳ねる。ハートと星がふたりの周りに浮かぶ。
大きな月が登場し、月の顔がまばたきする。クレーター付きの月を描画。
くもちゃんが悲しい顔になり、CSSアニメーションの雨粒が画面に降り注ぐ。
ほしくんをクリックして水を6回集めるミニゲーム。バケツの水位がリアルタイムで上昇。クリア後に自動でページが進む。
太陽が昇り、虹が6色グラデーションで画面に広がる。くもちゃんが笑顔に。クリックで花火パーティクル。
大きな虹の上をふたりが歩くシーン。白い雲が左右に揺れて流れるアニメーション。
青空と花畑のシーン。白いこうのとりが翼を動かして飛ぶ。クリックで星が舞う。
暗い森の中をほしくんの光で照らすシーン。ほたるの光がシマーアニメーションで点滅。
うさぎ・ふくろうのSVGキャラクターが登場。ふくろうが揺れるアニメーション付き。
子どもたちのシルエットが星に願いをかけるシーン。月が大きく照らす幻想的な構図。
ほしくんがオーラを放ちながら夜空へ昇っていく。くもちゃんが手を振って見送る。
ふたりが並ぶハッピーエンド画面。「もういちど よむ」ボタンで最初に戻れる。
ブラウザ標準の Web Speech API を活用。 外部ライブラリ不要で日本語読み上げを実現します。
お使いのブラウザに入っている音声を自動検出。日本語（Kyoko・Otoya・Harukaなど）を優先表示し、クリックで試し読みができます。
スライダーで細かく調整可能。子どものペースに合わせてゆっくり読み上げることができます。
セッションIDによる管理で、「とめる」ボタンを押せばどんな状況でも確実に音声が止まります。ページをめくっても自動で停止します。
「もじをひょうじ」「じどうよみあげ」「よみおわったらつぎへ」の3つを独立してON/OFF可能。使い方に合わせてカスタマイズできます。
外部ライブラリ・フレームワーク・サーバーは一切不使用。 Web標準技術だけで高品質な体験を実現しています。
HTMLファイルをブラウザで開くだけで始められます。 難しい設定は一切ありません。
音声機能はブラウザのセキュリティ仕様により、最初のクリック操作の後から使用できます。
日本語の声が表示されない場合は、OSの設定から日本語音声をダウンロードしてください。
推奨ブラウザは Google Chrome または Safari です。