ホーム
〇〇郡サンプル町の道の駅。朝どれ野菜の直売所、地元の食材を使ったレストラン、観光案内所。
<< デモ一覧に戻る
道の駅のデモ
- このページでは、Frames CMS の製品版で実際に作った道の駅のサイトをご紹介します。直売所・レストラン・観光案内所のある、山あいの町の道の駅を想定した、7ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ20種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、メイン画像に文字を載せず、写真の真ん中にロゴだけを重ねています。その下に、アイコン付きのメニューの帯が横いっぱいに並びます。
まずは全体像から
このデモの構成
7つのページで構成しています。「買う」「食べる」「施設のこと」「イベント」をページで分けると、目的のある人が迷いません。
01
02
直売所
町内の農家さん約120軒が出荷する、朝どれ野菜と加工品の直売所。
03
レストラン
地元の野菜と米を使った定食・麺類。テイクアウトのソフトクリームも。
04
施設案内
営業時間・駐車場・トイレ・授乳室・EV充電器など、施設のご案内。
05
季節のイベント
春の山菜まつり、夏の収穫体験、秋の新米フェアなど、季節のイベント。
06
お知らせ
道の駅 さんぷる からのお知らせ一覧です。
07
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「iconmenu1（アイコン付きメニューの帯・写真の上にロゴ）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
トップページは、写真の真ん中にロゴ、その下にアイコン付きのメニューの帯が並ぶフレームです。下のページでは、ロゴがヘッダーの中央に、メニューの帯がその下に入ります。
メイン画像は「文字なし」のスライドショー
このフレームは、メイン画像にキャッチや文字を載せず、ロゴだけを重ねる作りです。建物や景色の写真を、そのまま大きく見せたいときに向いています。
メニューの帯に、アイコンとサブ表記
メニュー編集の「アイコン（任意）」と「サブ表記」で、「直売所／Market」「レストラン／Restaurant」のように、アイコン＋日本語＋英語の3段にしています。初めて来た人にも、どこに何があるかが伝わります。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。写真の上に重なるトップページでは白いロゴを使いたいので、「メイン画像の上に重ねるロゴ（任意）」に白いロゴを入れ、ほかのページは色つきのロゴ、と2枚を使い分けています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「iconmenu1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
アウトドアパーク
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 山あいの町の、台所のような場所です。 | 基本セット（見出し＋本文＋画像） | |
| ページへの入口 | オーバーレイ（写真＋テキスト＋ボタン） | |
| 画像（1枚） | 画像（1枚） | |
| 数字で見る、道の駅 さんぷる | 実績カウンター（数字） | |
| 人気の品 | ランキング | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| お知らせ | お知らせ一覧（自動） |
直売所／レストラン
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 直売所 | 写真に文章が回り込む横長ブロック | |
| 横スクロールギャラリー（スクロール連動） | 横スクロールギャラリー（スクロール連動） | |
| 季節の野菜カレンダー | 多列テーブル（自由な列数） | |
| お知らせボックス | アラート（お知らせボックス） | |
| レストラン | コース・メニュー一覧 | |
| スタジオのこと | 横幅いっぱいレイアウト（テキスト＋写真） |
施設案内／季節のイベント
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 施設案内 | 選ばれる理由（左に見出し＋アイコンのカード） | |
| 施設のようす | ギャラリー（複数画像） | |
| 営業時間 | 営業時間・曜日表 | |
| アクセス | 店舗情報（写真＋情報＋地図） | |
| 季節のイベント | 写真が止まるブロック（ふわっと切り替え） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| ふれあい広場 | 枠がゆらゆら動く写真のカード |
全20種類のパーツのうち、18種類は製品版でのみ使えるものです。ランキングや写真が止まるブロック、野菜カレンダーの多列テーブルは製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
道の駅・地域の施設のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 営業時間がお店ごとに違うときは、どう載せればいいですか
- 営業時間・曜日表で、施設ごとの営業時間を1つの表にまとめるのがおすすめです。このデモでは「直売所・レストラン・観光案内所」を縦に並べ、定休日の曜日に×を付けました。
- 毎日入れ替わる品物は、どう案内すればいいですか
- サイトには「季節の野菜カレンダー」のような、だいたいの目安を載せ、今日の入荷はお知らせやSNSで、と分けておくと更新が楽です。
- 観光の情報も載せたほうがいいですか
- 載せるなら「季節のイベント」のページに絞るのがおすすめです。町の観光協会のサイトがある場合は、そちらへのリンクにして、情報を二重に持たないようにします。
この構成で作れるサイト
道の駅以外にも
このデモは道の駅を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
農産物直売所／観光案内所／公民館・地域センター／キャンプ場／温泉施設／商業施設 など、「1つの場所に、いくつかの施設が入っている」ところであれば、そのまま当てはまります。
メニューの帯は6〜7項目くらいまでがきれいに並びます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る