Claudeと2人3脚で作った名刺写真の自動配置フロー〜デザイナーが失敗から学んだ「人間とAIの正しい役割分担」

はじめに

弊社では、新しく入社した社員の顔写真を名刺用に整形して配置するという作業があります。Photoshopを開いて顔の大きさと位置を手動で適切な位置に調整しするというものです。名刺テンプレートの「顔が入る枠」にぴったり合わせるのに、毎回5〜10分かかる地味な作業です。

このように顔をやや左に配置する必要があります（サンプルとして人形を使用しています）

「これ、AIで自動化できないか？」

そう思って始めたのが今回の取り組みです。結論から言うと、18回失敗してようやく動くフローができました。今回は、その失敗の記録と、そこから得た「AIに何を任せて、何を人間がやるべきか」という気づきを「非エンジニアのAI活用備忘録」として残します。

やりたかったこと

名刺写真テンプレートには、顔が収まるべき楕円形のガイドエリアがあります。

赤い楕円が顔の位置です

社員の写真は毎回構図や顔の大きさなどがバラバラなので、手動で調整して統一感を出す必要があるためです。

自動化のゴールはシンプルです。

① 顔写真（カラー）を入れる（※普段、質感や細かいレタッチを行います。今回、その作業については済んだものとして扱います）
　↓
② カラーをモノクロに変換
　↓
③ ガイドの楕円エリアに顔＋髪の毛がぴったり収まる
　↓
④ 完成画像が出てくる

ツールはClaude（AI）とAdobe MCPコネクターを使います。

なぜ失敗し続けたのか

最初はClaudeとAdobe MCPのAPIを組み合わせて、背景除去→クロップ→モノクロ変換という流れを試みました。しかし何度やっても「顔が上半分しか入らない」「逆に顔が小さすぎて画面の端っこに表示される」という結果になりました。

実際のv3の出力結果。悲しすぎる…（ぼかしを入れています）

AIには「どこに顔があるか」を正確に知る方法がない

v2、v3、v4……と試行を重ねても、結果は変わりませんでした。何度やっても「顔は合ってるけど髪がはみ出す」「顎が楕円の外に出る」という結果になり続けました。

そこで気づいたのは、AIは「髪の毛を含む頭全体がどこにあるか」を正確に把握できないということです。名刺写真に必要なのは「髪の毛の頭頂から顎の下まで」が楕円に収まること。でもAIにはそれが難しかった。

v18まで来て、ようやく正しいアプローチに気づきました。

AIに「苦手なこと」を聞いた

試行錯誤に行き詰まって、Claudeに直接聞いてみました。
「そもそも、あなたは写真の中の顔を正確に読み取れるの？」
返ってきた答えは、「髪の毛を含む頭全体のサイズを正確に検出するのは苦手です」というものでした。

ここで気が付きました。AIには目がついているわけではない。これまでの失敗の結果、自動で顔情報を取得するのは難しいのだ。ではその部分だけ人間がやってあげたらどうだろう。

続けて聞きました。
「じゃあ、人間が4点の座標を渡したら、正確に配置できる？」
「できます」と言われました。
18回失敗して気づいたのは、AIに「なにが苦手か」を聞くことが、一番の近道だったということです。

「AIに全部やらせない」が解決策

解決策はシンプルでした。人間が4点の座標を取って、AIに計算させるというものです。
素材写真の以下4点の座標（画像全体に対する%）を取得します。

基準点 取得場所
① 頭頂 髪の毛の一番上（頭のてっぺん）
② 髪の左端 髪が最も広がっている横幅の左端
③ 髪の右端 同じく右端
④ 顎の下 顎の影が落ちる下端

この4点さえあれば、あとはAIが「頭部の中心を楕円の中心に合わせる」計算を正確にやってくれます。このアプローチで、初めて再現性のある結果が出ました。

完成したフロー

事前準備：ガイド画像を用意する

最初に使っていたガイド画像は「ピンクの外枠＋薄いピンクの楕円」というデザインでした。これがAIの楕円検出を混乱させ続けた原因の一つでした。

ガイド画像は「白背景＋赤い楕円のみ」のシンプルな構成にしました。
AIにとって判断しやすい素材を用意するのも、人間の仕事だと気づいた瞬間でした。

実際のガイド

STEP 1：座標を取得する

まず、Claudeに座標ピッカーツールを作ってもらいます。以下のプロンプトをそのままコピーして貼り付けてください。

名刺写真の顔配置用の座標ピッカーツールを作成してください。

仕様：
・写真をアップロードできる
・写真の上をクリックすると座標が取れる
・座標は「X=○○% Y=○○%」のパーセント形式で表示される
・4点（①頭頂 ②髪の左端 ③髪の右端 ④顎の下）を順番にクリックする
・4点クリック完了後、Claudeに渡すプロンプトが自動生成されてコピーできる

ツールが表示されたら、素材写真をアップロードして4点をクリックするだけ。プロンプトが自動生成されます。

※ツールが表示されてもクリックできない場合は「クリックできないので作り直して」と伝えればOKです。

STEP 2：Claudeに処理させる

新しいチャットを開いて、ガイド画像と素材写真を添付しながら、STEP 1で自動生成された座標を「 ___ 」 に記載し、以下のプロンプトを送信します。

以下の2ファイルで名刺写真をPNGで生成してください。
ガイド画像と素材写真を添付します。

【処理内容】
- 素材写真をモノクロに変換
- ガイド画像の赤い楕円の中に顔+髪が収まるよう配置
- 出力サイズはガイド画像と同じサイズ

【4基準点（%）】
- 頭頂:    X=___% Y=___%
- 髪の左端: X=___% Y=___%
- 髪の右端: X=___% Y=___%
- 顎の下:  X=___% Y=___%

STEP 3：確認する

Claudeから確認用画像と完成版が出力されます。
うまくいかない場合は、座標を取り直して再送信してください。

完成のイメージ（人形なのでやや大きめですが、人間の場合しっかりと収まります）

応用できそうな場面

① 社員証・IDカードの写真配置
名刺と同じ構造。顔を枠に収める作業は全部同じ。

② 会社紹介資料やWebサイトのチームページ
「メンバー紹介」の顔写真を統一サイズ・統一構図に揃える作業。

③ パンフレットや広告の人物切り抜き
「この人物をこの枠に収めたい」という作業全般。

④ SNSのアイコン画像の統一
複数人のアイコンを同じトリミング基準で揃えたい時。

⑤ 商品画像の自動配置
人物じゃなくても、「この商品をテンプレートのここに収めたい」という場面。

共通点を一言で言うと
「バラバラな素材を、決まった枠に統一して収めたい」
という作業なら恐らく同じようなフローが活用できそうです。

結果

完全自動化ではありません。でも、「AIが正確に動けるための情報を人間が整える」 という役割分担が、デザイナーとして品質を保つためにも必要であると感じます。

「AIに何でもやらせようとした結果、失敗し続けた」という体験は、AI活用全般に通じる教訓だと感じました。

AIは失敗します。何度やってもうまくいかないことがあります。それでも諦めずにAIと向き合い続けたことで、「座標を渡せばいいんじゃないか」という発想にたどり着けました。根気強く続けることが、一番の近道だったと思っています。

以上、同じところで詰まってる人の参考になれば嬉しいです。

使用ツール：Claude（Anthropic）、Adobe for creativity MCPコネクター