ホーム
ごあいさつ・キャンプ場のこと・高原の楽しみ・サイトの種類・1日の流れ・湖のこと・予約の案内・お知らせ。
<< デモ一覧に戻る
キャンプ場のデモ
- このページでは、Frames CMS の製品版で実際に作ったキャンプ場のサイトをご紹介します。オートサイト・フリーサイト・ドームコテージのある、高原のキャンプ場を想定した、6ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ15種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、農園のデモと同じフレームを、黄緑とピンクから、深い松葉色と焚き火のオレンジに変え、メイン画像を星空の静止画1枚にしています。
まずは全体像から
このデモの構成
6つのページで構成しています。トップでキャンプ場の楽しみと1日の流れを見せ、「サイト」「料金」「ご利用案内」のページで、予約の前に知りたいことをそろえています。
01
02
サイト
オートサイト・フリーサイト・ドームコテージの区画数と特徴、場内の設備。
03
料金
1泊の料金表と、レンタル品の価格。
04
ご利用案内
チェックイン・チェックアウトの時間と場内のルール、行き方。
05
お知らせ
さんぷるキャンプ場からのお知らせ一覧です。
06
お問い合わせ
メニューでは「ご予約」の名前で出しています。入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「roundlogo1（丸いロゴ・左右に2つずつのメニュー）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
メイン画像の下がゆるやかな曲線になり、その真ん中に丸いロゴ、左右にメニューが2つずつ並ぶフレームです。メニューの5つ目以降は、左上のボタンで開くメニューに入ります。
松葉色とオレンジに、メイン画像は星空の1枚
「デザイン → テーマカラー」で、メインカラーを深い松葉色（標準は黄緑）、アクセントカラーを焚き火のオレンジ（標準はピンク）に、背景色と薄い色（差し色）を少し生成りがかった白にしています。丸いロゴとフッターは松葉色に、ロゴの左右のメニューは左の2つが松葉色、右の2つがオレンジから作った色になります。
「メイン画像のタイプ」は静止画（標準はスライドショー）にして、星空の写真1枚だけにしました。
写真の大きいパーツで、高原の夜を伝える
焚き火・星空・バーベキューは、横幅いっぱいのオーバーレイ（写真＋テキスト＋ボタン）で、左右を交互にして並べています。湖のことは写真2枚を重ねたコラージュ、予約の案内は背景写真のCTAです。
「キャンプ場の1日」は、チェックインからチェックアウトまでをスケジュールのパーツで並べました。メニュー管理で上から4つまでの項目が、ロゴの左右に並ぶので、「ホーム」と「ご予約」は5つ目以降にしています。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。ロゴは松葉色の丸の中と、フッターの松葉色の上に出るので、白いロゴを使っています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「roundlogo1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
農園
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 夜は、空を見上げて。 | 基本セット（見出し＋本文＋画像） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| このキャンプ場のこと | 特徴・サービス（アイコン3列） | |
| 高原の楽しみ | オーバーレイ（写真＋テキスト＋ボタン） | |
| サイトの種類 | コース・クラス紹介（色の帯つきカード） | |
| キャンプ場の1日 | スケジュール・1日の流れ | |
| お店のこと | コラージュ（写真2枚＋テキスト） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| ご予約・お申し込みへの誘導 | CTAセクション（背景写真） | |
| お知らせ | お知らせ一覧（自動） |
サイト／料金
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| サイト | コース・クラス紹介（色の帯つきカード） | |
| 画像（1枚） | 画像（1枚） | |
| 場内の設備 | 表（項目と内容） | |
| 料金 | 多列テーブル（自由な列数） | |
| レンタル | メニュー名と価格（2列） |
ご利用案内
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| ご利用案内 | 表（項目と内容） | |
| アクセス | 行き方の案内（アイコン付きの枠） |
全15種類のパーツのうち、12種類は製品版でのみ使えるものです。オーバーレイ（写真＋テキスト＋ボタン）や色の帯つきのカード、スケジュール（1日の流れ）は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
キャンプ場のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 料金が平日と休日で違うときは、どう載せればいいですか
- 多列テーブルで「サイトの種類 × 平日／休前日」の表にすると、ひと目で分かります。レンタル品は「メニュー名と価格」の2列に分けて、表をすっきりさせました。
- はじめてキャンプをする人にも来てほしいのですが
- このデモのように、トップで「手ぶらでも大丈夫」と、当日の1日の流れを見せておくと、何をすればいいかが想像しやすくなります。
- 冬季休業や、その年の営業日はどう知らせればいいですか
- 毎年同じ休業期間は、フッターの文章に書いておくと、どのページからも見えます。その年の営業の終わりや急なお知らせは、お知らせ記事で出すのがおすすめです。
この構成で作れるサイト
キャンプ場以外にも
このデモはキャンプ場を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
グランピング施設／オートキャンプ場／貸し別荘／アウトドアパーク／釣り堀／山小屋 など、「区画や部屋の種類ごとに、料金がある」施設であれば、そのまま当てはまります。
丸いロゴとメニューの色は、メインカラーから作られます。メニューには、管理画面で選んだアイコンも出せます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る