写真館のホームページを訪れた人が本当に見たいものは何でしょうか。スタジオの歴史でも、カメラ機材の紹介でもありません。「うちの家族が、ここで撮ったらどう写るのか」——つまり実例の写真そのものです。
今回の「デモ制作の舞台裏」では、ラタトスクが制作した写真館向けデモサイト「photo studio AOI」を題材に、実例写真の見せ方を軸にした設計の裏側を解説します。
はじめにお読みください
この記事で扱うのは、ラタトスクが技術力の証明として制作した架空のデモサイトです。実在の店舗・実際の案件ではありません。ページ内の店名・住所・料金・実績数値もすべて架空のものです。
写真館のホームページで一番大事なこと
写真撮影は、撮ってもらうまで仕上がりが分からないサービスです。飲食店なら口コミやメニュー写真で味を想像できますが、写真館は「自分の家族が写った完成品」を事前に確かめようがありません。
だからこそ、ホームページに載せる実例写真が営業担当の役割を果たします。閲覧者は実例を見ながら「七五三でこんな写真になるなら」「ニューボーンフォトってこういう雰囲気か」と、自分の家族を重ねて想像します。ここで期待が生まれなければ、料金表まで読み進めてもらえません。
そしてもうひとつ大事なのが不安の解消です。七五三や成人式の撮影は数万円〜十数万円になることも多く、「結局いくらかかるのか」「子どもがぐずったらどうしよう」という不安が予約の手を止めます。つまり写真館のホームページは、実例で期待をつくり、料金と流れで不安を消す——この2つがそろって初めて予約につながります。
デモ「photo studio AOI」で実際にどう設計したか
この考え方を形にしたのが、福岡市の架空の写真館「photo studio AOI」のデモサイトです。設計のポイントを、実物を見ながら順に説明します。
配色：写真を主役にするため、UIは彩度を抑える
このデモの基本配色は、ブルーグレー（#4A5560）・深いネイビーグレー（#2A3540）・真鍮のような落ち着いたゴールド（#C49A6B）・生成りに近いベージュ（#F7F5F0）の4色です。あえて鮮やかな色をひとつも使っていません。
理由は単純で、このサイトの主役は「作品写真」だからです。UI側に派手な色を使うと、肝心の写真より画面の装飾が目立ってしまいます。さらにトップの大きなヒーロー写真には、彩度を約3割・明るさも落とすフィルターをかけ、その上に白い英字コピーを重ねています。写真系のサイトでは「サイトの色は一歩引かせて、写真に語らせる」のが基本方針です。
コピー：「写真」ではなく「物語」を売る
トップページのメインコピーは、セリフ体（Cormorant Garamond）のイタリックで組んだ英文と、日本語の組み合わせです。
A moment, a lifelong story.
一瞬を、家族の物語に。
「きれいな写真を撮ります」とは書いていません。写真館のお客様が買っているのは、印画紙やデータではなく「家族の節目を形に残す」という体験だからです。一方で、雰囲気だけに寄せると検索に弱くなるため、直後のリード文には「七五三・お宮参り・成人式・ニューボーンフォト・家族記念日」と、実際に検索される具体的な言葉を並べ、「一組貸切」という店の強みもここで明示しています。情緒と検索対策の役割分担です。
ポートフォリオ6枚は撮影メニューと1対1で対応させる
このデモでいちばん意図を込めたのがここです。撮影メニューは6プラン。家族写真（¥38,500）・七五三（¥66,000）・成人式（¥132,000〜）・ニューボーン（¥44,000）・マタニティ（¥33,000）・プロフィール（¥27,500）——いずれも架空の料金ですが、全プランに価格と撮影時間を明記しています。
そして直後の「撮影実例」セクションには、ポートフォリオ写真をちょうど6枚（p01〜p06）配置し、それぞれに Family Photo / 753 / Coming of Age / Newborn / Maternity / Portrait と、メニューカードと同じ名前のラベルを付けました。つまりメニュー6プランと実例6枚が、同じ順番・同じ名前で1対1に対応しています。
なぜ「メニューと実例の対応」にこだわるのか
- 閲覧者は「このプランを頼むと、どんな写真になるのか」を知りたい
- 実例が雑多なギャラリーだと、プランと仕上がりが頭の中でつながらない
- 1対1で対応させると「七五三¥66,000＝この仕上がり」と、価格と価値がセットで伝わる
細かい点では、実例写真を縦長の4:5比率でそろえています。人物写真は縦位置のほうが構図が安定して見えるためです。マウスを載せると写真がゆっくり拡大する動きも付け、「作品を1枚ずつ眺める」感覚に寄せました。
料金・流れ・FAQで「不安」を先回りして消す
実例で期待をつくったあとは、不安つぶしです。デモでは「ご予約 → ご来店・撮影 → セレクト → 仕上げ・納品（2〜3週間）」の4ステップを図解し、FAQには次の4つを置きました。
- 衣装のレンタルはできますか？（七五三・成人式は着物レンタル＋着付け込みと明記）
- データはもらえますか？（30〜60カットの全データ渡しと明記）
- 子供がぐずったらどうする？（一組貸切なので子どものペースで撮影・休憩や授乳もOK）
- キャンセル料は？（前日まで無料・体調不良は柔軟に対応）
特に3つ目は、小さな子どもを連れて行く親御さんがほぼ確実に心配することです。ここに先回りして答えがあるかどうかで、問い合わせのしやすさは大きく変わります。「一組貸切」という強みも、ヒーロー・FAQ・実績数値の各所で繰り返し登場させています（実績カウンターの数字も、もちろんデモ用の架空値です）。
写真館の集客でよくある失敗
逆に、写真館のホームページでよく見かけるつまずきを整理します。
| よくある失敗 | 閲覧者に起きること |
|---|---|
| 実例写真が少ない・古い・小さい | 仕上がりを想像できず、比較候補から外れる |
| 料金が「お問い合わせください」のみ | 高そうで怖い、と感じて問い合わせ自体をやめる |
| 実例がメニューとつながらない雑多なギャラリー | 「自分の頼みたいプランの仕上がり」が分からない |
| 子連れへの配慮が書かれていない | 「ぐずったら迷惑かも」と不安なまま離脱する |
どれも技術の問題ではなく、「閲覧者が知りたい順に、知りたいことを置く」という設計の問題です。腕の良い写真館ほど撮影に集中していて、ホームページの構成まで手が回らない——そのギャップを埋めるのが制作側の仕事だと考えています。
まとめ｜実際のデモを見てみてください
- 写真館のホームページは「実例で期待をつくり、料金と流れで不安を消す」の2本柱
- 配色は彩度を抑え、作品写真を主役にする
- ポートフォリオは撮影メニューと1対1で対応させ、価格と仕上がりをセットで見せる
- 「子どもがぐずったら」など、予約の手を止める不安に先回りして答える
文章だけでは伝わりにくい部分も多いので、ぜひ実物のデモサイトを開いて、この記事と見比べてみてください。メニューと実例の対応関係は、実際にスクロールすると意図が分かりやすいと思います。
ラタトスクでは、こうした業種ごとの設計を踏まえたホームページ制作を承っています。料金は初期費用¥0＋月額¥5,000（税込）のサブスクプランと¥50,000（税込・一括）の買い切りプランの2つ。着手金なしの公開後払いで、公開前のデザイン修正は3回まで無料です。「写真はあるけど、見せ方が分からない」という段階のご相談も歓迎です。