🧍 姿勢が気になるあなたへ。Vue + Mediapipeで姿勢分析Webアプリを作ってみた話
🎯 プロジェクトを始めたきっかけ
実は、もともと私は 姿勢や身体のバランスにとても関心があるタイプです。
長年スポーツをやってきた経験もあり、普段から自分の姿勢や体の状態に敏感に反応するほうです。
でも最近、パソコンの前に座っている時間がどんどん長くなってきて…
自分自身も、周りの人たちも、明らかに姿勢が崩れているのを感じるようになりました。
特に「ストレートネック」のように、見た目では分かりづらいけど、生活に大きく影響する問題は、
病院で診てもらうにはちょっと面倒だし、日常の中では自覚もしづらいんですよね。
そこで私はこう思いました：
誰でも簡単に自分の姿勢をチェックできて、自然と意識できるツールがあったらいいな。
将来的に、パソコンの前で仕事・生活をする人がさらに増えていく中で、
こうした「身体のバランスの崩れ」に気付くきっかけが必要になると感じ、
このプロジェクトをスタートしました。
🤔 なぜ静止画から動画ベースに切り替えたのか？
最初は「写真1枚を撮って、その姿勢を分析する」方式でした。
でも、友人に試してもらったところ…
📸「撮るよ〜！」→ 😳 無意識に姿勢を正す
つまり、「測られている」と感じた瞬間、人は自然に姿勢を正してしまうんです。
これだと本来の“日常の姿勢”とは違う結果になってしまいます。
そこで方針を大きく変更しました。
今は、ボタンを押すと動画がスタートし、自然な姿勢を記録。
その中から 最も良い姿勢(best) と 最も悪い姿勢(worst) のフレームを自動抽出して分析しています。
この方法に変えたことで：
- ユーザーは意識せず自然体でいられる
- 結果も信頼性が高くなる
- UXとしてもよりナチュラルに使える
というメリットが生まれました。
👀 こんな方におすすめ！
- 一日中パソコンの前で作業している方
- 姿勢が悪いとよく言われるけど、何をすればいいか分からない方
- 病院に行くほどではないけど、自分の姿勢を簡単にチェックしたい方
🧰 使用技術スタック
| 領域 | 技術 |
|---|---|
| フロントエンド | Vue 3 + Vite |
| 姿勢推定 | Mediapipe Pose |
| バックエンド | Node.js (Express) |
| データベース | MySQL |
📸 主な機能まとめ
- Googleログインによる認証
- Webカメラによる動画ベースの姿勢測定
- ボタンで 測定開始/終了 を操作
- 測定されたフレームから best / worst 姿勢を自動抽出
- 写真と首の角度を保存
- 日付別に写真を一覧・削除
- 測定履歴やフィードバック表示
- カレンダー形式で姿勢状態を色分け可視化
✅ ユーザー視点の流れ
このアプリを実際に使うとしたら…
こんな流れになります：
| ステップ | 説明 |
|---|---|
| 1. ログイン | Googleアカウントでログイン（トークン認証） |
| 2. 測定開始 | 「測定開始」ボタンで動画ストリーミング開始 |
| 3. リアルタイム分析 | 映像上に骨格ラインと首角度を可視化 |
| 4. 測定終了 | 「測定終了」クリックでbest/worstを自動抽出 |
| 5. 写真アップロード | 選ばれた写真をサーバーに送信しDBに保存 |
| 6. 結果確認 | 写真下に平均・最大角度、フィードバック表示 |
| 7. 写真一覧確認 | 日付別で整理された一覧から確認 |
| 8. マイページ | 測定回数や改善傾向など統計を表示 |
| 9. アカウント管理 | ユーザー情報表示、ログアウト、アカウント削除など |
🧱 システム構成（概要）
Frontend (Vue)
-
MainPhotos.vue: カメラと測定制御 -
ResultPhotos.vue: best/worst 写真表示 -
SummaryStats.vue: 平均/最大角度の統計 -
PhotoList.vue: 写真の一覧・日付別フィルター -
MiniCalendar.vue: 姿勢状態カレンダー -
PhotoModal.vue: 写真をクリックして拡大表示
Backend (Node.js + Express)
-
/api/photos/upload: 写真のアップロード -
/api/photos/list: ユーザーごとの写真取得 -
/api/posture/save: 測定結果の保存 - MySQL テーブル:
users,photos,posture_data
🔧 コードでやっていること（概要）
- Mediapipeで首・肩・耳の位置を取得
- 可視性（visibility）を見て左右どちらを使うか判定
- 全フレームから首角度を分析し、最大/最小を抽出
- AxiosでAPIを使い、写真＋角度データをアップロード
📈 開発を通して学んだこと
-
映像の上にリアルタイムでCanvasを描画するのは意外と難しかったです。
反転・サイズ調整・位置合わせなど細かいところに気を配る必要がありました。 -
Mediapipeは強力ですが、耳や肩が見えないと検出できないこともあって、
可視性を見ながら自動で左右を切り替えるようにしました。 -
単なる技術的な機能だけではなく、
実際に使う人の流れ（UX）を設計することの大切さを実感しました。
✨ 今後やってみたいこと
- 📱 モバイル対応（レスポンシブデザイン）
- ⏱️ 一定時間中の平均姿勢の測定
- 🔔 姿勢改善リマインダー機能
- 📊 測定履歴をレポートとしてダウンロード
🙌 最後に…
最初は「自分の姿勢、ちょっと気になるな〜」くらいの気持ちでしたが、
開発を進めるうちに、たくさんの人に役立てるものにしたいと思うようになりました。
この記録が、同じように姿勢に悩んでいる方や、
技術的にチャレンジしたい方のヒントになれば嬉しいです！
最後まで読んでいただき、ありがとうございました 🙇♀️
Discussion