学習アプリ公開中

とけいのれんしゅう(Tick-Tock-Clock)

針の動きと「量」が目で見える、小学2年生向けのアナログ時計・時刻と時間の学習Webアプリです。

現在地
公開中
分野
学習アプリ
使っているもの
Webアプリ・Vanilla JS(ES modules)・SVG・PWA・Cloudflare Workers
まなぶ画面で午後3時10分から80分進めた針の動きと帯、数直線、ブロック、式が表示された画面

どんな作品か

小学2年生向けに、アナログ時計の読み方から「〜分後」「〜分前」「何分間」といった時刻と時間の計算を学べるWebアプリです。

「45分後は何時?」といった問題で、答えをただ暗記するのではなく、針が実際に回り、動いた分が扇形の帯・数直線・時間ブロックとして残るため、「45分進んだ」という量そのものを目で見て直感的に理解できます。

インストールやログインは不要で、PC・タブレット・スマートフォンのブラウザからすぐに利用できます。さらに、家庭学習や授業でそのまま使えるA4テストプリントと解答の作成・印刷機能も備えています。

開発のきっかけ

自分の子どもが時計の読み方自体は理解できたものの、そこから一歩進んだ「〜分後」「〜分前」の計算になると、頭の中で針の動きが思うようにイメージできず苦戦していました。

言葉でいくら説明してもなかなか伝わらなかったため、「針の進む量と時間の経過を、視覚的に一番分かりやすい方法で教えてあげたい」と思ったことが開発のきっかけです。

……なお、アプリの骨組みができあがり実際に動かせるようになったころには、子どもは自分で既に計算のコツを掴んで習得してしまっていましたが、同じように時計の計算でつまずいているお子さんへの教え方に役に立てばと思い、一般公開アプリとして仕上げました。

主な機能と特徴

まなぶ ― 動かして「量」を実感する

+5〜+60分、−5〜−60分のボタンや長針の直接ドラッグで時計を動かせます。動いた範囲は青い扇形の帯として残り、12時をまたいで60分を超えると内側の輪に移るため「1時間ぶん回った」ことがひと目で分かります。連動するデジタル時計、経過分カウンター、数直線、時間ブロック、計算式がすべてリアルタイムに変化します。

せんせいモード ― 手元の問題をそのまま再現

手元のドリルやプリントの条件を一緒に確認できるよう、テンキーで時刻を直接指定し、分数を入力して動かせます。90分などの60分を超える分数にも対応。教える大人のための機能として、普段は折りたたんで邪魔にならないようにしています。

まなぶ画面のせんせいモード。テンキーで午前7時5分を指定し、もどる90分を入力した画面

れんしゅう ― 10種類の問題と、必ず流れるアニメーション解説

「よむ」「かく」「〜分後」「〜分前」「〜時間後」「何分間」「午前午後」「単位変換」「文章題」を★1〜★4の難易度で出題。正解でも間違いでも、回答後には必ず針の動きと式を合わせたアニメーション解説が再生され、納得しながら進められます。

出題画面 解説画面

プリント ― A4のテスト用紙と解答を作成・印刷

1枚あたり6問・8問・10問を選び、A4縦のプリントを作成できます。解答ページでは答えが赤字、動いた範囲がグレーの帯でわかりやすく表示されます。URLにシード値が含まれるため、同じプリントを後から何度でも再印刷できます。

プリント画面。A4に8問のテストと解答ページのプレビュー

漢字・表記レベルの切り替え(3段階)

設定画面やプリントは大人が利用する前提で自然な漢字表記に刷新しました。さらに、学習画面や問題文は子どもの習熟度に合わせて「ひらがな(低学年向け)」「漢字すこし(小学3年生程度)」「一般漢字(大人向け)」の3段階から選べ、ふりがな表示設定とも連動します。

安心・安全設計とPWA対応

広告なし・個人情報の入力不要・完全無料。学習記録はすべて端末内(localStorage)にのみ保存され、外部サーバーには送信されません。PWAに対応しているため、一度アクセスすればオフラインでも動きます。

公開について

Cloudflare上にデプロイしており、どなたでも今すぐ無料でお使いいただけます。

プロジェクトのロードマップ

ここまでと、これから

  1. まなぶ画面と時計アニメーション

    完了

    針のドラッグやボタン操作に連動し、動いた分を帯・数直線・時間ブロック・式で同時に可視化する仕組みを構築しました。

  2. せんせいモードの追加

    完了

    テンキーで任意の時刻と分数を直接指定し、手元のテスト問題や60分を超える計算をそのまま再現できるようにしました。

  3. 10種類のれんしゅう問題と解説

    完了

    4択・針動かし・テンキー入力に対応し、解いた後に必ずアニメーション解説が出る練習モードを実装しました。

  4. A4プリント生成

    完了

    難易度と種類を選んで問題と解答ページをA4縦で作成・印刷・再印刷できるプリント機能を実装しました。

  5. Cloudflareで公開・PWA対応

    完了

    インストール不要のブラウザアプリとして公開し、オフライン環境でも動作するPWA対応を完了しました。

  6. 漢字表記の多段階化(ひらがな・小3・大人)

    完了

    設定画面・プリントを大人向け漢字UIに刷新し、学習画面全体でひらがな/小3程度/大人の3段階切り替えに対応しました。

開発日記

この作品に紐づく記録

記録を絞り込む

この作品に紐づく開発日記は、まだありません。

記録を追加すると、ここへ日付順に並びます。