こんにちは。ディレクターの藤木です。
さて、今回は高校野球も盛り上がっていることですし、デザインが素敵な高等学校のWebサイトを探してみました。
大学サイトのまとめはあるんですが、高校はなかなかないんですよね。
素敵なサイト、たくさんありました！
大竹学園 大竹高等専修学校
調理・服飾専門の学校ならではの楽しいポップなデザイン。
授業シーンやクラブ活動、卒業生の声など、学校の風景や生徒の顔が多く掲載されているので、雰囲気が伝わってきます。
ポップだけど飽きの来ないデザインで、余白の取り方や色合いなど参考にしたいです。
適切な見出しと写真を用いて構成されているため、各ページへの導線も非常にわかりやすいです。
島根県立津和野高等学校
メインビジュアルに動画を起用したり、全画面で表示するデザインだったり、スクロールの動作がカッコイイ！
Webトレンドをふんだんに取り入れたサイトになっています。
見た目だけでなく、学校の目標や教育についてもしっかり掲載されていて信頼感、安心感のある学校だと感じられます。
三田国際学園中学校・高等学校
国際学校らしい、グローバルで多彩なデザイン。
メインビジュアルでは生徒の活躍、留学生との交流など学校の雰囲気が、すごく伝わってきますね！
単純なスライドではなく、写真と文字を表示するタイミングをずらすことでどちらも目にとまるようになっています。
梅花中学校 梅花高等学校（女子校）
かわいくてキラキラした女子校らしいデザイン。女子校のサイトはピンクをベースにしたものが多いですが、こちらのサイトは様々な濃淡のピンクを使ってメリハリが付いたデザインです。
生徒が写った写真を多く起用し、学校生活がイメージしやすいデザインです。
実際に掲載されている生徒たちはとても楽しそうで、通いたくなりますね！
海城中学高等学校
色、フォントとデザインに統一感があり美しいサイトです。
基本的に文字はデバイスフォントで構成されており、Retina対応のディスプレイでも綺麗に見えます。
ポイントにWebフォントを使用してデザインを美しく見せる工夫をしています。
各カテゴリに合った背景写真もとてもきれいです。
※スマホ未対応
東京電気技術高等専修学校
「電気技術」というと固いイメージがありますが、色えんぴつで描いた優しいイラストやあしらいを用いることでサイト全体がやわらかいイメージで親しみやすいデザインになっています。
※スマホ未対応
学校法人上田学園 上田西高等学校
落ち着いた色合いや見やすいフォントでデザインされており、保護者ウケもバッチリ。
ナビゲーションも左側にまとめられており、目的のページにたどりやすいUIになっています。
トップページのニュースは夏休み中もたくさん更新されており、特にクラブが盛んなことがわかりますね！
ヒューマンキャンパス高等学校
デザイン・芸術、ファッション、声優・タレントなど20種以上の専門分野から自分に合った分野を学べる高校。多くの分野が学べる学校ならではの楽しい色とりどりのデザイン。
さまざまな色をうまく使い、カラーごとにわかりやすくカテゴライズしています。
大阪国際大和田中学校高等学校
大胆に幅いっぱいを使用したデザインで、インパクト大！
生徒の顔はもちろん、「教員が熱心」というアピールを大々的に明示しており、しっかり教育してくれそうです。
「校長先生ブログ」コンテンツがあり、頻繁に更新されているよう。
どんな学校なのか、トップページからすぐにわかるので、親御さんも安心ですね。
帝塚山学院中学校高等学校（女子校）
万華鏡で覗いたようなシンボルを背景や見出しにあしらっていて、綺麗ですね。
メインビジュアルでは学校の特徴を写真とコピーでわかりやすく表現しています。
まとめ
いかがでしたでしょうか。
高等学校のサイトを探していると、最近リニューアルしたと思われるものは幅いっぱいにレイアウトし左にグローバルナビを置くパターンが多いように思いました。
大学までのページ数とはいかないようですが、やはりコースやカリキュラムなど掲載すべき情報は多いので整理するには良いレイアウトなのだと思います。
ほとんどのサイトがスマホ対応もしていました。最近では小学生・中学生でもスマホを持っていますし、親御さんも40代〜50代の方が多いのでスマホ対応は必須なのでしょう。
高等学校のWebサイトを制作する際の参考になれば幸いです！
