写真家向けウェブサイトの作り方：ギャラリー、クライアント向け選定、予約

写真家のウェブサイトの役割は1つです。適切な人に、予約したいと思ってもらうことです。そのためには、厳選した少数のギャラリーがスマホでも素早く表示されること、何を提供していて、おおよそいくらかかるのかが明確であること、そして返信に必要な日程や詳細を集められる問い合わせフォームが必要です。クライアントによる選定、オンライン予約、プリント販売などは任意で、手間を実際に減らせる場合に限って追加しましょう。AIアプリビルダーなら、1段落の説明から最初のバージョンを作れます。力を入れるべきなのは、写真を厳選することと、画像の読み込みを適切に行うことです。

サイトに必要なもの

ページ

• ホーム：印象的な1枚の写真または短い連作、何を撮っていてどこで活動しているかを示す一行の説明、そして問い合わせボタン。
• ギャラリー：もっと依頼がほしい仕事（結婚式、ポートレート、商品写真、建築など）ごとにまとめます。15〜30枚のギャラリーを3つ用意するほうが、200枚のギャラリーを10個用意するより効果的です。
• 自己紹介：本人の写真、仕事の進め方、撮影で訪れる地域。
• サービスと料金：パッケージや「〜から」の料金。料金をまったく載せないと、対応できない予算の問い合わせが増えてしまいます。
• 問い合わせまたは予約：訪問者をクライアントに変えるフォームです。
• 任意：撮影のまとめ記事（検索に効果的）、実際にもらった推薦の言葉、非公開のクライアント用ギャラリー。

データ

写真とテキストだけのポートフォリオであれば、データベースを使わない静的なサイトで作れます。次のどれかを追加するときに、データベースが必要になります。

すべての写真の幅と高さを保存すると、画像が届く前にページが領域を確保できるため、読み込み中にレイアウトがずれるのを防げます。

権限

訪問者が見られるのは公開されたギャラリーだけです。クライアントは自分の非公開ギャラリーだけを見られます。オーナーであるあなたは、すべてと問い合わせの受信箱を見られます。非公開ギャラリーを作る予定がなければ、必要なのはご自身用のログインだけです。

判断とトレードオフ

静的なサイトか、データベースを使うアプリか

ギャラリーの更新が年に数回であれば、静的なサイトが最もシンプルです。AIに写真の差し替えと再公開を頼めばよいだけです。毎週撮影を追加したり、クライアントにギャラリーを提供したりしたい場合は、コードに触れずに写真をアップロードしてギャラリーを並べ替えられる、小さな管理画面を作りましょう。

写真の保存場所

写真はサイトの中で最も重いものです。選択肢は、シンプルなものから柔軟なものへ、次のとおりです。

1. プロジェクトの中に直接置く。 最適化された数十枚程度の画像を、静的サイトで使うなら問題ありません。
2. アプリのファイルストレージ。 管理画面からアップロードし、ストレージから配信します。ストレージは通常、容量に応じて課金されるため、サイズに注意してください。
3. 専用の画像サービスまたはCDN。 表示時にリサイズしてくれます。大規模なアーカイブには、その価値があります。

どの方法を選んでも、元データは別の場所に保管してください。ウェブサイトはショーウィンドウであり、バックアップではありません。

レイアウト

グリッド、マソンリー（石積み状）、フルスクリーンのスライドショー、1列の縦並びなど。マソンリーは縦横が混ざった写真を引き立てます。1列はスマホや、ストーリーを伝える場面で最も効果的です。ギャラリーごとに1つを選び、キャプションは短く保ちましょう。

問い合わせフォームか、リアルタイムの予約か

多くの写真家は、問い合わせフォームのほうがうまくいきます。日程、場所、パッケージは、通常、やりとりを通して決めるものだからです。時間枠が決まっていて、短く繰り返し行うセッション（プロフィール写真、ミニセッション、ペットの写真など）なら、オンライン予約が向いています。時間枠と手付金については、予約アプリの作り方で解説しています。

効果のある最初のプロンプト

リスボンを拠点に、ポルトガル各地を飛び回っている結婚式とポートレートの写真家、Lena Ortizのウェブサイトを作ってください。ページは次のとおりです。全幅のヒーロー画像と「日程を確認する」ボタンのあるホーム、「Weddings」「Couples」「Portraits」の3つのギャラリー（マソンリーのグリッドとライトボックス付き）、自己紹介、「〜から」の料金を載せたパッケージ（Elopement €1,200〜、Full day €2,800〜、Portrait session €250〜）、そして問い合わせフォーム（名前、メールアドレス、日付、会場または場所、ゲスト数、メッセージ）です。問い合わせはデータベースに保存し、ステータス（新規、返信済み、予約済み、お断り）付きで非公開の管理画面に表示してください。すべての写真は、WebPで複数のサイズに分けて配信し、遅延読み込みをして、ページのずれを防ぐために寸法を確保してください。余白を多くとった、落ち着いた雑誌風のデザインで、見出しはセリフ体にしてください。スマホを優先してください。

