ホーム
さんぷる町の観光情報。海水浴・温泉・海の幸・桜並木。
<< デモ一覧に戻る
観光協会のデモ
- このページでは、Frames CMS の製品版で実際に作った観光協会のサイトをご紹介します。海と山と温泉のある町の観光協会を想定した、7ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ12種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、「ヘッダー上の一行」に町のキャッチを入れ、半円のタブにロゴ、その左右にメニューを2つずつ並べています。
まずは全体像から
このデモの構成
7つのページで構成しています。「見る・食べる・泊まる・アクセス」の4つは、観光のサイトで最もよく見られるページです。
01
02
見る・遊ぶ
砂浜・岬の展望台・古い町並み・神社。季節の見どころ。
03
食べる
港の朝ごはん・干物・海鮮丼。町の食べもの。
04
泊まる
温泉旅館と民宿のご案内。
05
アクセス
電車・車でのアクセスと、町内の移動。観光案内所のご案内。
06
お知らせ
さんぷる町観光協会からのお知らせ一覧です。
07
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「centertab1（真ん中に垂れたロゴ・左右に2つずつのメニュー）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
ヘッダーの上に一行の帯、メイン画像の上に半円のタブとロゴ、その左右にメニューが2つずつ並ぶフレームです。5つ目以降のメニューは、右上のボタンで開きます。
「ヘッダー上の一行」
管理画面の「サイト基本設定 → ヘッダー上の一行」に入れた文章が、ヘッダーの上の細い帯に出ます。このデモでは「海と山と温泉の町、さんぷる町へようこそ」としました。
季節の見どころは「写真が止まるブロック」
スクロールすると、写真がふわっと切り替わるパーツで、春・夏・秋・冬の見どころを見せています。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。ロゴは白いタブの中に入るので、色つきのロゴを使っています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「centertab1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
コスメショップ
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| さんぷる町の楽しみ方 | 縦線で区切ったカード | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| お知らせ | お知らせ一覧（自動） |
見る・遊ぶ／食べる／泊まる
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 季節の見どころ | 写真が止まるブロック（ふわっと切り替え） | |
| 横スクロールギャラリー（スクロール連動） | 横スクロールギャラリー（スクロール連動） | |
| 町歩き | 写真に文章が回り込む横長ブロック | |
| 食べる | ランキング | |
| ご予約・お申し込みへの誘導 | CTAセクション（背景写真） | |
| 泊まる | オーバーレイ（写真＋テキスト＋ボタン） | |
| 無料相談への誘導 | パララックス背景（写真／動画） |
アクセス
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| アクセス | アクセス（案内＋地図） | |
| 観光案内所 | 汎用レイアウト（画像＋テキスト・配置選択） |
全12種類のパーツのうち、10種類は製品版でのみ使えるものです。写真が止まるブロックやランキング、アクセス（案内＋地図）は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
観光のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- お店や宿の情報は、どこまで載せればいいですか
- 名前・ひとこと・写真くらいにして、詳しくは各お店のサイトへリンクするのがおすすめです。営業時間などは変わりやすいので、二重に持たないようにします。
- 季節によって見どころが変わるときは
- このデモのように、季節ごとの見どころを1ページにまとめておくと、1年中そのまま使えます。
- アクセスは、何を書けばいいですか
- 電車・車・バスの3通りと、駐車場の場所を書いておけば十分です。地図も一緒に置きます。
この構成で作れるサイト
観光協会以外にも
このデモは観光協会を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
商店街／温泉街／道の駅／観光施設／イベントの実行委員会／地域のポータルサイト など、「まちの魅力を、いくつかのテーマで紹介したい」ところであれば、そのまま当てはまります。
「ヘッダー上の一行」は、キャンペーンや営業時間のお知らせなど、どの業種でも使えます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る