自分のAI写真アプリを
作る実践ガイド

コピペ用プロンプト＋APIキー取得・セットアップ手順

こんにちは、こうじAIお兄さんです！

特典を受け取っていただき、ありがとうございます！

動画で紹介した「自撮りからプロフィール写真を作るアプリ」、自分でも作ってみたいと思いませんか？

今回は、皆さんが手を動かして試せるように、AIに貼り付けるプロンプトと、セットアップの手順をまとめました。僕と一緒に、最初のアプリを形にしていきましょう！

Codexでも、Claude Codeでも進められます！ このガイドではCodex（GPT-6 Astra）を例にしていますが、Claude Codeを使っている方も、掲載しているプロンプトでアプリを作れます。使い慣れたほうで大丈夫です。

今回作るのは、自撮りを3〜5枚アップロードして、好きな雰囲気を選び、プロフィール写真を6枚生成・保存するWebアプリです。

最初から全部を理解しようとしなくて大丈夫です。まずは、自分の写真で1枚生成するところまで進めてみましょう。そこまで動けば、画面を整えたり、別の用途へ広げたりする土台になります。

このガイドはアプリを作るためのプロンプトと手順書です。生成済みのアプリ一式ではありません。開発環境やAPIの利用状況によって、追加設定や修正が必要になる場合があります。

1. 動画で紹介したアプリ制作プロンプト
2. 実装に必要な条件を補った、詳しいコピペ用プロンプト
3. APIキーの取得から初回生成までの3ステップ
4. 月額課金・集客・別用途への展開の考え方

最短で試したい方は、「準備するもの」を確認して、Step 1 → Step 2の詳しいプロンプト → Step 3の順に進めてください。

APIは、アプリから外部サービスの機能を呼び出すための窓口です。今回なら「この写真と指示を使って、新しい写真を作って」とHiggsfieldに依頼する部分に当たります。

完成後の流れは、次のようになります。

自撮りをアップロード
        ↓
雰囲気を選ぶ
        ↓
アプリのサーバーからHiggsfield APIへ依頼
        ↓
生成した写真を表示・保存

CodexやClaude Codeは、アプリを作る担当です。完成後に写真を生成するのはHiggsfield APIなので、役割を分けて考えると分かりやすくなります。

写真は、正面・少し斜め・表情違いを混ぜると、見比べながら調整しやすくなります。強い加工、顔を隠すサングラス、複数人が写った写真は避けましょう。

費用は分けて考えます。 開発に使うCodex／Claude Codeの利用条件と、Higgsfield APIの画像生成費用は別に確認してください。公開後は、必要に応じてサーバーや決済サービスの費用も加わります。

Higgsfieldの生成費用は、モデルや設定によって変わります。最初は1枚で試し、利用額を確認してから6枚に増やしましょう。モデル別の見積もり方法は公式の料金・保存期間ガイドで確認できます。

1-1. APIの管理画面を開く

まずは、下のリンクからHiggsfieldを開いて、アカウントにログインしましょう。

▶ Higgsfieldのセットアップはこちら

APIの管理画面で 「API keys」 を開き、「New key」「Create」などの作成ボタンから新しいキーを作成してください。ボタンの表記や配置は、画面の更新によって変わることがあります。

公式資料では、API認証情報は Key IDとKey Secretの組み合わせです。認証の公式ガイド

1-2. Key IDとSecretを手元に控える

取得したKey IDとSecretを、手元に控えておきましょう。今は保存しておくだけで大丈夫です。アプリを作った後、Step 3でAIに設定方法を教えてもらいます。

キーはチャットに貼らず、AIが案内する入力先に自分で設定してください。

1-3. 利用残高と使えるモデルを確認する

管理画面でAPIの利用残高を確認します。写真の生成に使うモデルが、自分のアカウントから利用できるかも確認してください。

このステップの完了条件：Key IDとSecretを取得し、APIの利用準備ができていること。

2-1. 作業場所を用意する

CodexまたはClaude Codeで、アプリ用の空フォルダを開きます。フォルダ名の例は profile-photo-app です。Codexで動画と同じモデルを使う場合は、モデル選択欄で GPT-6 Astra を選んでください。Claude Codeの方は、そのまま次のプロンプトへ進みましょう。

