ホーム
〇〇市の私立高等学校。進学・総合・アートの3コース。
<< デモ一覧に戻る
私立高校のデモ
- このページでは、Frames CMS の製品版で実際に作った私立高校のサイトをご紹介します。3つのコースがある私立高校を想定した、7ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ16種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、メニューで「ボタン」にした「資料請求」と「オープンスクール」が、ヘッダーの右に並びます。その下に、均等な幅のメニューの帯が入ります。
まずは全体像から
このデモの構成
7つのページで構成しています。受験生と保護者が知りたい「コース」「学校生活」「入試」を、それぞれ1ページにしています。
01
02
学校案内
校長あいさつ・教育方針・数字で見る学校・沿革。
03
コース紹介
進学コース・総合コース・アートコース。
04
学校生活
1年の行事と、部活動・施設のご紹介。
05
入試情報
入試日程・募集人数・オープンスクールのご案内。
06
お知らせ
さんぷる学園高等学校からのお知らせ一覧です。
07
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「menuband1（ボタン付きヘッダー・均等メニュー帯）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
ヘッダーの右にボタン、その下に均等な幅のメニューの帯が並ぶフレームです。表示中のページのメニューには、小さな三角の印が付きます。
「ボタン」にした項目が、ヘッダーの右に
メニュー編集で「ボタン」にした項目は、ヘッダーの右に並びます。資料請求やオープンスクールのような「行動してほしい」項目を、いつも見える場所に置けます。
数字で見る学校は「実績カウンター」
生徒数・部活動の数・進学率などを、数字が動いて増えていくパーツで見せています。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。ヘッダーが濃い色なので、白いロゴを使っています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「menuband1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
総合病院
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| お知らせ | お知らせ一覧（自動） | |
| ページへの入口 | オーバーレイ（画像リンク・横並び） | |
| 在校生の声 | お客様の声（横スクロール・文字だけ） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| 受験生のみなさんへ | CTAセクション（ボタン横並び） |
学校案内／コース紹介
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 学校案内 | 横長レイアウト（テキスト＋写真） | |
| 画像（1枚） | 画像（1枚） | |
| 数字で見る、さんぷる学園 | 実績カウンター（数字） | |
| 沿革 | 沿革・年表（タイムライン） | |
| コース紹介 | 見出しが追いかけてくるブロック |
学校生活／入試情報
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 1年の行事 | 横スクロールのカード（手で動かす） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| 部活動・施設 | 写真＋アイコンのカード | |
| 入試日程 | 多列テーブル（自由な列数） | |
| 募集人数 | 表（項目と内容） | |
| オープンスクール | 汎用レイアウト（画像＋テキスト・配置選択） |
全16種類のパーツのうち、13種類は製品版でのみ使えるものです。実績カウンターや見出しが追いかけてくるブロック、入試日程の多列テーブルは製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
学校のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 生徒の写真は載せても大丈夫ですか
- 本人と保護者の許可を取ったものだけにします。後ろ姿や遠くからの写真でも、学校の雰囲気は伝わります。
- 入試の情報は、毎年どこを直せばいいですか
- このデモでは、日程を多列テーブル1つにまとめています。毎年、表の中身を書き換えるだけで済みます。
- 在校生の声は、どう集めればいいですか
- 短い一言で十分です。このデモでは、横スクロールの文字だけのパーツで、コースと学年を添えて並べました。
この構成で作れるサイト
学校以外にも
このデモは私立高校を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
専門学校／大学のサークル／学習塾／予備校／スポーツクラブ／企業の採用サイト など、「資料請求や説明会の申し込みを、いつも見えるところに置きたい」ところであれば、そのまま当てはまります。
ヘッダー右のボタンは、2つまでがきれいに並びます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る