情報畑でつかまえてロゴ
本サイトは NTTテクノクロスが旬の IT をキーワードに
IT 部門が今知っておきたい最新テクノロジーに関する情報をお届けするサイトです

生成AIで"眼精疲労"はどこまで防げる?― パーソナル眼精疲労予防アプリ開発

本記事では、身近な課題に対し「生成AI」を用い、「無理なく確実に」負担を軽減できるかを探った、自身の取り組みをお伝えします。

1. はじめに

一般的なデスクワーカーにとって、「目の疲れ」は「仕事をしている限り避けられないもの」という存在ではないかと思います。「なんとなくつらい」と感じながらも、締め切りや業務の流れの中でついつい適切な小休止を後回しにしてしまう...そんな経験は、多くの方に心当たりがあるのではないでしょうか。

今回は、この身近な課題に対し「生成AI」を用い、「無理なく確実に」負担を軽減できるかを探った、私の取り組みをお伝えします。

なぜ「パーソナル眼精疲労予防アプリ」を作ろうと思ったのか

きっかけは、ごくシンプルな「自分自身の困りごと」でした。

デスクワークをしていると、夕方17時ごろには画面を見ていられないほど目がつらくなることがありました。いわゆる眼精疲労です。長時間のPC・タブレットなどのディスプレイ端末を使う作業(VDT作業)は、目のトラブルだけでなく、肩や首などの筋肉疲労、さらにはストレスにまで影響します。

「なんとかしたい」と思いながらも、なかなか自分で小休止のタイミングをコントロールするのは難しい。そこで、アプリが小休止を促してくれたらどうだろう、と考えたのが出発点です。

260402_eyecareai1.png

EyeCare AIのトップ画面

260402_eyecareai2.png

小休止画面

生成AIを使って作ることにした理由

このアプリを作るにあたって、社内の育成プログラムで「生成AIを使って開発」というテーマに挑戦することになりました。そこで、それならば自分が本当に困っていることを解決するアプリを作ろう!と決めました。

開発は約半年間、日々の業務の合間を縫いながら少しずつ進める形でしたが、生成AIを活用することで、迷ったときもすぐに手を動かせる場面が多く、限られた時間の中でも形にすることができました。

これから生成AIを使った開発に挑戦してみたい方にとっても、参考になる内容だと思います。特に「まず動くものを速く作ってみる」というアプローチは、生成AIとの相性が非常によく、ぜひ試してみてほしいと感じています。

2. 作ったアプリ「EyeCare AI(アイケア アイ)」とは

アプリの概要を1文で表すと、以下のようになります。

EyeCare AIというプロダクトは、目の疲労を感じるデスクワーカー向けの、画面休止や通知で小休止を促し、ストレッチや目のケアを促してくれるパーソナル眼精疲労予防アプリです。

主な利用の流れは以下のとおりです。

 1.タイマー開始

 2.小休止画面表示、画面から目を離す

 3.ストレッチ実施

 4.小休止後、タイマー再開(自動)

タイマーで作業を進めながら、小休止画面への移行やストレッチを挟むことで、無理なく小休止の管理ができるように設計されています。

260402_eyecareai3.png

アプリの利用の流れ

あわせて、112回を目安に次の習慣化ステップも行います。

 5.疲労度チェックを実施

 6.AIアドバイスで個別提案を確認

 7.おすすめストレッチを実行

 8.統計画面で習慣の振り返り

特に「AIアドバイス機能」は、ユーザーの疲労スコアや使用状況などの個人データをもとに、生成AIパーソナライズされた健康アドバイスを返してくれる機能です。例えば「今日は目の疲労度が高いから、こんなストレッチをしてみては?」といった具体的な提案を受け取ることができます。

260402_eyecareai4.png

アプリのAIアドバイス画面

260402_eyecareai5.png

提案されたエクササイズ

3. 開発で使った生成AI ―4つのツールを使い分ける

このアプリの開発では、4種類の生成AIツールを目的に応じて使い分けました。それぞれの役割を紹介します。

