立正大学の地球環境科学部はとりわけニッチな学問で、「よくわからない」「面白くさなそう」と思われていることが最大の課題。しかし「世の中の事象すべてが研究対象です」と、教授は笑顔で言いました。日常のささいな出来事には、自然環境や社会構造、国際関係、歴史、文化、都市構造、経済状況など、さまざまな事情が重なりあっています。サイトデザインには学ぶときに必ず浮かぶ「?」を5パーツに分割し、学科を連想させる色を採用。パーツの組み合わせ次第で違う学問になる、そんな学問の面白さを、学生にもわかりやすく伝えていくコミュニケーションを目指しました。

「地球環境科学部」と言われて、自分の目指す分野だ！と思う高校生は、そこまでいないように感じます。多くの受験生はこれが何を学ぶ場所なのか甚だ見当がつかず、見過ごしてしまう可能性が大いにありました。
しかし教授陣の話を伺うたびに、私たちのふだんの生活に深く根ざした学問であること、そしてそれが大人の私たちにとってもすごくワクワクするような内容であることがわかりました。したがって、学部名から連想されるマイナスイメージをなくし、わかりやすく、楽しい学問であることを知ってもらうためのコミュニケーションが求められました。

ふだんの生活に根ざした学問であることを訴求するため「すべての疑問が、学問になる。」というテーマを設定。デザインでは「?」マークを5分割したパーツを思い切ってに全体に散りばめました。?はバラバラになって地球上に散りばめられた学問へのヒントを表すと同時に、組み合わせ方によって生物・地球コース、気象・水文コースのそれぞれの学問も表しています。ビビッドなパーツの色は、教授たちが撮りためた自然の写真からスポイトで抽出しました。

デザインの裏テーマはEarth, Polite, Diversityです。
・興味や疑問に対してフィールドワークと分析を通して探求する姿勢
・ひとりひとりに寄り添った学びを提供する教授陣や学問の幅と100年の歴史
・人文 / 地理 / 自然科学など文理両軸の専門性を持つ当学部の多様性や柔軟性
それらを高校生や保護者の皆さんに楽しく感じてもらうことを意識し制作しました。

実装面では、Reactベースの静的サイトジェネレーターであるGatsbyJSを採用。開発日数がタイトだったためページ遷移のトランジションを入れることが困難でしたが、Gatsbyのプラグインを使うことで実装時間の短縮ができ、実装することができました。「?」と、5つのモチーフのアニメーションは、スクリプトで制御するためにSVGのデータを調整し、パーツの位置や傾きを一つずつ手作業で設定する必要がありました。時間のかかる作業ではあったものの、トップページのメインビジュアルや、背景、トランジション部分でも同じスクリプトが使えるよう実装しました。