初めて使う場合は、Codexの公式案内またはClaude Codeの公式案内で準備できます。アプリのファイルを作成できる状態になったら、次へ進みましょう。

2-2. 動画で紹介した基本プロンプト

動画の台本に掲載したプロンプトはこちらです。作りたいアプリの全体像を、短く伝えています。

自撮りからマッチングアプリ用のプロフィール写真を作るWebアプリを作って。
・ユーザーが自撮りを3〜5枚アップロード → 雰囲気を選ぶ（カジュアル／アウトドア／旅行／エディトリアル／ナイトアウトなど）→ 6枚の写真を生成して表示・保存
・画像生成は Higgsfield API（docs.higgsfield.ai）を使う。キーは環境変数 HF_CREDENTIALS。顔を保ったまま背景・服装・雰囲気だけ変えるモデル設定にして
・スマホ縦画面で使いやすいUI。無料は1セット、以降は月額サブスク（Stripe）で解放
・App Store向けのアプリ名案・説明文・スクショ文言も書いて
・ローカルで動く状態にして、起動コマンドを教えて

2-3. 実際に作るときは、こちらを丸ごとコピペ

初めて作る方は、以下の詳しい版を丸ごとコピーして、1回貼り付ければOKです。長く見えますが、皆さんが一から書く必要はありません。上の基本版を先に送る必要もないので、このまま使ってください！

APIの仕様確認、写真を使った編集、生成待ちの表示、課金の準備まで含めています。

あなたは、初心者に説明しながら実装を進めるWebアプリ開発者です。
この作業フォルダに、実際に起動できるアプリを作ってください。

【作るもの】
自撮りからマッチングアプリ用のプロフィール写真を作る、日本語のWebアプリ。
アプリ名は仮で「Profile Studio」にしてください。
自撮り3〜5枚をアップロードし、雰囲気を選び、6枚の写真を生成・表示・保存する流れです。
既存サービスの名前、ロゴ、画像、説明文はコピーせず、独自のデザインにしてください。

【進め方】
Next.js + TypeScriptを基本に、この環境で動く互換性のある構成を選んでください。
必要な実行環境と依存関係を確認し、実装・起動確認まで進めてください。
最初はローカルで写真を1枚生成する機能を優先し、その後6枚生成に広げてください。
料金ページ、課金ボタン、ストア向け文案の土台も作ってください。
実際の課金接続は画像生成が動いた後に、Stripeのテスト環境で進めます。

【API仕様を先に確認】
公式ドキュメント：https://docs.higgsfield.ai/docs/llms.txt
モデル一覧：https://console.higgsfield.ai
画像編集の候補資料：
https://open.higgsfield.ai/models/marketing-studio/image/api-reference

モデル固有の公式資料を読んで、写真を入力できるモデル・エンドポイントを選んでください。
候補はMarketing Studio Imageのdirect編集モードです。
現在の仕様でimage_urlsによる複数画像入力、縦長出力、必要な利用権限を確認してください。
この用途では商品広告用プリセットを使わず、enhance_promptはfalseを基本にします。
顔の一致を保証する機能があるとは断定せず、入力写真との比較で評価できる画面にしてください。

文章だけから画像を作るモデルを、自撮り対応モデルとして実装しないでください。
Soul 2を使う場合も、人物参照を渡せる公式仕様が確認できた場合に限ってください。
存在しないAPIパラメーターやSDKの関数を推測で作らないでください。
仕様が確認できない箇所は、何が不明かを短く説明してください。
必要なモデルが使えない場合は、同じHiggsfield API内の候補と制約を示してください。

【画面と操作】
1. トップ：「自撮りから、あなたらしいプロフィール写真を。」
2. 写真アップロード：3〜5枚。JPEG・PNG・WebPを対象とし、プレビューと削除に対応。
   上限は1枚10MB。これはこのアプリ側の制限として扱い、API側の制限も確認する。
3. 雰囲気選択：カジュアル／アウトドア／旅行／エディトリアル／ナイトアウト。
   「エディトリアル」には「雑誌風」と補足する。
