ホーム
ごあいさつ・宿のこだわり・宿の楽しみ・お部屋・大浴場・お客さまの声。
<< デモ一覧に戻る
温泉旅館のデモ
- このページでは、Frames CMS の製品版で実際に作った温泉旅館のサイトをご紹介します。渓谷沿いに建つ、全10室すべて露天風呂付きの温泉旅館を想定した、6ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ17種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、割烹のデモと同じ縦書きメニューのフレームを、黒い背景から白に近い生成りに、メインカラーを焦げ茶、アクセントを朱色に変えています。暗い配色が標準のフレームでも、昼の写真を使うと明るい和の印象になります。
まずは全体像から
このデモの構成
6つのページで構成しています。「どんなお部屋か」「何を食べられるか」「いくらか」を、それぞれ1ページにしています。トップページでは、宿のこだわりから大浴場・お客さまの声まで、泊まったときの様子を順に見せています。
01
02
お部屋
3つのお部屋の部屋数と定員、お部屋の設備。
03
お料理
山の幸の会席を写真3枚で。お食事の時間も。
04
宿泊プラン
3つの宿泊プランの料金と、よくあるご質問。
05
お知らせ
湯の宿 さんぷるからのお知らせ一覧です。
06
お問い合わせ
メニューでは「ご予約」の名前で出しています。入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「tatemenu1（縦書きメニュー・写真の上に縦長ロゴ）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
トップページは、画面幅いっぱいの写真の上に、縦書きのメニューと縦長のロゴが並ぶフレームです。メイン画像にはキャッチを載せず、短い見出しは縦書きになります。
黒い背景を白に近い生成りに、写真は昼の景色に
「デザイン → テーマカラー」で、背景色を白に近い生成り（標準は黒）、文字色を墨色、メインカラーを焦げ茶、アクセントカラーを朱色、薄い色（差し色）を淡い生成りに変えています。朱色は、ボタンやお部屋のカードの帯など、小さな面にだけ出ます。メイン画像は、渓谷の露天風呂や庭の昼の写真3枚のスライドショーにしました。
宿のこだわりは「選ばれる理由」、宿の楽しみは「写真が止まるブロック」
源泉・部屋数・お料理の3つは、左に見出し、右にアイコンのカードを並べるパーツで見せています。露天風呂・会席・渓谷さんぽは、スクロールしても写真が止まったまま、文章が順に重なるパーツで、写真を大きく見せました。
お部屋は「コース・メニュー一覧」、大浴場は「パララックス背景」
3つのお部屋は、写真・定員・料金のカードを「列の並べ方」で「3列」に並べています。大浴場は、スクロールに合わせて背景の写真がゆっくり動くパーツに文字を重ね、「文字を読みやすく暗くする」を選んでいます。お客さまの声は、横にスクロールする文字だけのカードです。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。トップページでは、縦書きのメニューと並ぶように、白い縦長のロゴを「メイン画像の上に重ねるロゴ（任意）」に入れています。ほかのページのヘッダーは、横長の色つきのロゴです。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「tatemenu1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
割烹・和食店
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 渓谷の音と、湯けむりのなかで。 | 基本セット（見出し＋本文＋画像） | |
| 画像（1枚） | 画像（1枚） | |
| 宿のこだわり | 選ばれる理由（左に見出し＋アイコンのカード） | |
| 宿の楽しみ | 写真が止まるブロック（順に重なる） | |
| お部屋 | コース・メニュー一覧 | |
| 大浴場 | パララックス背景（写真／動画） | |
| お泊まりになった方から | お客様の声（横スクロール・文字だけ） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| ご予約への誘導 | CTA（大きなアイコン＋テキスト＋ボタン） | |
| お知らせ | お知らせ一覧（自動） |
お部屋／お料理
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| お部屋 | コース・クラス紹介（色の帯つきカード） | |
| 横スクロールギャラリー（スクロール連動） | 横スクロールギャラリー（スクロール連動） | |
| お部屋の設備 | 表（項目と内容） | |
| お料理 | ピックアップギャラリー（大1枚＋小2枚） | |
| お食事の時間 | スケジュール・1日の流れ |
宿泊プラン
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 宿泊プラン | 料金表（プラン比較） | |
| よくあるご質問 | FAQ（クリックで開閉）（デザイン：枠つき・開くとアイコンが×に） |
全17種類のパーツのうち、13種類は製品版でのみ使えるものです。写真が止まるブロックやパララックス背景、選ばれる理由（左に見出し＋アイコンのカード）は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
旅館・宿のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- お部屋の種類が少なくても、ページを分けたほうがいいですか
- トップでは写真と料金だけ、お部屋のページで設備までと分けると、トップが長くなりすぎません。このデモでは、お部屋のページに設備の表を足しました。
- 宿泊プランの料金は、どう見せればいいですか
- プラン比較の料金表で、おすすめのプランに印を付けるのがおすすめです。「1泊2食付き・2名1室利用時」など、料金の条件は表の上に書いておきます。
- 予約サイトを使っていても、自分のサイトは必要ですか
- 予約サイトでは伝えきれない宿の考え方や、お料理・お風呂の写真を、自分の言葉で載せられます。メニューの「ご予約」から、予約サイトへのリンクにすることもできます。
この構成で作れるサイト
温泉旅館以外にも
このデモは温泉旅館を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
旅館／民宿／ペンション／一棟貸しの宿／料亭／和菓子屋 など、「和の雰囲気を、明るく見せたい」ところであれば、そのまま当てはまります。
背景を暗い色に戻せば、割烹のデモのような落ち着いた夜の印象になります。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る