【高等学校ホームページ】おしゃれ・見やすい・素敵な13校のWebデザインを徹底解説しました！

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

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

それではどうぞ。

かっこよくて仕掛けも面白い「愛農学園農業高等学校」

https://ainogakuen.ed.jp/

まず最初にご紹介しますのが、愛農学園農業高等学校のホームページです。その名の通り、農業に関連する高校だと思うのですが、もうこのトップページの見た目からして格好良くないですか。

単に牛がバーンと写っているわけではなく、作業をする生徒と牛が、逆光の中に浮かび上がるように写っている。こういう一枚の写真からセンスを感じますよね。そして、「命をはぐくみ命をつなぐ」というキャッチコピーも素敵でございます。

ファーストビューでもう一つ気になったのが、画面の左下に「2℃」と表示されているところです。おそらく、ホームページを開いた時点での現地の天気と気温、この時は曇りで2℃だということを示しているんだと思います。こういうのって、言ってしまえば何の役にも立たないんですけど、いや、ちょっとそれは言い過ぎですかね。もしかしたら、実際に学校に通う生徒さんに向けて、「こういう寒いところでやっていく覚悟はありますか」という意味も込めているのかもしれない。そういうちょっとした仕掛けに、ものすごくセンスを感じるんですよね。

スクロールしていくと、エフェクトを伴ってメッセージが表示されたり、お知らせの表示の仕方も面白い。まるで定規のようなデザインでお知らせが紹介されていて、シンプルなんですけど、こういう細かいところにこだわりが感じられます。

全体的に写真も少し「エモめ」なもので統一している感じがしますし、動画の再生ボタン一つとっても、よくあるYouTubeのマークではなく、オリジナルのデザインになっている。こういう細部へのこだわり、素晴らしいです。受付か下駄箱か、そのあたりの雰囲気もオシャレで、学校そのものも素敵な空間なんだろうなと想像させられます。

キャッチコピーが最高な「京都芸術大学附属高等学校」

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

続いてご紹介するのは、京都芸術大学附属高等学校さんのホームページです。このホームページで何が一番素敵かというと、もうこれに尽きます。「ええかげん、変わりたいわ。」というキャッチコピーが、本当に素敵ですね。

これ、考えた人は天才だと思います。この言葉は、親御さんに向けたメッセージではないんですよね。おそらく、学生本人に向けたメッセージなんです。この年頃って、勝手な個人的な見方かもしれませんが、いわゆる中二病をこじらせていたりして、ダラダラ生きていく自分を「変えたいな」と思っているような生徒には、ブッ刺さるんじゃないでしょうか。関西弁の響きも相まって、すごく素敵だなと思わされました。

デザイン面では、スクロールしていくと常に画面の上部にメニューが追従して表示されるようになっていて、お問い合わせへの導線もしっかり確保されています。全体的にポップな雰囲気で、文字を白抜きにしたり、写真が少し押されたように見えるアニメーションが付いていたりと、細かいところまで工夫されていますね。

オリジナルのものと思われるイラストも、柔らかい印象を打ち出すのに一役買っています。そして、個人的に素敵だなと思うのが、縦書きをバランス良く交えている点です。縦書きをデザインに上手く落とし込むのはなかなか難しいので、見事だなと感じます。ただ、ちょっと残念なことに、一部で模様が文字の上にかぶってしまっている箇所がありました。もし、このブログを学校関係者の方が見ていらっしゃったら、修正されると、より良くなるんじゃないかなと思います。

生徒をよく考えていることが伝わる「東京立正中学校・高等学校」

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

続いてご紹介するのは、東京立正中学校・高等学校さんのホームページです。朝日が差し込むような美しい写真から、もうセンスを感じざるを得ませんが、全体的にはゴールドを基調としたデザインで統一されています。

ここのホームページで一番「いいな」と思ったのが、「生徒を幸せにする5つの目標」というコンテンツです。これはあんまり見たことのないコンテンツですよね。この学校が生徒さんを幸せにするために5つの目標を掲げている、ということが紹介されているのが、とても素敵です。

「生徒を幸せにする」というのは、ある意味で勇気のいる約束だと思うのですが、そういったことをきちんとホームページで打ち出していくところに、学校としての自信や誠実さを感じるコンテンツなんじゃないかと思います。

いい意味で「無難」という魅力「東京学芸大学附属高等学校」

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

次にご紹介するのは、東京学芸大学附属高等学校さんのホームページです。緑色を基調とした、全体的にかなりシンプルな作りになっています。特に際立った特徴がないと言ったら失礼かもしれませんが、むしろその「特徴がないこと」が逆に特徴になっている、という感じがします。

