全国対応年中無休 24時間電話受付 携帯・PHSからも通話可能
0120-900-5870120-900-587
簡単一括見積はこちら

【2020年版】学校のホームページ制作についてまとめてみた

【2020年版】学校のホームページ制作についてまとめてみました


学校や教育機関のホームページというのはどんなホームページにすればいいと思いますか?

今ではほとんどの情報はホームページから確認することができます。
学校のホームページへアクセスする方は、この学校へ進学を希望する生徒さんだったり、子供がどこの学校へ進学させるかを考えている親御さんになります。
そんな方たちに少し目を向けてあげたサイトにするだけでユーザビリティが向上します。

学校や教育機関のホームページ制作を考えている方はこの記事を参考にしていただけたら幸いです。


ホームページ制作.jpってどんなサービス?

  1. 審査済のホームページ制作会社に見積もり依頼ができる
  2. お客様に適切な制作会社を探すことができる
  3. 無料でお断り代行サービスもしてもらえる
  4. 何度でも無料相談ができる

ホームページ制作.jpでお手間なく一括で制作会社を探すことが可能。

ホームページ制作.jpに一括見積もりを依頼する

記事監修者の紹介

田丸 修太

株式会社エフ・コネクト マネージャー
飲食業界からWEB業界へ転身後、自社のWEB広告運用を担当。
現在はマーケティング領域からサイトのディレクション、お客様のヒアリング対応まで幅広く業務に携わっています。

1. 参考にしたい学校のホームページを解説

1.三田国際学園 中学校・高等学校


http://www.mita-is.ed.jp/

まずは三田国際学園 中学校・高等学校のホームページを解説していこうと思います。

ご覧になっていかがでしょう? トップページの目を引かれたと思います。
カラフルな背景と動きのある画像とテキストで学校の情報を最大限に表現しています。
学校のwebサイトはカラーがシンプルかつ青色を基調としていますが、三田国際学園さんはカラフルな色を沢山使っています。
カラフルですが、メインカラーは青色と学校・教育機関に欠かせない色を使っているのが特徴です。

授業風景も写真を使用していて情報量も豊富で、次の情報をユーザが見たいと思わせるような配置になっています。
そして次に注目すべきなのは、学費や学校関係にかかる費用の部分をテーブルで見やすくしていることです。
ある程度のデザインは大切ですが、一番大事なのはユーザに見やすいことであり学費もしっかりとわかりやすいものになっています。

三田国際学園 中学校・高等学校のホームページ解説としては、カラフルなデザインでユーザの目を引き、情報量をたくさん吸収させるデザインにあると思います。

2.島根県立津和野高等学校


http://tsuwano.ed.jp/

島根県立津和野高等学校のホームページの解説です。

こちらも素晴らしく最近のwebの流行りを取り入れていますね。
トップページの情報が動画になっているのがわかりますでしょうか?
これは大手のアパレル会社やブランドサイトなどが行う表現なのですが、伝えたいことやイメージを動画にしてしまうのです。動くものに目がいくのが人間です。

最初にページを開いてから必ずユーザはその学校の情報を目にすることでしょう。
こちらはyoutubeの動画を加工して表示していますので、どのブラウザ、端末でも表示ができるので、古い端末は表示されない。という問題もクリアされていますね。

各セクションの見出しもフォントを変えていて、アクセントをつけているのもわかります。
文字の表現も「大人」を「オトナ」や「生徒」を「セイト」としていたり言葉の遊びもありおしゃれですね。
各下層ページも背景色が違っていて情報の整理もされていますね。
学校のホームページの中でもかなりデザインに力を入れているホームページだと思います。

3.洗足学園中学校


https://www.senzoku-gakuen.ed.jp/

洗足学園中学校のホームページ解説です。

こちらも島根県立津和野高等学校のホームページと同じで最初に動画を表示している構成です。
画質もよく学校内の情報やどんな生徒がいるのかをはっきりと情報公開していますね。
注目するのがユーザが戸惑わないこと。最初の動画を見ていると「このあとどうするの?」と思う方もいると思いますが、skipの表示だったりスクロールが表示されるなどユーザが何をしたらいいのかのユーザビリティも考えられています。

各コンテンツのページも色がはっきりしていて、学校・教育をテーマにした青と緑をうまく使っています。
デザインがいいサイトはユーザが戸惑ってしまうことが多いのですが、洗足学園中学校のホームページはグローバルナビも画像を表示したりと「どこに行けば情報がわかるのか?」を視覚的にわかりやすくしているデザインになります。
ただ、洗足学園中学校のホームページに限ったことではないのですが、トップページに動画で表現するのは全てのユーザに対して適切なのかを考えなければ行けないのもポイントです。
通信環境が悪いユーザになってしまうと動画の読み込みに時間がかかり、ホームページ自体の表示も遅れてしまうのです。

