ホーム
〇〇市の割烹。旬の魚と野菜を、カウンターとお座敷で。昼の御膳と夜のコース。
<< デモ一覧に戻る
割烹・和食店のデモ
- このページでは、Frames CMS の製品版で実際に作った割烹・和食店のサイトをご紹介します。旬の魚と野菜を、カウンターとお座敷で出す割烹を想定した、6ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ14種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、メイン画像に文字を載せず、写真の上に縦書きのメニューと大きなロゴだけを置いています。
まずは全体像から
このデモの構成
6つのページで構成しています。「お料理」「お部屋」「店舗案内」の3つがあれば、お店の様子が十分に伝わります。
01
02
お料理
季節のお料理と、昼の御膳・夜のコースの内容と価格。
03
お部屋
カウンター8席、お座敷2部屋（最大12名様）。
04
店舗案内
営業時間・アクセス・ご予約について。
05
お知らせ
割烹 さんぷる からのお知らせ一覧です。
06
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「tatemenu1（縦書きメニュー・写真の上に縦長ロゴ）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
暗い配色で、トップページは写真の上に縦書きのメニューと、縦長の大きなロゴが並ぶフレームです。下のページでは、短い見出しが縦書きになります。
写真だけのトップ
このフレームは、メイン画像にキャッチを載せない作りです。のれんや店構えの写真が、そのまま看板の役目をします。
季節のお料理は「写真が止まるブロック」
スクロールすると、写真が1枚ずつ重なっていくパーツです。コースの流れを、順にめくるように見せられます。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。ヘッダーも写真の上も濃い色なので、白いロゴを使っています。トップの写真の上は縦長の枠になっているので、「メイン画像の上に重ねるロゴ（任意）」には縦書きの白いロゴを入れています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「tatemenu1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
温泉旅館
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 旬を味わう | 基本セット（見出し＋本文＋画像） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| 季節のお料理 | 写真が止まるブロック（順に重なる） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| お知らせ | お知らせ一覧（自動） |
お料理
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| お料理 | 横長ビジュアル（写真＋テキスト誘導） | |
| 夜のコース | コース・メニュー一覧 | |
| 画像（1枚） | 画像（1枚） | |
| 昼の御膳（11:30〜14:00） | 横並び（写真＋文章） |
お部屋／店舗案内
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| お部屋 | 横長レイアウト（テキスト＋写真） | |
| 店内 | 横スクロールギャラリー（スクロール連動） | |
| ご予約の流れ | ステップ案内（横4列・アイコン） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| 店舗案内 | 表（項目と内容） | |
| よくあるご質問 | FAQ（クリックで開閉）（デザイン：枠つき・開くとアイコンが×に） |
全14種類のパーツのうち、10種類は製品版でのみ使えるものです。写真が止まるブロックや横スクロールギャラリー、パララックス背景は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
和食店のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- コースの内容は、細かく書いたほうがいいですか
- 品数と価格、だいたいの流れまで書けば十分です。食材は季節で替わるので、「旬の魚のお造り」くらいの書き方にしておくと、更新しなくて済みます。
- 個室の有無は、どこに書けばいいですか
- 「お部屋」のページを1つ作るのがおすすめです。接待や家族の集まりで探す方は、席数と個室の広さをまず見ます。
- 予約の方法は、電話だけでもいいですか
- 構いません。このデモでは「ご予約の流れ」を手順にして、電話とお問い合わせフォームの両方を案内しました。
この構成で作れるサイト
和食店以外にも
このデモは割烹・和食店を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
料亭／寿司店／天ぷら店／蕎麦店／バー／隠れ家レストラン など、「雰囲気を写真で伝えたい」お店であれば、そのまま当てはまります。
縦書きのメニューは、5〜6項目までがきれいに並びます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る