写真スタジオサイト（デモサイト）
ハレノヒ写真室
徳島市にある、ひと部屋だけの子ども・家族写真スタジオを想定したデモサイトを制作しました。小さなお子さまのいるご家族が「ここなら安心して任せられそう」と感じられるよう、撮影の雰囲気・メニュー・料金を順に見せ、予約へつなげる1ページ構成にしています。
別のタブで開きます
- 業種
- 写真スタジオ（子ども・家族写真）
- 担当範囲
- 構成 / デザイン / HTML・CSS・JavaScript実装
- 使用技術
- HTML / CSS / JavaScript
- ページ構成
- シングルページ（TOP / About / ギャラリー / 撮影メニュー / 料金 / 撮影の流れ / スタジオ / カメラマン / お客様の声 / よくある質問 / 予約 / アクセス）
このサイトについて
お宮参り・七五三・家族写真などを撮影する、1日4組までの小さな写真スタジオのサイトを制作しました。
「晴れの日」の日差し・空・桜をイメージした黄色・水色・ピンクの3色を使い、写真は円やアーチ形に切り抜いて、やわらかく親しみやすい雰囲気にまとめています。ファーストビューでは「晴れの日も、なんでもない日も。」というコピーのまわりに、七五三・家族・きょうだいの写真を散らすように配置し、どんな場面の撮影ができるかが最初の画面で伝わるようにしました。
デザインのポイント
-
写真スタジオ選びの不安に、先に答える構成
「子どもが泣いたらどうしよう」という不安に、ファーストビューのすぐ後で「泣いても、じっとしていなくても、大丈夫です。」と答える流れにしました。貸切・衣装込み・その場で写真を選べることも、3つのカードで短く伝えています。
-
丸い写真と3色で、やわらかい世界観に
写真を円・アーチ・角丸の形で切り抜き、黄色・ピンク・水色をセクションごとの背景色に使い分けました。にぎやかになりすぎないよう、文字色はこげ茶にそろえ、余白を多めに取っています。
-
料金がわかりやすく、迷わず予約できる導線
料金は3プランに絞り、「迷ったらこちら」の目印で真ん中のプランをおすすめしました。スマートフォンでは画面下に「LINEで相談」「空き状況・ご予約」のボタンを常に表示し、どこからでも予約へ進めます。
ページの流れ
トップから順に、どんな順番で情報を見せているかをまとめました。画像を押すと、セクション全体を拡大して見られます。
-
01 / 05
TOP
黄色い円の中にキャッチコピーを置き、まわりに七五三・家族・きょうだいの写真を配置しました。「空き状況を見て予約する」ボタンと、貸切・衣装込み・駐車場ありの特長も最初の画面に入れています。
-
02 / 05
About
「泣いても、じっとしていなくても、大丈夫です。」の見出しで、撮影への不安をやわらげます。スタジオの特長は、色分けした3枚のカードで短くまとめました。
-
03 / 05
Gallery
七五三・百日祝い・マタニティなどの写真を、高さをずらして並べました。撮影メニューと年齢のラベルを添えて、自分の家族に近い写真を見つけやすくしています。
-
04 / 05
Price
料金は3プランを横に並べて比べやすくし、真ん中のプランに「迷ったらこちら」の目印をつけました。全プランに含まれるものや追加料金も、同じ画面で確認できます。
-
05 / 05
Reserve・Access
Web予約・LINE相談・電話の3つの入口を並べました。日程が決まっていなくても相談できることを添えて、予約へのハードルを下げています。
こんなサイトを作りたい、
というご相談も。
新しくホームページを作りたい。今のサイトを見直したい。まだ内容が固まっていなくても大丈夫です。お話を伺ったうえで、いま必要なものだけをご提案します。
ご相談・お見積もりは無料です。