4. 生成：初回確認用の「1枚でテスト」と、通常の「6枚生成」を用意。
5. 結果：写真一覧、拡大表示、各画像のダウンロード、元写真との比較。
6. スマホ幅で見やすい余白、押しやすいボタン、日本語のエラー案内。
7. 未設定時・待機中・処理中・成功・失敗の状態を分かるように表示する。

【写真の仕上がり】
入力写真と同じ人物として見えることを目標にする。
顔立ち、年齢感、肌の色、体型を大きく変えず、背景・服装・光・構図を調整する。
自然な肌の質感を残し、過度な美肌加工や不自然な手指を避ける指示にする。
同一人物であることを保証する表現や、マッチング率を保証する表現は入れない。
アップロード写真は本人のもの、または使用許可があるものに限る案内を入れる。

【API接続と秘密情報】
画像生成はHiggsfield APIのみを使う。
HiggsfieldのKey IDとSecretは、サーバー側の環境変数
HF_CREDENTIALS="KEY_ID:KEY_SECRET"
から読み込む。公式TypeScript SDKを使うなら、現行の使用方法を確認する。
ブラウザからHiggsfield APIを直接呼ばない。
秘密情報をNEXT_PUBLIC_で始まる変数、公開コード、ログ、画面に出さない。
.env.exampleと.gitignoreを用意し、.env.localはGit管理対象外にする。
私に実キーをチャットへ貼らせず、入力先のファイルと変数名だけ案内する。

【写真アップロードと生成処理】
アップロード形式・実際のファイル内容・枚数・サイズをサーバー側でも検証する。
公式のアップロード手順で、モデルから取得可能な画像URLに変換する。
署名付きアップロード先へHiggsfieldのSecretを送らない。
入力画像URLなどの個人データを不要にログへ残さない。

生成は非同期処理として扱い、リクエストIDと状態を管理する。
6枚を一度に生成できないAPIなら、公式仕様に沿ってリクエストを分割する。
存在しないbatch_size=6を決め打ちしない。
二重クリックで同じ生成を重複実行しない。
待ち時間には上限を設け、失敗・拒否・キャンセルなどの終了状態を処理する。
タイムアウト時は既存リクエストの状態を確認し、無条件で再生成しない。
一部だけ成功した場合は、その写真を残して結果を正直に表示する。
モデルと設定に応じた見積もりを確認できるようにし、不明な料金を0円と表示しない。

【無料枠と課金の土台】
最終的な料金設計は「初回1セット無料、以降は月額プラン」です。
1セットは6枚。有料プランにも生成上限を設け、料金と上限は設定で変更可能にする。
未設定の価格は「準備中」と表示する。
初期版の課金ボタンは、未接続だと分かる表示にする。
課金未接続の状態を、本番課金が動く状態として報告しない。
認証・データベース・Stripeの接続に必要な設定をREADMEに整理する。
試作中の利用回数制限は、本番の無料枠管理とは区別して説明する。

【一緒に作る文案】
・独自のアプリ名案5つ
・Webサイト向けの短い紹介文
・App Store向けの説明文案とスクリーンショット用見出し5つ
・初回1セット無料／月額プランの料金ページ文案
App Store向け文案は将来の掲載用ドラフトとして扱い、申請済みと表現しない。

【完了時に教えてほしいこと】
・作成したファイルと起動方法
・.env.localに私が入力する項目
・ブラウザで開くローカルURL
・写真を1枚生成する確認手順
・使用モデルと参照した公式資料
・実際に確認できたこと、まだ確認できていないこと
・外部公開や本番決済に必要な残作業

キーが未設定でも、画面とコードの確認は進めてください。
ダミー画像を使う場合はデモ表示と明記し、API生成成功と混同しないでください。
外部公開と本番決済の有効化は、この作業では行わないでください。
説明は日本語で、私が次にする操作を1つずつ分かるように伝えてください。

モデル選びの補足： 画像入力に対応することと、顔が毎回正確に再現されることは別です。上のプロンプトでは、複数画像を渡せる編集APIを候補にしています。実際の一致度は、自分の写真で生成して確認します。Marketing Studio Imageの公式仕様

2-4. AIからの返答で見るところ

コードがたくさん出てきても、焦らなくて大丈夫です。まずは次の3点を確認してください。