260402_eyecareai6.png

利用した生成AIツール

Chat TXアイデアの壁打ちから設計書まで

開発の最初のフェーズでは、当社製品の生成AIサービスChat TXを活用しました。

具体的には、

 ・アイデアの壁打ち

 ・要件定義書の作成

 ・機能設計書の作成

 ・画面イメージの作成

といった、開発の上流工程Chat TXと対話しながら進めました。

「何を作るか」が固まっていない段階でも、AIに話しかけながら考えを整理できるのは非常に便利でした。人間相手だと「こんな初歩的なことを聞いていいのか」と遠慮してしまうこともありますが、AIには気兼ねなく何度でも壁打ちできます。その壁打ちの結果を元に設計書等を作成してもらいました。

260402_eyecareai7.png

機能設計書

② V0 ―画面デザインをReactTypeScript)で生成

次に、V0UI生成AIツール)を使って、アプリの画面デザインを作成しました。

V0はテキストで「こんな画面を作って」と指示するだけで、ReactのコードとともにUIを生成してくれます。デザインの専門知識がなくても、それなりに整ったUIが短時間で手に入るのは大きなメリットです。今回は①で作成した設計書や画面イメージ等を元に画面を作ってもらいました。

260402_eyecareai8.png

V0のUI作成画面

③ GitHub Copilot ―Webアプリ化とロジック開発の主力

V0で作ったReactのコードを、実際にブラウザで動くWebアプリ(HTML / CSS / JavaScript)に変換する作業や、アプリ内部のロジック開発にはGitHub Copilotを活用しました。

GitHub Copilotは、エージェントとして自律的にコード作成や修正まで行ってくれる AI 開発支援ツールです。今回は主に以下の用途で活躍しました。

 ・React→ HTML / CSS / JavaScript への変換

 ・タイマーや画面休止などの内部ロジックの実装

 ・ドキュメントやAWS構築手順書の作成

コードの作成だけでなく、経験の浅かったAWSの構築においても力を発揮しました。構築手順書をGitHub Copilotに作成してもらい、社内ネットワーク設定など一部の例外を除いては、その手順書に従って進めるだけで環境を整えることができました。「書く」だけでなく「調べる・整理する」という作業まで任せられる点が、今回特に実感した生成AIの強みのひとつです。

開発規模としては、フロントエンドだけで約6,147、バックエンド(Lambda)と合わせると総計6,374のコードになりました。これだけの規模を短期間で作れたのは、間違いなくGitHub Copilotのおかげです。

260402_eyecareai9.png

GitHub Copilotの開発画面

④ Amazon Bedrock ―AIアドバイス機能の心臓部

アプリの目玉機能である「AIアドバイス機能」には、AWSの生成AIサービスAmazon Bedrockを使いました。利用したLLM(大規模言語モデル)はClaude 3 Haikuです。

システムの仕組み

ユーザーがアプリ上でAIアドバイスを求めると、以下の流れで処理が行われます。

ユーザー(Webブラウザ)

 ↓ AIアドバイスのリクエスト送信

Amazon API Gateway

 呼び出し

AWS Lambda

 ↓ API呼び出し(プロンプト投入)

Amazon BedrockClaude 3 Haiku

 生成AI応答

AWS Lambda → API Gateway → ユーザーへ返却

アプリの静的ファイルの配信にはAmazon S3Amazon CloudFrontを使い、IP制限を設定しています。

プロンプトの工夫

AIアドバイス機能の品質を左右するのが「プロンプト(AIへの指示文)」です。今回のプロンプトは大きく4つのパートで構成しています。

項目
内容
文脈(Context) 「あなたはヘルスケアのプロです」などの役割設定やアプリの背景情報
命令(Instruction) 「パーソナル提案」「AIからのおすすめアクション」「推奨ストレッチ」の3つを回答してほしい
入力データ(Input Data) アプリからユーザーの疲労スコア・使用時間・小休止回数・フリー記載欄などの個人データ
出力指示(Output Indicator) AIアドバイス機能の文字数等の出力フォーマット指

