学校サイトのUIは「通学前の下見」？学生目線でブランドが伝わるデザインの作り方

学校サイトを「通学前の下見」として捉える

学校サイトは、多くの学生にとって最初の接点であり、「通学前の下見」にかなり近い体験です。 校舎・先生・学生の雰囲気まで、すべてを画面越しに想像しながら見ています。ここで効くのは、「何を載せるか」より「どう見えるか・どう動けるか」。 ・安心して情報を探せるか ・自分ゴトとして想像しやすいか ・学校の“らしさ”が一瞬で伝わるか UIの役割は、この3点をビジュアルと導線で支えること。ブランド表現と可用性をセットで設計できるかが、検討テーブルに乗るかどうかの分かれ目です。

学生ペルソナを「志望シナリオ」から描く

学校サイトのペルソナは、属性だけ切り出しても浅くなりがちです。ジェイ・ラインでは、次のような「志望シナリオ」を軸に組み立てます。 ・どのタイミングでサイトに来るか（進路検討初期／オープンキャンパス直前など） ・何と比較しているか（他校サイト、進路情報サイト、SNS口コミ） ・不安と期待は何か（学費、就職実績、雰囲気、レベル感）これをもとに、「最初の3クリックで何を見せたいか」「離脱トリガーは何か」を洗い出し、ワイヤーの段階から体験ストーリーとして落とし込みます。

トップページは“3つの入口”で設計する

トップは、すべてを語ろうとすると破綻します。学校案件では、だいたい次の“3つの入口”に整理します。 1. 学校の全体像（学部・学科、特徴、キャンパスライフ） 2.進路の安心感（就職・資格、卒業生の声、データ） 3. 行動への一歩（資料請求、オープンキャンパス、個別相談）ヒーロー周りで「らしさ」を伝えつつ、スクロールに合わせて“この学校を選ぶ理由”が自然に積み上がるように構成。ファーストビューでのボタン配置も、学生の検討フェーズ別にラベリングを変えることでクリック率が変わってきます。

スマホ前提のナビゲーションと検索行動

実際のアクセスは、ほぼスマホが中心。ナビゲーションはPCの縮小版ではなく、「親と学生の同時閲覧」まで意識して設計します。 ・グロナビは4〜5カテゴリに集約し、補助ナビを下層で展開 ・「学科から探す」「めざす職業から探す」など検索思考ベースの入口を用意 ・オープンキャンパスやイベントは、どのページからも1タップで行ける固定エリアに配置 指のリーチ、スクロール量、フォーム入力ストレスなど、モバイル特有の制約を前提に、最初からコンポーネント設計を行うのが前提です。

学校の“らしさ”を体験に落とすチームワーク

ブランドの言語化 →体験設計 → ビジュアル、の行き来は、デザイナー単独では完結しません。 ジェイ・ラインでは、企画段階からディレクター・ライター・デザイナーが同じテーブルに入り、 ・「この学校ならでは」が伝わるエピソード ・実際のキャンパスでの動線や時間の流れ ・先生・在校生の口癖や会話トーン といった一次情報を共有します。デザイナーはここから、色・フォント・写真ディレクション・マイクロコピーなどを組み合わせ、単なる「キレイ」ではない、体験としての“らしさ”に落としていきます。

実案件で意識しているUI/UXのツボ

学校サイト案件でよく効くのは、次のような小さな工夫です。 ・キャンパスライフ系コンテンツは「1日の流れ」「時間割」など、具体的な時間軸で見せる ・複数キャンパスがある場合、位置関係・通学時間をインタラクティブに可視化 ・保護者向けコンテンツは、学生向けとは別の語り口とFAQ構造にする ・イベント申込フォームは入力ステップを極力削り、途中離脱時にもリカバリー導線を用意 こうした改善ポイントを、アクセス解析やヒアリングとセットで回し、リリース後もUI改善サイクルを回していくのが前提です。

学校サイト案件に関わるデザイナーの成長ポイント

学校サイトは、「誰に、何を、どう伝えるか」を総合的に鍛えられる領域です。 ・ペルソナとシナリオ発想を前提にした情報設計 ・ブランドとUXを両立させるビジュアル設計 ・ディレクター、ライター、エンジニアとの協業による上流〜実装までの一気通貫の関わり ジェイ・ラインでは、自社メディア運営や採用サイト制作のナレッジも活かしつつ、学校ごとの課題に踏み込みながら設計していきます。「このブランドなら、こういう体験にしたい」と自分なりの答えを言語化し、チームで磨いていける環境は、UI/UXデザイナーとしての引き出しを着実に増やしてくれるはずです。