• 設定するファイル：どのファイルにAPIキーを入れるか。
• 起動する方法：何を実行し、どのURLを開くか。
• 未確認の部分：実際の画像生成や課金まで試せたか。

説明だけ返ってきて、ファイルが作られていない場合は、次の一文を追加します。

この作業フォルダに必要なファイルを作成し、ローカルで起動できるところまで実装してください。説明だけで終わらず、キー未設定でも確認できる部分は実際に確認してください。

このステップの完了条件：アプリのファイルが作成され、キーの入力先と起動方法が分かること。

3-1. AIに、APIキーの設定方法を聞く

アプリができたら、作成をお願いしたCodexやClaude Codeに、次の一文を送ってください。

APIキーを設定したいのでやり方を教えてください。

あとは、AIが教えてくれる手順に沿って、Step 1で取得したキーを設定すればOKです。難しいファイル名や書き方を、先に覚える必要はありません。

キーそのものはチャットに貼らず、案内された入力先に自分で設定しましょう。

3-2. アプリを開く

設定できたら、続けてこう伝えてください。

アプリを起動して、開くURLを教えてください。

案内されたURLをブラウザで開きます。途中で分からないことがあれば、「次に何をすればいいですか？」と聞きながら進めて大丈夫です。

3-3. 自分の写真で、まず1枚テストする

1. 自撮りを3〜5枚アップロードする。
2. 最初は「カジュアル」を選ぶ。
3. モデルと設定に応じた生成費用を確認する。
4. 「1枚でテスト」を押す。
5. 処理が終わったら、元写真と生成写真を比較する。

見るポイントは、自分だと分かるか・不自然な加工がないか・選んだ雰囲気になっているかです。

アプリに写真が表示されただけでは、接続確認として十分ではありません。Higgsfieldの管理画面でも該当リクエストの完了を確認し、その出力がアプリに表示されているか見ましょう。

3-4. 6枚生成して、保存する

1枚の生成と保存ができたら、「6枚生成」を試します。6枚を1回のAPI呼び出しで作れるかはモデルによって異なるため、アプリ内部では複数回に分けて処理する場合があります。

仕上がった写真をダウンロードして開き、画像ファイルとして保存できているか確認してください。生成画像の提供URLは永久保存先ではないため、残したい写真は手元へ保存します。公式の保存期間ガイド

実際にプロフィールへ使うときは、本人らしさを確認し、掲載先サービスの写真ルールにも合わせて選びましょう。

ここまでできたら、最初のアプリ制作は一区切り

• 自分の写真をアップロードできた。
• 雰囲気を選べた。
• 実際のAPI処理で写真を1枚生成できた。
• 6枚生成した結果を確認できた。
• 生成写真をダウンロードできた。
• 使った費用を管理画面で確認できた。

動画で紹介したように、個人向けのサービスとして提供する方法と、事業者向けに仕組みを導入する方法があります。

ここで皆さんに考えてほしいのは、**「誰が、どんな場面で、この写真を欲しがるか」**です。まずは1つに絞ってみましょう。

① 個人向けに公開して、利用料を受け取る

今回のアプリなら、料金設計は次のように考えられます。

金額を決める前に、まず1セットを提供するのにいくらかかったかを記録してください。

1セットの提供コスト
＝ 画像生成費用 ＋ 作り直し分の費用 ＋ 保存・配信などの費用

月額プランの上限は、このコストを見て決めます。無料体験分の生成費用も運営者が負担するため、最初から無制限にするより、利用枠を決めて試す設計が扱いやすくなります。

また、プロフィール写真は一度作って満足する人もいます。月額プランを軸にしつつ、利用者の反応によっては「6枚単位の買い切り」も比較しましょう。

課金を接続するときの追加プロンプト

画像生成が動いた後に、次を使ってください。

このWebアプリに、Stripeのテスト環境で月額課金を実装してください。
Stripeの最新公式ドキュメントを確認して進めてください。

