トミークリエイト

【実験ログ#002】バイブコーディングで、AIを組み込んだ眼精疲労対策アプリを、自分用に開発

「作業に集中しすぎて目を壊す」ことを繰り返していたので、アプリを自作しました。

長時間画面を見ていると、目がしょぼしょぼします。休むべきだと分かっていても、作業を続けてしまう。そんな私のための「休憩のきっかけを作るアプリ」が、眼精疲労対策の「アイまーる」です。

ゼロからCursorを使った「バイブコーディング」で作りました。成功談ではなく、作りながら考えたことや、途中でぶつかった面倒な壁を、そのまま残します。

アイまーるのホーム・設定画面。疲労度の円グラフ、今日の使用状況、AIモードの設定が並ぶダッシュボード
ホーム・設定画面。疲労度と今日の使い方がひと目で分かり、AIモードのオンオフもここで切り替えます。

アイまーるはどんなアプリか

「目を休ませるための小さな道具」として、必要な機能をシンプルにそろえました。中心は、画面を見続けたら20秒、遠くを見る「20-20-20」のタイマーです。米国オプトメトリック協会(AOA) が、デジタル画面での作業中は、20分ごとに20フィート(約6メートル)先を20秒見る、と説明しています。これをタイマーの軸にしました。治る、効く、という話ではなく、休憩のきっかけ用です。

使い方の傾向から疲労スコアを推定して、休憩の間隔を12〜20分のあいだで自動で変えています。オフにすれば、固定の間隔にもできます。

アイまーるのスマート20タイマー画面。20:00のカウントダウンとAI疲労推定、20-20-20ルールの説明がある
スマート20タイマー。連続使用時間に応じて、休憩の間隔を12〜20分のあいだで変えます。

タイマーのほかに、目の体操もあります。ぐるぐる、ピント調節、ギュッ・パッの3種類です。

アイまーるの目の体操画面。眼球ぐるぐる、ピント調節、ギュッ・パッの3種類のストレッチが並ぶ
目の体操は3つです。ぐるぐる、ピント調節、ギュッ・パッ。

このうち「眼球ぐるぐる体操」を、アプリの画面のまま撮ったものです。

アイまーるのアプリ画面。目の体操「眼球ぐるぐる体操」です。

休憩のあいだに使える、4-4-6の呼吸ガイドもあります。

アイまーるの瞳孔リラックス呼吸法画面。4-4-6呼吸法のガイドと、吸う・止める・吐くのリズム表示がある
休憩のあいだに使う、4-4-6の呼吸ガイドです。

眼精疲労についての読み物も、デスクワーク向けの知識をカテゴリ別にまとめています。

アイまーるの眼精疲労ガイド画面。基本・予防、デスクワークなどカテゴリ別に記事が並ぶ
眼精疲労ガイド。20-20-20の解説や、デスクワーク向けの読み物をカテゴリ別にまとめています。

無料で、会員登録は要りません。データは端末の中にだけ保存します。プライバシーを優先した設計です。

ただし、医療機器ではありません。診断や治療を目的としたものではなく、医師の監修も受けていません。誤解を生まないように、サイトの中にも明記しています。

バイブコーディングでやったこと

欲しい動きを日本語で書いて、Cursorに出力してもらい、動かして、違和感をフィードバックする。その繰り返しです。

  • ぶれない軸を決める:「眼精疲労対策」「20-20-20が中心」「無料・登録なし」「端末内に記録」という基本方針だけは、最後まで変えませんでした。
  • 目的から伝える:単に「タイマーを作って」ではなく、「スマホで片手でも迷わず使いたい」のように目的まで伝えると、精度がぐっと上がりました。
  • 公開した環境ですぐ確認する:PCの画面で確認するだけでなく、早い段階から実機のスマホで触って、押しづらいところを直しました。

一番つらかったのは、YMYLの壁

個人開発でいちばん痛い目を見たのが、YMYL(Your Money or Your Life)と呼ばれるジャンルの壁です。健康やお金のように、間違った情報が出ると生活に直結しやすい分野で、Googleの評価も厳しめです。

  1. 検索(SEO)の厳しさ 健康や医療に寄ったテーマは、評価の基準がとても厳しいです。個人開発で、医師の監修もないサイトが、上位に表示されるのは簡単ではありませんでした。
  2. 表現への配慮 ガイド記事を作るときは、AIも使いましたが、断定的な表現を避けました。参考情報の確認と、「医療機器ではない」という明記も徹底しています。医薬品医療機器等法(薬機法) に触れたり、医療だと誤解されたりするのを避けるためです。
  3. 画面の作りの試行錯誤 最初は「統計・設定」を別のタブにしていました。項目が増えるほどスマホで押しづらくなったので、ホーム画面にまとめて、導線を減らしました。

参考にした公式情報

医師の監修はありません。アプリも記事も、診断や治療の代わりにはなりません。タイマーや言い回しを決めるときに開いた公式の説明は、次のとおりです。

これから使う人へ

完璧な完成形をめざして作ったわけではなく、いまも私自身が使いながら、調整を続けています。まずは一度、タイマーを回してみてください。

Android版について(2026年10月11日時点)

アイまーるは、Android版も作りました。ただ、Google Playで公開すると、個人アカウントでは自宅の住所が載ってしまうので、公開は止めたままです。アプリ自体はクローズドテスト経由で試せます。経緯は Google Playに住所が出る に書きました。

バイブコーディングという言葉の意味は バイブコーディングでAIに任せても良いこと、逆に人間が考えなければいけないこと に書いています。

アイまーる

> RATE THIS POST

この記事を評価する

評価には Google アカウントでのログインが必要です。

まだ評価はありません

> SHARE

この記事をシェア

役に立ちそうなら、気軽に共有してください。

> EDITORIAL

この記事の執筆について

AIが下書きを作成し、冨岡 優喜(トミークリエイト代表)が責任を持って内容を確認・校正しています。公開する文章の最終責任は運営者にあります。 運営者の実績・免責は運営者情報をご覧ください。

> RELATED LOGS

関連記事

画面に表示される情報でも、自動で集めていいとは限らない。作る前に規約を調べた。

画面に見える情報でも、プログラムで自動的に集めてよいとは限りません。スクレイピングのツールを作る前に規約を開いて考え直した話と、公式APIを先に探す順番を書いています。法律の助言ではありません。

バイブコーディングでAIに任せても良いこと、逆に人間が考えなければいけないこと

バイブコーディングは、雰囲気で作ることではありません。作りたい体験を言葉にして、AIと直し続けるやり方です。スワぽいとアイまーるを公開して分かった、AIに任せてよいことと、人間が決めることを書いています。

最初から、Cursorに「アプリを作って」と頼むと、適当な物が出来上がる。まずは要件定義・設計から始めよう。

「アプリを作って」とだけ頼むと、画面がばらばらになります。Cursorで最初に作るなら、まず1画面です。スワぽいで実際に出した指示と、アクセス計測が止まった失敗を書いています。