出力フォーマットを厳密に指定することで、アプリ側でAIの回答を安定してパース(解析)できるようになります。たとえばと「出力指示」のプロンプトは以下のような形式になります。

## パーソナル提案

100文字以内の提案文)

## AIからのおすすめアクション

-40文字程度のアクション1

-40文字程度のアクション2

-40文字程度のアクション3

## 推奨ストレッチ

(アプリのストレッチメニューの中から1つ選んだタイトル)

4. 使ってみた感想とアンケート結果

育成プログラムの関係者5名に実際にアプリを使っていただき、アンケートを収集しました。

アンケートの結果分析

 ・目の疲労感が軽減されたという評価が大多数

 ・前向きな評価が多く、満足度が高い

 ・一方で、作業効率向上の効果は限定的

以下いただいたコメントの一部を紹介します。

"「完成度は高いと思うので、細かい改善よりは実際に使ってもらうために何が必要か、というところ」

"「体のストレッチで気分転換ができる」

"「ストレッチは文字だとイメージが難しいものが多いので最終的には絵が欲しい」

メイン機能(タイマー・ストレッチ提案など)への満足度は高い一方、視覚的なわかりやすさ(グラフ表示・チュートリアル・ストレッチのイラストなど)の改善が次のステップとして見えてきました。

5. 開発を通じた学びと感想

アプリが自分自身に効いた

一番の収穫は、自分で使って眼精疲労が緩和されたことです。過去には17時ごろに画面を見ていられないほどつらくなることもありましたが、アプリを使うことで小休止のタイミングを意識できるようになりました。

ちなみに、ここ最近一番目がつらかったのは......アプリが使えない開発作業中でした(笑)。

生成AIとの付き合い方

今回の開発では、「AI駆動開発(一部バイブコーディング)」のスピード感を肌で感じました。生成AIエージェントを使うと、コードを自分で読まなくなる傾向があります。これは諸刃の剣で、スピードは上がる一方、コードの中身を理解しないまま進んでしまうリスクもあります。

ただ、今回の経験を通じて感じたのは、「まずは速度重視で作ってみることが重要」だということです。途中の仕様変更にも柔軟に対応できましたし、動くものがあると関係者からのフィードバックも具体的になります。完璧を目指して手が止まるより、まず動かしてみる。生成AIはそのアプローチと非常に相性がよいと感じました。

生成AIの回答精度について

AIアドバイス機能を実際に使ってみると、回答がやや抽象的に感じることがありました。健康アドバイスは入力情報が揃っていないと精度が上がりにくい傾向があります。その上で、「入力の手間」とそれを分析する「高度なLLMほど応答速度が遅い」というトレードオフも実感しました。

6.まとめ

今回の開発を通じて、生成AIを使えばアイデアの壁打ちから設計・コーディング・クラウド構築まで、経験の少ないエンジニアでも幅広い工程を高速で実装できることを実感しました。

改めて、今回使った生成AIツールと役割を整理すると:

ツール
役割
Chat TX アイデア整理・要件定義・設計書作成
V0 UIデザインの生成
GitHub Copilot コーディング・ドキュメント作成
Amazon Bedrock パーソナライズされたAIアドバイス機能

これらを組み合わせることで、約6,000行規模のWebアプリを限られた期間の中で完成させることができました。

「生成AIを使った開発に挑戦してみたい」という方には、ぜひ小さく動くものを作ってみることをおすすめします。ChatGPTGeminiのような身近なツールから試してみるだけでも、開発のスピードと質は大きく変わります。

自分の「困りごと」を起点にアプリを作るのは、モチベーションが続きやすく、フィードバックも自分自身でリアルに感じられるのでとてもおすすめです。みなさんもぜひ、生成AIを使って「自分だけのアプリ」を作ってみてください!

連載シリーズ
著者プロフィール
金子恭也
金子恭也

カスタマーエクスペリエンス事業部 第一ビジネスユニット

生成AI大好きエンジニアです。プライベートではChatGPTGeminiをフル活用しています。