【高等学校】おしゃれで素敵なホームページ制作デザイン13選まとめ！工夫ポイントも紹介！

今回は高等学校のホームページの中から特徴的であったり、印象的であったり、工夫が見られる素敵なデザインをいくつかピックアップいたしました。これからリニューアルをする際の参考にぜひしてみてください。

公立高校は、例えば東京都であれば東京都の用意したフォーマットでどうやら制作されているようでしたので、紹介する高校の多くが私立高校になります。

それではどうぞ。

学校法人 愛農学園農業高等学校

https://ainogakuen.ed.jp/

めちゃめちゃかっこいいです。正直に申し上げますと、大学のホームページに比べ、高校のホームページは全体的にクオリティが位置段階下がるイメージなのですが、こちらのデザインは負けていないクオリティではないでしょうか。

キャッチコピーから、各種ページへの導線の魅せ方も工夫があります。また面白かったのが、北の方の高校ということもあってか、現在の気温がリアルタイムで表示されていて、環境についても知ることができるようになっています。

京都芸術大学附属高等学校

https://shs.kyoto-art.ac.jp/

「ええかげん、変わりたいわ」のキャッチコピーが素敵です。ほとんどの高校生が大人になりゆく自分であったり、他人を羨むようになってきたりなど、ぶっ刺さりまくりなのではないでしょうか。

スクロールをするとファーストビューのイメージとは若干変わり、親しみ易い雰囲気になるのもギャップがあっていいですね。

東京立正中学校・高等学校

https://www.tokyorissho.ed.jp/

もっとも特徴的だと感じたのは「生徒を幸せにする５つの目標」というコンテンツ。なかなか生徒を幸せにする、と公言するのは勇気のいることだと思いますが、これを掲げることによる自信や信頼感が素敵です。また学校コンセプトと言われるよりも、生徒や保護者は見たくなるかもしれませんね。

東京学芸大学附属高校

https://www.gakugei-hs.setagaya.tokyo.jp/

あまり攻めたデザインにしたくない、そういった高校さんも実際はかなり多いのではないでしょうか。そういった高校に参考となりそうなので紹介させていただきました。まったく攻めていないといったら失礼かもしれませんが、そのぶんスッキリとしていて見やすいです。デファクトスタンダードというのは実はユーザーにとってはいいことで、どこになにがあるかが想像しやすいので、コンテンツも探しやすいのではないでしょうか。

中央大学高等学校

https://www.cu-hs.chuo-u.ac.jp/

多くのページが必要となる高校のホームページですので、導線に非常に悩むことが多いと思います。こちらの学校のホームページで参考になるのは、閉じた状態のハンバーガーメニューがスクロールをすると出現するところ。ハンバーガーメニューはスマホ向けのメニューですが、多くのページを収納しやすいといったメリットもあります。そのメリットをうまく活かしたアイデアではないでしょうか。

錦城高等学校

https://www.kinjo-highschool.ed.jp/

写真の魅せ方がトレンディーです。インスタのように並んだ写真を１つの写真で表現するような魅せ方です。またゴリゴリにアニメーションを利用するのではなく、見て欲しいポイントでアニメーションを効果的に利用している点も参考となります。個人的に珍しい「MORE」ボタンも気になりました。

獨協中学・高等学校

https://www.dokkyo.ed.jp/

ワイドスクリーンサイズでは、サイドにメニューを表示するレイアウトが特徴的です。こういったメニューが好きなユーザーも実はたくさんいます。他にはGoogleマップもただの埋込ではなく、デザインされた埋め込みで全体の世界観を壊さないようにした工夫もしています。

立教池袋中学校・高等学校

https://ikebukuro.rikkyo.ac.jp/

ファストビューにムービーを設置する学校も多いです。高校に限らず大学などでも多いです。サイトの読み込みが遅くなってしまうというデメリットもありますが、それでもはやり動画で伝える情報量は膨大で、学校の雰囲気を感じてもらう効果は抜群です。

メニューバーに「SNS」というアイコンがあり、オンマウスすると各種SNSへのリンクが表示される仕掛けは珍しい見せ方で面白かったです。

明治大学付属明治高等学校・明治中学校

https://www.meiji.ac.jp/ko_chu/

全体がネイビーで統一されたデザインです。ファーストビューで動画を見せるのではなく、ページ中段でYouTubeを埋め込むスタイルです。動画で知りたい人には動画で、といったスタンスも素敵ですね。

デザイン的には特別尖っているというわけではないですが、情報更新も多いのが高校ホームページの特徴ですから、更新のしやすさという点が考慮されているのではないかと思います。

成城学園中学校高等学校

https://www.seijogakuen.ed.jp/chukou/

全体がブルーで爽やかなWebデザインになっています。個人的に参考にしてもらいたいと思ったのは、ページ中段より少し下のあたりに「学校紹介」「教育」「学校生活」「入試・進路」という各種ページへの移動コンテンツがあるのですが、まとまっていて非常に見やすいと思いました。

札幌新陽高等学校

https://sapporoshinyo-h.ed.jp/

おしゃれです。そして可愛らしさや柔らかさも兼ね揃えています。クオリティの高い手書きイラストがいい味を出しています。スクロールをするとページがめくれるようなアニメーションとなっていて、見て欲しいコンテンツをしっかり見せるデザインです。また校長先生がnoteを更新されているのも現代的で素晴らしいですね。READMOREボタンも工夫されています。

能登高留学

https://notoko-ryugaku.com/

イラストと楽しそうな写真が素敵な学校生活を想像させる感じで素敵でしたので紹介させていただきました。また他県から多くくる学生のことも考慮して、その土地について（今回は能登町について）の紹介があるのも、学生さんにとってフレンドリーなコンテンツではないでしょうか。

大竹高等専修学校

https://www.ohtake.ac.jp/

ウキウキわくわくが全部詰まった感じのホームページデザインです。カラフルな色使いは実はまとめるのが難しいのですがアニメーションとも合わせてうまくまとめています。保護者というよりも、学生さんに刺さるように全振りしたようなデザインが、独創的で好感が持てるのではないでしょうか。