05　ARフォトフレーム

枠を重ねて、記念写真を撮る

画像マーカーは使いません。カメラにフレームを重ねて撮影し、端末内で合成します。エディタは photoframe.html です。

このエディタでできること

透過画像のアップロード、素材なしのフレーム、文字・画像・図形の自由配置から枠を作り、撮影サイトの文言とボタンを整えて公開します。写真は公開サーバーへ上がりません。

画像アップロード、素材なしで作成、自由配置のいずれかを選びます。フレームの向き（縦型・正方形・横型）と写真の比率もここで決めます。

タイトル、説明、撮影後メッセージ、ボタン色、最初に使うカメラ、任意の特典URLを設定します。

撮影画面と撮影後を切り替え、「カメラで試す」で実カメラ確認もできます。

撮影サイトをZIPにするか、URLを発行します。制作用のテンプレートZIPとは別物です。

カメラ権限が必要です。自撮り左右反転は撮影ボタン左から切り替え（初期オン）。横型フレームはスマホを縦向きのままでも撮影でき、横向きにすると写真が大きく表示されます（撮影中に回転しても撮り直し不要）。共有に対応していないブラウザではダウンロードします。

項目	内容	制限・初期
画像アップロード	PNG / JPEG / WebP。透過PNG推奨。非透過は撮影窓を自動作成。	最大20 MB。
素材なしで作成	クラシック / ダブルライン / コンフェッティ。フレームに入れる文字。	文字最大80。初期スタイルはクラシック。
自由配置	文字・画像・図形を重ねる。初期デザイン「上下バナー」「タイトル＋飾り」「空白」。	最大30レイヤー。
フレームの向き・写真の比率	縦型（3:4 / 9:16）、正方形（1:1）、横型（4:3 / 16:9）。向きを切り替えると 3:4⇔4:3、9:16⇔16:9 のように同じ比率で縦横が入れ替わります。横型はプレビューも横向きのスマホで表示します。	初期縦型 3:4（1080×1440）。9:16は1080×1920、1:1は1080×1080、4:3は1440×1080、16:9は1920×1080。画像アップロード時は画像に近い比率を自動選択。
テンプレートデータをダウンロード	design.svg、overlay.png、blank.png、guide.png、README.txt の制作ZIP。	公開ZIPとは別です。
現在のデザインを透過PNGで保存	いまの枠をPNGで書き出します。	外部編集後は画像アップロードで戻します。

項目	内容	制限
文字	配置する文字、色、縁取り、サイズ、太字。枠に収まるよう縮小。	素材名80、本文300。サイズ1〜30%、縁0〜2%。
画像	透過PNG推奨。背景は自動除去しません。	—
図形	四角・帯、楕円、星、ハート。四角は角丸。	角丸0〜30%。
配置	プレビュードラッグ、右下ハンドル、矢印キー（Shiftで5倍）。前後・複製・削除・表示切替。	中心 −50〜150%、幅高さ2〜200%、回転 −180〜180°、不透明度0〜100%。

項目	制限・初期
サイトのタイトル	最大100。初期「今日の思い出を、1枚に。」
説明文	最大300。
撮影後のメッセージ	最大100。
ボタン文言（カメラ起動 / 撮影 / 画像保存 / 撮り直し）	各最大40。空欄不可。
ボタンの色 / サイトの背景色	初期アクセント #ff6900。
最初に使うカメラ	フロント（自撮り）またはバック。
特典受け取りを表示	文言最大50。URLは https:// のみ。ユーザー名・パスワード付きURLは不可。

プロジェクト名、ZIP、URL発行、再公開／別URLは共通の公開仕様と同じです（上限40 MB）。

操作説明、「過去に公開したサイト」（共通の一覧ページ）、すべてリセット、ポータルへ戻る。

撮影画面→撮影後

「サンプル背景を表示」でカメラの代わりの絵を重ねます。「カメラで試す」は実カメラの撮影サイトをダイアログで開きます。

カメラ許可→前後切替・左右反転→撮影→端末内合成→保存/共有→撮り直し／特典