この作品について
写真館に行かずに履歴書用の証明写真を用意する有料サービス（¥980／テンプレート購入者は¥580）。手持ちの自撮り1〜4枚（推奨は正面＋斜めの2枚）から、背景と光4段×レンズと姿勢4列の16通りを一度に作り、選んだ1枚を8様式の履歴書PDFの30×40mm枠へ焼き込む。L判6面の焼き増しシートも書き出せる。加工写真が認められないパスポート・運転免許・マイナンバーカードの申請には使えず、履歴書・エントリーシート・アルバイト応募向け。作った16枚は当社サーバーに保存せず端末のIndexedDBに置き、生成のためOpenAI（米国）へ送ることと同社が不正監視で最大30日保持することは商品ページに明記している。
Problem
困りごとと、解き方
履歴書の写真枠は30×40mm。自分で画像を貼ると縮尺も位置も狂う
写真枠の座標を8様式ぶん実測して固定し、画面のプレビューと配布PDFを別経路で測って突き合わせた
証明写真機は撮り直しがきかず、写りを見比べる前に印刷が終わっている
背景・光とレンズ・姿勢を振った16通りを一度に出し、元の写真と並べて選ばせる
顔写真を預けるサービスは、どこへ送られて何日残るのかが利用者から見えない
保存場所を端末のIndexedDBに寄せ、送信先と保持日数を商品画面とプライバシーポリシーに書いた
Result
できあがったもの
成果
- 画面のプレビューと実際に配るPDFの写真位置が、8様式すべて±0.2mm以内（実測の最大ずれ0.15mm）
- 履歴書HTMLの枠を塗ってPDF化した正解と、座標で焼き込んだ実物を別経路で画素測定し、8様式すべて±0.5mm以内で一致
- 画面を実際に操作する自動検査27項目が全OK（16枚の切り出し位置・再読込しても生成APIを1回しか叩かない・合言葉が無いとPDF APIが402・違うと403で断る）
見どころ
- 2304×3072の4×4シートを1回で生成し、ブラウザ側で16枚に切り出す
- 背景と光4段 × レンズと姿勢4列。16カット共通で「顔立ち・輪郭・ほくろの位置を変えない」を生成プロンプトに固定
- チェックを入れた写真と元の自撮りを横に並べて見比べ、タップで拡大できる
- 選んだ1枚を8様式の履歴書PDFの30×40mm枠へpdf-libで焼き込み、L判6面の焼き増しシートも出す
- 作った16枚は端末のIndexedDBに置き、タブの合鍵が違うか12時間を過ぎていれば開いた時点で消す
How
どう作ったか
- 企画・UI設計・AI連携・フルスタック開発・PDF組版
- Next.js 15.5・OpenAI gpt-image-2.5-flare（/v1/images/edits）・pdf-lib 1.17・IndexedDB・Canvas（16分割）・poppler pdftoppm（プレビュー背景の生成）・Square Hosted Checkout
Next
この作品に近いものを作りたい
この作品の開発記録・お客様の声
作っているときに考えていたこと、詰まったところをそのまま書いています。
同じ種類の制作実績（Webアプリ）
似た課題を解いた他の事例です。
