# FRAME NOTE 撮影ガイドアプリ 要件定義案 v0.4

作成日：2026-09-16。更新日：2026-09-17。FRAME NOTEは仮称。iOS・Android向けの構想を確認する資料で、実装方式・価格・対応OSは未確定。

## 1. 目的と対象

構図やカメラの位置に迷う人が、視覚的なお手本を選び、ライブ映像に重ねたガイドを目安に撮影できるようにする。最初の想定場面はカフェの飲み物・料理・小物。人物・風景にも広げられる分類を用意する。

ユーザーの依頼に基づく対象：32の撮影手法を一覧で見られること、どこに何を重ねるかを図で理解できること、smuto/ui-byのUIを採用すること、将来iOS・Androidアプリにすること。v0.2でモザイク編集と対応環境での撮影音OFFを検討項目に追加。v0.3ではユーザーの希望に合わせて、これらを後から追加する機能とし、撮影の中心体験を先に試作した。v0.4では追加依頼に基づき、ブラウザ試作に手動モザイク・録画・効果音とマイクの設定を実装した。以降の優先度や数値は初期提案であり、承認済みの本番仕様ではない。

## 2. 成果物と境界

- 現段階：図鑑 `index.html` と、操作できるスマホUI `app.html`、32種類のSVG図解、要件定義書。
- アプリ試作：14構図のお手本・お気に入り、サンプル／画像ファイル／対応ブラウザのカメラ入力、ガイドのみの反転・濃さ・表示、3:4／1:1／4:3、デジタルズーム、撮影結果、PNGダウンロード、一時的な写真一覧。カメラ権限は明示操作時に要求。
- プレビュー操作：分類絞り込み・キーワード検索、ガイド表示、20〜100%の濃度、作例の左右反転、前後のガイドへの移動。
- v0.4の追加：静止画の複数矩形モザイク、移動・拡縮・数値指定・粗さ・取消、加工済みPNG保存、録画・動画再生・ダウンロード、効果音／マイク音声の独立設定。
- 未実装：動画モザイク、端末標準カメラの撮影音制御、姿勢センサー、被写体認識、ネイティブの高画質撮影・写真ライブラリ保存、iOS/Androidアプリと配信。ブラウザカメラでは映像フレームを書き出すため、ネイティブの静止画撮影品質の検証には使わない。
- 写真や個人情報の外部送信は行わない。参考スクリーンショットのSNS操作部分や第三者のロゴは素材として使わない。
- 図の色・光・ぼけは説明用の模式表現で、実機で得られる画質の保証ではない。

## 3. 撮影手法の分類

| 分類 | 件数 | アプリでの基本的な扱い |
| --- | ---: | --- |
| 構図 | 14 | カメラ映像にグリッド・円・軸・曲線を重ねる |
| 角度・高さ | 8 | 側面図でカメラ位置を説明。姿勢センサーの補助表示は別途検討 |
| 写し方 | 10 | 目安枠・光の配置図・ピントの説明。実際の効果は端末と撮影条件に依存 |

名称・説明・配置・補助案の唯一のデータ元は `assets/catalog.js`。図解は `assets/diagrams.js`。別紙 `catalog.md` に32件の要件を展開する。

## 4. 画面とユーザーフロー

1. 起動：撮影画面を開き、ブラウザ試作では許可要求なしでサンプルを表示する。
2. お手本：構図を選ぶ。詳細の図と説明で重ねる位置を理解し、「この構図で撮る」で戻る。全32種類の学習資料は図鑑に置く。
3. 入力：左上からカメラまたは写真を選択。カメラは許可後に開始し、拒否時は案内と代替入力を用意する。
4. 調整：ガイド表示・濃さ・左右反転・比率変更・デジタルズーム。
5. 撮影：シャッターでガイドのない写真を生成。処理中は重複操作を防ぐ。
6. 確認：撮り直す／写真を保存を選べる。写真一覧から再表示・保存も可能。
7. 保存：ブラウザ試作はPNGダウンロードを開始する。OS写真ライブラリへの保存完了とは表示しない。写真一覧はページの再読み込みで消えるため、残す写真はダウンロードする。
8. 編集：撮影直後または写真一覧から「編集・モザイク」を開く。範囲を指定して「編集を完了」後、写真を保存する。未反映の変更を伴う離脱では、編集を続けるか変更を破棄するかを選ぶ。
9. 録画：写真／動画モードを選び、開始・停止。結果画面で再生・保存する。
10. 設定：写真のシャッター効果音、録画のマイク音声を別々に切り替える。端末標準カメラの音の制御は対応判定と実機検証後の追加とする。

