- 投稿日：2026/04/17
「あとどのくらい？」が苦手なお子さんへ。
市販のタイマーを買ってみたけれど、
「色の減り方がうちの子には合わない」
「数字が気になって集中できない」
そんなふうに感じたことはありませんか？
自閉症スペクトラム（ASD）のお子さんを持つ親御さんなら、一度は抱く悩みではないでしょうか。
私は50代。プログラミングの知識は「ゼロ」です。 そんな私が、なんとわずか1時間で、時間の概念をもたせる専用のウェブアプリを作ることができました。
使ったのは、AIの相棒「Claude Code」
「自分には無理だ」と諦めていたデジタルツール作りが、こんなに簡単に、そして家族を笑顔にする力に変わった体験をお話しします。
1.作ろうと思ったきっかけ
楽天市場を見ていた時に、素敵なものを見つけました。
こんな素敵なものが1510円。
早速購入しました。
しかし・・・
時計の数字が好きすぎるお子さんだったので逆効果💦
全然活用できませんでした。
だったら、自分でアプリを作ってやる！！！
元特別支援学級担任の私は、長年「その子に合った視覚支援」の重要性を感じてきました。そして今、AI技術（ClaudeCode）を使うことで、プログラミング未経験の保護者や先生でも、わずか数分で「わが子専用のタイマー」を作れる時代が来ました。
本記事では、私が開発した3種類のタイマー（円形・バー型・砂時計型）の作り方をすべて公開し、それをどうカスタマイズして「わが子専用」に仕上げるかを詳しく解説します。
2.Claudeを使ってみよう！
前回の朝の支度アプリでも紹介しましたが
まずは、Claudeをダウンロードしなくてはいけません。
月３０００円ぐらいかかります💦
少し高いなあと思われるかもしれませんが
アプリを作れるだけではなくて、色々なことができるので
ぜひ、触ってみてほしいなと思います。
アプリの入れ方は、まささんの記事を貼っておきます。
初心者向けで、書かれている通りにやれば大丈夫です。
https://library.libecity.com/articles/01KNTGPXSNC2KJ49ZDY0TSH3TC
3. なぜ「選べる3種類」が必要なのか？（元教員の視点）
自閉症や発達障害のあるお子さんにとって、「時間の経過」の感じ方は千差万別です。
円形（タイムタイマー風）：残り時間を「面積」で捉えるのが得意な子に。
バー型（プログレスバー）：左から右への動きで「進捗」を確認したい子に。
砂時計型：上から下へ落ちる動きで「終わり」を実感しやすい子に。
本記事で紹介するコードを使えば、お子さんの特性に合わせて最適な形を選べます。
4.実際の作り方
①実際に使ったプロンプト
まずは、 ClaudeCodeにお願いしてみましょう。
日本語で大丈夫です。
今回は、「時っ間タイマー」の商品紹介文を借りて
「【時間を見える化】「あとどれくらい？」がひと目でわかる魔法のタイマー 「勉強に集中してくれない…」「YouTubeをダラダラ見続けてしまう…」 そんなお悩みを解決するのが、このビジュアルタイマーです。残り時間が「色の面積」で減っていくから、時計が読めないお子さんでも直感的に時間を意識できます！ ✨ ここが「勉強のお供」に最強な理由 集中力が続く「見える化」効果 「あとこれだけ頑張れば終わり！」という終わりが見える安心感で、お子さんのやる気を引き出し、リビング学習の習慣化をサポートします。 これをイメージした自閉症スペクトラムの子供向けのアプリを作りたい」
とお願いしてみました。
ClandeCodeから４つの質問をされました。
この４つを選択するとウェブアプリができました。
②URLで誰でも使えるようにする
noteで紹介するときは： HTMLファイルのコードを全部コピーして「コードブロック」で貼るか、GitHub Pages や Netlify Drop（無料・ファイルをドラッグするだけ）にアップすると、URLで誰でも使える ようになります。 と教えてくれたので、Netlify Dropを使ってみることにしました。
・Netlify Dropのダウンロード
Chromeで「Netlify Drop」で検索してください。
※真ん中の丸にファイルをドラッグしてきます。
※矢印のところを押すとフォルダが出てくるので、そのフォルダをドラッグして「Netlify Drop」の真ん中の丸に持っていきます。
※この画面が出たら、水色をクリックします。
※緑のところが、共有できるURLです。コピーすると、noteやXなどで紹介できます。
できあがったURLをコピーして貼ると↓のようになります。
クリックすると中身を見ることができます。
stirring-queijadas-7d4b4c.netlify.app
自閉症スペクトラムのお子さんへの配慮ポイント：
円形タイマー — 残り時間が色の面積で直感的にわかる。時計が読めなくてもOK
やさしいひらがな表記 — 「5ふん」「べんきょう」「せいかつ」など全てひらがな
感覚過敏への対応 — 音のON/OFF切り替えスイッチ付き。画面の色変化だけでも終了がわかる
見通しが立つ設計 — 残り25%でオレンジ、残り10秒で赤く点滅して「もうすぐ終わるよ」を予告
はげましメッセージ — 20秒ごとに「いいちょうしだよ！」などポジティブな言葉を表示
終了時は大きな花丸演出 — 🎉「よくがんばりました！」で達成感を演出
③バー型、砂時計型も作ってみました
次にバー型を作ってみました。
一つ目の選択肢で「バー型」を選択しました。
quiet-starburst-e9e744.netlify.app
バー型の良いところ：
進み具合が左→右で直感的 — 時間が「進んでいく」感覚にマッチしやすい
5つの区切り線（目盛り） — 「あと○マス分」と数えられるので、見通しが立てやすい
🚩スタート → 🎯ゴール — バーの両端にアイコンを置いて、お子さんが「どこまで行けばゴールか」を視覚的に理解しやすく
色の変化で終了が近いことを予告 — 残り25%でオレンジ、残り10秒で赤く点滅
大きな数字表示 — バーの上に「mm:ss」で時間を大きく表示
円形タイマーは直感的ですが、横バー型は「進捗」という概念がよりわかりやすく、ゴールまでの距離感がつかみやすい形です。
最後に砂時計型も作ってみました。
一つ目の選択肢で「砂時計型」を選択しました。
roaring-florentine-595b8c.netlify.app
砂時計型の特徴：
上の砂が減り、下に砂山ができる — 時間経過が「砂の移動」として視覚化されるので、お子さんに一番なじみ深いメタファー
真ん中から砂が落ち続ける — 動きがあるので「今、時間が進んでいる」のが一目でわかる
時間セット時に砂時計がくるりと回転 — 「ひっくり返してスタート」感を演出
温かみのある黄色（砂色）ベース — 青系とは違う、落ち着くトーン
色の変化で終了予告 — 残り25%でオレンジの砂、残り10秒で赤く点滅
「すなが おちてるよ…」「ぜんぶ おちたよ！」 — 状態に合わせたひらがなメッセージ
5. 「わが子専用」にカスタマイズする魔法のプロンプト
ただ作るだけではありません。お子さんの好きな色やキャラクターに合わせてカスタマイズする方法を伝授します。
ClaudeCodeにこう指示を出してみてください。
これだけで、世界に一つだけのタイマーが完成します。
おわりに：AIは「愛」のツールになる
かつて、視覚支援ツールを作るのは、ラミネートをしたり、マジックテープを貼ったりと、大変な手間がかかる作業でした。
しかし、AI（ClaudeCode）は、その手間を「お子さんと向き合う時間」に変えてくれます。 「うちの子にはどれがいいかな？」 そんな視点で、ぜひ楽しみながらアプリ作りに挑戦してみてください。
