※本記事はアフィリエイトプログラムを利用しています。
残り時間が色と面積で見える「ビジュアルタイマー」を作って、このブログの中に置きました。無料で、登録もインストールも要りません。ページを開いて、時間を決めて、スタートを押すだけです。もともとは私が働いているITものづくり教室で使いたくて作りはじめたものですが、勉強でも家事でも在宅ワークでも同じように使えるものになったので、公開することにしました。タイマーだけを小さな窓に切り離して、他の作業をしながら手前に浮かせておくこともできます。この記事では、どんなツールなのか・どう使うのか・作っているときに何に詰まったのかを、順番にお話しします。
ビジュアルタイマーを公開しました（無料・登録不要）
まずは場所からご案内します。こちらのページで、そのまま使えます。
スマートフォンでもパソコンでも、ブラウザで開けばすぐに動きます。アプリのダウンロードは不要ですし、会員登録もありません。ブックマークしておいて、必要なときにポンと開いてもらうのがいちばん気楽な使い方だと思います。
できることを、ざっとまとめるとこんな感じです。
- 残り時間が色つきの面積で減っていく。数字が読めなくても「あとどれくらいか」が見た目でわかります。
- 色は緑 → 黄 → 赤に変わる。初期設定では残り50%で黄色、残り15%で赤に切り替わります。
- 表示は3種類から選べる。円（塗り）・円（リング）・バーの3スタイルです。
- プリセットボタンで1分・3分・5分・10分・15分・25分・30分・60分をワンタップ設定。もちろん時・分・秒を直接入力してもOK（最大24時間）。
- 終わったら、音・画面の点滅・ブラウザ通知でお知らせ。音量も変えられますし、ぜんぶオフにもできます。
- 全画面表示ができるので、離れた席からでも見えます。
- タイマーだけを小窓に切り離せます（ピクチャインピクチャ）。他のアプリを操作していても、残り時間が手前に浮いたままになります。
- 暗い配色にも対応。お使いの端末のダークモード設定に自動で合わせます（明るい・暗いに固定もできます）。
- 設定は次に開いたときも残ります。毎回いじり直す必要はありません。
「あと5分」が伝わらないから、時間を面積にした
そもそもなぜタイマーを作ったのか、という話を少しだけさせてください。
私はITものづくり教室の教室長をしていて、子どもたちがロボットやゲームやモデリングの制作に取り組む場に、毎日いあわせています。そこでよく起きるのが、「あと5分でおしまいだよ」と伝えても、まったく実感を持ってもらえない、という場面です。時計の読み方を本格的に習うのは小学校2年生くらいですから、それより小さい子にとって「5分」はただの音でしかありません。長いのか短いのかも、体感としてつかめていないんですよね。
それなら、時間を数字ではなく量にして渡してしまえばいい。残り時間を扇形の面積にして、減っていくところを一緒に見る。そうすると「あ、ほんとだ、もうちょっとしかない」と、子ども自身の口から出てくることがあります。大人が「時間だよ」と言って区切るのと、本人が見て気づくのとでは、そのあとの切り替わり方がぜんぜん違います。私は普段から、結果よりも過程を認めることを大事にしているのですが、「自分で見て、自分で決めた」という過程は、いちばん褒めがいのあるところだと思っています。
そして、これは子どもだけの話でもありませんでした。私自身、副業の資料作成をしていると平気で30分溶かしてしまうタイプなので、いま自分がどれだけ時間を使ったのかを、視界の端に置いておきたかったんです。作ってから、いちばん使っているのはたぶん私です。
使い方は3ステップだけ
操作はとてもシンプルにしました。
- 時間を決める。「10分」などのプリセットボタンを押すか、時・分・秒の欄に直接数字を入れます。
- スタートを押す。色のついた面積が減りはじめます。
- 終わりを待つ。時間になると、音・点滅・通知（オンにしていれば）でお知らせします。
途中で「一時停止」を押せば止まりますし、もう一度押せば続きから再開します。「リセット」で最初の設定時間に戻ります。中央には残り時間の数字も出しているので、大人が見るときは数字、子どもと見るときは面積、というふうに、同じ画面を両方の見方で使えます。
ちなみに、色が変わるタイミングは「残り50%」と「残り15%」を初期設定にしています。ここは実際に教室で使いながら決めた数字です。早すぎると最初から急かされている感じになりますし、遅すぎると気づいたときにはもう終わっている。半分で「折り返したよ」、15%で「そろそろまとめよう」くらいの体感がちょうどよく、この配分に落ち着きました。
教室で使いたくて足した、細かい設定
画面右下の「⚙ 設定」を開くと、いくつか調整ができます。ここが、既製品ではなく自分で作った理由がいちばん出ているところです。
まず表示スタイル。円（塗り）・円（リング）・バーの3つから選べます。小さいお子さんには面積の変化がはっきり出る「円（塗り）」がいちばん伝わりやすいのですが、大人が作業のおともにするなら、視界の邪魔になりにくい「バー」も気に入っています。
次に色としきい値。3つの色それぞれを好きな色に変えられますし、「何%で色を変えるか」も自分で決められます。刺激の強い赤が苦手なお子さんもいるので、赤をやわらかいオレンジに変える、といった調整ができるようにしました。私はインクルーシブ対応を強化するプロジェクトにも関わってきたので、「その子に合わせて弱められる」ことは最初から入れたい機能でした。既製品だと「この機能さえ切れたらな」と思う場面がわりとあるんですよね。
そして終了のお知らせ。アラーム音のオン・オフと音量、画面の点滅、ブラウザ通知を、それぞれ切り替えられます。教室では大きな音が他の子の集中を切ってしまうので、音を消して点滅だけにすることがあります。逆に、家事をしながら別の部屋にいるときは音を大きめに。同じツールでも、場面によって「知らせ方」を変えられるようにしたかったのです。
最後に全画面表示。「⛶ 全画面」を押すとタイマーだけが画面いっぱいに広がり、見出しや入力欄は隠れます。教室で1台のモニターに映して全員で見るときや、発表の持ち時間を見せるときに使っています。戻るときはEscキーか、もう一度ボタンを押すだけです。
それから表示テーマ。初期設定の「自動」にしておくと、パソコンやスマホのダークモード設定に合わせて、明るい配色と暗い配色が切り替わります。夜に作業しているときに白い円がまぶしい、ということが起きないようにしたかったのと、教室のモニターは環境によって見え方がまるで違うので、手動で「明るい」「暗い」に固定もできるようにしました。
いちばん気に入っているのは「小窓に切り離す」機能です
公開したあとに足した機能なのですが、個人的にはこれがいちばん便利で、いまや毎日使っています。タイマーだけを小さな別ウィンドウに切り離して、常に手前に浮かせておく機能です。いわゆるピクチャインピクチャ（動画を小さな窓にして、他の作業をしながら見られるようにするあの機能）を、動画のかわりにタイマーでやっています。
きっかけは、全画面表示が自分の作業にはまったく向いていなかったことでした。教室でみんなに見せるには全画面が最高なのですが、私がパソコンで資料を作りながら使うとなると、画面いっぱいのタイマーは邪魔でしかありません。かといって普通に開いておくと、別のタブに切り替えた瞬間に見えなくなる。「見えないタイマー」は、無いのとほとんど同じなんですよね。
そこで「⧉ 別ウィンドウ」ボタンを押すと、タイマーが小さな窓になって画面の隅に浮かびます。この窓は好きな場所へ動かせて、他のアプリを操作していても手前に残り続けます。ブラウザを最小化しても消えません。資料を書きながら視界の端で色が変わっていくのが見えるので、「そろそろ切り上げよう」と自然に思えます。25分のプリセットと組み合わせると、集中したい作業のおともとしてかなり優秀です。
仕組みの都合で、タイマーは複製ではなく小窓へ引っ越ししています。そのため小窓を開いているあいだ、元のページには「タイマーは別ウィンドウで動いています」という案内が出ます。窓を閉じれば元の位置にすっと戻り、動いていた時間もそのまま引き継がれるので、うっかり閉じても計り直しにはなりません。
ひとつだけご注意を。この機能はパソコンのChrome・Edge・Firefoxでのみ使えます。Safariとスマートフォンはこの仕組みにまだ対応していないので、その場合はボタン自体が表示されません（押しても何も起きない、という不親切な状態にはならないようにしてあります）。スマホで手前に固定したいときは、全画面表示を使ってください。
入力した内容は、どこにも送っていません
ブラウザで動くツールを人に勧めるとき、いちばん気になるのはここだと思うので先に書いておきます。このタイマーはサーバーに何も送っていません。設定した時間も、選んだ色も、外に出ていきません。すべてお使いのブラウザの中だけで動いています。
設定が次回も残るのは、ブラウザに用意されている小さな保存領域（ローカルストレージ＝そのブラウザの中だけに残るメモ帳のようなもの）に、色や音量などの設定だけを書いているからです。プライベートブラウジングでは保存されませんが、タイマー自体はいつもどおり動きます。ログインも要らないので、教室のパソコンや共用の端末でも気軽に開いてもらえます。
作ってみて詰まったところ（非エンジニアのひとりごと）
私はエンジニアではありません。それでもAIと会話しながらなら形にできる、という感覚は、claudeとの出会いを書いた回のころから少しずつ育ってきたものです。今回もイメージを言葉で渡して、出てきたものを見て直して、を往復しながら作りました。とはいえ、すんなり終わったわけではありません。
いちばん困ったのは、WordPressの固定ページに書いたプログラムが、保存するたびに消えてしまうことでした。編集画面が「これは危ないかもしれない」と判断して、勝手に取り除いてしまうんですね。悪気はないどころか親切な仕様なのですが、こちらは動かしたいので困ります。結局、ページ本文には見た目の部分だけを置いて、動きの部分はサイトの裏側（必ず読み込まれる場所）に別ファイルとして置く、という形に変えました。おかげで、あとから本文の文言を直してもタイマーが壊れません。
もうひとつは、同じ内容のファイルが増えてしまう問題です。このタイマーは「ページの中身」「見た目の設定」「動きの部分」と、置き場所が3か所に分かれています。直すたびに3か所を手で書き換えていたら、いつか必ずどれかが古いままになります。実際、以前まったく同じ理由でサイト全体の見た目を消しかけたことがあるので、今回は最初から編集するファイルは1枚だけと決めて、そこから3か所分を機械的に作り直す形にしました。ついでに、時間の計算や色の切り替わりが正しいかを自動で確かめる仕組みも入れてあります。細かい話ですが、「あとで自分が困らないようにしておく」のは、ニュースレター配信ツールを自作したときにいちばん学んだことでした。
小窓の機能でも、思ってもみないところでつまずきました。別の窓は元のページとは別の場所なので、そのまま移しても見た目の設定がまるごと迷子になり、素っ気ない文字の羅列になってしまうのです。中身は同じなのに、引っ越し先に家具が付いてこないような状態ですね。解決策としては、元のページから「タイマー用の見た目の設定だけ」を自動で拾って小窓に持たせる形にしました。おかげで、あとから見た目を直したときも、小窓のほうを直し忘れることがありません。それと、最初はタイマーを小窓に「複製」しようとしたのですが、それだと本体と小窓で時間が二重に進んでしまいます。複製ではなく引っ越しにしたのは、そのためです。
こういう「作りたいものは明確だけど、技術がわからない」ときにAIと組むと、手が止まる時間が本当に短くなります。配色を数値でどう指定すればいいのか、といったところで悩まずに済むので、私は「教室で使いやすいか」だけを考えていればよかった。ブログ更新をまるごと自動化してみた話のときにも感じましたが、非エンジニアにとってのAIは、代わりに作ってくれる人というより、隣で手を動かしてくれる相棒に近いなと思います。
こんな場面で使えます
教室以外でも、けっこう出番があります。
- 勉強・作業（25分プリセット＋小窓）。25分集中して5分休む、といった区切り方をしたい方に。別ウィンドウにして画面の隅へ置いておくと、資料や動画を開いていても残り時間が見えたままです。
- お子さんの切り替え。「もう終わり」ではなく「あとこれだけあるね」と一緒に画面を見るのがコツです。
- 家事のスキマ時間。煮込み中の10分、洗濯が終わるまでの15分など。音を大きめにして別室でも気づけるように。
- 会議や発表の持ち時間。全画面にして共有画面に映すと、話している人も聞いている人も同じ残り時間を見られます。
なお、「全部自作したほうがいい」とはまったく思っていません。市販のビジュアルタイマーはとてもよくできていて、つまみを回すだけで残り時間が面積でわかる円盤タイプは、電源のオンオフだけで使えて手軽です。パソコンを開かずに机に置いておけるのは、やはり物理の強みだと思います。気になる方は楽天でビジュアルタイマーを探してみるのもおすすめです。今回のツールは、それとは別に「いま手元にある端末ですぐ出せる」「色や音を場面ごとに変えたい」という需要に向いています。どちらかを選ぶというより、机の上には円盤、外出先やパソコン作業ではブラウザ、くらいの使い分けが現実的だと思います。
これから直したいところ
公開はしましたが、まだ手を入れたいところは残っています。たとえば、終わったあとに自動で次の時間を始めたい、といった要望が自分の中にあります。作りっぱなしにせず、使いながら直していくつもりです。
もし使ってみて「ここが使いにくい」「この機能がほしい」と思ったら、ぜひ教えてください。自分ひとりで使う想定で作ると、どうしても自分の癖に寄っていくので、外からの一言がいちばん効きます。
よくある質問
Q. 無料ですか？ 登録は必要ですか？
A. 無料で、登録もインストールも不要です。ページを開けばそのまま使えます。ブックマークしておくと次から一瞬で開けます。
Q. 入力した時間や設定は保存・送信されますか？
A. サーバーには何も送っていません。色や音量などの設定だけが、お使いのブラウザの中に保存され、次回も引き継がれます。プライベートブラウジングでは保存されませんが、タイマーは通常どおり動きます。
Q. スマートフォンでも使えますか？
A. 使えます。画面の大きさに合わせて表示が変わります。なお終了時のブラウザ通知は、iPhoneのSafariではホーム画面に追加したときのみ動作します。音と画面の点滅はそのまま使えます。
Q. 「別ウィンドウ」のボタンが見当たりません
A. この機能はパソコンのChrome・Edge・Firefoxでのみ使えます。Safariやスマートフォンでは、ブラウザ側が対応していないためボタン自体を表示していません。その場合は全画面表示をお使いください。
Q. 何歳くらいから使えますか？
A. 時計が読めない年齢のお子さんからでも使えます。むしろ数字で時間をつかめない時期ほど、面積と色の変化が効きます。使うときは「もう終わり」ではなく「あとこれだけあるね」と一緒に見るのがおすすめです。
まとめ
「あと5分」が伝わらないのは、時間が目に見えないからでした。だったら見えるようにしよう、と思って作ったのが今回のビジュアルタイマーです。無料・登録不要で、色も音も知らせ方も、その場に合わせて変えられます。教室で使うために作りましたが、タイマーだけを小窓に切り離せるようにしてからは、私自身の在宅作業の相棒にもなりました。勉強にも家事にも、そのまま使えると思います。よかったらビジュアルタイマーのページをのぞいてみてください。
このブログでは、非エンジニアの私がAIと一緒にいろいろ作ってみた記録や、ものづくり教室での気づきを、ぐーたらなりにコツコツ書いています。XやInstagramのフォロー、そして過去の記事ものぞいてもらえたらうれしいです。それではまた、次の記事でお会いしましょう。
コメント