詳細から戻る場合は検索条件・一覧位置を保持する。カメラから戻る場合も選択した構図・設定値を保持する。

## 5. 機能要件案

| ID | 優先度 | 機能 | 判定条件 |
| --- | --- | --- | --- |
| LIB-01 | 初期 | 32種類の一覧・詳細 | 全件に名称、図、配置、動作、限界がある |
| LIB-02 | 初期 | 分類・シーン・名称検索 | 条件間はAND、分類内は単一選択、0件とリセットを用意 |
| LIB-03 | 初期候補 | お気に入り | 端末内保存。閲覧のみで順序を変更しない |
| CAM-01 | 初期 | カメラ権限・プレビュー | 許可・拒否・中断から復帰可能 |
| OVL-01 | 初期 | 14種類の構図ガイド | 保存される撮影範囲と座標が一致 |
| OVL-02 | 初期 | 表示・濃さ・反転 | 映像を変えずガイドだけを変更 |
| OVL-03 | 初期 | 撮影比率 | 3:4、4:3、1:1を候補に端末検証。例図は4:3固定 |
| EDU-01 | 初期 | 角度8種類・写し方10種類の図解 | 側面図・上面図を映像の外の説明欄に表示 |
| SEN-01 | 次段階候補 | 水平・端末傾き | センサー未対応を表示。被写体との角度と断定しない |
| CAP-01 | 初期 | 撮影・確認・保存 | ガイドやUIを画像へ焼き込まない |
| SET-01 | 初期 | テーマ・読みやすさ | OS配色・明示テーマ、文字サイズ、読み上げ対応 |
| EDT-01 | v0.4試作済み | 手動モザイク | 複数の矩形範囲を指定・移動・拡縮し、粗さ変更・取消ができる |
| EDT-02 | v0.4試作済み | 加工済み画像の保存 | 出力画像の画素に加工を適用し、再度開いても反映される |
| SND-01 | 後から追加・対応環境限定 | 撮影音ON/OFF | 対応を確認し、非対応・未判定ではOFFを有効にしない |
| REC-01 | v0.4試作済み | 録画・再生・保存 | 60秒まで、ガイドを含まない映像を対応形式で出力 |
| SND-02 | v0.4試作済み | アプリの写真効果音 | ONで音を合成、OFFでは再生しない |
| SND-03 | v0.4試作済み | マイク音声ON/OFF | ONの許可拒否時に勝手に無音で録画せず案内、OFFは音声トラックなし |
| EDT-03 | 次段階候補 | 顔などの自動検出 | 検出候補を提示し、手動で追加・修正できる |

AIによる自動配置、点数化、自動ズーム、モザイク以外の写真加工、クラウド同期、SNS共有機能、課金は初期対象外。将来候補として扱う。

## 6. 重ね合わせの座標・描画仕様

### 座標の基準

撮影範囲の左上を (u,v)=(0,0)、右下を (1,1) とする。画面全体の座標は使わない。撮影範囲が画面上で (left,top,width,height) なら、x=left+u×width、y=top+v×height。

描画順はカメラ映像 → ガイド → 操作UI。ガイドは撮影範囲でクリップし、説明や操作は範囲外に配置する。プレビューの拡大切り抜き、センサー向き、端末回転、前面カメラの鏡像方針を1つの変換処理で扱う。

### 基本ガイド

- 三分割：u,v=1/3、2/3。
- 黄金分割：u,v≈0.381966、0.618034。
- 中央：u,v=0.5。
- 三角形：初期作例の中心は (0.38,0.32)、(0.70,0.42)、(0.43,0.76)。円の半径は短辺基準の約13%、13%、18.7%。自由配置やドラッグ編集は要否を別途決定。
- 円：半径は短辺に対する比で定義し、縦横に別倍率を掛けて楕円にしない。
- 黄金螺旋：90°回転ごとに半径がφ倍となる対数螺旋を使う。黄金長方形を撮影範囲に等比で収め、余った領域は空ける。参考カードのフィボナッチ円弧と数学的に同一ではない。
- 左右反転：u′=1−u。ライブ映像と説明文字を反転しない。非対称の構図を反転する用途。
- 画面の長短辺や向きが変わったら再計算する。異なる比率で既存SVGを非等方伸縮しない。

