🧍 姿勢が気になるあなたへ。Vue + Mediapipeで姿勢分析Webアプリを作ってみた話

GitHub GistのページURLを指定してください

🎯 プロジェクトを始めたきっかけ

実は、もともと私は 姿勢や身体のバランスにとても関心があるタイプです。
長年スポーツをやってきた経験もあり、普段から自分の姿勢や体の状態に敏感に反応するほうです。

でも最近、パソコンの前に座っている時間がどんどん長くなってきて…
自分自身も、周りの人たちも、明らかに姿勢が崩れているのを感じるようになりました。

特に「ストレートネック」のように、見た目では分かりづらいけど、生活に大きく影響する問題は、
病院で診てもらうにはちょっと面倒だし、日常の中では自覚もしづらいんですよね。

そこで私はこう思いました：

誰でも簡単に自分の姿勢をチェックできて、自然と意識できるツールがあったらいいな。

将来的に、パソコンの前で仕事・生活をする人がさらに増えていく中で、
こうした「身体のバランスの崩れ」に気付くきっかけが必要になると感じ、
このプロジェクトをスタートしました。

---

🤔 なぜ静止画から動画ベースに切り替えたのか？

最初は「写真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）を設計することの大切さを実感しました。

---

✨ 今後やってみたいこと

• 📱 モバイル対応（レスポンシブデザイン）
• ⏱️ 一定時間中の平均姿勢の測定
• 🔔 姿勢改善リマインダー機能
• 📊 測定履歴をレポートとしてダウンロード

---

🙌 最後に…

最初は「自分の姿勢、ちょっと気になるな〜」くらいの気持ちでしたが、
開発を進めるうちに、たくさんの人に役立てるものにしたいと思うようになりました。

この記録が、同じように姿勢に悩んでいる方や、
技術的にチャレンジしたい方のヒントになれば嬉しいです！

最後まで読んでいただき、ありがとうございました 🙇‍♀️