ホーム
湖のほとりのグランピング。手ぶらでBBQ、星空、焚き火。
<< デモ一覧に戻る
グランピング施設のデモ
- このページでは、Frames CMS の製品版で実際に作ったグランピング施設のサイトをご紹介します。湖のほとりで、手ぶらでBBQと焚き火が楽しめるグランピング施設を想定した、5ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ16種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、夜の写真1枚の真ん中にロゴだけを重ね、その下にメニューの帯を横いっぱいに並べています。トップページは、星空・テント・焚き火・お食事と、写真の大きなセクションを続けました。
まずは全体像から
このデモの構成
5つのページで構成しています。「どんなテントか」「いくらか」の2つのページと、トップページの写真と「過ごし方」で、泊まったあとの様子が思い浮かぶ構成です。
01
02
宿泊棟
ドームテントと、湖が見えるテント。
03
料金
宿泊の料金と、よくあるご質問。
04
お知らせ
SAMPLE GLAMPING からのお知らせ一覧です。
05
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「frame9（静止画背景・ロゴ中央）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
メイン画像は静止画1枚で、写真の真ん中にロゴを重ねるフレームです。キャッチやボタンは表示しません。写真の下にメニューの帯が横いっぱいに並び、ページ全体は暗い配色でまとまります。
焚き火は「パララックス背景」
スクロールに合わせて背景の写真がゆっくり動くパーツで、焚き火の写真に文字を重ねています。「文字を読みやすく暗くする」を選んでいるので、明るい炎の上でも文字が読めます。
星空は「横幅いっぱいレイアウト」、お食事は「ピックアップギャラリー」
夜の星空は、文章と大きな写真を横幅いっぱいに並べるパーツで見せています。お食事は、大きな写真1枚と小さな写真2枚のギャラリーで、BBQと焚き火のマシュマロを並べました。
宿泊棟は「コース・クラス紹介」を「3列」で、過ごし方は「スケジュール」
3つのテントを色の帯つきのカードで並べ、「列の並べ方」を「3列」にしています。チェックインから朝ごはんまでは、時刻とアイコンを縦に並べるスケジュールのパーツです。料金のページは、「平日／休前日」の2列の多列テーブルにしました。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。ヘッダーが濃い色なので、白いロゴを使っています。トップの写真の上に重なるロゴも、同じ白いロゴです。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 手ぶらで、湖のほとりへ。 | 基本セット（見出し＋本文＋画像） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| ここが、ちょっといいところ | 特徴・サービス（アイコン3列） | |
| 星空 | 横幅いっぱいレイアウト（テキスト＋写真） | |
| 宿泊棟 | コース・クラス紹介（色の帯つきカード） | |
| 焚き火 | パララックス背景（写真／動画） | |
| 過ごし方 | スケジュール・1日の流れ | |
| お食事 | ピックアップギャラリー（大1枚＋小2枚） | |
| 画像（1枚） | 画像（1枚） | |
| ご予約への誘導 | CTAセクション（背景写真） | |
| お知らせ | お知らせ一覧（自動） |
宿泊棟／料金
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 宿泊棟 | 写真に文章が回り込む横長ブロック | |
| 横スクロールギャラリー（スクロール連動） | 横スクロールギャラリー（スクロール連動） | |
| 設備 | 表（項目と内容） | |
| 料金 | 多列テーブル（自由な列数） | |
| よくあるご質問 | FAQ（クリックで開閉）（デザイン：枠つき・開くとアイコンが×に） |
全16種類のパーツのうち、12種類は製品版でのみ使えるものです。パララックス背景やピックアップギャラリー、スケジュールは製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
宿泊施設のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 平日と休前日で料金が違うときは、どう載せればいいですか
- 多列テーブルで「テント × 曜日」の表にすると、ひと目で分かります。このデモでは、小学生の料金も1行足して、同じ表にまとめました。
- 雨の日やペットのことを、よく聞かれます
- 料金のページの下に、開閉式のよくある質問を置くのがおすすめです。予約の前に読んでもらえるので、問い合わせが減ります。
- 予約システムがないと、予約は受けられませんか
- このデモのように、メニューの「ご予約」をお問い合わせフォームにつなぐ形でも始められます。フォームの入力項目は自由に作れるので、日付や人数の欄を用意しておきます。
この構成で作れるサイト
グランピング施設以外にも
このデモはグランピング施設を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
キャンプ場／貸別荘／民宿・ゲストハウス／温泉宿／アウトドア体験／貸しスペース など、「写真で雰囲気を伝え、料金と予約へつなげたい」ところであれば、そのまま当てはまります。
メニューの帯は、5〜6項目くらいまでがきれいに並びます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る