### 見た目・操作

初期提案は破線、濃度85%、調整範囲20〜100%。明暗の背景でも見える線の二重描画・色切替を端末上で検討。ガイドはタップしてもピント合わせや撮影操作を妨げない。色だけに意味を持たせず、破線・十字・説明を併用する。

本プロトタイプの「作例を左右反転」は被写体と線の関係を理解するために両方を反転する。ライブカメラのガイドだけを反転する仕様とは異なる。

### 角度と光

端末姿勢のピッチ・ロールから分かるのは重力に対する向きであり、被写体の高さ、目の位置、カメラとの距離、テーブル面の向きは分からない。45°は撮影の目安と表記し、自動判定済みと表示しない。

光源は初期版で自動検出しない。逆光・サイド光はカメラと被写体と光源の配置を図で示す。ユーザーが現場で移動・調整する。

## 7. iOS・Androidの共通要件

| 項目 | 共通の期待動作 | 実装時の確認事項 |
| --- | --- | --- |
| 権限 | カメラを開く時に要求。拒否後も図鑑を利用可能 | OSごとの許可・設定誘導・制限状態 |
| 保存 | ユーザーが保存を選んだ画像だけ端末へ保存 | OSごとの保存APIと権限、写真ライブラリとの連携 |
| 中断・復帰 | カメラを解放し、復帰時に状態を再取得 | 通話・画面ロック・他アプリのカメラ占有 |
| 端末差 | 対応するレンズ・ライト・機能だけ表示 | 超広角、望遠、マクロ、合焦可能距離、処理品質 |
| 画面 | 縦横持ちとセーフエリア対応 | プレビュー座標と保存の回転・トリミング |
| アクセシビリティ | 文字拡大・読み上げ・非色依存 | VoiceOver/TalkBackの実機操作、操作領域の大きさ |
| オフライン | 図鑑・ガイド・撮影を通信なしで利用 | 初期アセットを同梱、更新方式は後で決定 |
| データ | 写真を外部に自動送信しない | 診断ログにも写真・EXIF位置情報を含めない |

対応OSの下限、採用フレームワーク、API、写真形式はまだ選定しない。ネイティブ実装と共通実装を、カメラ制御・描画精度・端末差・開発保守の観点で試作比較して決める。

## 8. 品質とエラー時の動作

- 描画遅延の暫定目標：基準端末で30fps相当の追従。正式な閾値は端末を選んでから決める。
- プレビューと撮影結果のズレは、固定チャートを撮影し四隅・中央・交点で検証する。許容値は試作後に定義する。
- 一覧読み込みはローカルデータから行う。空状態、長い日本語名、32件の描画を確認する。
- 保存失敗は「保存できませんでした」と理由と再試行を提示。プレビューを消さない。
- カメラ取得失敗は図鑑へ戻れる。無期限のローディング状態にしない。
- 未対応の姿勢・レンズ・ピント機能は説明を出し、操作可能に見えるダミー操作を置かない。
- カメラとセンサーは非表示時に停止し、電池・発熱・メモリ使用を代表端末で測定する。

## 9. 受入条件

1. 全32項目の図と説明が個別の手法に対応し、どこをどう合わせるかが読める。
2. 縦横・比率変更時に被写体とガイドがずれず、円・螺旋の比率が保たれる。
3. ガイドの変更はライブ映像自体を反転・加工しない。
4. 写真保存時にUI・ガイドが焼き込まれない。
5. 権限の未選択・許可・拒否・撤回、保存失敗、アプリ復帰の各状態から操作を再開できる。
6. 端末未対応の機能でエラー終了せず、利用できる機能が分かる。
7. ピントや構図の採点を実測していないのに、成功判定を表示しない。
8. PCとスマホで一覧・詳細・資料を利用でき、キーボードや読み上げでも内容に到達できる。
9. 【追加版】モザイクの範囲が拡大表示・画像回転後もずれず、保存画像にも同じ位置で適用される。
10. 【追加版】複数範囲・粗さ変更・取消・保存失敗後の再試行が機能し、加工前画像を勝手に写真ライブラリへ保存しない。
11. 【追加版】撮影音の「対応・非対応・未判定」を区別し、OFFの希望が保存されていても非対応時にOFF表示を続けない。

## 10. 未決事項と開発の順序

