「いま何分ある？」というWebアプリを作りました。

5分や10分だけ時間が空いたとき、やりたいことはいくつもあります。 メールを返す、机を片づける、ブログを書く、個人開発を進める。 ただ、候補が多いほど「今どれをやるか」を決めるのに時間がかかります。

そこで、使える時間を選ぶと、その時間でできそうなことを1つだけ表示するWebアプリを作りました。 アプリ名は、「いま何分ある？」です。

きっかけは、その場ですぐ使えるWebアプリを置きたかったこと

個人サイトに、説明を読まなくてもその場ですぐ使えるWebアプリを1つ置きたいと考えていました。 そこで出てきたのが、使える時間を「5分・10分・20分」から選ぶと、その時間でできることを1つ表示する案です。

表示するタスクは、たとえば次のようなものです。

  • 未返信のメッセージを1件だけ返す
  • 机の上のものを3つ戻す
  • 記事の見出しを3つ書く

TODOリストのように候補を並べるのではなく、表示するのは1件だけです。 このアプリでは、タスクを管理することよりも、その場で次にやることを決めやすくすることを優先しました。

名前は、最終的に機能が伝わるものにしました

最初は「すきまぽん」という名前も考えていました。 すきま時間に、やることが1つ出てくるという意味では合っています。 ただ、名前だけでは何をするアプリなのか少し伝わりにくく感じました。

その後、猫の手が箱からタスクを取り出すアイコン案から、「ニャにする？」や「これやらニャいか？」といった名前も検討しました。 ただ、猫を名前に入れると、アプリの機能よりもキャラクター性が先に見えやすくなります。 そのため、最終的には機能がそのまま伝わる名前にしました。

いま何分ある？

猫の要素は、名前やコピーではなく、アイコンやUIの一部にだけ残しています。

初期版は、時間を選ぶだけの構成にしました

当初は、時間を選んだあとにカテゴリを選ぶ案もありました。

  • 仕事
  • 家
  • 個人開発
  • なんでも

ただ、カテゴリ選択を入れると、ユーザーにもう一度判断を求めることになります。 このアプリでは、迷う時間を減らしたかったため、初回リリースは次の2ステップに絞りました。

  1. 5分・10分・20分から選ぶ
  2. タスクが1つ表示される

画面上の文言も短くしています。

いま何分ある？

これをやってみる？

「これをやってみる」よりも「これをやってみる？」としたほうが、提案としてやわらかく見えたため、この文言にしました。

タスクの補足文は、指示が強く見えないように調整しました

タスクには、短い補足文を付けています。 たとえば、次のような形です。

洗面台をさっと拭く 気になるところをひと拭き。

最初は、次のような文言を多く使っていました。

  • 磨き上げなくていい。
  • 全部返さなくていい。
  • 引き出しの中まではやらない。

作業範囲を小さくしたかったのですが、並べてみると少し指示が強く見えました。 そこで、制限を伝える書き方ではなく、目安を添える書き方に変更しました。

  • 目についたものだけで十分
  • 気になるものから、ひとつ
  • 仮タイトルでもOK
  • 読めるところまで進める

さっぱりした雰囲気は残しつつ、言い切りすぎない表現にしています。

「別の候補」を押したときの抽選方法も決めました

見た目はシンプルですが、候補の出し方には少し工夫が必要でした。 候補の数が少ないタスクだと、「別の候補」を押したときに同じタスクが何度も表示されてしまいます。

そのため、初期セットは5分・10分・20分ごとに複数件を用意し、直近に表示した候補を一時的に除外するようにしました。 抽選方法は次のとおりです。

  1. 直近3件を除外して抽選する
  2. 候補が足りなければ、除外数を2件、1件と減らす
  3. 一周したら履歴をリセットして、もう一度抽選する

履歴は、ページを開いている間だけstateに保持します。 リロードすると消える仕様です。 ログインや永続保存は入れず、1回の利用中に同じ候補が続きにくくなる範囲にとどめています。

猫の要素は、アイコンとカードの一部に入れました

このアプリには、猫の要素を少しだけ入れています。 アプリアイコンは、箱から猫の手がカードを取り出す線画にしました。 猫の顔は出していません。

タスクカードの右下には、猫のしっぽだけを表示しています。 最初は、カードの枠線の一部をしっぽにする案を試しました。 ただ、短い線では意図が伝わりにくく、曲線を増やすと装飾だけが目立ちました。 そこで、枠線とは別のイラストとして、右下からしっぽが少し見える形に変更しました。

猫をアプリ全体のテーマにはせず、UIの小さなアクセントとして使っています。

完了時だけ、少しデザインを変えました

通常画面は、白黒を中心にしたシンプルなデザインです。 完了時には、次の要素を入れました。

  • 肉球スタンプ
  • 「おつかれさまでした！」の文字
  • 囲み線の一部に猫のしっぽを使う

通常時は操作のわかりやすさを優先し、完了時だけ少しデザインを変える構成にしています。

MVPで入れたもの、入れなかったもの

初期版に入れた機能は次のとおりです。

  • 5分・10分・20分から時間を選ぶ
  • タスクを1件表示する
  • 別の候補を見る
  • これにする
  • 今は休む
  • 同じ候補が連続しにくい抽選

一方で、次の機能は入れていません。

  • ログイン
  • 履歴の永続保存
  • 自分でタスクを追加する機能
  • 通知
  • カテゴリ選択
  • 利用状況の分析

便利そうな機能はほかにもありますが、初期版では「時間を選ぶと1つ出る」という流れを崩さないことを優先しました。 まずは、わたし自身が使ってみて、必要になった機能を追加する予定です。

実装よりも、文言や余白の調整に時間がかかりました

実装自体は、それほど複雑ではありません。 JSONから時間に合う候補を抽出し、履歴を見ながら1件表示します。

一方で、実際に作ってみると、次のような細かい調整に時間がかかりました。

  • 「これをやってみる」と「これをやってみる？」のどちらにするか
  • 数字と「分」の間をどのくらい空けるか
  • 補足文が強い言い方に見えないか
  • しっぽが意図した装飾として見えるか
  • 猫の要素をどこまで入れるか

機能が少ない分、文言や余白、線の形が画面全体の印象に影響します。 今回は、機能追加よりも、使ったときに迷わないことと、見た目がうるさくならないことを優先して調整しました。

まとめ

「いま何分ある？」は、5分・10分・20分の中から使える時間を選び、その時間でできそうなタスクを1つ表示するWebアプリです。 初期版では、カテゴリ選択や履歴保存は入れず、時間選択から提案までを短い流れにしました。 猫の要素も、アイコン、カードのしっぽ、完了時の演出に限定しています。

今後は、わたし自身が使いながら、候補の内容や必要な機能を調整していく予定です。