ホーム
〇〇市の農園。いちご狩り・野菜の直送・親子の収穫体験。
<< デモ一覧に戻る
農園のデモ
- このページでは、Frames CMS の製品版で実際に作った農園のサイトをご紹介します。いちご狩りと野菜の直送、収穫体験をしている家族経営の農園を想定した、7ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ15種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、メイン画像の下の真ん中に丸いロゴを置き、その左右にメニューを2つずつ並べるフレームを使っています。
まずは全体像から
このデモの構成
7つのページで構成しています。「いちご狩り」「野菜の直送」「収穫体験」の3つの事業を、それぞれ1ページにしています。
01
02
いちご狩り
いちご狩りの期間・料金・ご予約について。
03
野菜の直送
季節の野菜セットを、ご家庭へお届けします。
04
収穫体験
親子で参加できる、季節の収穫体験。
05
農園について
農園の1年と、つくり手のご紹介。
06
お知らせ
さんぷる農園からのお知らせ一覧です。
07
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「roundlogo1（丸いロゴ・左右に2つずつのメニュー）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
メイン画像の下に丸いロゴ、その左右にメニューが2つずつ並ぶフレームです。メニューの5つ目以降は、左上のボタンで開くメニューに入ります。
メニューの順番で、並ぶ場所が決まる
メニュー編集で上から4つまでの項目が、ロゴの左右に並びます。このデモでは「いちご狩り」「野菜の直送」「収穫体験」「農園について」を4つに選びました。いちばん見てほしいものを、上から順に並べるだけです。
料金は多列テーブル、季節はタイムライン
いちご狩りの料金は、時期と年齢で変わるので多列テーブルに。野菜の季節は、月ごとのタイムラインで並べています。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。ロゴは緑の丸の中や、緑のヘッダーの上に出るので、白いロゴを使っています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「roundlogo1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
キャンプ場
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| ようこそ さんぷる農園へ | 基本セット（見出し＋本文＋画像） | |
| ページへの入口 | オーバーレイ（画像リンク・横並び） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| 今週の花 | 横長レイアウト（テキスト＋写真） | |
| お知らせ | お知らせ一覧（自動） |
いちご狩り／野菜の直送
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| いちご狩り | テキスト＋写真2枚（角丸と丸） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| 料金（30分食べ放題・税込） | 多列テーブル（自由な列数） | |
| お知らせボックス | アラート（お知らせボックス） | |
| 野菜の直送 | コース・クラス紹介（色の帯つきカード） | |
| 季節の野菜 | 沿革・年表（タイムライン） |
収穫体験／農園について
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 収穫体験 | 横並び（写真＋文章） | |
| 画像（1枚） | 画像（1枚） | |
| 持ち物 | 箇条書き（中黒・番号） | |
| 農園について | スポット紹介（テキスト＋段違いカード） |
全15種類のパーツのうち、13種類は製品版でのみ使えるものです。多列テーブルやコース・クラス紹介（色の帯つきカード）、タイムラインは製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
農園のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 天気で営業が変わるときは、どうすればいいですか
- 「営業日はお知らせでご案内します」と書いておき、当日の情報はお知らせやSNSで出すのがおすすめです。
- 野菜の直送は、ネットショップがないとできませんか
- このデモのように、セットの内容と価格を載せて、お問い合わせフォームで注文を受ける形でも始められます。
- 写真はどんなものがいいですか
- 畑と、収穫している人の写真がいちばん伝わります。家族やスタッフの笑顔が入ると、「この人から買いたい」と思ってもらえます。
この構成で作れるサイト
農園以外にも
このデモは農園を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
観光農園／果樹園／牧場／ワイナリー／酒蔵／キャンプ場 など、「体験と、ものの販売の両方がある」ところであれば、そのまま当てはまります。
ロゴの左右のメニューは4つまで。5つ目以降は開閉メニューに入ります。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る