もう、見やすさに徹底的にコミットしていらっしゃるな、というのがすごく伝わってきます。シンプルなのが悪いことでは全くありません。学校さんによっては、「あまり攻めたことをしたくない」「集客のために頑張っている学校、という見られ方はちょっと…」という考えのところも多いんですよね。そういう学校さんにとっては、このシンプルさは非常に参考になるのではないでしょうか。

メニューの見せ方が素敵な「中央大学高等学校」

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

続いてご紹介いたしますのが、中央大学高等学校さんです。学園祭でしょうか、楽しそうな写真が印象的なホームページなのですが、少しスクロールすると、画面の横からメニューが「びよん」と出てくるんです。これ、面白いですよね。

通常は、三本線の「ハンバーガーメニュー」を押すとメニューが出てくる、という形が多いのですが、このサイトではスクロールに連動して表示される。「あなたの見たいところにすぐ行けますよ」という、親切心を感じる仕掛けです。学校のホームページは、在校生、受験生、保護者の方など、見てほしい人がたくさんいて、ページ数も膨大になりがちです。だからこそ、メニューの見せ方にはすごく苦労するんですよね。その工夫の一つとして、非常に面白い見せ方なんじゃないかなと思い、ご紹介させていただきました。

写真の見せ方がトレンディな「錦城高等学校」

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

次にご紹介しますのは、錦城高等学校さん。もう、ぱっと見からセンスを感じてしまうホームページです。写真をただ見せるのではなく、バラバラに見えるようにコラージュされているのが面白い見せ方だなと思います。3つの枠に人がうまく収まるように配置されていて、これは相当こだわって写真を選んだんじゃないでしょうか。

スクロールしていくと、ここも面白いなと思うのが、「文武両道」という部分です。「文武」の文字の周りを、サークルを描くように別の文字が動いている。単純に言葉を見せるだけでなく、アニメーションを伴って表現しています。そして、ページの最後には「日常を覗いてみよう」ということで、インスタグラムのように素敵な写真が流れていきます。やはり学生さんにとっては、写真が素敵だと掻き立てられるものがあるかと思いますので、こういった見せ方というのも一つのやり方なんじゃないかなと思います。

Googleマップの使い方が素敵な「獨協中学高等学校」

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

続いては、獨協中学高等学校さんのホームページです。トップページでは動画と共に「知性を磨き 人格を育む」というキャッチコピーが表示されますが、このホームページで素敵だと思ったのは、ページ下部の地図です。

Googleマップが表示されるようになっているのですが、これがきちんとカスタマイズされているんです。学校のロゴマークがピンとして表示されるように工夫されていて、さらに、よくあるカラーのマップではなく、サイト全体の雰囲気に合わせてネイビー調で色が統一されています。こういった配慮が、サイト全体の「世界観を壊さないようにしている」という意味で、すごく素敵なんじゃないかと思いますね。

SNSアイコンの見せ方が面白い「立教池袋中学校・高等学校」

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

次にご紹介するのは、立教池袋中学校・高等学校さんのホームページです。最初はムービーから始まり、その後写真のスライドに切り替わるという、ファーストビューで見せるものにこだわりを感じるデザインです。

個人的に仕掛けとして面白いなと思ったのは、ページ上部にあるSNSのアイコンです。通常、SNSのアイコンは各種SNSのマークがズラッと並んでいることが多いのですが、こちらの学校さんは「SNS」という一つのボタンを押すと、「どのSNSに行きますか？」というのが展開して表示される。この見せ方は新しいなと思いました。メニューの見せ方も含め、導線の確保という、学校ホームページの難しい課題に試行錯誤した結果、こういったユニークな見せ方になったのではないかと感じます。

更新しやすさを感じる「明治大学付属明治高等学校・中学校」

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

続いてご紹介するのは、明治大学付属明治高等学校・中学校、中高一貫校さんですかね。デザインもイマドキでオシャレな感じに仕上がっていて、「無難に素敵」という印象です。これはちゃんと、全力で褒めているんですよ。

いいなと思ったのが、学校紹介ビデオがページの中段に埋め込まれている点です。まずはニュースなどを見てもらいつつ、「大事なところは動画で見てください」という構成は、多くの学校で採用できるやり方なんじゃないかと思います。

そして、お知らせが非常に長い。これはもう「学校あるある」かなと思います。やはり学校はお知らせすることが多いんですよね。一般企業はそんなにお知らせすることはないですが、学校はたくさんある。このメニューの長さは、すごく共感できる部分です。

