こんにちは、Webデザイナーの菊地舜です。
今回は私が制作した架空の写真館のデモサイト 「PHOTO STUDIO KIZUNA」 をご紹介します。
過去にフォトスタジオでアルバイトをしていたことをきっかけに、フォトスタジオのデモサイトを作成しました✨
この記事では、サイト制作の背景やコンセプト、各ページの紹介、配色の工夫、期待できる効果までを詳しくお伝えします。
制作の背景と目的
「PHOTO STUDIO KIZUNA」という名前には、「撮影を通して家族の絆を深めていく」という想いを込めています。
結婚、出産、七五三、成人式など、人生にはたくさんの節目がありますよね。その瞬間を写真として残すことは、ただの記録ではなく「大切な人とのつながりを形にすること」でもあります。
このデモサイトを制作した目的は、大きく2つあります。
- 訪問者に安心感を与えること
写真館を選ぶとき、多くの人は「信頼できるかどうか」を第一に考えます。人生の節目を任せる場所だからこそ、温かみと安心感のあるデザインを意識しました。 - 必要な情報をわかりやすく伝えること
料金プランや撮影内容、予約方法など、利用者が知りたい情報を整理して提示することで、スムーズな導線を実現しました。写真館を利用する人は老若男女問いません。そのため、シンプルなレイアウトで、文字の可読性も良く配色にも工夫しました。
「見やすく」「わかりやすく」「安心できる」サイト体験を目指したのが今回のデザインの背景です。
コンセプト
サイトのコンセプトは 「人生の大切な瞬間をしっかり残せる写真館」、「撮影を通して家族の絆が深まる」の2つです。
デザイン面では「温かみ」「信頼感」「上品さ」の3つを柱にしています。
- 温かみ：家族や子供の笑顔が伝わるよう、柔らかい色合いと写真を多用。
- 信頼感：シンプルなレイアウトと落ち着きを感じさせるブラウンベースのの配色。
- 上品さ：記念撮影という特別感を演出するため、文字は明朝体を使用。
フォトスタジオのホームページに必要なのは、「安心して任せられる雰囲気」と「思わず自分も撮影したくなる」と感じてもらえること。その両方を表現することを意識しました。
サイト構成と各ページの紹介
今回のデモサイトは、シンプルに以下の4ページ＋フッターで構成しています！
- 当館について（TOP)
- サービス紹介
- ブログ
- お問い合わせ
- フッター
順番にご紹介します。
1. 当館について
まずはファーストビューです。
シンプルに背景は撮影した写真のスライドショーにしています。
このスライドショーにもこだわっていて…
最初はウェディングフォト、次はマタニティフォト、その次が、ベビーフォトやキッズフォト、ファミリーフォト…という順番で写真を設定しています。
「人生に寄り添う写真館」ということを感じてほしくて、結婚から家族が増えて、幸せな家庭…というストーリーを感じられるようにしました。
実際のスライドショーを見てください！！
そして、「当館について」。
こちらは家族写真を含めて当館の説明をすることで、実際に撮影できる写真を知り、安心感を与えられるようにしています。
「当館概要」は上品さを感じられる薄い紫で背景を切り替えることで情報の整理をしています。
そして、Googleマップを挿入することで検索をすることなく、そのまま写真館までのアクセスが分かるようにしました。
2. サービス紹介
「PHOTO STUDIO KIZUNA」では以下の撮影を想定しています。
- ウェディングフォト
- マタニティフォト
- ベビーフォト（ニューボーン、百日祝い、ハーフバースデー、1歳バースデーなど）
- キッズフォト（誕生日、入学、卒業、七五三など）
- 記念日フォト（誕生日、成人式、家族写真、何気ない日常の写真など）
それぞれに簡単な説明文と参考画像を配置し、「自分もこんな写真を撮りたい！」と直感的に思えるようにデザインしました。
オプションメニューを除く、それぞれのフォトプランの説明は簡潔にまとめた表のようにデザインをしました。
そして、よくある質問は回答も含めると長くなってしまうので、アコーディオンメニューでまとめています。
3. ブログ
ブログはこのサイトの重要な役割を担います。
- 実際の撮影風景
- お客様の声
- 撮影した写真の一部紹介
などを記事として掲載することで、訪問者にリアルなイメージを持ってもらえます。さらにブログはSEO対策としても効果的で、「地域名＋フォトスタジオ」「七五三 撮影 地域名」など検索されやすいキーワードを取り入れることで集客にもつながります。
ブログを通じて「どんな写真が撮れるのか」「どんな雰囲気のスタジオなのか」が自然に伝わる構成にしています。
4. お問い合わせ
最後に欠かせないのが、お問い合わせページです。
まずは「Simply Schedule Appointments」のプラグインを入れて各撮影プランの予約フォームを作成しました。
初めて使用しましたが、簡単に予約の設定ができましたよ！
それに、おおよその所要時間を設定し、予約が入るとその分の所要時間は予約が受けられないようにちゃんと反映されます。
ただ、このプラグインは英語表記になってしまうのがちょっと残念に感じました。
英語表記から日本語表記に直すのに「Loco Translate」というプラグインを使用しています！
これで1つずつ日本語に直していくので、地味な作業です。
そして、そのほかのお問い合わせ（メール）については、入力項目は最小限に抑えてストレスなく問い合わせできるようにしました。
5. フッター
背景にはカメラの画像を使用し、写真館のイメージを感じられるようにしました。
今回、お問い合わせのボタンは2つ設置しました。
1つ目の電話のボタンは、タップするとそのまま電話がつながるように設定しています。
2つ目のお問い合わせフォームのボタンは、上のメールでのお問い合わせフォームに飛びます。
今回は設置していませんが、LINEなどのSNSにもリンクをつけることは可能です♪
（今回、ロゴはChatGPTで作成しました！）
まとめ
今回ご紹介した PHOTO STUDIO KIZUNA のデモサイトは、写真館というテーマに合わせて写真を多く使用することで、
- 当館について で想いを伝え、
- サービス紹介 で具体的な内容をわかりやすく提示し、
- ブログ で雰囲気を直感的に伝え、
- お問い合わせ でスムーズな行動につなげる。
このシンプルな4ページ構成でも、しっかりとユーザーのニーズに応えられるデザインになっています。
実際のサイトを見ていただけると嬉しいです！