初めての個人開発 #集中タイマー
こんにちは、Umiです。4月に予定していた語学留学が延期になったため、あつ森にいることが多いです🌳
普段はデザインを中心にフリーランスで活動をしています。
今日は初めて個人開発をしたのでそのまとめと、おまけでFigmaデータ公開します。
つくったもの
集中タイマー（英語表記：Focus Timer）
https://timer.umiremix.com/
集中タイマーとは
ポモドーロ・テクニック（※）を基にしたWebアプリです。
集中時間と休憩時間を決めて繰り返すことでユーザーの集中力アップを目的としています。
家事、勉強、仕事など様々な場面でご利用ください。
※ポモドーロ・テクニック（英: Pomodoro Technique）とは、時間管理術のひとつ。 1980年代にイタリア人のフランチェスコ・シリロによって考案された。このテクニックではタイマーを使用し、一般的には25分の作業と短い休息で作業時間と休息時間を分割する。 1セットを「ポモドーロ」と呼ぶ。これは、イタリア語で「トマト」を意味する言葉で、シリロが大学生時代にトマト型のキッチンタイマーを使用していたことにちなむ。
出典: フリー百科事典『ウィキペディア（Wikipedia）』
作ろうと思ったきっかけ
普段一緒にお仕事しているもぐさん（@mogmet）が「たまにポモドーロタイマー使って仕事している」と言っていたのがきっかけです。
その後、mocriという作業通話アプリでポモドーロ・テクニックを基にした集中モードというものを使用し、「これはいい！」となりました。
後日PCの作業用に使用しようと思い、Webアプリのポモドーロタイマーを探したのですが、どれもデザインが良くなかったり広告が目立っていたり使いにくかったりしたので「よし、自分で作ろう」となりました。
また、新型コロナウイルスの影響で自粛要請が出はじめたのもひとつの理由です。
急にリモートワークになったり、学校が休校になったりして、 #おうち時間 や #stayhome というタグが流行になりました。
普段と違う環境の中で、少しでも今の時間を有効的に使ってもらえたらいいなあと思ったのも制作の後押しとなりました。
Webアプリにする意味
ちなみにスマホのネイティブアプリでは使いやすいタイマーもあるのですが、なぜWebアプリを作ったかというと、スマホのネイティブアプリは、
1. ダウンロードしないといけないのでユーザーが使うまでに時間がかかる
2. ダウンロードしたらしたで容量を使うし気軽に消しにくい
3. ストアの認証が必要でリリースやアップデートするのに時間がかかる
というデメリットがあるのが主な理由です。
もちろんスマホのネイティブアプリにもメリットはあり、「無駄な通信が発生しにくい」「オフラインでも使える」「プッシュ通知が使える」などがあるのですが、それらはWebでも大体は解消することができます。（PWAを使えばの話で、今後のアップデートでやっていこうかと思います。）
開発に使った技術
主に使ったのはNuxt＋Firebase（今はHostingのみ）です。
現在Web Push機能を追加中なので、Firebaseを選んでいます。
多言語対応で使っているのはnuxt-i18nで、それ以外のモジュールは特に使ってないです。SPAで、TypeScriptは使っていません。SCSS、Post CSS等のCSSメタ言語も使用していません。
画像はすべてSVGで、favicon部分の処理でCanvasを使っています。
なんでNuxtかというと、個人的に開発体験が良い（初速が出て、慣れているので気持ち良い）のと、CSSやSVG等でアニメーション使う予定だったので、相性が良いと判断しました。
また、今後自分のキャリアを考えた時、技術よりも世に便利なアプリを公開するのを優先したい、フレームワークの知識よりはマーケティングやデザインの知識について優先したい、というのがあり慣れているNuxtを使ったというのもあります。
その他詳しい技術の詳細については希望があれば記事書くのを検討しようと思います。
デザインでこだわったポイント
まず、大前提として「この集中タイマーを使っている人は集中しないといけない、神経を使う作業をやっているはず」なので、なるべくテンションが上がるような配色、デザインを心がけました。
テンションが上がると言っても、フォーマルな場面でもプライベートな場面でも使えるように「遊びすぎず、でも退屈じゃないデザインにする」こと、「機能は絞って、作業に集中してもらえるようにする」ことも意識しました。
配色について
後でFigmaデータをおまけで載せますが、配色はこのような色と命名で管理しています。
Primary（#1C1F89）は一番よく使うカラーを、Secondary（#F7C100）は二番目によく使うカラー設定し、それぞれDark、Light、Thinに展開しています。
Accent（#E66218）はユーザーに注目してほしい、アクセントとなるカラーを設定し、Darkを展開しています。
TextPrimary（#03044A）とTextSecondary（#686892）はテキストに使うカラーです。
よく見るとTextPrimaryはPrimaryDarkと全く同じ色なのですが、別で管理することで後々テキストの色を変更したいとき等に変に影響しないようにしています。
結構カラーの命名で迷う方多いと思うので、参考になれば幸いです。
画面設計について
トップ、集中画面、休憩画面の3画面で構成されています。ユーザーの学習コストをかけたくないので3画面以下に抑えようと最初から思っていました。
集中画面と休憩画面は切り替わったことがひと目でわかるように色を反転させています。
ボタンがわかりにくい問題
これは最初にデザインしている段階からどうしようか迷ったところなのですが、タイマーの画面で「スキップ」「ストップ」「ポーズ」が少しわかりにくいという問題があります。
「文字を入れればいいのでは？」という意見も頂いたのですが、個人的に目に入った文字を無意識にでも読んでしまうという癖があり、ボタンに文字を入れると一番大切なタイマー部分への意識が薄れてしまうんじゃないかという懸念がありました。
また、3の法則というものがあり、3には記憶力を高める効果やストレスを与えない等の効果があると言われています。
この3つの法則に則り、機能を3つに絞ることで一見わかりにくくても集中を削がないデザインにしました。
3の法則についてもっと詳しく知りたい方はこちらの書籍がおすすめです。
ただし、アイコン（メタファー）についてはもっと詰める必要がありそうなので今後のアップデートより良くできたらと思います。
おまけ
この記事が気に入ったらサポートをしてみませんか？