4.青山学院初等部


http://www.age.aoyama.ed.jp/

青山学院初等部のホームページ解説です。

こちらは上記のサイトと違い、トップページは動画ではありません。
メインビジュアルに校庭を表示して学校のイメージを大きく表現しているのがわかりますね。

テーマカラーは薄い緑とこちらも教育機関のイメージカラーに適しています。
アクセントカラーや他の各コンテンツのページでもオレンジや黄色といったカラフルな色で表現していて、決して硬くない配色で表現しています。
初等部ということもあり、小学校という表現もありボタンもユーザが押したくなるように角丸にしたりアクセントカラーで目立たせており、校内の写真や生徒の顔も沢山公開していて、楽しそうなイメージを伝えています。

コンテンツとして面白かったのはスクールカレンダーのページです。
その月の目玉のイベントをサムネイル化して一覧にしています。
すぐ見て、「こんなイベントがあるんだ」とすぐにユーザがわかりますし、なにより写真や画像での表現は生徒さんの楽しそうなイメージを表現していると思います。

2. 学校のホームページ制作費用・相場観ってどれくらい?

ますはデザイン作成になり、webサイトは1ページだけではありません。
トップページというメインのページと下層ページと2つに分かれます。
下層とは通販サイトでいうところの商品ページですね。
デザイン制作の費用としてはトップページの金額が大きくなっていきます。
その下層ページを流用して、下層ページの作成ができるようになっていきます。
そこからバナーの作成だったりボタン画像の作成などです。
デザインといっても多岐にわたる種類を作ることになることを念頭に置いておきましょう。

もうひとつはコーディングです。
デザインしたものをweb上に表示させなければなりません。
そのためにコーディングというプログラミングをしていく作業になります。

こちらもトップページと下層ページで金額が大きく分かれていきます。
トップページを作成してそのまま下層ページを流用していくというのがよくある方法です。
ここで注意すべきなのは、デザイン作成で表現できない「動き」になるかと思います。
HTMLやCSSだけでなく、javascriptやJqueryといった動きをつけるための言語です。

プログラミング的な部分とは他に、SEO対策といった検索エンジンに特化したサイトにするための施策を考えなければならないということも必要になります。
デザインも素晴らしく動きのあるサイトを作ったとしても「人に見られなければ意味がありません」SEO対策をしっかり行い、検索上位を狙っていき、ユーザにたくさん見られるサイトにすることも必要になっていきます。

3. 学校のホームページ制作で大事な3つのこと

1.ブランディング

ブランディングとは共感や信用を通じてお客さんにとって価値をどんどん高めていくことになります。
しかし、ただ学校の情報を公開すればいいというものでもありません。
学校の写真や教室の授業風景といったことも大事ですが、その学校独自の「校風」を発信していかなければなりません。 最近でよく言うインスタ映えに似ているかもしれません。
そこでしか見られないものやその人にしかないものといったように、その学校でしか学べない「校風」をPRしていくことが大事です。

学校独自の「校風」をアピールしていくことで、それはブランディングになります。ホームページはただ綺麗なものを作っただけでは意味がありません。サイトに流入してユーザに見られなければ意味がないです。 なので、デザインより、一番重視して考えるのは、その学校独自の校風=ブランディングを強調をしていったほうがいいです。
校風を前面に押し出すサイト構成にすることで、ブランディングを計り、ユーザの目を引きます。
サイトデザインも重要ですが、その学校独自の情報を発信していくことも必要にあります。

2.学校内の写真

学校の写真も大事な情報です。
これは学校に限らず言えることなのですが、病院や美容室、飲食店だったりお客さんが足を運んでお客さんがサービスを体験する施設の情報を公開するのであれば施設内の写真は必須情報になっていきます。
どんな施設かわからないところでサービスを受けようとは思わないですよね?
ユーザーに求められているのはクリアな情報です。

学校のホームページ制作となると、教室の写真はもちろん、体育館や校舎の写真といったように誰もが気になる情報を公開していきましょう。
ここで確認するのは学校側にどこまでの写真情報を公開していいのか確認を必ずとってください。
公共施設になるのでもちろん全ての情報を公開してはいけないので学校側に確認しましょう。

ホームページ制作のテクニックとしては、写真をphotoshopで加工するといいかもしれません。校舎も古い学校などがありますのでやりすぎは注意です。
少し綺麗に見えるように、情報公開していい施設はどんどんユーザに公開していきましょう。

3.先生の声

学校のホームページ制作でこれが一番必要といっていいかもしれません。
ユーザーが気にしていることをもう一度確認しましょう。
どんな校風なのか?どんな施設なのか?と、最も気にすることが「どんな教育理念の先生がいるのか?」です。
先生がどんな人なのか?人となりを知りたがるのがユーザーになります。
もっと言えば、どんな学歴があり、どんなことをしてきたのか?子供も同じようになれるのか?ということを親御さんは考えるでしょう。

