ポートフォリオ

Pomotto:ポモドーロ・テクニック×タスク効率化サービス:ポートフォリオ紹介

「Pomotto(ポモット)」はRUNTEQ卒業生のみーさんが作成した「タイマーで集中力と生産性を上げるポモドーロ・テクニックを採用したタスク管理サービス」です。ポートフォリオのアイデア出しや設計で悩んだ時の解決方法を始めとし、実体験を基にした機能の紹介、就活でも話題に上がったQiita記事のフィードバックについて、初心者の方にも分かりやすくお話いただきました。【卒業生ポートフォリオ紹介vol.13】

RUNTEQブログでは卒業生のポートフォリオを紹介しています。

今回ご紹介するのは「Pomotto」
ポモドーロ・テクニックを採用したタスク管理サービスです。

そもそもポモドーロ・テクニックって? 採用した理由は? 気になることが盛りだくさんです。

本記事ではそんな「Pomotto」制作者のみーさんにお越しいただき、制作過程についてインタビューを行いました!

これからポートフォリオ制作に入る方必見! ユニークな作品の裏側を覗いていきましょう♪

ポモドーロ・テクニック×タスク効率化サービス

さっそく「Pomotto」のサービス概要からお聞きしていこうと思います!

みーさん、「Pomotto」は一言でどのようなサービスですか?

みーさん
みーさん
「Pomotto」ポモドーロ・テクニックを採用したタスク効率化サービスです。

自分自身、ポモドーロ・テクニックを使ってみて良かったので作成しました。

