SnapMark - 画像注釈・マークアップスタジオ

【目的】スクリーンショットや写真に矢印・図形・モザイクを素早く加え、サポート依頼・資料作成・SNS投稿用に仕上げる無料ツール。在宅ワーカー、カスタマーサポート担当、教師、学生、SNS利用者まで幅広く使える「便利ツール」。

【主要機能】
1. 画像アップロード(ドラッグ&ドロップ、クリップボード貼り付け、サンプル画像で試用可)
2. 描画ツール:矢印/四角/円/フリーハンド/テキストボックス/番号付き丸スタンプ、色・線幅・不透明度調整
3. モザイク&ぼかしツール(顔・個人情報・ナンバープレート等を隠す)
4. レイヤー選択・移動・削除、Undo/Redo、Ctrl+Z対応
5. PNG/JPEGダウンロード、クリップボードコピー、6桁コード付き一時共有URL発行(自動失効)
6. 作業用アンビエントBGMのON/OFF再生と操作フィードバック音

【画面構成】
・トップ:ドラッグ&ドロップエリア、サンプルデモ、機能紹介カード
・エディタ画面:中央キャンバス、左に描画ツールパレット、上部にカラー/線幅バー、右上にUndo/保存/共有ボタン、下部にBGM再生トグル
・共有ページ:画像ビューア、残り有効期限表示、ダウンロードボタンのみのシンプル構成

【データ構造】
imagesテーブル(id, share_code, image_path, created_at, expires_at, view_count)。編集内容はブラウザ内Canvasで完結し、共有時のみ画像を一時保存。expires_at経過後は自動削除するバッチ処理を用意。

【デザイン方向性】明るいブルー×ホワイト基調のモダンSaaS系UI、角丸カードとフラットアイコン、影は控えめ。キャンバス周りに柔らかいドロップシャドウ。スマホでは縦積みレイアウト、ツールパレットは下部固定。

【音響設計】操作音はWeb Audio APIで生成する短い電子クリック/チャイム(ツール切替、保存完了、共有完了で異なる音色)。加えて集中作業用アンビエントBGMをオプション再生:Lo-fiジャズ系、BPM70、4/4拍子。ブラシ風ハイハットとソフトキックのドラム、ウォーキングベース、7th/9thコードのローファイピアノ、8小節Aメロ(落ち着いたモチーフ)+8小節Bメロ(装飾音増加)を繰り返し、4小節ごとに軽いフィル(スネアロールorピアノの装飾フレーズ)を挿入。AudioContext.currentTime基準で先読みスケジューリングし、BGM/SEを別ゲインノードで音量調整、ミュートボタン、停止時は全ノードをdisconnectしてリソース解放。

## BGM品質要件
- アプリの雰囲気に合うジャンル・BPM・拍子を定め、ドラム、ベース、和声、メロディの4層で構成する
- 最低8小節またはA/Bの2展開を作り、休符、アクセント、フィル、フレーズ変化を入れる
- Web Audio APIはAudioContext.currentTime基準で先読みし、BGM/SE別音量・ミュート・停止処理を実装する
- 単一オシレーターの持続音や1〜3音だけの反復はBGMとして不可

## ビジュアル品質要件
- 生成済み素材を仕様内の用途・表示場所で実際に使用し、未使用素材を残さない
- 画風・配色・キャラクター比率を全画面で統一し、文字はHTML/CSSで重ねる
- PC・スマホで画像の欠け、引き伸ばし、文字との重なりがないことを開発完了前に確認する