ただ、顔写真を公開して、プロフィールを載せてだといまいちです。
最近のwebサイトであればインタビュー形式で公開していくことが特に効果的です。
インタビュアーと教師が話しているように、質問を投げかけます。
その質問は誰しもが気になっていることにしましょう。
教育理念やその学校行事に対しての思いでもいいです。
文字だけでは伝わらない感情も写真で伝えていくようにしていきましょう。

4.サイトに動きをつける

学校のサイトということもあり、公的な施設です。ということも考えれば硬いサイトデザインになってしまってくると思いますが、決してそんなことはありません。
ユーザの層としてはその学校にお子さんを入れたいと考えている親御さんとその学校に進学を希望している学生さんです。
動画など動きがあるもので目に止まるサイト作り最近だと多く見受けられます。

4. 学校のホームページ制作で必要なデザイン要素

ここまでは学校のホームページ制作に関するユーザビリティと金額の部分についてご紹介いたしました。公開する情報だったりブランディングといったことです。ここからはweb制作における技術的なことになります。
色味だったりレイアウトなどこの部分がきになってくるのではないでしょうか?
その部分にるいて深く解説していきます。

1.学校に合わせた配色を考える

ホームページで最も重要なのは配色です。
ここで重要なのはただ自分がかっこいいと思った色味ではいけません。
その校風にあったテーマカラーをしっかり使うことが大切です。

テーマカラーをメインカラーにして、アクセントカラーだったり類似色をつかったりと色味にもメリハリをつけることが大切です。
学校や教育機関のwebサイトでよく使われる色は、落ち着いた色の寒色になります。
わかりやすく言うと柔らかい色の青色だったりします。
学校や教育機関での青色は知識や学業をイメージする色になります。硬すぎず柔らかすぎずの印象ですね。

その他にも緑色もおすすめです。緑色は植物のイメージですが、植物は成長を表すイメージカラー。
学力を伸ばす印象としてはおすすめの色になります。
大切なのは校風のテーマカラーになりますが、上記の色を工夫して学校という教育機関の表現を色でしてみましょう。

2.デザインも大事だがユーザビリティも大切

上記で書いたことと矛盾していますが、デザインも大事ですが、堅実にどのブラウザでも崩れないホームページ制作をお勧めします。
その理由は、学校や教育期間のサイトを閲覧するユーザのブラウザは比較的古いブラウザでの閲覧が多いためです。

webの知識に慣れている学生さんはモダンブラウザを使用する傾向になります。
これはどの業界に拘らずです。親御さん世代はレガシーブラウザからの流入が多いのです。
レガシーブラウザとはInternetExplorerの古いバージョンのことを指します。
ほぼと言っていいほど、最新のデザインや動きのあるサイトは表現ができず、画面が崩れてしまいます。
この段階でユーザは「この学校の情報見れないんだ」となり離脱をしてしまいます。
年配の方にもここでしっかりわかりやすい情報が汲み取れるように表現する必要があります。
要件定義の段階でしっかりとどのユーザをターゲットにするのか?を決めておく必要があるので注意が必要です。

5. まとめ

長くなってしまったのですが、大きく分けて2つをまとめていこうと思います。 まずは、ユーザビリティとして、学校や教育機関のホームページ制作で重要なのは、しっかりとその校風を伝えること、学校施設の写真を公開してどんな施設で学べるのか、どんな先生が教育理念をもって生徒と接しているのかを伝えることが大事になります。

デザインの部分としては、インタビュー形式で先生の顔写真をつけて生の声を表現することポアララックス効果や動きをつけてユーザの目を引くことが大事になっていきます。
しかし動きすぎることなくレガシーブラウザでもしっかりと崩れることなく表示させて年配の方にも問題なく見れるようにしましょう。
校風を伝えることも大事ですが、要件定義でどのユーザに向けて情報を発信していくのか?デザインも複雑になりすぎないか?ということも決めてホームページ制作を進めていきましょう。
学校や教育期間の色味も青色や緑色をメインカラーにしていくことも忘れずにしましょう。 学校のホームページといえば硬いイメージですが、それを取り除く表現で他の学校のホームページと差別化を測って作成していきましょう。

ホームページ制作のことでお困りのことはありませんか?

優良制作会社を一括比較することで適正な【価格】がわかります!

ホームページ制作会社の一括見積もりサービス

  1. 審査済のホームページ制作会社に見積もり
  2. お客様に適切な制作会社を探すことができる
  3. 無料でお断り代行サービスもしてもらえる
  4. 何度でも無料相談ができる

お急ぎの方はお電話ください。0120-900-587

ご担当者名

未入力です。

ご連絡先電話番号

無効な電話番号です。

メールアドレス

無効なメールアドレスです。