ホーム
着物と浴衣のレンタル。着付け・ヘアセット込みで、手ぶらで町歩き。
<< デモ一覧に戻る
着物レンタルのデモ
- このページでは、Frames CMS の製品版で実際に作った着物レンタルのサイトをご紹介します。着付けとヘアセット込みで、手ぶらで町歩きができる着物レンタルのお店を想定した、5ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ16種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、紺の暗い背景のフレームを、生成りの白と深い赤に変え、背景の飾り画像を「使わない」にした「こんな使い方もできる」の見本です。縦書きのメッセージも、お店の言葉に差し替えています。
まずは全体像から
このデモの構成
5つのページで構成しています。「いくらで」「どう借りるか」の2つを、それぞれ1ページにしています。
01
02
プラン
レンタルのプランと料金。
03
ご利用の流れ
ご予約から返却まで。
04
お知らせ
着物レンタル さんぷるからのお知らせ一覧です。
05
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「tategaki1（縦書きメッセージ・縦長の写真）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
トップに縦書きのロゴ・縦書きのメッセージ・縦長の写真が横に並ぶフレームです。メニューは左上のボタンで開きます。
フレームの見本から変えたところ
「デザイン → テーマカラー」で、背景色を紺から生成りの白に、文字色を濃い茶色に、メインカラーを金茶から深い赤に、アクセントカラーと「薄い色（差し色）」も明るい配色に合わせています。さらに「デザイン → このフレーム専用の素材」で、背景の飾り画像を「この素材を使わない」にし、縦書きのメッセージを「着物で歩く、いつもの町。」から始まる文に書き換えました。暗い配色のフレームでも、明るく上品な印象になります。
写真を大きく見せるブロックを2つ
着付けのことは写真2枚を重ねるコラージュ、柄と小物は大きな写真1枚と小さな写真2枚のピックアップギャラリーで見せています。選べる着物は、写真をやわらかい形に切り抜いて並べるパーツで、「列の並べ方」を「3列」にしました。
予約までの流れを、トップに全部入れる
料金はプラン比較表、ご利用の流れは横4列のアイコンのステップ、そのあとにお客さまの声と、背景写真のご予約への誘導を置いています。「ご利用の流れ」のページでは、番号と写真の入った縦のステップでくわしく説明しました。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。トップのロゴは細い縦長の枠（幅50px）に出るので、縦書きのロゴ画像を「メイン画像の上に重ねるロゴ（任意）」に入れています。ほかのページのヘッダーは色つきのロゴ、深い赤のフッターでは「フッター用ロゴ（任意）」に白いロゴを入れました。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「tategaki1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
和菓子屋
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 着物を着ると、いつもの町が少しちがって見えます。 | 基本セット（見出し＋本文＋画像） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| 選べる着物 | かわいい形のカラム（自動幅・マスク選択） | |
| 着付けのこと | コラージュ（写真2枚＋テキスト） | |
| プラン | 料金表（プラン比較） | |
| 柄と小物 | ピックアップギャラリー（大1枚＋小2枚） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| ご利用の流れ | ステップ案内（横4列・アイコン） | |
| お客さまの声 | お客様の声（星評価） | |
| ご予約への誘導 | CTAセクション（背景写真） | |
| お知らせ | お知らせ一覧（自動） |
プラン／ご利用の流れ
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| プラン | 料金表（プラン比較） | |
| オプション（税込） | 表（項目と内容） | |
| よくあるご質問 | FAQ（Q&Aマーク付き・カード型） | |
| ご利用の流れ | ステップ案内（縦・番号＋画像） | |
| 画像（1枚） | 画像（1枚） | |
| お店の場所 | アクセス（案内＋地図） |
全16種類のパーツのうち、13種類は製品版でのみ使えるものです。かわいい形のカラムやピックアップギャラリー、プラン比較表は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
着物レンタルのサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- プランは、いくつ用意すればいいですか
- 3つくらいが選びやすい数です。このデモでは、いちばん人気の「ヘアセット付き」に「おすすめ」の印を付けました。
- 予約の締め切りや返却の時間は、どこに書けばいいですか
- 「ご利用の流れ」のステップの中に書くのがおすすめです。このデモでは「前日までに」「18時までにご返却を」と入れ、トップの縦書きのメッセージにも営業時間を入れました。
- 持ち物は書いたほうがいいですか
- 「何もいりません」と書くだけで、安心してもらえます。このデモでは、プランのページのよくあるご質問に、用意しているものを書きました。
この構成で作れるサイト
着物レンタル以外にも
このデモは着物レンタルを想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
呉服店／写真館／和装の着付け教室／茶道・華道の教室／和雑貨店／旅館 など、「和の雰囲気で、上品に見せたい」ところであれば、そのまま当てはまります。
背景の飾り画像は、差し替えも非表示もできます。縦書きのメッセージは、空欄にすると表示されません。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る