ホーム
季節の日本料理。カウンターと個室。
<< デモ一覧に戻る
日本料理店のデモ
- このページでは、Frames CMS の製品版で実際に作った日本料理店のサイトをご紹介します。カウンターと個室のある、季節の日本料理のお店を想定した、5ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ13種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、サロン向けのフレームの生成りの背景を墨色に、茶色のメインカラーを金茶に変えています。同じフレームでも、背景を濃くするだけで夜のお店の雰囲気になります。
まずは全体像から
このデモの構成
5つのページで構成しています。トップでごあいさつ・お料理・店主の仕事・お献立・営業時間までを見せ、「お料理」と「店内」のページでくわしく伝える構成です。
01
02
お料理
コースと昼の御膳。
03
店内
カウンターと個室。
04
お知らせ
日本料理 さんぷるからのお知らせ一覧です。
05
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「salon2（中央ロゴ・メニューに日本語表記）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
ロゴをヘッダーの中央に置き、その下にメニューが並ぶフレームです。メニューの名前の下に小さな補足の文字（サブ表記）が入り、メイン画像はスライドショーです。
フレームの見本から変えたところ
管理画面の「デザイン → テーマカラー」で、背景色を墨色に、文字色を生成りに、メインカラーとアクセントカラーを金茶に、薄い色（差し色）を背景より少し明るい墨色にしています。背景色と文字色を入れ替えるように変えると、フレームの形はそのままに、印象だけが大きく変わります。
枠線の色だけ、CSSで少し暗く
テーマカラーで選べる5色のほかに、枠線の色（メニューの上下の線など）だけを少し暗くしています。管理画面の「デザイン」にある「このフレームのCSSを直接編集する（上級者向け）」で、--bg-border-color の色を書き換えただけです。暗い背景のときは、線を明るくしすぎないと落ち着いた印象になります。
写真を大きく、文字は少なく
お料理は大1枚＋小2枚のピックアップギャラリー、店主の仕事は写真2枚を重ねたコラージュ、焼き物・個室・甘味は写真の上に文字を重ねたリンクにしています。墨色の背景は、料理の写真の色をいちばんきれいに見せてくれます。
メニューのサブ表記を「日本語の補足」に
メニュー管理の「サブ表記（任意）」に、「コース」「カウンター・個室」「お電話・フォーム」のような短い補足を入れています。英語ではなく日本語にすると、そのページに何があるかが伝わります。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。背景が墨色なので、白いロゴを使っています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「salon2」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
サロン
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 朝の市場で、その夜の献立を決めます。 | 基本セット（見出し＋本文＋画像） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| お料理 | ピックアップギャラリー（大1枚＋小2枚） | |
| 店主の仕事 | コラージュ（写真2枚＋テキスト） | |
| お献立 | コース・メニュー一覧 | |
| 焼き物・個室・甘味 | オーバーレイ（画像リンク・横並び） | |
| 営業時間 | メニュー名と価格（2列） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| ご予約への誘導 | CTA（大きなアイコン＋テキスト＋ボタン） | |
| お知らせ | お知らせ一覧（自動） |
お料理
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| お料理 | コース・メニュー一覧 | |
| 画像（1枚） | 画像（1枚） | |
| お飲みもの | メニュー名と価格（2列） |
店内
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 店内 | ギャラリー（複数画像） | |
| よくあるご質問 | FAQ（クリックで開閉） |
全13種類のパーツのうち、10種類は製品版でのみ使えるものです。ピックアップギャラリーやコラージュ（写真2枚＋テキスト）、コース・メニュー一覧は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
日本料理店のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 昼と夜で料金が違うときは、どう載せればいいですか
- コース・メニュー一覧で、1品ずつ「夜・全9品」「昼・平日のみ」のように書き分けるのがおすすめです。このデモでは、月と太陽のアイコンで夜と昼を分けました。
- 営業時間は、どこに載せればいいですか
- トップの下のほうと、フッターの両方にあると親切です。このデモでは、トップに「メニュー名と価格」のパーツを使って、昼・夜・ラストオーダー・定休日を2列で並べました。
- 料理の写真は、何枚くらい必要ですか
- トップはコースの写真1枚と、お造り・天ぷらなどの2枚で十分です。季節ごとに入れ替えると、「また行きたい」と思ってもらえます。
この構成で作れるサイト
日本料理店以外にも
このデモは日本料理店を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
割烹／寿司店／天ぷら店／料亭／バー／ワインバー など、「夜の落ち着いた雰囲気で、お料理を見せたい」お店であれば、そのまま当てはまります。
メニューのサブ表記は、英語にも日本語にもできます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る