1

• ホームページビルダーの操作方法がわからない・・・（バージョンアップしたら操作方法が大幅に変わった）

• ホームページ担当者が異動したら更新ができなくなってしまった・・・

• 特定のパソコンからしかホームページの更新ができない

学校Webサイト運営の課題

ホームページビルダーなどで作成してるWebサイト

新しいホームページ作成ツール【CMS】をご活用ください

HTML

CSS

CGI

JavaScript

2

CMS（シー・エム・エス）とは？CMS (コンテンツ・マネージメント・システム）技術的な知識がなくても、テキストや、画像等の「コンテンツ」を⽤意できれば、ウェブによる情報発信をおこなえるように⼯夫されている仕組み

専門知識 専用ソフト 専用のパソコン

Internet ExplorerなどのWebブラウザを使いブログ感覚でホームページを更新できます

3

① 最初にテンプレートを選んで頂いたら、システム側でデザインの初期構築を行います

CMSで作成する学校Webサイトの例

② 初期構築が完了したら、文章と画像を入力するだけで簡単にホームページを更新できます

4

テンプレート（5種類）と基本画像

5

お問合せ、サイトマップは全ての学校に共通で汎用性が高いため、ヘッダー内の共通の位置に配置し、視認性を高めます。

学校デザインの中でよく採用される、アースカラー色の強いグリーンを基調にしたデザインです。

中段部分のバナーメニューは、クローズアップしたいコンテンツなどを配置することで、さらにアクティブ性をＰＲ出来ます。（バナー表示する項目は、グローバルメニュー部分と重複しても良いです）

テンプレートA: グリーン（横メニュー）

グローバルメニュー

バナーメニュー

6

清楚な印象を持たせるため

のカラーの一つとして、ブルーを基調としたデザインです。

複数コンテンツを保有し積極的に拡張していくことを念頭において、Webサイトを運営され

ている学校向けに、中段バナーメニューも画像を使用して、充実した内容を表現しやすいデザインです。

テンプレートB: ブルー

7

縦メニューとレフトナビの混合デザインです。

横メニューに基本コンテンツ、縦メニューにサブコンテンツや詳細コンテンツを配置するような形で構築される学校には適したデザインです。

縦メニューだけで運用されたい学校の場合は、横メニューのグローバルメニューを省いてもデザインとして機能するようデザインしております。

カラーは高貴で品のある印象を与えるパープルを基調にしています。

テンプレートC: パープル（縦メニューあり）

縦メニュー

8

縦メニューバージョンのパステルグリーンを基調としたデザインです。

渋いイメージのグリーンとはまた違った、健康的なイメージ且つ、若葉のような青々しさ、初々しさを印象付けるカラーです。

若々しさをＰＲできるので、小学校に適したカラーリングです。

テンプレートD: グリーン（縦メニュー）

9

落ち着いた印象を与

え、さらに視認性も高い、アイボリー調のデザインとなります。

ベーシックな色調、レイアウトで、万人受けするデザインです。

テンプレートE: アイボリー

10

初期構築段階で 低限準備頂きたい項目

②メイン画像校舎や風景など任意（校歌は必須ではありません）サイズはデザイン確定後に決定

③問い合わせメールアドレスpostmaster@ など学校代表のもの

①学校ラベル画像サイズはデザイン確定後に決定

11

画像サイズ

テンプレート Aグリーン

Bブルー

Cパープル

Dグリーン

Eアイボリー

必要画像

学校ラベル画像

タテ 96 x ヨコ 307

メイン画像

タテ 367 x ヨコ 956 タテ 301 x ヨコ 790 タテ 303 xヨコ 950

任意画像

バナー画像

タテ 90 x

ヨコ 90タテ 95 x

ヨコ 220タテ 111 x

ヨコ 250タテ 111 x

ヨコ 250無し

12

新しいWebサイト公開までの流れ

◆ヒアリングシートの記入

◇テンプレート（別紙）の選択

◇基本画像の準備

◇その他

◆学校毎にWebサイトの初期構築（デザインのみ、記事・コンテンツ無し）

◆CMS用のID・パスワードの配布

◆CMSにログイン

◆記事（文章・写真）の入力

◆（必要に応じて）メニューの並び替えなどのカスタマイズ

◆システム切り替え

◇市教委ホームページからのリンク先を変更

◇旧Webサイト→新Webサイトへの誘導設定

一般公開（8月～10月頃）

学校担当者様に実施して頂く内容

旭川ケーブルテレビが実施する内容

7月18日（木）迄

8月1日（木）頃～8月15日（木）頃～

7月末迄

13

Q. 学校Webサイトのデザインや操作方法以外の変更点は？

A. URLが一部変更になります

例:【現状】

http://www.hokuchin.els.asahikawa-hkd.ed.jp/

【変更後】

http://www.asahikawa-hkd.ed.jp/hokuchin-els/

※一定期間は旧URLに来訪された利用者は、新URLにジャンプするようにいたします。（2014年3月までを予定）

刊行物、及び、お名刺等は順次変更頂けますようお願いいたします

Q&A