・利用者のログインと、サーバー側での利用枠管理を実装する。
・無料枠は1人につき初回1セット。有料枠は月あたりのセット数を設定可能にする。
・ブラウザの保存データを消すだけで無料枠が復活する設計にしない。
・同時リクエストで利用枠を超えないよう、生成前の枠確保と完了後の精算を行う。
・初回の1枚テストも無料枠の使用量に含め、失敗分の扱いを明文化する。
・Stripe Checkoutと契約管理画面への導線を用意する。
・Webhookの署名を検証し、同じイベントを複数回処理しても枠が重複付与されないようにする。
・支払い成功、失敗、更新、解約をサーバー側の契約状態と利用権限に反映する。
・決済後に戻ってくるURLだけを根拠に、有料機能を解放しない。
・画像生成の入口で、毎回利用権限と残り枠を確認する。
・必要な環境変数、認証、データベース、Webhookの設定手順をREADMEにまとめる。
・料金と生成上限が未決定なら、勝手に本番価格を決めず、設定できる状態にする。
・テスト環境で確認し、本番決済と外部公開はまだ有効化しない。

Stripeでは契約更新や支払い失敗なども通知されるため、その通知と利用権限を連動させます。Stripe公式のサブスクリプション連携ガイド

② 自分のサービスとして、事業者に導入する

アプリを作れるようになると、顧客の用途に合わせた制作・導入サービスにも広げられます。

プロフィール写真、髪型変更、試着では、必要な生成機能が異なります。対象を変えるときは、モデルと入力情報も見直してください。

提案は、「AIが使えます」よりも「相談時に3パターンの仕上がりイメージを見せられます」のように、相手が使う場面まで具体化すると伝えやすくなります。

最初の利用者を見つける、小さな進め方

1. 対象を1つ決める。 例：「プロフィール写真を用意したい人」。
2. 自分の写真で、入力から生成までの短いデモを作る。 加工後の画像であることも分かるようにする。
3. 身近な対象者に試してもらう。 「どの写真を使いたいか」「どこで迷ったか」を聞く。
4. 選ばれた雰囲気と使いにくかった箇所を直す。 機能を増やす前に、1つの体験を整える。
5. 使う理由が見えたら、料金を提示して反応を見る。 登録数だけでなく、生成完了・保存・再利用も確認する。

同じ仕組みを広げるときは、「誰に・何を入力してもらい・何を出すか」を変えます。

今のアプリを、次の用途に変更してください。

対象ユーザー：［例：個人でオンラインショップを運営する人］
解決したい悩み：［例：商品写真の背景が毎回そろわない］
アップロードするもの：［例：自分の商品の写真］
選べる仕上がり：［例：白背景／ナチュラル／高級感］
生成するもの：［例：SNS投稿や商品紹介用の写真3枚］
変えてはいけない部分：［例：商品の形、色、ロゴ、印字］

この用途に必要なHiggsfield APIのモデルと入力条件を公式資料で確認してください。
画面の案内と生成プロンプトを変更し、まず1枚で品質を確認できる状態にしてください。
元のアプリを上書きせず、別の作業フォルダに複製して進めてください。

ローカルで動いたアプリを公開する段階では、次を追加で整えます。

• 利用者のログイン、写真へのアクセス制限、利用枠と費用の上限。
• 写真の保存先、保存期間、削除方法、外部の生成サービスへ送ることの説明。
• 決済のテスト、料金表示、解約の導線、問い合わせ先。
• 公開先での環境変数設定と、生成待ちが長くても動く処理。
• スマホでのアップロード・生成・保存の確認。

App Store向けの説明文を作っても、アプリの申請や公開まで自動で終わるわけではありません。今回のWebアプリを動かした後に、配布形態に合わせた開発・手続きを進めます。

APIキーを取得して、詳しいプロンプトをCodexやClaude Codeに貼り付け、自分の写真で1枚生成してみてください。

最初の1枚ができたら、「これを誰に使ってもらいたいか」を考えてみてください。そこから、皆さんならではのサービスに育てていきましょう！

▶ Higgsfieldを開いて、さっそく始める

僕は国内外の最新AI情報や、仕事・サービスづくりに使える活用法を発信しています。これからも一緒に、AIでできることを増やしていきましょう！

制作：こうじAIお兄さん
資料確認日：2026年9月21日
Higgsfieldとのタイアップ企画に関連する特典です。#PR #HiggsfieldPartner