このプロンプトは、対象のお客様、ギャラリー、料金、フォームの項目、そして重要な画像読み込みのルールを指定しています。AIは、頼まれない限りこのルールを必ずしも適用してくれません。

手順ごとの構築

1. 写真を先に選ぶ。 ギャラリーと、それぞれ15〜30枚の画像を、何かを作り始める前に決めます。ここが最も難しく、最も価値のあるステップです。
2. 上のようなプロンプトでサイトを作る。 スマホサイズのプレビューで確認します。
3. 画像の読み込みを直す。 画像がリサイズされ、遅延読み込みされ、レイアウトをずらさないことを確認します。サイトを速くする方法を参照してください。
4. 問い合わせフォームを接続する。 データベースに保存し、ご自身のメール配信サービスで通知を受け取れるようにして、問い合わせにすぐ気づけるようにします。
5. 本物の問い合わせが届く前に、管理画面をログインで保護する。
6. 代替テキストとページのタイトルを追加する。 写真の内容を簡潔に説明し（「崖沿いの道を歩く花嫁と花婿、夕日」など）、各ギャラリーのページに独自のタイトルと説明を付けます。
7. 必要なら非公開のクライアント用ギャラリーを作る。 推測できないリンク、任意のパスワード、有効期限、そして許可したときだけ表示されるダウンロードボタン。
8. 公開して、ドメインを接続する。 過去のクライアント2人に、スマホでの見え方を確認してもらいましょう。

よくある失敗

• カメラの元データをアップロードする。 写真1枚が20MBあると、モバイル回線ではサイトが壊れているように感じられます。
• 写真が多すぎる。 訪問者は、最も弱い1枚であなたを判断します。思い切って絞り込みましょう。
• 料金をまったく載せない。 支払える予算ではない人への返信に、時間を取られてしまいます。
• 右クリックの禁止や、目立つ透かし。 訪問者には迷惑ですし、本気の人を止めることはできません。ウェブ用のファイルを共有し、元データは非公開で保管するほうが効果的です。
• 推測しやすいURLの非公開ギャラリー（/gallery/smith-weddingなど）。長いランダムなトークンを使いましょう。
• 代替テキストがない。 アクセシビリティを損ない、画像検索からの訪問も逃してしまいます。
• 問い合わせフォームが静かに失敗する。 変更するたびに、テストの問い合わせを自分宛に送って確認しましょう。

既製の製品を使ったほうがよい場合

大量の高解像度画像をクライアントに届けたい場合、お気に入りの選定、プルーフ、プリント販売が必要なら、専用のクライアント向けギャラリーサービスがまさにそのために作られており、独自のストレージ、ダウンロード、プリントの手配を作るより手間が少なくて済みます。シンプルなポートフォリオで十分なら、写真家向けテンプレートのあるウェブサイトビルダーでも問題ありません。

デザインを自分のものにしたい場合、自分の働き方に合った問い合わせや予約の流れが必要な場合、またはCRM、ショップ、ミニセッションのカレンダーなど、ほかの仕事と連携させたい場合は、自作を検討しましょう。写真家の中には、両方を組み合わせている人も多くいます。自分のウェブサイトを用意し、ギャラリー自体は写真の配信サービスにリンクするという形です。

Mythexで作る

Mythexでは、チャットでサイトを説明すると、ライブプレビューで完成していく様子を確認できます。公開は、mythex.aiのアドレス、またはご自身のドメイン（独自ドメインはProプラン）で行えます。管理画面からアップロードした写真は、プロジェクトのファイルストレージに保存されます。アプリがアップロードを必要とするときに追加されます。Freeプランのストレージ上限は1GBです。保存されたファイルとダウンロードは、クレジット残高から消費されるため、元データではなくウェブ用のコピーを保存しましょう。問い合わせは、保存を依頼したときにエージェントが追加するPostgresデータベースに入ります。メールの通知やクライアントのログインは、ご自身の提供サービスに接続します。Mythexは、メールの送信やエンドユーザーのログインを代わりに行いません。

出発点としては、写真家のポートフォリオ、マソンリーの写真ギャラリー、スタジオ写真サイトのテンプレートを試してください。より広いポートフォリオの話は、ポートフォリオサイトの作り方をご覧ください。

よくある質問