【実験ログ#002】バイブコーディングで「アイまーる」を0から作った話
画面を長時間見ていると、目がしょぼしょぼする。
休んだほうがいいのは分かっている。でも作業が区切れず、そのまま続けてしまう。何度も同じことを繰り返していたので、休憩のきっかけを作るアプリを自分で作ることにしました。
名前は「アイまーる」です。
ほぼゼロから、Cursorと相談しながら作りました。最近よく聞くバイブコーディングに近いやり方です。完成までの手順を教える記事ではなく、作りながら考えたことや、途中で面倒だったことを残しておきます。
何ができるアプリか
目を休ませるための、小さな道具です。
画面を見続けたら遠くを見る、あの20-20-20のタイマーが中心です。さらに、その日の使い方から疲労っぽいスコアを出して、休憩の間隔を12〜20分のあいだで変えられるようにしました。オフにすれば普通に20分固定です。
タイマー以外には、次の機能を入れました。
- 目の体操（ぐるぐる、ピント、ギュッ・パッ）
- 4-4-6の呼吸
- 生年月日を入れたら出るバイオリズムの休憩提案
- 眼精疲労まわりの読み物
ただし、アイまーるは医療機器ではありません。表示するスコアも参考値で、診断や治療の代わりになるものではないです。医師の監修も受けていません。この点は誤解がないよう、サイトにも書いています。
なんで自分で作ったか
タイマーアプリ自体は、すでにいくつもあります。ただ、自分が探した範囲では「会員登録なしでブラウザから使える」「記録を外へ送らない」「休憩だけでなく体操や呼吸もできる」という条件が、欲しい形では揃いませんでした。
自分の場合、知識がないことより、分かっていても続かないことが問題でした。「正しい休み方を説明するサイト」より、実際に休むきっかけになるものが欲しかった。それが作り始めた理由です。
運営者は冨岡 優喜（トミークリエイト代表）です。
バイブコーディングって実際なにをしたか
難しい定義は置いておいて、自分がしたことは単純です。
欲しい画面や動きを日本語で書き、Cursorに作ってもらう。実際に動かして、違うと思った部分を伝えて直す。その繰り返しでした。
最初に決めたのは、細かい機能ではなく「何を守るか」です。眼精疲労対策であること、20-20-20を中心にすること、無料で会員登録なしにすること、記録はなるべく端末の中に置くこと。この部分だけは、途中で変えないようにしました。
指示の出し方も少しずつ変わりました。「タイマー画面を作って」だけでは、タイマーはできますが、使い続けたくなるものにはなりません。「休憩を忘れにくくしたい」「スマホで片手でも迷わず使いたい」と目的まで書くほうが、欲しいものに近づきました。
直したものは、なるべく早く公開環境へ出しました。PCでは気づかなかった押しにくさが、スマホで触るとすぐ分かるからです。画面を眺めて考え続けるより、一度触ったほうが次に直す場所を決めやすかったです。
中身の話
Web版は React、Vite、TypeScriptで作り、Cloudflare Pagesで公開しています。Android版にも、だいたい同じ機能を入れています。開発途中で名前を変えたため、コードの置き場所には以前の「OptiGuard」という名前がまだ残っています。
サイトには「AI疲労推定」と書いていますが、利用履歴をChatGPTへ送って判定させているわけではありません。連続して使った時間、その日の合計、休憩できたか、使っている時間帯などから、端末内で参考スコアを計算しています。夜は少し厳しめに出るようにしました。
記録を外部へ送らないのは、速度よりもプライバシーを優先したかったからです。Web版ではブラウザ内に保存し、問い合わせ以外では基本的に送信しません。目の疲れの記録まで、こちらで持つ必要はないと考えました。
意外に時間がかかったのは、アプリの機能ではなく検索まわりです。URL末尾のスラッシュの有無で別ページのように扱われないよう、ページの出し方や正規URLを揃えました。使っている人にはほとんど見えませんが、公開してから必要になった作業です。
途中で変えたこと
最初は「統計・設定」を別タブにしていました。でも項目が増えるほどスマホで押しづらくなり、設定自体も見つけにくい。何度か使ってみたあと、ホーム側にまとめました。現在のメニューは「ホーム・設定」「ストレッチ」「タイマー」「呼吸」「ガイド」の5つで、上のスクショにもあるとおり、タブで行き来する形にしています。
検索されやすい名前に変える案もありました。ただ、すでに eye-maru.com と「アイまーる」で公開していたので、名前は変えず、ページタイトルや説明文を見直すことにしました。
ガイド記事の下書きにもAIを使っています。ただし、出てきた文章をそのまま公開はしていません。健康に関する内容なので、言い切りを避け、医師の監修がないことを明記し、参考にした情報も確認しています。便利さより、誤解させないことを優先しました。
公開後も、アイコン、フッターの文字サイズ、公式アカウントや関連サービスの並びなどを細かく直しています。機能追加ほど目立ちませんが、使っていて気になるのは、こういう部分だったりします。
同じ運営の別サービスも載せてあります。
個人開発のサービスは運営者が見えにくく、不安を感じる人もいると思います。別サービスや運営者情報を載せたのは、その不安を少しでも減らしたかったからです。
やってみてどうだったか
一人でアプリ本体、読み物、規約まわりまで形にできたので、以前よりずっと速く作れたのは確かです。
ただ、AIが勝手に完成まで連れていってくれた感覚はありません。何を作るか決めること、健康について言い過ぎないこと、公開後に自分で触って直すことは、こちらの仕事でした。
特に危なかったのは、見た目が整った時点で「できた」と思いかけたことです。実際にスマホで使うと、押しづらい、説明が分かりにくい、休憩を始めるまでが面倒、といった問題が残っていました。
いまどう使ってほしいか
まずはタイマーを一度だけ回してみてください。体操や記事は、必要になってからで十分です。
Xは @TommyCreate1、noteは tommycreate です。変なところや分かりにくいところがあれば、サイトのお問い合わせから教えてもらえると助かります。
アイまーるも完成したつもりはなく、いまも使いながら直しています。この記録が、自分の不便から何か作ってみたい人の参考になればうれしいです。
ニュースアプリ側の話は スワぽいを0から作った話 に、物理作品まで広げた話は 真壁探偵事務所を作った話 に書いています。
一人で進めるのが不安な人は、トミークリエイトの伴走サポートもあります。必要ならメールください。
> RELATED LOGS
関連記事
専門知識が浅くてもニュースアプリは作れるのか。スワぽいを個人開発したときの技術構成と、実際にハマった話を書いています。
バイブコーディングの意味を、スワぽい・アイまーるを作った実例を交えて非エンジニア向けに説明します。丸投げではなく、判断を残す作り方です。
非エンジニアがAI副業を始めるなら、まず小さく作って公開し、直すことから。スワぽい・アイまーる・真壁探偵事務所の実例を元に整理します。