未決：仮称、主な撮影シーン、初期構図数、ガイドの自由移動・回転、前面カメラ、対応OS・端末、保存形式、実装方式、価格、モザイクの自由描画・既存写真の読み込み、自動検出の対象。

進め方：本図鑑で項目とガイドの意味をレビュー → 三分割・三角構図・黄金螺旋で実カメラ試作 → iOS/Androidの代表端末で座標・保存・権限を検証 → 対象端末と数値を確定 → 残りの構図へ展開 → 配信準備。

## 11. モザイク編集（v0.4で静止画の試作を実装）

対象はアプリ内で撮影した静止画。顔、車のナンバー、看板など隠したい部分を利用者が指定する。撮影中の映像加工や動画への追従は初期対象外。

操作：撮影結果 →「モザイク」→ 指で矩形を指定 → 範囲を移動・拡縮 → 粗さを調整 → 拡大して確認 → 加工済み写真を保存。複数範囲に対応し、選択した範囲の削除と操作の取消を用意する。初期案は矩形、自由描画や円形は次の検討事項。

粗さは透明度ではなくブロックの大きさで変える。画面縮小表示に依存せず、元画像の短辺に対する比率で持ち、出力画像の解像度へ換算する。選択範囲は画像の正規化座標で保持し、画面上のズーム・回転・余白と区別する。編集範囲が画像外へはみ出した場合は画像の境界で切り取る。

保存時は画素へ加工を適用した画像を生成する。ガイドのように画面上へ四角を載せるだけでは完了としない。新しく撮影した元画像は編集用に一時保持し、加工前の画像を写真ライブラリへ自動保存しない。既存写真の読み込みを将来追加する場合は原本を上書きせず、加工済みコピーを保存する。

サムネイルは加工後の画像から作り、出力ファイルに加工前の埋め込みプレビューを残さない。保存失敗時は編集状態を保持して再試行する。保存完了または破棄後は不要になった元画像の一時データを削除する。処理は端末内で完結する。

モザイクの粗さによっては内容を推測できるため、完全な匿名化を保証する表示はしない。確実に画素を隠す必要がある場面向けに、不透明な塗りつぶしも追加候補とする。

顔の自動検出・一括加工は次段階の候補。検出漏れがある前提で利用者が加工範囲を確認し、追加・解除できるようにする。

## 12. 撮影音の設定（後から追加・対応環境限定）

ここでの「無音」は静止画撮影時のシャッター音のOFFを指す。通知音・アラーム・端末全体の音量や動画音声の設定とは分ける。初期値は通常撮影とし、希望設定と実際に適用できる状態を別々に保持する。

| 状態 | 表示・動作 |
| --- | --- |
| 確認中・判定不能 | 「撮影音：確認中」。OFF操作は無効、無音とは表示しない |
| OFF対応 | ON/OFFを選択でき、カメラ画面に現在の有効状態を表示 |
| OFF非対応 | 「この環境では撮影音をOFFにできません」。通常撮影を利用可能 |
| 復帰・カメラ変更 | 対応可否を再確認。保存済みのOFF希望を無条件で適用しない |

OFF時の撮影完了は、画面内の短い視覚フィードバックで伝える。任意の触覚フィードバックは音の設定と別にする。「通常撮影」は現在のOSの挙動に従う意味であり、OSの撮影音に独自の効果音を重複させない。

