iOS / Web

矯正ログ / SmileProgress

歯列矯正中の写真を端末内で整列・匿名化し、自分用に記録する iOS / Web アプリです。希望者だけが匿名で Before / After を共有できます。

Next.js 16React 19TypeScriptTailwind CSSnext-intl

概要

SmileProgress（日本名「矯正ログ」）は歯列矯正の経過を端末内で記録する iOS アプリと、その公開ストーリーを集めた Web サービスです。写真の整列・トリミング・匿名化はすべてオンデバイスで行い、共有は希望時のみ匿名公開・限定 URL・非公開などスコープを選んで投稿できます。

解決したい課題

矯正中の経過写真は本人にとって価値が高い一方、SNS にそのまま載せるのは個人特定や治療内容の誤解のリスクを伴います。同じ悩みを抱える人が「他の人の Before / After」を見たいという需要もあり、安全に記録と共有を両立する仕組みが必要でした。

主な機能

端末内で写真を整列・匿名化し、外部送信なしで記録
Before / After 比較スライダーと月次タイムライン
匿名公開・限定 URL・非公開を投稿前に明示的に選択
「この画像が公開されます」確認画面で誤公開を防止
公開された他者のストーリーを国・期間・矯正タイプで絞り込み

技術スタック

Web

Next.js 16, React 19, TypeScript, Tailwind CSS

i18n

next-intl (ja / en)

iOS（移植予定）

SwiftUI (port from React mocks)

セキュリティ

CSP, HSTS, X-Frame-Options, Permissions-Policy

アーキテクチャ

Web は Next.js 16 (App Router) + React 19 + TypeScript + Tailwind CSS、i18n は next-intl で日英対応。iOS アプリ UI は React で先に実装し、後続フェーズで SwiftUI に移植する方針です。Webpack ビルド固定 (Turbopack の Apple Silicon バグ回避) と CSP / HSTS 等のセキュリティヘッダーを `next.config.mjs` で配信時に付与しています。

AIの活用

ユーザー写真に対する判定・診断は行いません。AI はコピーライティング、ガイド記事の下書き、画像の匿名化チェックの補助、英訳など制作プロセス側でのみ活用しています。

評価・運用

現在は Web LP・ストーリー一覧・ストーリー詳細・iOS アプリ風 UI モックまで一巡実装済みで、iOS アプリ本体は SwiftUI 移植フェーズに向けて準備中です。共有スコープの理解しやすさと匿名性が崩れる経路がないかを最重要観点として継続検証しています。

矯正ログ / SmileProgress