ホーム
〇〇市の認可保育園。0歳から5歳まで、定員60名。園庭と畑のある保育園です。
<< デモ一覧に戻る
保育園のデモ
- このページでは、Frames CMS の製品版で実際に作った保育園のサイトをご紹介します。0歳から5歳までの、園庭と畑のある認可保育園を想定した、6ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ17種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、写真のスライドショーの真ん中にロゴを重ね、その下にメニューの帯が並ぶフレームを使っています。メインカラーを若草色、アクセントカラーをオレンジに変えました。
まずは全体像から
このデモの構成
6つのページで構成しています。保護者が知りたい「1日の流れ」と「入園の手続き」を、それぞれ1ページにしています。
01
02
園について
保育の方針と、園舎・園庭のご紹介。
03
1日の流れ
登園から降園までの1日と、年間の行事。
04
入園のご案内
定員・保育時間・入園の手続き・見学について。
05
お知らせ
さんぷる保育園からのお知らせ一覧です。
06
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「frame9-slide（スライド背景・ロゴ中央）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
画面いっぱいの写真のスライドショーの真ん中にロゴを重ね、写真のすぐ下にメニューの帯が並ぶフレームです。メイン画像の高さは、1枚目の写真の縦横比に合わせて決まります。
若草色とオレンジで、園庭の明るさを
「デザイン → テーマカラー」で、メインカラーを若草色（標準は青）、アクセントカラーをオレンジに、背景色をほんのり温かい白に変えています。メニューの帯とフッターが若草色になり、写真の緑とよくなじみます。トップには、園庭の写真2枚のレイアウトと、数字で見る保育園のセクションを入れました。
1日の流れは「スケジュール」
時刻とアイコンと説明を、縦に並べるパーツです。登園からお迎えまでを、保護者が具体的に思い浮かべられます。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| ようこそ | 基本セット（見出し＋本文＋画像） | |
| 大切にしていること | カラムリスト（画像・見出し・本文） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| 園庭と畑 | テキスト＋写真2枚（角丸と丸） | |
| 数字で見る、さんぷる保育園 | 実績カウンター（数字） | |
| お問い合わせへの誘導 | CTA（誘導ボックス） | |
| お知らせ | お知らせ一覧（自動） |
園について／1日の流れ
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 園について | 写真に文章が回り込む横長ブロック | |
| 画像（1枚） | 画像（1枚） | |
| 先生たち | スタッフ紹介 | |
| 1日の流れ | スケジュール・1日の流れ | |
| 横スクロールギャラリー（スクロール連動） | 横スクロールギャラリー（スクロール連動） | |
| 季節の行事 | 写真が止まるブロック（ふわっと切り替え） |
入園のご案内
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 入園のご案内 | 表（項目と内容） | |
| お申し込み・お問い合わせ | CTAセクション（ボタン横並び） | |
| LINEのご案内 | LINE誘導セクション（QR＋ボタン） | |
| よくあるご質問 | FAQ（クリックで開閉） |
全17種類のパーツのうち、12種類は製品版でのみ使えるものです。スケジュールや写真に文章が回り込むブロック、LINE誘導セクションは製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
保育園のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 子どもの写真は載せても大丈夫ですか
- 保護者の許可を取ったものだけにします。顔が分からない後ろ姿や、手元の写真でも、園の雰囲気は十分に伝わります。
- 空き状況は載せたほうがいいですか
- 認可園の場合は、市の窓口で確認してもらうよう案内するのが確実です。このデモのよくあるご質問にも、その一文を入れました。
- 行事の写真は、どれくらい載せればいいですか
- 季節ごとに1枚ずつくらいで十分です。このデモでは、春・夏・秋・冬の行事を横長のブロックで並べました。
この構成で作れるサイト
保育園以外にも
このデモは保育園を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
幼稚園／認定こども園／学童保育／子育て支援センター／小児科／子ども向けの教室 など、「やさしい雰囲気で、保護者に安心してもらいたい」ところであれば、そのまま当てはまります。
写真の上のロゴは白にしています。明るい写真の上でも読めるよう、写真は人や建物がはっきり写ったものがおすすめです。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る