iOSでは、公式の `AVCapturePhotoOutput.isShutterSoundSuppressionSupported` による実行時判定を基本とし、対応時だけ `AVCapturePhotoSettings.isShutterSoundSuppressionEnabled` を利用する。OSのAPI利用可否も確認する。Appleは無音にできない地域では対応値がfalseになると説明しているため、全iPhoneでの無音を仕様上保証しない。[Apple公式仕様](https://developer.apple.com/documentation/avfoundation/avcapturephotooutput/isshuttersoundsuppressionsupported)

Androidでは、採用するカメラ基盤に合わせて判定する。CameraXを選ぶ場合は `CameraInfo.mustPlayShutterSound()` が地域に応じた撮影音の必要性を示す。音の再生主体がカメラ基盤によって異なるため、実機で確認し、必要な音の重複・欠落を防ぐ。旧Camera APIの `canDisableShutterSound` を新規の共通仕様として固定しない。[Android公式仕様](https://developer.android.com/reference/androidx/camera/core/CameraInfo#mustPlayShutterSound())

上記を踏まえた設計判断として、OS・端末・使用環境が許可する範囲でOFFを提供する。制約の回避手段を標準機能にしない。無音非対応だからといって低解像度のプレビュー画像保存に黙って切り替えない。対象端末で通常・OFF・非対応・カメラ切替・復帰を試し、撮影品質と音を実測して対応表を作る。

仕様確認日：2026-09-16。対応OSの下限やAPI選定は実機試作で確定する。


## 13. 撮影と編集・出力の分離

撮影入力 → ガイドを含まない画像 → 編集用画像と操作履歴 → 加工済み画像の出力 → 保存、という段階に分ける。撮影時のガイドと撮影後の編集範囲は別のデータとして管理する。矩形の座標は原画像に対する正規化座標で保持し、表示倍率と保存解像度の変更に追従させる。

`capture()` が画像を生成、`FrameStudio.Editor` が編集状態と原画像を管理、`showPhoto()` が出力画像を表示、`save()` がダウンロードを開始する。原画像は一時メモリに保持して再編集できるようにし、アルバムの表示とダウンロード対象を加工後の画像へ差し替える。原画像を自動保存しない。将来のネイティブ実装でも同じ責務分割を採用する。

ブラウザ試作では構図のお気に入りと音の設定をlocalStorageに保存する。画像は外部送信せず、このページ内の一時データとして扱う。撮影サイズは長辺1600pxで固定し、縦横比・中心クロップ・デジタルズームをプレビューと出力で揃える。ズームはレンズ切替ではない。実機の保存形式・解像度・永続アルバムは別途決定する。


## 14. v0.4で操作できる編集・録画・設定

### 静止画の編集

撮影結果または写真一覧 → 写真 →「編集・モザイク」→ 指で囲んで範囲を追加 → 移動／右下ハンドルで拡縮 → 粗さ調整 →「編集を完了」→「写真を保存」。最大12矩形。数値入力でも位置・大きさを調整可能。粗さは全範囲に共通。取消は直前30操作まで。編集完了はページ内の結果への反映で、ファイル保存とは区別する。

モザイクは原画像の対象領域を縮小し、平滑化せずに拡大して出力画素に反映する。選択枠は別のSVGレイヤーで、保存画像には含めない。原画像と範囲・粗さを別管理し、再編集時に加工が重ならない。編集の未反映変更がある場合、戻る操作で破棄確認を表示する。動画へのモザイク・自動顔検出・ピンチ拡大は未実装。

### 録画

写真／動画のモード切替を撮影画面に置く。開始ボタンは録画中に停止ボタンになり、REC・経過時間・マイク音声ON/OFFを表示する。録画中は入力・比率・ズーム・画面遷移を固定する。バックグラウンド移行と映像／マイクの中断では録画を停止し、作成できた動画を確認画面へ渡す。停止後に映像・マイクのトラックを解放する。許可待ちは同じボタンでキャンセルでき、取り消し後に遅れて届いたトラックも停止する。

この試作は長辺720px、目標24fps、1回60秒まで。入力映像をCanvasに描画してMediaRecorderで記録するため、構図ガイドは動画に入らない。サンプル／画像入力は静止画の動画となる。実カメラの入力では動く映像を録画する。音声ONはマイクトラックを追加し、OFFでは音声トラックを作らない。マイクが拒否されたら録画を開始せず案内し、ユーザーが「マイクOFFで録画する」を選んだ場合にのみOFFで再開する。

MediaRecorder・Canvas.captureStreamの有無とMIME形式の対応を確認し、非対応時に案内する。実際の出力に合わせWebM／MP4の拡張子を付ける。参考：[MediaRecorder](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder)、[Canvas.captureStream](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream)。端末ごとの解像度・フレームレート・対応形式は実機検証後に確定する。

### 音の設定

「設定」タブに、写真のシャッター効果音と録画のマイク音声を独立したスイッチで置く。初期値はどちらもOFF。写真効果音はWeb Audioで短い音を生成し、ON時に写真撮影と「効果音を試す」で再生する。マイクは設定ONだけでは取得せず、録画開始時に許可を求める。設定はlocalStorageへ保存し、保存不可の場合はページ内のみの保持を案内する。

これはアプリの効果音と録音設定であり、端末標準カメラのシャッター音を制御しない。第12節のネイティブ撮影音設定は将来の対応判定・実機検証事項として区別する。