1番使いやすいWebタイマーアプリを作りました
はじめに
この度、Web タイマーアプリ「UnTimer」を作成しました。とは言っても、実際に実装したのは弊社の新人エンジニアです。
この記事では、Web タイマーを作った理由や、使いやすいタイマーについて考えたことやこだわった点について紹介していきたいと思います。
今さら Web タイマーを作った理由
そもそも、なぜ今さら掃いて捨てるほどある Web タイマーを作ろうかと思ったのかについて言い訳させてください。
理由は主に 2 つあります。
- ブラウザで上位にヒットする Web タイマーの UI がイマイチだから
- 新人エンジニアにサービスをリリースするまでを体験してほしかったから
それぞれについて、もう少し詳細に説明します。
検索して出てくる Web タイマーの UI ビミョーじゃない？
社内のオンラインミーティングでタイマーを使う機会がちょくちょくありました。
その度にブラウザで「タイマー」と検索して、上位に出てくる Web タイマーを画面共有するのですが、その操作感に毎回ちょっとした不満を感じていました。（もちろん無料で提供してくださっていることには感謝しております。）
ミーティング内でも「もっと使いやすいタイマーあったらいいのになぁ」のような会話をよくしていました。
課題に感じる点のひとつとして、「時間を増減させる UI や設定した時間のクリアやリセットが直感的ではない」といったことが挙げられます。
あるタイマーでは時間の設定がスライダー UI になっていたり、あるタイマーでは時間を減らそうと思ったら減らすために減らすモードに切り替えないといけなかったり、といった具合で時間の設定が初見の人には難しいだろうなと思う UI になっていることがあります。また、クリアやリセットも意外とタイマーによってまちまちで、思った通りにクリアできない、、なんてこともあります。
もう一点課題に感じている部分が「よく設定しがちな時間のプリセットが多すぎて逆に設定しづらい」という点です。
2 分や 5 分、10 分などよく使いそうな時間のプリセットがタイマーによって用意してあることが多いです。用意してくれているのはありがたいのですが、このプリセットが多すぎて目的に時間を探しにくいこともあります。結局、探さずに最初から時間をいじって設定してた方が早く設定できていた、なんてことになりかねないような場合もあります。
このような課題感を感じていることから Web タイマー作ってみてもいいかもなと思いました。
新人教育の一環として
弊社には未経験採用して半年ほど経つ新人エンジニアが在籍しています。
新人エンジニアが成長してきたので、一人で Web のサービスをリリースするまでの過程を体験してほしいなという時期でした。
そこで、難易度として難しくはない Web タイマーを作ってみるか！となりました。（最悪作ったタイマーは弊社のミーティングでは活躍するし。）
上記の理由から、この世にまた Web タイマーをリリースしてしまったということになります。
Web タイマーアプリ「UnTimer」の機能
今回作成した Web タイマーアプリの正式名称は「UnTimer」といいます。
「UnTimer」の機能について紹介します。
主要な機能としては、シンプルなカウントダウン式のタイマーです。
時間・分・秒をそれぞれ 1 ずつ増減させることができます。また、時間は「10 分」「30 秒」「10 秒」ずつ増やすこともできます。
「スタート（ストップ）」ボタンと「クリア（リセット）」ボタンがあります。カウントダウン実行中は「スタート」ボタンが「ストップ」ボタンに、「クリア」ボタンが「リセット」ボタンに変わります。
終了すると、時間が点滅して教えてくれます。今回、終了時に音を出す機能は削りました。タイマーなのに音ならんのかい！という声が聞こえてきそうですが、ブラウザで使うタイマーなので、音はひとまずいらないかと思い初期リリースでは実装しませんでした。今後実装するかもしれません。
また、メモ欄もあります。ブラウザのローカルストレージに保存されます。ちょっとだけ競合優位性を出そうとした結果の機能です。
Web タイマーアプリの UI でこだわったところ
今回作成した Web タイマーアプリの UI でこだわった部分について紹介させてください。
時間の設定 UI をできるだけシンプルに
時間の設定 UI をシンプルにしました。時間・分・秒を直感的に増やしたり減らしたりできることを念頭にデザインしました。
その上で、「30 秒とか設定するのめんどくさ！」と思ったら、「30 秒増やすボタンにあるじゃん」と気づいてもらえるような導線にしています。
プリセットは極力少なく
時間設定をショートカットできるプリセットは極力少なくしました。
結果、「10 分」「30 秒」「10 秒」ずつ増やせるボタンを用意するだけにとどまりました。選択肢が多すぎると、逆に迷ってしまうので、とにかく減らしてみました。
メモ欄がある
タイマーを使いやすくする方向とはずれますが、メモを入力できるようにしました。
Web タイマーの使い所は、オンラインミーティングでタイムキーパーが画面共有する際が多そうなので、発表内容などメモれると便利か？と思いつけました。正直な話をすると、少しでも競合優位性を出せればと思っただけです。
Web タイマーアプリのと実装
実装に関しては、新人エンジニアが Qiita で詳しく解説しているので、そちらを読んでいただけると幸いです。
まとめ
今回は、シンプルな Web タイマー「UnTimer」を紹介しました。
作成した Web アプリは月並みですが、新人エンジニアの成長になり良かったと思っています。
ぜひ、Web でタイマーを使う機会がございましたら、使っていただけると嬉しいです。
最後まで読んでいただきありがとうございました。
Discussion
オンラインでLTをするときにこういうのが欲しかったです！！