2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【個人開発】スマホ/ネットサーフィンを抑制するWebアプリを作成しました。

2
Posted at

はじめに

スマホやネットサーフィンを抑制する成功率を上げるため、下記のWebアプリを作成しました。
スマホ利用稟議書

画面:

きっかけ

下記書籍を読んだことがきっかけです。
「ドーパミンは有限なリソースである」ということを理解し、無意識のうちにスマホにドーパミンを浪費させられないようにしたいと強く思いました。

ドーパミン復活 スマホ脳リセット法

開発手法

今回のアプリ開発では、最近話題の 「Vibe Coding(バイブコーディング)」 を取り入れてみました。AIと対話しながらコードを生成していくスタイルですね。

しかし、私の心の中の湯婆婆がこう囁きました。

「バイブコーディング?贅沢な名だね。今からお前の名前は 『AI丸投げ』 だよ!いいかい、AI丸投げだよ。分かったら返事をするんだ、AI丸投げ!!」

……はい。
ということで、今回はGoogle AntigravityというAIツールをフル活用して開発しました。


アプリの概要

このアプリは、スマホを触りたくなった時の「衝動」を物理的・心理的にワンクッション置いて抑制するためのツールです。

使い方

①スマホを触りたくなったら、まずはこのWebアプリを開きます。

②「スマホ触る→開始」ボタンを押下。

③警告画面が出ます。警告メッセージを見てもスマホを利用したい場合は、各項目を入力していきます。

④稟議書風画面が表示され、チェックを入れて申請すると、スマホ利用タイマーのカウントアップが始まります。

⑤スマホを使い終わったら終了ボタンを押して、スマホ利用タイマーのカウント終了。
利用した記録はlocalstorageに保存されます。(利用記録をJSONファイルにエクスポート/インポートする機能あり。)

技術スタック

  • フロントエンド: React (Next.js)
  • ホスティング: Vercel
  • AIアシスタント: Google Antigravity

開発で工夫した点

基本的にはGoogle Antigravityへの「AI丸投げ」でサクサク進んだのですが、
開発を進める中で1点だけ課題がありました。

それは「文言変更時の反映漏れ」です。
画面上のテキストをAIに変更してもらった際、それに関連するラベルやツールチップ(ヘルプ機能)の更新が同期されず、文言がちぐはぐになることが多発しました。

そこで、プロジェクト内にAI向けのルールを記載したmdファイルを作成しました。
「画面上の機能説明やヘルプ等の文言を変更する際は、必ず関連箇所の同期更新を行うこと」というルールを明文化して読み込ませることで、AIが文脈を理解して全体を漏れなく修正してくれるようになりました。

1週間使ってみた効果とおすすめ運用法

実際の効果

自分で作っておいてなんですが、1週間程度使ってみたところ、不思議なことにかなり効果がありました。
「なんとなく動画を見よう」「なんとなくニュースを開こう」といった、無意識のネットサーフィンが明確に減っています。
(※私の場合はハードルを下げて、「ネットサーフィンをする時」に限定して稟議を通すルールにしています)

Androidユーザー向けのおすすめ設定

Androidをお使いの方には、「MacroDroid」という、”スマホのロックを解除したら、自動で特定のアプリを起動する”無料アプリとの併用をおすすめします。

ロック解除時にこの「スマホ利用稟議書」が強制的に開くように設定しておけば、物理的なワンクッションが自動化されてさらに抑制効果が高まります。
私も実際にこの設定で運用しています。ただ、ネットサーフィン以外の目的でロック解除した時にも毎回稟議書が開くので、「鬱陶しいな……」と思うこともたまにあります。ですが、その「鬱陶しさ」こそがスマホ依存対策としては正解なのかもしれません。

おわりに

このアプリを使って、少しでも自分の大切なリソース(ドーパミンと時間)を取り戻せればと思っています。
「スマホをついつい触ってしまう…」という方は、ぜひ一度使ってみてください!

スマホ利用稟議書

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?