(サービスへ GitHubのリポジトリへ

「ポモドーロ・テクニック」とは時間管理術のひとつです。

一般的に25分の作業時間と5分の休憩時間をくりかえし、1セットをポモドーロと呼びます。

そんなポモドーロ・テクニックを採用した「Pomotto」の主な機能は3つ。

タスク管理機能タイマー機能、そして自動グラフ機能です。

らんてくん
らんてくん
順にそって紹介していくぞ!

トップページからログインすると、すぐにタスク作成画面に行くことができます。

さっそく「タスク作成」をクリックして新しくタスクを作ってみましょう。

もちろん作成も簡単♪ タスクの見出し・詳細・締め切り日を入力するだけです!

タスクを作成すると一覧に表示されるようになります。

みーさん
みーさん
各タスクの開始ボタン(▶)を押すと自動で25分のタイマーが始まります

タイマーが終了しタスクが完了すると、自動で5分休憩するタイマーが発動するようになっています。

そして嬉しいのが自動グラフ化機能です。

みーさん
みーさん
タスクが完了すると、その時間が自動でグラフに表示されます。

自分の集中した時間が可視化されるのはやる気にも繋がりますね!

ぜひみなさんも学習やお仕事に使ってみてはいかがでしょうか?

迷走、のち直感でアイデア採用!

アイデア企画段階のお話も伺っていこうと思います。

みーさん自身、ポモドーロ・テクニックを使っていたとお聞きしました。

いつポモドーロ・テクニックに出会ったのですか?

みーさん
みーさん
RUNTEQのカリキュラムの基礎編が終わった頃、connpassイベントでポモドーロ・テクニックが紹介されていて知りました。

気になって調べてみたら、当時モチベーションが上がらず集中力が続かなかった私にぴったりの方法で、試しに少し使ってみたらハマりました。

らんてくん
らんてくん
なるほど!

まず自分で使ってみて良かったという体験があったんだな!

しかし、そこからサービス開発に至ったのはどうしてでしょうか?

みーさん
みーさん
ポモドーロ・テクニック自体は自分に合っていたんです。

しかし、時間の計測やタスクごとの時間管理が疎かになりがちで、そこを自動化できるアプリを開発しようかなと思い取り掛かりました。

自分でもっとポモドーロ・テクニックを活用しやすくするために、サービス開発を考えたと!

実体験をもとに考えられた素敵なサービスですね……!

ということは、「Pomotto」のアイデアはすぐに思いついたのでしょうか?

みーさん
みーさん
いえ、アイデアが決まるまではけっこう迷走しましたね(笑)

アイデアは10個ぐらいあったんですが、どれも自分がほしいと思えるサービスではなく、しっくりきませんでした。

10個も! その10個のアイデアは自分で練っていったのですか?

みーさん
みーさん
迷走中はRUNTEQの方にアイデアを相談していました。

ポートフォリオのアイデア出し会で相談した時には、
「このサービスは難しいのでは?」「このサービスは良いと思う!」
と色々アドバイス頂けて参考にしました。

その後、自力で「Pomotto」をぱっと思いついて、そのままこれ作ろう!と直感で決めました。

RUNTEQではアイデアの相談をできる場があるのも嬉しいですよね……!

ちなみに10個のアイデアにはどんなものがありましたか?

みーさん
みーさん
私は動物のカピバラが好きなんですけど、カピバラのいる動物園を検索するアプリを作ろうかなと思っていました。

でも動物園の情報を収集するのがすごく大変だなと思って諦めました(笑)

らんてくん
らんてくん
カピバラのアイデアもみーさんぽいな!!

苦労した設計はVue.jsのキャッチアップで乗り切る

アイデアには苦戦したというみーさんでしたが、実装期間はいかがでしたか?

みーさん
みーさん
「Pomotto」のアイデア自体は2020年の10月ぐらいからあったんです。

ただRailsでどう再現したらいいか分からず、設計に悩んでいた時間が長かったです。

設計で悩む方は多いとよく聞きます。

ポートフォリオを作成する上で最初の難関でもありますよね。

みーさん
みーさん
2020年の10月頃から3ヶ月かけてRailsでβ版を作ったんですが、私のやりたいことが全然できていない状態でした。
らんてくん
らんてくん
どんなことがやりたかったんだ?
みーさん
みーさん
タイマーのページに遷移してタイマーを表示させるのではなく、モーダルで表示させたかったんですよ。

モーダルで表示すると、どのページに行ってもタイマーをブラウザでカウントできるようになるんです。

「Pomotto」ではモーダル表示を取り入れているおかげで、タイマーで既存のタスクを実行しながら新しいタスクを作成することも可能です。

しかし当時モーダルをRailsで再現する方法が思いつかなかったそう。

どのように解決したのでしょうか?

みーさん
みーさん
ゃあRailsだけじゃ無理じゃない?と思っていたころ校長の菊本さんと話して、他の競合サービスではSingle Page Application(SPA)を使っているとアドバイスを頂きました。

SPAと言ったらVue.jsじゃん!となり、2021年の1月からVue.jsをキャッチアップして1から作り直したんです。完成したのが4月ですね。

らんてくん
らんてくん
キャッチアップして作り直した!? それはすごい!!

みーさん
みーさん
β版でモデルの設計とかテーブル設計できていたので、Vue.jsで実装し始めてからは早かったですね。

やはり実装というより設計の方に時間がかかったかもしれないです。

実装部分で苦労したおかげで、すごくクオリティの高いポートフォリオができたんですね。

サービス面でこだわったことはありますか? ぜひ教えて下さい!

みーさん
みーさん
業務効率化までいきませんが、めんどくさいなあって思うものを自動化させたかったんですよ。

アイデアを出すまではどういうものがユーザーにウケがいいのか、悩んでいた時期もありました。

「Pomotto」のアイデアを思いついた時、これは意外と長時間学習する人にはウケるかもなって思えたところがこだわりというか……

自分がつくりたいものと役に立つものを開発したいという思い、どちらも達成できたかなと思いました。

ポートフォリオがWebエンジニアとして開発した最初のサービスになる方がほとんどです。

みーさんのように、まず1番のユーザーである自分の気持ちを大事に、他のユーザーにも目を向けられるサービスを目指していきたいですね。

フィードバックをもらう瞬間が一番うれしい

「Pomotto」は様々な苦労をして開発されたサービスであることが分かりました。

サービスのリリース後の反響も気になります。いかがでしたか?

みーさん
みーさん
2日で150回アクセスあったことは覚えています。

あんまりバズるサービスではないので。

とはいえ、しっかりとユーザーさんがついている様子が伺えますね。

実際はじめてサービスをユーザーさんに使って頂けた時、どのような気持ちでしたか?

みーさん
みーさん
けっこう反応が良くて、フィードバックもらう段階が一番楽しかったです。

リリースまでひとりで作ってひとりで自己満足でしていた感じがあったので、フィードバックもらえることが嬉しかったです。

やはりユーザーさんの声を直接聞けるのはWebエンジニアの醍醐味ですよね!

印象に残っているユーザーさんからのフィードバックはありますか?

みーさん
みーさん
最初完成版をリリースした時に、見た目が分かりづらいところをフィードバック頂けたのが良かったです。

当時はレスポンシブ対応していなくて、少し画面を小さくすると表示が崩れていたのも指摘していただいて直しました

みーさん
みーさん
Qiitaの記事についてTwitterで「記事良かったです!」と反応を頂きました。

就活でもQiitaを見て頂けて嬉しかったです。

例えば「改善点がまとめられていて結構読みやすかった!」「改善点を載せているところがこれからも運用していく意思が見えてよかった!」などなど、嬉しい反応を頂けたそうです。

「Pomotto」の開発を通して学びにつながったことはありますか?

みーさん
みーさん
テストを最後に一気に書いてしまったことを結構後悔しています。

どこか抜け穴がないか、もれていないか心配になるので、やっぱり一機能ごとに書くべきだったなと思っています。

らんてくん
らんてくん
たしかに、テストを最後に一気に書くのは大変だ……
みーさん
みーさん
また、もう少し小さい段階でリリースしておいて、どんどん機能を追加したり変えたりした方が良かったなとも思っています。

今からポートフォリオをつくろうと考えている方には参考になる学びですね!

みーさんは「Pomotto」の開発を通して何が一番楽しかったですか?

みーさん
みーさん
サービスができたときが一番楽しかったです!

勉強するというよりも、作りたいサービスを自分の手で作れたところが嬉しかったです。自分でもたまに使っています。

今後もサービス開発をしていきたいですか?

みーさん
みーさん
もちろん「Pomotto」も進化させていきたいんですが、まだ勉強不足なのでキャッチアップしてからさらに伸ばしていきたいですね。
らんてくん
らんてくん
ちなみに「Pomotto」の次に作りたいサービスはあったりするのかな?
みーさん
みーさん
実はクソアプリを作ってみたいんですが、アイデアが思いつかなくて(笑)

らんてくん
らんてくん
ええっ!? クソアプリ!?
みーさん
みーさん
hieroglitterLate-Hackも面白くて、バズっているのを見るといいな~と思っちゃいました(笑)

みーさんが作るクソアプリにも期待しつつ、今後のご活躍を楽しみにしています!

本日はありがとうございました!

編集後記

いかがでしょうか?

みーさんは実体験に基づき「Pomotto」で、自分のつくりたいものと、ユーザーが求めているものの両立に挑戦しました。

ポートフォリオを制作する時、自分視点は持ちやすいですが、ユーザー視点は意識しないとすぐに抜け落ちていまいます。

ぜひアイデア出しの段階から「ユーザーが本当にほしいサービスか」を考えて、就活に強いサービスをつくっていきましょうね!

RUNTEQでは、ポートフォリオ作成に必要な技術だけでなく、マインドも身につけることができます。

あなたのオリジナルのアイデアを、よりクオリティの高いものにブラッシュアップしませんか?

RUNTEQに少しでもご興味のある方、未経験からWebエンジニアを目指そうとお考えの方は、まずは一度無料キャリア相談会へお越しください! https://runteq.jp/

「Pomotto」を読んだあなたにおすすめ!実用的なポートフォリオ例

Hashlog:Twitter連動学習記録サービス

みんなの家計簿:家計簿公開サービス

この記事を読んだ方にオススメ