目次
BRIK GALLERYについて
デザインやコンテンツの参考になる国内最大規模のWebサイトリンク集・デザインギャラリーの BRIK GALLERY では、日々クリエイターの方々の参考になる作品を更新しています。
クリエイティビティを刺激し、デザインの参考になり、仕事に役に立つ、Webサイトなどを中心に紹介しています。BRIK GALLERYでは、カテゴリーやタグから検索し、気になった作品はお気に入り機能で保存可能な機能があります。
作品は、INDUSTRY (業種)、TYPE (Webサイトなどの種類)、COLOR (キーカラー)、DESIGN (デザイン表現の方法) などのカテゴリーで分類されています。ここから目的としているデザインを絞り込んで探すことが可能です。
本特集では、BRIK GALLERYに掲載されている作品の中から、特定のテーマで作品をピックアップしていきます。
学校のWebサイトに求められることとは？ 🤔
現在、大学をはじめとした多様な高等教育機関の存在によって、志願者は以前よりもたくさんの選択肢が与えられる様になりました。この様な状況下で、各学校は特色を打ち出そうと試みており、デザインにおいてもその考え方は踏襲されています。具体的には、強み、特長、特色などと整合性を取りながら、高いクオリティのデザインを実現させ、学校ブランドを高めることが求められています。
そこで本記事では、学校向けのWebサイトの制作時にデザインやコンテンツの面で参考になる、優れたサイト13選をピックアップし解説していきます。
ご紹介する作品は、以下の3つの基準を元に選出しました。
- ✅高等教育以上の学校（高校、専門学校、大学、研究機関）
- ✅大学の特長・特色や魅力をアピールし、学校ブランドが高められているデザイン
- ✅メインターゲットである受験生が、学習内容やキャンパスライフなどの学生生活を具体的にイメージできるデザイン
デザインの参考になる学校ウェブサイトの紹介 🎓
神山まるごと高専
生徒の起業を支援したりと先進的な校風が売りの神山まるごと高等専門学校。
新しい取り組みにチャレンジしている高校ですが、ハンドライティングの人物イラストや曲線の多用から、オープンで親しげな印象を与えます。また余白やマス目の背景の使い方にも注目です。
東京音楽大学付属高等学校
https://www.tcm-koko.ed.jp/音楽教育における伝統校である東京音楽大学付属高校のWebサイト。装飾を削ぎ落とし、情報を凝縮させたミニマルなデザインが特長。シンプルなデザインに、大きめの写真とフォントを使用することで、感覚的にすっと情報が入ってきます。
また、トップページは大胆にもニュースの記事のみが配置されています。これは記事を通してサイト訪問者に高校の多面的な魅力を１番初めに知ってもらえるような仕組みになっています。また、時間帯によって背景の色の濃淡が変化するという仕掛けも興味深いです。
MEJI NAVI 2023
https://www2.mejiro.ac.jp/univ/mejinavi2023/
目白大学の受験生向けサイト。カラフルな色使いやイラスト、マイクロインタラクションの使用から、多様な生徒が在籍し、それぞれの夢に向かって楽しそうに学んでいる様子がデザインを通して表現されています。在学生を紹介するページでは、ファッション系のデザインが採用されており、キラキラした大学生活を想像させます。
目白大学の受験生向けサイトは何年かおきに大きくリニューアルされており、いずれも高いデザインクオリティで注目です。
札幌国際大学 スポーツ人間学部
札幌国際大学スポーツ人間学部の受験生向けサイト。この学部は、圧倒的に男子学生の比率が高いようですが、サイト内に掲載されているインタビュー記事は女子学生ばかり。おそらく旧来の「体育大学」が持つイメージを刷新し、より多くの女子学生にも関心を持ってもらいたいというねらいがあることが伺えます。
デザインを見てみると、細めのフォントやカラフルな背景、陸上トラックを思わせるモチーフなどを使用し、爽やかさやナチュラルさを表現することで、スポーツの新たな一面を魅せることに成功しています。
信州大学 農学部
https://www.shinshu-u.ac.jp/faculty/agriculture/pakapaan/
信州大学農学部の受験生向けサイト。農業あるいは農学部のネガティブなイメージを一新しようとしている狙いが感じられ、見事に成功しています。「パカパーン」というユーモア溢れるサイトタイトル、アンダーグラウンドなカルチャーを連想させるユニークな文字使い、ポップなカラーリングなど一度見たら記憶にしっかり刻まれるデザインです。
intro! 学習院大学 受験生応援サイト
https://gakushuin-admissions.jp/
学習院大学という伝統を感じさせる大学の印象を良い意味で裏切る、キャッチーなイラストを使ったポップなデザインです。カラーリングも最低限に抑えつつ、飽きがこさせずに見せられています。ページがスクロールするにつれて、学校の説明が順次表示されれるスクロールテリングの手法が上手く使われています。
明治理工ラボ
https://www.meiji.ac.jp/sst/riko-lab/
明治大学理工大学の受験生向けサイト。
ページのスクロールに合わせて表示されていくコンテンツのひとつひとつに、トラジションなど細かい動きが施されていて、とても丁寧な作り込みがなされています。それでいてくどくなりすぎていないバランス感覚が優れています。
また、全体的に無駄な装飾がなく誠実でスタイリッシュな印象を受けますが、角丸のモチーフや曲線を各所で利用することで等身大の親しみやすさも同時に感じられます。
東京都立大学
東京都立大学の公式サイト。シンプルなレイアウトの中にも学内風景や学生の写真を可能な限り多く配置し、学校の雰囲気や活気を上品に伝えています。また、枠線の色や濃淡を適切な位置に上手く活用することで、大量の情報をすっきりと整頓できています。
三重大学
三重大学の公式サイト。世界 (Global) と地域 (Local) を両立させ、自然環境を含む恵まれた環境で伸び伸びとした大学生活を送れる様子が表現されています。レイアウトは余白を活かしながら、必要十分な要素が上品に整理されています。
神戸女学院大学 文学部英語学科
神戸女学院大学文学部英語学科のサイト。明朝体や手書き風の英語の筆記体、ゆったりとしたモーション、細めの枠線は上品さを演出しています。また、上部と下部でのグラスモーフィズムの使用も温かみや優しさを感じられます。
よく見ると、パステル調のカラーを多用しているのですが、線の色に使ったり、使う面積を少なく抑えているため、散漫な印象にならずに、チャーミングなテイストを上手く作り出しています。
東北大学大学院 理学研究科・理学部
東北大学大学院理学研究科・理学部のサイト。
様々な要素を雑誌や新聞の紙面の様に、線を上手に使いながら美しくレイアウトしたデザインです。ミニマルな要素でありつつも、ディテールのパーツに工夫を凝らすことである意味でポップで興味を引く工夫がなされています。
情報整理にも工夫が凝らされており、上から下に向かうにつれて、各要素やカラムの区切りが少しずつ細かくなってきています。ワイヤーフレームの段階から熟考されているかと窺えます。
京都芸術大学 アートプロデュース学科
京都芸術大学アートプロデュース学科のサイト。
丸みを帯びた特徴的なWebフォント (AXISラウンド コンデンス、ほか) が大胆に使われているのが印象的なデザインです。学科のテーマに合わせて、美術館やギャラリーのテイストを感じさせています。emojiやプッシュ通知を思わせる丸みやネオンカラーなどの色味は、受験生の年代である10代後半から〜20代前半のZ世代が親しみを持てるデザインとなっています。
立命館大学 先進研究アカデミー
立命館大学の中核研究者で構成された組織RARAのサイト。
トップページのレトロなコラージュは、当大学の叡智が結集した様を表しているようで非常に印象的です。表示時やスクロール時のモーションもこだわっており、「先進研究」というテーマがデザインとしてうまく表現されています。コラージュやマイクロインタラクション、大きめのタイポグラフィなど要素が満載ですが、余白を上手く活用することで洗練された仕上がりになっています。
優れた学校のWebサイト10選のまとめ
学校のWebサイトの制作時にデザインやコンテンツの面で参考になる、優れたWebサイト13選をピックアップし解説していきました。どのサイトもそれぞれの学校が持つ唯一無二性や特色を適切に掴み、様々な技法やデザインを組み合わせて表現されていたと思います。ぜひこれからの制作の参考にしてみてください。
