ホーム
山あいの温泉宿。源泉かけ流しの露天風呂と、全12室の離れ。
<< デモ一覧に戻る
温泉旅館のデモ
- このページでは、Frames CMS の製品版で実際に作った温泉旅館のサイトをご紹介します。源泉かけ流しの露天風呂と離れのある、山あいの小さな温泉宿を想定した、7ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ18種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、暗い配色の上に写真のスライドショーを流し、キャッチを縦書きで重ねるフレームを使っています。トップページは、露天風呂・湯めぐり・お部屋・宿での過ごし方・お客さまの声と、写真を中心に続けました。
まずは全体像から
このデモの構成
7つのページで構成しています。「お風呂」「お部屋」「宿泊プラン」「周辺の観光」の4つが、宿のサイトで最もよく見られるページです。トップページでは、その4つへの入口を写真で並べています。
01
02
お風呂
大浴場・露天風呂・貸切風呂。
03
お部屋
和室・露天風呂付きの離れ。
04
宿泊プラン
宿泊プランと料金。
05
周辺の観光
宿から行ける観光スポット。
06
お知らせ
湯宿 さんぷるからのお知らせ一覧です。
07
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「yado7（縦書きテキスト・スライド）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
暗い背景に、写真のスライドショーと縦書きのキャッチが重なる、和モダンのフレームです。メイン画像の上にボタンは出ません。メニューの右端に「ボタン」にした「ご予約」が、朱色で入ります。
キャッチは縦書き、スライドごとに変える
管理画面の「メイン画像（トップページ）」で、3枚のスライドにそれぞれキャッチを入れています。このフレームではキャッチが縦書きになり、「雪見の湯で、なにもしない一日を。」のような短い言葉が映えます。
露天風呂は「横幅いっぱいレイアウト」、湯めぐりは「ピックアップギャラリー」
いちばんの自慢の露天風呂は、文章と大きな写真を横幅いっぱいに並べるパーツで、ようこその文章のすぐ下に置きました。続く「湯めぐり」は、大きな写真1枚と小さな写真2枚で、大浴場・露天風呂・貸切風呂をまとめて見せています。
お部屋・プラン・観光への入口は「オーバーレイ」
写真に文字を重ねた3つのリンクを、横幅いっぱいに並べるパーツです。その下に、チェックインから朝食までをスケジュールのパーツで並べ、泊まった日の流れが思い浮かぶようにしました。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。ヘッダーが暗い色なので、白いロゴを使っています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「yado7」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
旅館
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 湯の音だけが聞こえる、山あいの宿。 | 基本セット（見出し＋本文＋画像） | |
| 画像（1枚） | 画像（1枚） | |
| 露天風呂 | 横幅いっぱいレイアウト（テキスト＋写真） | |
| 宿のこだわり | 特徴・サービス（アイコン3列） | |
| 湯めぐり | ピックアップギャラリー（大1枚＋小2枚） | |
| 横スクロールギャラリー（スクロール連動） | 横スクロールギャラリー（スクロール連動） | |
| ページへの入口 | オーバーレイ（画像リンク・横並び） | |
| 宿での過ごし方 | スケジュール・1日の流れ | |
| お客さまの声 | お客様の声（星評価） | |
| ご予約への誘導 | CTAセクション（背景写真） | |
| お知らせ | お知らせ一覧（自動） |
お風呂／お部屋
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| お風呂 | 写真に文章が回り込む横長ブロック | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| 温泉の成分 | 表（項目と内容） | |
| お部屋 | コース・クラス紹介（色の帯つきカード） | |
| お部屋の設備 | 表（項目と内容） |
宿泊プラン／周辺の観光／お知らせ
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 宿泊プラン | 料金表（プラン比較） | |
| 館内のご案内 | 表（項目と内容） | |
| 周辺の観光 | スポット紹介（テキスト＋段違いカード） | |
| アクセス | 行き方の案内（アイコン付きの枠） | |
| お知らせ | お知らせ一覧（自動） |
全18種類のパーツのうち、15種類は製品版でのみ使えるものです。ピックアップギャラリーやオーバーレイ、スケジュール・1日の流れは製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
旅館のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 予約サイトを使っているときは、サイトに何を載せればいいですか
- サイトには「どんな宿か」と、プランの目安を載せ、予約は予約サイトへ、と役割を分けるのがおすすめです。ボタンやメニューのリンク先を予約サイトにするだけでつながります。
- 宿泊料金は、季節で変わるのに載せてもいいですか
- 「1泊2食付き・2名1室のお1人さま」のように条件をつけた目安なら大丈夫です。このデモでは、3つのプランをプラン比較表にし、条件を表の上に書きました。
- 温泉の成分は、どこまで載せればいいですか
- 泉質・源泉の温度・効能・入浴時間くらいを表にしておけば十分です。このデモでは、お風呂のページの下に「温泉の成分」として並べました。
この構成で作れるサイト
温泉旅館以外にも
このデモは温泉旅館を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
旅館／民宿・ゲストハウス／日帰り温泉／料亭／和食店／酒蔵 など、「写真と短い言葉で、落ち着いた雰囲気を伝えたい」ところであれば、そのまま当てはまります。
縦書きのキャッチは、改行を入れて短い2行にすると、きれいに収まります。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る