ホーム
〇〇市の夏まつり。8月1日・2日。ステージ、花火3,000発、屋台60店。
<< デモ一覧に戻る
夏祭り（実行委員会）のデモ
- このページでは、Frames CMS の製品版で実際に作った夏祭り（実行委員会）のサイトをご紹介します。ステージ・花火・屋台のある、地域の夏祭りの実行委員会を想定した、7ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ16種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、メニューの「プログラム」を見出しにして、ステージ・花火・屋台をプルダウンにまとめています。
まずは全体像から
このデモの構成
7つのページで構成しています。当日に知りたい「時間」「場所」「交通」を、探しやすくまとめています。
01
02
ステージ
2日間のステージのプログラム。
03
花火
花火の時間と、見やすい場所。
04
屋台
屋台の出店エリアと、おすすめの屋台。
05
会場・アクセス
会場への行き方と、交通規制。
06
お知らせ
さんぷる夏まつり実行委員会からのお知らせ一覧です。
07
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「pop1（丸い背景・帯キャッチ）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
ヘッダーからメイン画像の上半分まで、下の角が大きく丸いメインカラーの背景が入るフレームです。キャッチは1行ずつ帯付きで、広い画面でも右上に丸い開閉ボタンが出ます。
メニューの「プログラム」をプルダウンに
メニュー編集で、リンクの種類を「見出し（リンクなし）」にした「プログラム」の下に、3つのページを入れています。ヘッダーでは、プルダウンメニューになります。
数字で盛り上げる「実績カウンター」
花火の数・屋台の数・来場者数を、数字が動いて増えていくパーツで見せています。イベントのサイトとよく合います。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。ヘッダーがメインカラー（赤）なので、白いロゴを使っています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「pop1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
カフェ
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 第32回 さんぷる夏まつり | 実績カウンター（数字） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| ページへの入口 | オーバーレイ（画像リンク・横並び） | |
| 去年の夏まつり | お客様の声（横スクロール・文字だけ） | |
| 参加しませんか | CTAセクション（ボタン横並び） | |
| お知らせ | お知らせ一覧（自動） |
ステージ／花火／屋台
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| ステージ | 多列テーブル（自由な列数） | |
| 去年のようす | サムネイルギャラリー（クリックで大画像切替） | |
| お知らせボックス | アラート（お知らせボックス） | |
| 花火 | スポット紹介（テキスト＋段違いカード） | |
| 花火の会場 | 埋め込み（YouTube・地図・iframe） | |
| 屋台 | 写真＋アイコンのカード | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） |
会場・アクセス
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 会場・アクセス | ステップ案内（横4列・アイコン） | |
| 画像（1枚） | 画像（1枚） | |
| 電車・自転車・交通規制 | 表（項目と内容） |
全16種類のパーツのうち、13種類は製品版でのみ使えるものです。実績カウンターやオーバーレイ、サムネイルギャラリーは製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
イベントのサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 雨で延期になったときは、どう知らせればいいですか
- 花火のページにアラート（お知らせボックス）で「延期のときは当日15時にお知らせします」と書き、当日はお知らせ記事で出すのがおすすめです。
- 毎年のイベントは、どこを直せばいいですか
- 日付と、ステージの表、お知らせの3か所だけで済むように作っています。
- 出店者やボランティアの募集は、どこに載せればいいですか
- このデモのように、トップの下のほうに「参加しませんか」のボタンを並べ、お問い合わせフォームにつなぐのがおすすめです。
この構成で作れるサイト
夏祭り以外にも
このデモは夏祭り（実行委員会）を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
マルシェ・フリーマーケット／音楽フェス／スポーツ大会／文化祭／商店街のイベント／展示会 など、「年に1回の、日付と場所が決まったイベント」であれば、そのまま当てはまります。
メインカラーを変えると、背景の丸い部分とヘッダーの色がまとめて変わります。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る