このホームページの一番の特徴は、トップページよりも下層ページにあるかもしれません。下層ページは、サイドにメニューがあり、右側で内容を更新するというシンプルなスタイルになっています。これはオシャレなあしらいなどはないものの、とにかく内容を伝えることに真剣で、見やすく、そして何より更新がしやすい。ページ数が増えてくると管理が大変になる学校のホームページにおいて、この「メンテナンス性」を重視した作りは、非常に優れていると感じました。

トップページから下層ページへの導線が分かりやすい「成城学園中学校高等学校」

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

続いてご紹介いたしますのが、成城学園中学校高等学校さんです。さわやかな見た目のホームページですが、個人的にいいなと思ったのが、各コンテンツへの導線の見せ方です。「学校紹介・教育」「学校生活」「入試・進路」といったメニューが、単に文字だけで並んでいるのではなく、美しい写真の上に配置されています。

これにより、どこにどの情報があるのかが、ぱっと見で非常に分かりやすくなっています。とにかく本当にページ数が多い学校のサイトにおいて、利用者を迷わせずにサイト内をスムーズに循環してもらうか、というのは一つの大きなミッションです。その点で、この見せ方は非常に参考になるのではないでしょうか。

イラストがおしゃれで先進的な「札幌新陽高等学校」

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

続いては、札幌新陽高等学校さんです。これも写真からおしゃれな様子が伝わってきますね。我々プロからすると、写真にセンスがあると「おっ」と思います。「これはもう、ただ事じゃないぞ」というのが、写真のクオリティーを見るだけで伝わってくるんです。

写真が上手に撮れているか、というよりも、写真を通じてエモーショナルな気持ちを乗せられているか。そういった写真を選べているのが素晴らしいですね。デザインも全体的にシンプルで、オリジナルのイラストも素敵です。

そして、面白いと思いましたのが、なんと校長先生がnoteをやっているんです。「READ MORE」のボタンを押すと、校長先生が学校の様子について書いているnoteに飛ぶようになっています。すごく先進的な校長先生ですよね。こういう新しい取り組みをしている学校に、今だったら行きたいなと思ってしまいます。

素敵な学校生活を連想させる「能登高留学」

https://notoko-ryugaku.com/

次にご紹介するのは「能登高留学」というホームページです。これは学校そのもののホームページというより、「能登の高校に留学しましょう」というプロジェクトのサイトかもしれません。

これもやはり写真が素敵ですし、手書き風の文字なんかが学生の心をくすぐるんだろうな、というのが伝わってきます。可愛いイラストが効果的に使われていて、サイト全体で独自の世界観がしっかり作られていますね。

ワクワクウキウキが詰まった「大竹高等専修学校」

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

最後に紹介させていただくのが、大竹高等専修学校さんです。これはもう、トップページからすごい。一度ページをリロードすると、ポップなイラストと文字、そして写真がアニメーションを伴って動き出します。この、ぱっと見から伝わるワクワクウキウキ感、すごくないですか。

水色、赤、黄色とカラフルなんですが、チカチカしない絶妙なバランスでデザインされていて、これは相当デザインのレベルが高いですね。調理師さんや美容師さんを目指せる学校のようですが、写真の見せ方が、まるで学生の時に写真を切り抜いてノートに貼っていたアルバムのような雰囲気なんです。こういうのはもう、学生の心を分かっているデザイナーさんなんだろうな、というのが伝わってきます。こういったアート方面に感度の高い方が目指す学校として、その心をばっちり捉えられているんじゃないでしょうか。このホームページを見た限りでは、応募者がかなり集まっているんじゃないかと、勝手に思ってしまいますね。

まとめ：プロはホームページのどこを見ているのか

いかがでしたでしょうか。たくさんのホームページを一気にご紹介しましたが、「プロはこういうところに着目してデザインを見ているんだな」というところが、少しでも伝わればと思いピックアップさせていただきました。

高等学校、特に公立ですとなかなか予算をかけられないため、オシャレなホームページは少ないのが実情です。しかし、私立や中高一貫校などでは、ホームページをおしゃれにして、生徒さんや保護者の方に響くように様々な工夫を凝らして作られていることが分かりました。

そして、何回もお伝えしましたが、学校のホームページ制作で大きな課題となるのが、その膨大なページ数です。「多いページ数を、どう見てもらうか」という点に、各校が知恵を絞っている。今回ご紹介したサイトには、そのヒントがたくさん隠されているように思います。