01テンプレート選択ツールとの違い
テンプレートギャラリーは、完成したデザインを見せて、気に入るかどうかを尋ねます。このツールはもう一段深く、下の六つの方向性はどれも、実際に動いている実在のフォトグラファーのポートフォリオを実際に調べて（スクリーンショット、実際のレイアウト、計算された色、計算されたフォント）作られています。見栄えのいいスウォッチのために誰かが作ったパレットではありません。たとえばエディトリアルの方向性がEB Garamondを使っているのは、実在のファッションフォトグラファーのサイトがまさにその書体で組まれているからで、ページを直接調べて一致させています。
元にした実在のサイトのほぼすべてに二つのパターンが見られ、ここのどの方向性にも組み込まれています。デスクトップでもリンク一覧は見せず、ナビを一つのハンバーガーアイコンの裏に隠していること。そして、グリッドではなく一度に一枚の大きな画像を見せることです。UIの色は全体を通してゼロに近く、色を担うのはインターフェースではなく写真です。
02最後に手に入るもの
方向性の全体像、正確なヘックスカラー、フォント名と組み合わせ、ページ一覧、ナビゲーションの動き、ギャラリーのレイアウトと画像のフレーミング、含める機能、実際の費用のトレードオフを踏まえたホスティングの提案、そして固定のビルド品質要件（アクセシブルなaltテキスト、レスポンシブなブレークポイント、秘密情報のハードコード禁止、画像の遅延読み込み）を網羅した、一つの構造化されたプロンプトです。お好みのAIコーディングアプリに貼り付ければ、始めるのに必要なものがすべて揃っています。
03プロンプトから公開サイトまで：全手順
プロンプトはデザインの指示書であって、ゴールではありません。ここでは、プロンプトをコピーしてから、名刺にも載せられる本物のURLを手に入れるまでの全ステップを、無料かそれに近い費用で紹介します。
プロンプトをコピーして、AIコーディングアプリを開く
Claude、Cursor、Claude Code、Windsurf、ReplitのAIエージェントなど、チャットだけでなく、ファイルを書いて保存してくれるものならどれでも使えます。使ったことがなければ、claude.aiやReplitのようなブラウザ型ならインストール不要です。最初のメッセージとしてプロンプトを貼り付けてください。
作ってもらい、できあがったものを実際に確認する
サイトを静的なHTML/CSS/JS（またはプロンプトのホスティングの項目で指定したもの）で作ってもらい、プレビューを見せてもらいます。次に進む前に、プロンプトで頼んだ六つの点（色、フォント、ギャラリーの動き、ナビ、フレーミング、ページ）を確認してください。写真を組み込んだあとより、アクセントカラーの間違いを今直すほうがずっと楽です。
本物の写真、自己紹介、連絡先に差し替える
プレースホルダーの画像と仮の文章をすべて置き換えてください。写真ごとに、「image1.jpg」ではなく、実際の内容を表す具体的なalt属性を、作業しながらAIアプリに書いてもらいましょう。アクセシビリティの要件であり、SEOにも少し効きます。問い合わせフォームの宛先が、実際にチェックしているメールアドレスになっているかを再確認するのも、このタイミングです。
無料ホストにデプロイする
「静的 & 無料」のプランを選んだなら、プロジェクトのフォルダまたはGitHubリポジトリを、上のメニューの「ホスティング」ページにあるホストのいずれかに接続する手順を、AIアプリに案内してもらいましょう。四つとも、変更をプッシュするたびに自動でビルドとデプロイが行われ、接続後に手動でアップロードする手間はありません。
独自ドメインを接続する（任意ですが、おすすめです）
無料のサブドメイン（yourname.netlify.appなど）で、始めるには十分です。yourname.comにしたくなったら、ドメインの購入とDNSの変更一回で済みます。詳しくはこの先で説明します。
04どの無料ホストを使えばいいですか？
どれを選んでも、費用をかけずに静的サイトを公開でき、HTTPSも無料、個人のポートフォリオ程度のアクセスなら無料枠で十分に足ります。無料枠の上限はかなり頻繁に変わるため、ホスティングページの数字は正確な最新値ではなく、おおよその目安として受け取り、決める前に各社の料金ページを確認してください。
実際のデプロイ手順は、AIコーディングアプリに一緒にやってもらいましょう。「このプロジェクトをNetlifyに接続して」と頼むのはごく普通のことで、たいていは数分でアカウント作成から最初のデプロイまで案内してくれます。
05独自ドメインの接続
ドメインは年に一度の小さな費用（拡張子によりますが、通常は年$10〜20）で、無料のままのホスティングとは別です。必要なのは三つです。
- ドメインを購入します。Namecheap、Cloudflare Registrar、またはGoogle Domainsの後継であるSquarespace Domainsなど。
- DNSレコードを追加します。ドメインをホストに向けるCNAME（またはAレコード）を、レジストラの管理画面で追加します。レジストラの表に二行書くだけです。ホストから示されるアドレス（例：
your-portfolio.netlify.app）を指すwww用のCNAMEと、ホストのIPを指すベアドメイン用のAレコードです。 - ホスト側で追加します。同じドメインを、ホストの「独自ドメイン」設定に貼り付けます。HTTPSは自動で設定されます。
ホスティングページの各ホストには、「Custom domain」または「Domains」のタブがあり、追加すべき正確なレコードが表示されます。それをコピーし、レジストラで追加して、待ちます。DNSの変更は通常、数分から数時間で反映され、まれに24〜48時間かかることがあります。つまずいたら、お使いのレジストラの管理画面について、AIコーディングアプリに案内してもらえます。設定ページのスクリーンショットを撮って、どこをクリックすればいいか聞いてみてください。鍵のマークが表示され、「保護されていない通信」の警告が出なければ、そこがゴールです。
06公開前チェックリスト
このリストを使えば五分で、ポートフォリオを未完成に見せてしまう要因のほとんどを拾えます。チェック項目は、上のメニューの「公開前」ページにあります。進めながらチェックを付けてください。
07よくある質問
いいえ。見た目の選択をすると、ツールが詳しいプロンプトを日常の言葉で書き出し、AIコーディングアプリがそれを実際のサイトに仕上げます。
どの方向性も、実際に動いている実在のフォトグラファーのポートフォリオを直接調べたものが土台で、ゼロから創作したものではありません。実在のサイトからフォントを完全に一致させたものまであります。
アカウントも登録も不要で、お金もかかりません。再生インデックスにドロップした写真は、お使いのブラウザ内のキャンバスに描画されるだけで、ブラウザの外に出ることはありません。
最適化したJPGまたはWEBPで書き出したとっておきの写真を8〜20枚、短い自己紹介文、あればロゴ。ウォールの下の注記に一覧があります。