ホーム
〇〇市のこども写真館。お宮参り・七五三・入学・バースデーの記念撮影。
<< デモ一覧に戻る
こども写真館のデモ
- このページでは、Frames CMS の製品版で実際に作ったこども写真館のサイトをご紹介します。お宮参り・七五三・入学などの記念撮影をする、こども写真館を想定した、7ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ19種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、トップの写真が形のゆっくり変わる丸い枠に入り、背景色のあるブロックの上下が波の形になる、ポップなフレームを使っています。
まずは全体像から
このデモの構成
7つのページで構成しています。「撮影プラン」「作品」「撮影の流れ」で、予約する前の不安をひとつずつなくす構成です。
01
02
撮影プラン
撮影プランと料金、オプション。
03
作品
スタジオで撮影した写真です。
04
撮影の流れ
ご予約から、写真のお渡しまで。よくあるご質問。
05
スタジオ
スタジオとスタッフの紹介、アクセス。
06
お知らせ
こども写真館 さんぷるからのお知らせ一覧です。
07
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「popcircle1（ぷにっと丸い写真・波のブロック）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
トップは左にロゴ、右に形のゆっくり変わる丸い写真（後ろに星柄と水玉の飾り）が並ぶフレームです。メニューは、左上のぷにっとした形のボタンで開きます。
メイン画像は、キャッチを載せずにボタンだけ
子どもの顔に文字がかからないよう、メイン画像はキャッチを空欄にして、ボタンだけにしています。写真が主役のお店では、こういう使い方もできます。
作品は3通りの見せ方で
トップは横スクロールギャラリー、作品のページはギャラリーと自動スライド。同じ写真でも、パーツを変えると見え方が変わります。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。トップの大きなロゴにも、同じ色つきのロゴを使っています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「popcircle1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
フィットネスジム
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 撮影メニュー | カラムリスト（画像・見出し・本文） | |
| 最近の作品 | 横スクロールギャラリー（スクロール連動） | |
| 流れる英文字 | 横流れテキスト（マーキー） | |
| お客さまの声 | お客様の声（星評価） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| お知らせ | お知らせ一覧（自動） |
撮影プラン／作品
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| お知らせボックス | アラート（お知らせボックス） | |
| 撮影プラン | 料金表（プラン比較） | |
| 画像（1枚） | 画像（1枚） | |
| オプション | メニュー名と価格（2列） | |
| 作品 | ギャラリー（複数画像） | |
| 出張撮影 | 自動スライド（写真の横流れ） |
撮影の流れ／スタジオ
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 撮影の日 | スケジュール・1日の流れ | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| よくあるご質問 | FAQ（クリックで開閉） | |
| LINEのご案内 | LINE誘導セクション（QR＋ボタン） | |
| スタジオのこと | 横幅いっぱいレイアウト（テキスト＋写真） | |
| スタッフ | スタッフ紹介 | |
| スタジオのご案内 | 表（項目と内容） |
全19種類のパーツのうち、15種類は製品版でのみ使えるものです。横スクロールギャラリーや自動スライド、スケジュールは製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
写真スタジオのサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- お客さまの写真を載せてもいいですか
- 必ず許可を取ったものだけにします。このデモの作品のページにも、その一文を入れました。
- 料金が複雑なときは、どう見せればいいですか
- 基本のプランを3つに絞ってプラン比較表にし、衣装の追加などは「メニュー名と価格」の2列に分けると、すっきりします。
- 季節のキャンペーンは、どこに書けばいいですか
- 料金のページのいちばん上に、アラート（お知らせボックス）で1行置くのがおすすめです。
この構成で作れるサイト
写真スタジオ以外にも
このデモはこども写真館を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
フォトスタジオ／貸衣装店／ブライダルフォト／美容室／キッズスペースのあるカフェ／子ども向けの教室 など、「写真で魅力を伝えたい、明るいお店」であれば、そのまま当てはまります。
背景の色を変えると、ポップな雰囲気のまま印象を変えられます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る