Webフロント https://mierute.vercel.app/
iOSアプリ（TestFlight） https://testflight.apple.com/join/EPs78pM9
誰かに何かを説明する時、説明をする側・される側両方が悩みを抱えています。説明のためにマニュアルを作成する時、以下のような課題がありました：
- 作成コストの高さ: 詳細なマニュアルを作成するには多大な時間と労力が必要
- 理解の困難さ: テキストと静止画だけでは、実際の作業内容を正確に理解できない
- 確実さ担保の難しさ: マニュアル通り進めていても、ヒューマンエラーは起こり得る
実際の例
- 家具の組み立てのマニュアルは、パーツとの対応がわかりにくかったり、マニュアル通り進められているか不安になる
- セルフのガソリンスタンドは、車によって給油口を開けるボタンの位置が違うなど、マニュアル化するのが難しい
- 親が子供に洗濯機の使い方を教えたいが、手順をしっかり伝えられない
MIERUTEは、AIによる自動タスク分割とリアルタイム進捗確認を組み合わせた、次世代の手順説明プラットフォームです。
- マニュアル作成（Web）: 自然言語を入力すると、最適なマニュアルを自動生成し、ブロック化
- QRコード配布: 作成したマニュアルをQRコード化して配布
- 作業実行（iOS）: QRコードをスキャンして手順を表示。チャット機能を使いながらインタラクティブにマニュアルを進められる。カメラで撮影するとVision APIが達成度を自動判定
- 次ステップへ: 60点以上で自動的に次のステップへ遷移
デモ動画:
iOSアプリ:
Webフロント:
社会実装例:
- 家具の組み立ては、マニュアル通り進められているか不安なことが多いが、それをチェックしながら確実に組み立てられる
- ガソリンスタンドは、車によって給油口を開けるボタンの位置が違うなど、マニュアル化するのが難しいが、AIとの対話によってどんな人でも使い方がわかる。
- 親が子供に洗濯機の使い方をまとめたマニュアルを作ることで、おてつだいができるようになる。toBだけでなく、個人での利用もしやすいのがこのアプリの長所になる。
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ iOS Client │────▶│ Web Frontend │────▶│ Backend │
│ (SwiftUI) │ │ (Next.js) │ │ (NestJS) │
│ │ │ │ │ │
│ • Metal Shaders │ │ • DnD UI │ │ • RAG │
│ • Camera + CV │ │ • Block Editor │ │ • OpenAI API │
│ • MVVM + Clean │ │ • Clean Arch │ │ • Firestore │
└─────────────────┘ └─────────────────┘ └─────────────────┘
自然言語で手順を入力するだけで、AIが最適なブロック構造を自動生成します。
実装箇所: mierute-backend/src/common/openai/openai.service.ts
従来との比較:
- 従来: 手動で1ステップずつ入力（30分〜1時間）
- MIERUTE: 自然言語入力で自動生成（<30秒）
RAGの構築 マニュアルに対して添付資料を追加することで、RAGの構築ができるようになっています。説明したい対象固有の用語や既存の資料などを、簡単に追加することができます。
作業者がカメラで現在の状況を撮影すると、OpenAI Vision APIが画像を解析し、チェックポイントの達成度を100点満点で自動判定します。
実装箇所: mierute-backend/src/common/openai/openai.service.ts
判定基準:
- 60点以上: 次のステップへ自動遷移
- 60点未満: 具体的なフィードバックを提供し、再撮影を促す
RAGデータを用いたチャットによる、マニュアルに即したチャット質問機能が実装されています。
実装箇所:
iOSアプリでは、Metal Shading Languageを活用した先進的なビジュアルエフェクトを実装しています。
実装ファイル:
MIERUTE/MIERUTE/Shaders/TiltShineShader.metal- 傾き連動光沢効果（CoreMotion統合）MIERUTE/MIERUTE/Shaders/BorderShineShader.metal- ボーダー光沢効果（GPU並列処理）MIERUTE/MIERUTE/Shaders/RippleShader.metal- タッチ波紋エフェクトMIERUTE/MIERUTE/ShaderViewGroup/ShaderPreviewView.swift- 総合実装
CoreMotionによるデバイス傾き検出と連動し、デバイスを傾けると光が流れる直感的なフィードバックを実現しています。
初回利用時の対話型チュートリアルで、独自開発したMLModelによるジェスチャー認識を活用し、ユーザーが実際に操作しながらアプリの使い方を体験的に学習できます。
技術実装:
- Create MLで学習させたグッドサイン判別用のMLModel（Core ML統合）
- カメラの前でグッドサイン（親指を立てる）を認識すると自動的に次のステップへ遷移
- チュートリアル進行状態の保存（初回のみ表示）
デジタルに不慣れなユーザーでも安心して利用開始でき、実際の操作フローを体験することで本番での迷いを軽減します。
デモ動画:
従来の説明やマニュアルは、説明する側が どのように言葉や図で伝えたらわかりやすいか を考える必要があり多くの時間を必要としていましたが、MIERUTEではiOSアプリの実装によってわかりやすい説明の伝え方を実現するため、伝える難しさを大幅に軽減しています。
また、説明される側は、マニュアルを読み解き、正しいかチェックしながら進めていく必要がありました。マニュアルのバージョンが古いと手順が食い違っていたり、図がないことで分かりにくかったり、逆に図があることで分かりにくかったり、といった問題点がありましたが、MIERUTEでは画像認識機能のおかげで正確かつ理解しやすくマニュアルを進められます。 従来のマニュアルとは違い、インタラクティブで双方向な説明が実現でき、新しい「説明体験」を届けます。
- ブロックへの動画アップロード機能（AVFoundation統合）
- 3Dモデル（.usdz, .obj）の添付・表示機能
- SceneKitを活用したAR画面実装（実物に3Dモデルをオーバーレイ表示、組み立て手順の空間可視化）
想定ユースケース:
- 家具組み立て時に完成形の3Dモデルを実物に重ねて確認
- 機械の分解・組立時に内部構造を3D表示
- 動画による詳細な手順説明の補足
イメージ動画:
mock-3D.mp4
iOS 26以降のApple Intelligence（on-device LLM）を活用し、デバイス上で完結する処理を実現します。 tool Callingを使うことで、web検索APIの呼び出しや画像取得、RAG資料のより効果的な活用など、インタラクティブ性を増すことを想定しています。 また、作業内容によってはオフラインでの利用も想定されるため、その時にも動作するチャット機能の実装も可能です。
- YOLOv8/YOLOv9による高速物体認識
- カメラ映像から対象物をリアルタイム検出し、バウンディングボックスや矢印をオーバーレイ表示
- Core ML統合によるオンデバイスYOLO推論
- カスタムデータセットでの特定物体認識（家具パーツ、工具、機械部品など）
想定ユースケース:
- 家具組み立て: 「次に取り付けるべきネジ」をカメラで認識し、矢印で指示
- 機械操作: 「押すべきボタン」をハイライト表示し、誤操作を防止
- 実験手順: 使用する試薬や器具をカメラで認識し、正しい順序を視覚的に案内
- 車の給油: 給油口の位置をカメラで認識し、開け方を矢印で表示
イメージ動画:
ScreenRecording_10-20-2025.02-32-01_1.MP4
- 複数人で同じマニュアルを同時に利用
- リアルタイムで各作業者の進捗状況を共有
- チームメンバー間で相互チェック、作業の同期と分担管理
想定ユースケース:
- 工場での複数人での機械組み立て作業（進捗を共有しながら分担作業）
- 医療現場での手術準備チェックリスト（複数スタッフで確認）
- 実験室での共同実験（各ステップの完了をリアルタイム共有）
- 会社アカウントによる社内マニュアルの一元管理
- 部門・プロジェクト単位でのアクセス権限管理
- マニュアルのバージョン管理と更新履歴
想定ユースケース:
- 企業内での標準作業手順書（SOP）の統一管理
- チェーン店での店舗オペレーションの標準化
- 研修用マニュアルの一括配信と進捗管理
- GPT-4によるマニュアルの自動翻訳
- 音声ガイダンス（Text-to-Speech）、言語切り替えによるリアルタイム表示変更
想定ユースケース:
- 駅の改札利用マニュアル: QRコードをスキャンするだけで母国語で手順を確認
- 交通系ICカードのチャージ方法、切符の購入方法の多言語提供
- 公共施設や観光地でのインバウンド対応
マニュアルマーケットプレイス:
- 企業が作成したマニュアルを公開・販売
- まだマニュアルが明確に作られていない媒体
- QRコードでの配布と利用状況トラッキング
- バージョン管理と自動更新
想定される活用シーン:
- 製造業: 設備の保守・点検マニュアルを現場作業者向けに配布
- 医療: 医療機器の操作手順を標準化し、複数施設で共有
- 教育: 実験・実習手順をデジタル化し、学生の自主学習を支援
- サービス業: 店舗オペレーションマニュアルをチェーン全体で統一管理
家具メーカー・小売業との連携:
- IKEAやニトリなどの家具組み立てマニュアルをMIERUTEでデジタル化
- 既存の紙マニュアルにQRコードを追加し、ARガイドや進捗チェック機能を提供
- 顧客満足度向上とサポートコスト削減を実現
ガソリンスタンド・公共施設への導入:
- セルフガソリンスタンドでの給油手順マニュアル配置
- 車種ごとに異なる給油口の開け方をAIチャットで案内
- 駅の券売機、公共施設の利用方法など、マニュアルが存在しない場所への展開
- 多言語対応により外国人利用者の利便性向上
想定パートナー企業:
- 家具メーカー・小売: IKEA、ニトリ、無印良品
- エネルギー企業: ENEOS、出光、コスモ石油
- 鉄道会社: JR各社、私鉄各社
- 自治体: 公共施設・観光施設の案内
誰でも簡単にマニュアルを作成・保存
コンセプト: 「デジタルに疎い人でも、家族や自分のためのマニュアルを簡単に作れる」
ターゲットユーザー:
- シニア層（60代以上）: 家電の使い方、スマホ操作を家族が作成したマニュアルで確認
- 子育て世代: 子供の学校行事の準備手順、お手伝いマニュアルを作成
- 一人暮らし: 引っ越し後の家電設定、定期的なメンテナンス手順を記録
具体的なユースケース:
- おばあちゃんへのマニュアル: 孫がLINEの使い方、テレビのリモコン操作をMIERUTEで作成し、QRコードで共有
- 家庭内の「できること」を増やす: 洗濯機の使い方、ゴミの分別方法を子供向けにマニュアル化。完了すると自動でお手伝いポイントが貯まる仕組みと連携
- レシピのデジタル化: 料理の手順を写真付きでマニュアル化。カメラで料理の進捗をチェックしながら完成まで導く
- ペットの世話マニュアル: 旅行時にペットシッターへ餌やりや散歩の手順を共有
マネタイズ戦略:
- フリーミアムモデル: 基本機能は無料、マニュアル数や容量の上限で課金
- プレミアム機能: 音声ガイド、AR表示、複数人共有は有料プラン
- 家族プラン: 家族全員で複数デバイスから利用できるプランを提供
- Clean Architecture徹底実装 - iOS（MVVM）、Web（Domain-Driven Design）、Backend（NestJS Modular）すべてで一貫したアーキテクチャを採用。保守性と拡張性を最大化
- Metal Shaders統合 - SwiftUIにMetal Shading Languageを直接統合し、CPUオーバーヘッドを最小化。滑らかなアニメーションを実現
- マルチモーダルAI活用 - GPT-4o（タスク分割）とVision API（画像判定）を適材適所で使い分け、最適なユーザー体験を追求
- RAG基盤構築 - 将来的なベクトル検索（Embedding）統合を見据えた設計。Firestore上でドキュメント管理を実装
- 実用性重視 - 技術デモに留まらず、製造業・医療・教育現場で即座に実用化できる機能を厳選して実装
iOS、Web Frontend、Backendの各プラットフォームは、それぞれ独立したGitHubリポジトリで管理しています。
- OpenAI GPT-4o API - 自然言語からのタスクプラン自動生成
- OpenAI Vision API - 画像解析による進捗確認（100点満点評価）
- Firebase Firestore - NoSQLデータベース（Company、Project、Block、RAGドキュメント管理）
- Firebase Authentication - ユーザー認証
- Firebase Cloud Storage - 画像ファイル保存
- Firebase Cloud Functions - バックエンドホスティング
- Vercel - Webフロントエンドのデプロイ・ホスティング
iOS:
- SwiftUI - 宣言的UIフレームワーク
- Metal Shading Language - GPU駆動ビジュアルエフェクト
- CoreMotion - デバイス傾き検出（Tilt Shine Effect）
- AVFoundation - カメラ機能
- Combine - リアクティブプログラミング
Web Frontend:
- Next.js 15.5.6 - React Server Components活用
- React 19 - 最新のReactフレームワーク
- @dnd-kit - ドラッグ&ドロップUI実装
- Zustand - 軽量状態管理ライブラリ
- Tailwind CSS 4 - ユーティリティファーストCSS
- react-pdf - PDFビューア（RAGドキュメント表示）
Backend:
- NestJS - TypeScript製エンタープライズフレームワーク
- TypeScript - 型安全な開発
- @nestjs/config - 環境変数管理
- multer - マルチパート/フォームデータ処理（画像アップロード）
- iPhone - iOS 17以降（Metal対応デバイス）
- カメラ - Vision API用の画像取得
- 加速度センサー - Tilt Shine Effect用のデバイス傾き検出
1. Metal Shading Languageを活用したGPU駆動エフェクト
SwiftUIにMetal Shading Languageを直接統合し、CPUオーバーヘッドを最小化。60FPS以上の滑らかなアニメーションを実現しました。
実装ファイル:
MIERUTE/MIERUTE/Shaders/BorderShineShader.metal- ボーダー光沢エフェクト- GPU並列処理によるstitchable関数実装
- ガウシアン分布による自然な光の広がり
- 任意角度への光の移動をパラメータ化
MIERUTE/MIERUTE/Shaders/TiltShineShader.metal- 傾き連動光沢エフェクト- CoreMotion統合による加速度センサー連動
- デバイスの傾きに応じたリアルタイム光沢変化
MIERUTE/MIERUTE/Shaders/RippleShader.metal- タッチ波紋エフェクト- タッチ位置から広がる波紋アニメーション
- 減衰関数による自然な波紋の消失
参考動画:
Screen_Recording_2025-10-20_at_3.04.43.mov
2. Create MLによるグッドサイン判別MLModel
チュートリアル機能のために、Create MLを使用してグッドサイン（親指を立てる）を判別するMLModelを独自に学習・作成しました。
技術実装:
- Create MLでの画像分類モデルの学習
- グッドサインの有無を判別する
- Core ML統合によるオンデバイス推論（プライバシー保護）
- リアルタイムカメラ映像からの高速判定
効果:
- ユーザーが実際に手を動かして操作を体験することで、直感的にアプリの使い方を理解
- 外部API不要のオンデバイス処理により、低レイテンシーと高いプライバシー性を実現
3. GPT-4oによる自動タスク分割とVision APIによるマルチモーダル進捗確認
自然言語入力から構造化されたタスクプランを自動生成し、Vision APIで画像解析による進捗確認を行う統合システムを構築しました。
実装ファイル:
mierute-backend/src/common/openai/openai.service.ts:142-273- タスクプラン自動生成- GPT-4oに対してシステムプロンプトで「チェックポイント」と「達成条件」を分離したJSON生成を指示
- 正規表現によるJSONレスポンス抽出
- エラーハンドリング（パースエラー、API呼び出しエラー）の詳細ログ出力
mierute-backend/src/common/openai/openai.service.ts:17-140- 画像解析による進捗確認- Vision APIに画像URLとチェックポイント、達成条件を送信
- 100点満点での評価を正規表現で抽出
- 60点以上で次ステップへ自動遷移
cd mierute-frontend
npm install
cp .env.local.example .env.local # Firebase設定を記述
npm run dev # 開発サーバー起動 (localhost:3000)
npm run build # プロダクションビルドcd mierute-backend
npm install
cp .env.example .env # OpenAI API Key、Firebase設定を記述
npm run start:dev # 開発サーバー起動
npm run deploy # Firebase FunctionsへデプロイFirebase設定: firebase.json と .firebaserc を配置し、firebase login で認証
- 環境変数を.plistで配置
- Firebase Consoleから
GoogleService-Info.plistをダウンロード MIERUTE/MIERUTE/配下にGoogleService-Info.plistを配置- Signing & Capabilities でチーム設定
- Product > Build でビルド実行
