ホーム
宿の第一印象を決めるページ。ごあいさつ、温泉への導線、お部屋、お料理、ご滞在の一日、お客様の声、お知らせ、予約への誘導までを1ページに。
<< デモ一覧に戻る
旅館のデモ
- このページでは、Frames CMS の製品版で実際に作った旅館サイトをご紹介します。山あいの、全6室の小さな宿を想定した7ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ13種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- 企業サイトのデモと、同じCMSで作っています。並べて見ていただくと、フレームを変えるだけでここまで印象が変わることが分かるはずです。
まずは全体像から
このデモの構成
7つのページで構成しています。すべて管理画面から作れるもので、HTMLを書いた箇所はひとつもありません。
01
02
お部屋
6室それぞれの造りを、写真を左右交互に配置して紹介。備品・アメニティの表も置いています。
03
お料理
写真を大きく見せるページ。ギャラリーで料理の写真を並べています。
04
温泉
スクロールに合わせて背景写真が動くセクションと、泉質・効能の表。
05
料金・ご案内
3つのプランを並べた料金表、ご宿泊の条件、よくあるご質問、地図の埋め込み。
06
お知らせ
記事を追加すると、一覧ページと詳細ページが自動で作られます。トップページには最新3件が自動で表示されます。
07
お問い合わせ
入力項目を自由に作れるフォーム。ご予約前のご相談窓口として使えます。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「yado7（縦書きキャッチ＋スライド）」 です。
yado7 は、メイン画像の上に縦書きのキャッチコピーが重なるフレームです。明朝体と縦書きの組み合わせは、和の業種でよく使われる型で、写真がそのまま雰囲気になります。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では20種類以上から選べます。
企業サイトのデモ（biz64-red）とこのデモを見比べていただくと分かりますが、ページの中身の作り方は、まったく同じです。同じパーツ、同じ管理画面で作っています。違うのはフレームだけです。
このデモでは、色を1つだけ変えています
yado7 の標準のメインカラーはさびた朱色ですが、静かな宿の雰囲気に合わせて落ち着いた金茶に変更しました。変更したのは管理画面の「デザイン → テーマカラー」で、カラーピッカーから色を選んだだけです。
変えられるのは、メインカラー・アクセントカラー・薄い色（差し色）・背景色・文字色の5つ。フレームを選んだあとで、宿の雰囲気に寄せることができます。
なお、その下にはテーマCSSを直接編集できる欄もあります。余白や角の丸み、フォントサイズなど、色以外も細かく調整したい方向けです（CSSの知識がある方向けの機能なので、通常はカラーピッカーだけで十分です）。
変えた色だけが保存される仕組みになっています。あとから別のフレームに切り替えても、変更していない色はそのフレーム本来の配色が生きます。前のフレームの色を引きずって雰囲気が壊れる、ということが起きません。
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| ごあいさつ | 基本セット（見出し＋本文＋画像） | |
| 温泉への導線 | パララックス背景（写真／動画） | |
| お部屋（価格つき） | コース・メニュー一覧 | |
| お料理 | サムネイルギャラリー（クリックで大画像切替） | |
| ご滞在の一日 | スケジュール・1日の流れ | |
| お客様の声 | お客様の声（星評価） | |
| お知らせ | お知らせ一覧（自動） | |
| ご予約への誘導 | 横長ビジュアル（写真＋テキスト誘導） |
お部屋・お料理・温泉
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 6室それぞれの紹介 | 汎用レイアウト（画像＋テキスト・配置選択） | |
| 備品・アメニティ／泉質・効能 | 表（項目と内容） | |
| お料理の写真 | ギャラリー（複数画像） |
料金・ご案内
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 3プランの比較 | 料金表（プラン比較） | |
| ご宿泊の条件 | 表（項目と内容） | |
| よくあるご質問 | FAQ（クリックで開閉） | |
| 地図 | 埋め込み（YouTube・地図など） |
全13種類のパーツのうち、9種類は製品版でのみ使えるものです。Free（無料版）でも同じ構成を作ろうとすることはできますが、パララックス背景・コース一覧・サムネイル切替・スケジュール・お客様の声・料金表・ギャラリー・横長ビジュアルは入っていないため、見え方はかなり変わります。製品版では約50種類のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、ご購入後にお問い合わせください。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
宿のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 写真は何枚くらい必要ですか
- このデモで使っているのは15枚ほどです。内訳は、メイン画像3枚・お部屋3枚・お料理6枚・温泉2枚・外観1枚くらい。
宿のサイトは写真がそのまま商品説明になるので、他の業種より枚数が要ります。ただし一度に全部そろえる必要はありません。まずはメイン画像とお部屋だけで公開して、季節ごとに足していく方が現実的です。 - 料金をサイトに載せるべきでしょうか
- 載せた方が問い合わせは増えます。「いくらか分からない宿」は、比較の段階で外されてしまうためです。
このデモでは「22,000円〜／人・1泊2食」のように下限だけを出す形にしました。繁忙期で変わる場合も、この書き方なら嘘になりません。料金表パーツを使えば、プランごとの違いも並べて見せられます。 - 予約システムは付いていますか
- Frames CMS に予約・決済の機能はありません。ここは正直にお伝えしておきます。
実際の運用では、①お問い合わせフォームで予約の相談を受ける、②予約サイトへボタンでリンクする、のどちらかになります。このデモは①の形です。
②の場合は、ボタンパーツにリンク先を入れるだけで、メニューにも「ご予約」を並べられます。 - お客様の声は載せてもいいですか
- 宿泊業では問題ありません（医療機関などは法律で禁じられていますのでご注意ください）。
ただし実際にいただいた声だけにしてください。このデモの声はすべて架空のサンプルです。書き換えるときは、いただいた文面をそのまま使い、お名前は「K様」のように伏せるのが一般的です。 - 空室状況はどう伝えればいいですか
- カレンダー機能はありませんが、お知らせで十分まわります。「今週末に1室空きが出ました」のように記事を1本追加すれば、トップページにも自動で出ます。
更新の手間を考えると、毎日の空室表より週に1本のお知らせの方が続けやすいはずです。 - スマホでの見え方が心配
- すべてのパーツが、画面の幅に合わせて自動的に並び替わります。スマホ用に別のページを作る必要はありません。3列のカードは1列に、料金表は縦に、表は横スクロールに切り替わります。
この構成で作れるサイト
旅館以外にも
このデモは全6室の小さな旅館を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
民宿・ペンション／貸別荘・一棟貸し／ゲストハウス／グランピング・キャンプ場／料亭・割烹／日帰り温泉・サウナ／古民家カフェ など、「雰囲気」と「料金」と「過ごし方」を伝えたい商売であれば、そのまま当てはまります。
業種によって変えたほうがよいのは、「ご滞在の一日」のセクションくらいです。ご利用の流れ、コースの内容、当日の持ち物など、伝えたいものに置き換えてください。パーツはそのまま使えます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る