ホーム
ようこそのごあいさつ、アクティビティ・キャンプサイト・1日の過ごし方・声。
<< デモ一覧に戻る
アウトドアパークのデモ
- このページでは、Frames CMS の製品版で実際に作ったアウトドアパークのサイトをご紹介します。湖のほとりで、手ぶらBBQ・カヌー・キャンプ・星空観察ができるアウトドアパークを想定した、6ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ16種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、道の駅のデモと同じフレームを、生成りの背景から白に、緑のメニューの帯を夜の湖のような紺に変えています。メイン画像は夜の写真のスライドショーで、トップページは「何ができるか」「どう過ごせるか」を写真と流れで見せています。
まずは全体像から
このデモの構成
6つのページで構成しています。「何ができるか」「いくらか」「どう行くか」を、それぞれ1ページにしています。トップページだけで、遊び方と1日の過ごし方まで伝わる構成です。
01
02
アクティビティ
3つのアクティビティを写真と文章で。持ち物の案内も。
03
料金
大人・小学生の料金と、キャンプサイト・レンタルの料金。
04
アクセス
車・バスでの行き方と営業時間、地図。
05
お知らせ
SAMPLE OUTDOOR PARK からのお知らせ一覧です。
06
お問い合わせ
メニューでは「ご予約」の名前で出しています。入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「iconmenu1（アイコン付きメニューの帯・写真の上にロゴ）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
トップページは、写真の真ん中にロゴ、その下にアイコン付きのメニューの帯が並ぶフレームです。メニューの帯は、スクロールすると画面の上に貼り付きます。メイン画像には、キャッチやボタンは出ません。
背景を白に、メニューの帯を紺に、メイン画像はスライドショーに
「デザイン → テーマカラー」で、背景色を白（標準は生成り）、メインカラーを深い紺（標準は緑）、アクセントカラーをオレンジ、薄い色（差し色）をごく淡いベージュに変えています。メニューの帯とフッターは紺、「ご予約」のボタンはオレンジで出ます。広い面は白と紺だけ、オレンジは小さな面だけにしているので、写真の色がよく映えます。
メイン画像は、「メイン画像のタイプ」でスライドショー（標準は静止画）にして、星空とテントの夜の写真3枚を切り替えています。
アクティビティは「オーバーレイ」を横幅いっぱいに、キャンプサイトは「横幅いっぱいレイアウト」
BBQ・カヌー・星空観察の3つは、写真の上に文字を重ねた画像リンクを横幅いっぱいに並べ、アクティビティのページへの入口にしています。キャンプサイトは、文章と大きな写真を画面の左右いっぱいに並べるパーツで、区画から湖が見える様子を伝えています。
1日の過ごし方は「スケジュール」、最後は写真の上の誘導
「10時に着いたら」という想定で、時刻とアイコンを縦に並べるスケジュールのパーツを使っています。はじめての人が、滞在時間をイメージしやすくなります。お客さまの声は星評価のカードを「列の並べ方」で「3列」に、最後は焚き火の写真の上にご予約への誘導を重ねました。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。トップの写真の上と紺のフッターには白いロゴ、白いヘッダーのほかのページには色つきのロゴと、使い分けています。フッターの白いロゴは「フッター用ロゴ（任意）」に入れています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「iconmenu1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
道の駅
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 湖のほとりで、一日まるごと遊ぶ。 | 基本セット（見出し＋本文＋画像） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| はじめての方も、気軽に | 特徴・サービス（アイコン3列） | |
| パークで遊ぶ | オーバーレイ（画像リンク・横並び） | |
| キャンプサイト | 横幅いっぱいレイアウト（テキスト＋写真） | |
| 日帰りの過ごし方 | スケジュール・1日の流れ | |
| 遊びに来た方の声 | お客様の声（星評価） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| ご予約への誘導 | CTAセクション（背景写真） | |
| お知らせ | お知らせ一覧（自動） |
アクティビティ／料金
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| アクティビティ | 写真に文章が回り込む横長ブロック | |
| 画像（1枚） | 画像（1枚） | |
| 持ってくると便利なもの | 箇条書き（中黒・番号） | |
| 料金 | 表（項目と内容） | |
| キャンプサイトとレンタル | 表（項目と内容） |
アクセス
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| アクセス | 行き方の案内（アイコン付きの枠） | |
| 営業時間 | 表（項目と内容） | |
| 地図 | 埋め込み（YouTube・地図・iframe） |
全16種類のパーツのうち、12種類は製品版でのみ使えるものです。オーバーレイ（画像リンク）や横幅いっぱいレイアウト、スケジュールは製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
レジャー施設のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 大人と子どもで料金が違うときは、どう見せればいいですか
- 表の1行に「大人 〇円／小学生 〇円」とまとめると、スマホでも横にはみ出さずに読めます。このデモでは、入園料とアクティビティを同じ表に並べました。
- 雨の日の営業は、どう伝えればいいですか
- 雨でもできることを先に書くのがおすすめです。このデモでは、トップの「はじめての方も、気軽に」に「雨の日も、屋根の下で」を入れました。中止になるものは、お知らせで出します。
- はじめての人に、何を伝えればいいですか
- 持ち物と、1日の過ごし方です。このデモでは、トップにスケジュール、アクティビティのページに「持ってくると便利なもの」を置きました。
この構成で作れるサイト
アウトドアパーク以外にも
このデモはアウトドアパークを想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
キャンプ場／グランピング施設／観光牧場／スキー場／体験工房／道の駅 など、「いくつかの体験があって、日帰りでも遊べる」施設であれば、そのまま当てはまります。
メニューの帯のアイコンとサブ表記は、メニュー管理の「アイコン（任意）」「サブ表記（任意）」で選べます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る