image

同じ構図で撮る

元写真をライブカメラへ重ね、構図ガイドや4種類の重ね表示を使って、できるだけ同じ構図で撮り直します。

ローカル処理
ファイルについてこのツールで選択したファイルや入力内容は、Browser Kittyのバックエンドへアップロードせずブラウザ内で処理します。
操作デモ 実際の操作の流れを短い動画で確認できます。

このツールについて

同じ構図で撮る(Photo Re-Enactor)は、昔の写真やBefore写真を元に、できるだけ近い構図でもう一度撮影するためのブラウザツールです。JPEG / PNG / WebPの元写真をライブカメラへ重ね、Ghost、Outline、Blink、Splitを切り替えながら、位置や大きさを合わせて撮影できます。

元写真と縮小したカメラフレームを端末内で比較し、左右・上下・距離・傾きのうち大きなずれを1つずつ案内します。自動ガイドが使いにくい場面では元写真を手動で移動・拡大縮小・回転でき、撮影後はBefore / Afterを比較してJPEGや比較用単一HTMLとして保存できます。

こんなときに便利

  • 昔撮った家族写真や旅行写真を、年月を空けてできるだけ同じ位置・構図で撮り直したい
  • 建物、庭、部屋、設備などのBefore / Afterを、後から見比べやすい構図で残したい
  • 定点観察ほど厳密な治具は使わず、スマホだけで過去写真へ近い画角を作りたい
  • 撮影直後にBefore / AfterをSplitやGhostで確認し、そのまま比較画像やHTMLを保存したい

できること

このツールで利用できる主な機能です。

使い方

  1. 元写真を選びます。対応形式はJPEG / PNG / WebPで、この時点ではカメラ権限を要求しません。
  2. 元写真を確認して「撮影を開始」を押し、ブラウザから求められた場合だけカメラ権限を許可します。
  3. Ghost / Outline / Blink / Splitから見やすい表示を選び、構図ガイドが使える場合は案内に合わせてカメラを動かします。
  4. 元写真自体を調整したい場合は手動調整をONにし、ドラッグ・拡大縮小・回転で位置を合わせます。
  5. 必要なら3 / 5 / 10秒タイマーを選び、撮影ボタンを押します。一致度が低くても撮影できます。
  6. 撮影後はSplit / Ghost / Blinkを切り替え、必要ならSplitの境界を画像上で直接動かしてBefore / Afterを確認します。
  7. 撮影したJPEG、左右比較JPEG、またはBefore / Afterを内包した比較用単一HTMLから必要な形式を保存します。

対応範囲

  • 元写真: JPEG / PNG / WebP。
  • 重ね表示: Ghost / Outline / Blink / Split。
  • 構図ガイド: 左右、上下、距離、傾きのずれを端末内で推定。手動調整では移動・拡大縮小・回転に対応。
  • 撮影タイマー: OFF / 3 / 5 / 10秒。
  • 保存: 撮影JPEG、左右比較JPEG、Before / Afterを埋め込んだ比較用単一HTML。比較HTML内でもSplit / Ghost / Blinkと個別画像保存を利用可能。
  • カメラ: HTTPSまたはlocalhostを推奨。利用できるカメラ、解像度、Wake Lock、振動フィードバックはブラウザ・端末に依存。

制限・注意点

  • 自動構図ガイドは補助機能で、特徴が少ない場面、暗所、ぼけ、大きく変化した風景、大きな視点差では利用できないことがあります。
  • 一致度は写真品質ではなく構図の近さの目安で、撮影可否の判定には使いません。
  • 人物ポーズの自動一致、人物識別、構図一致を条件にした自動撮影は含みません。
  • ブラウザによってはfile://で開いた単一HTMLからカメラを利用できません。撮影用途ではHTTPSまたはlocalhostを使ってください。
  • 比較用HTMLにはBefore / Afterの写真そのものが埋め込まれるため、そのHTMLを共有すると写真も共有されます。

よくある質問

元写真やカメラ映像はサーバーへ送信されますか?

いいえ。元写真の読み込み、カメラ映像、構図ガイド、撮影、比較、保存はブラウザ内で処理します。アプリは選んだ写真やカメラ映像を外部へ送信せず、ランタイムCSPもconnect-src 'none'です。

自動ガイドがうまく動かない場面でも撮影できますか?

はい。構図ガイドは補助であり撮影条件ではありません。自動比較が難しい場面でも重ね表示を使え、必要なら元写真を手動で移動・拡大縮小・回転して撮影を続けられます。

昔の写真と完全に同じ位置まで自動で合わせてくれますか?

完全自動ではありません。左右・上下・距離・傾きのずれを推定して次の調整を案内しますが、最終的にカメラを動かして構図を合わせるのはユーザーです。大きな視点差ではガイドを利用できない場合があります。

比較結果を1つのファイルで渡せますか?

はい。Before / Afterを内包した比較用単一HTMLを保存できます。受け取った側はHTMLを開くだけでSplit / Ghost / Blinkを切り替え、Before / Afterを個別に保存できます。

オフライン版・ソースコード

ルートのphoto-re-enactor.htmlは必要なアプリコードを内包した単一HTMLで、元写真の読み込み、構図解析、撮影、比較、保存を実行時の外部通信なしで行えます。ただしカメラAPIはブラウザのセキュリティ制約を受けるため、撮影用途ではHTTPSまたはlocalhostでの利用を推奨します。

GitHubでソースを見る