オフラインでは約60名だった参加が、オンライン博覧会では12,000名を超える学生のログインに

(AIサポート)

回答は指定データのみを使用し、各文に出典を付けます

(課題)

学校情報は量が多く複雑で、選択肢の多さが学生に一目で伝わらない

交換協定校は世界各大陸に広がり、全289校に及びます。情報量が多く複雑です。一般的なワンページ型のサイトでは、これほど多くの学校を一度に表示するのは難しく、画面も整いにくくなります。

このイベントの目的は、これらの情報をよりシンプルで明快に伝え、学生に交換留学への応募を促すことです。中核のメッセージは、既成のイメージを覆す一言：誰にでも、交換留学のチャンスがある。

(アプローチ)

トップページは3D世界地図ですべての学校を見せ、詳細はワンページのサイトに

近年、多くのオンライン展示会がVRを採用しており、空間の見せ方には向いています。一方で、VRの展示を最後まで見て回るには操作が多く、迷いやすい上、コンテンツも画像や動画が中心で、大量のテキストを載せるには向いていません。

そこでトップページには3D世界地図を採用し、ページに入った瞬間に学校の多さが分かります。複雑な情報はワンページのサイトで見せ、読みやすくしています。地図という形式は、学生が自ら探索するきっかけにもなり、展示を巡る参加感を高めます。

フロントエンドではThree.jsを用いてブラウザ上で3Dモデルを描画し、スクロール速度、マップサイズ、境界、ダンピングなどのパラメーターを独自に調整して、あらゆる端末で期待どおりの操作感を実現しました。パフォーマンスを保つため、シーンはリアルタイムでライティングせず、テクスチャに事前にベイクしています。プレート下の影は画像ファイルで処理してファイルサイズを極力抑えており、ビジュアルにはわずかにピクセルアート調の風合いがあります。

デスクトップ

まず世界全体を見て、少しずつ各大陸へ

トップページは雲と紙飛行機で始まり、「開始探索」を押すとカメラが3D世界地図へ飛び込み、世界地図・学校探し・申請条件・先輩の体験談・問問 AI・お気に入りを6ステップのチュートリアルで説明します。その後はホイールで拡大縮小、ドラッグで移動すれば、全体から各大陸へ飛び込め、学校は小さな家として地図のタイルに並びます。メニューには番組とライブ配信、イベント、お知らせ、カレンダー、学校図鑑、提携機関が集まっています。

(設計の要点)

三つの設計ポイント

学校情報

ポイントや抽選などのページはモーダルウィンドウに収め、マップのページには直接置いていません。これにより、学生限定のイベントとその他のコンテンツが区別され、学生以外の訪問者にも違和感が大きくなりません。各校の情報は、地図での探索に加えて一覧リストでも提供し、フィルターと組み合わせて目的の学校をより早く見つけられます。ウィンドウ内には学校クイズもあり、学生が各校をより深く知ることができます。

(管理システム)

イベント期間中は管理画面でまず未対応の項目を確認します

ログイン後はまず未対応の項目を確認し、続いて推移と今後の開催回を表示します。各指標はクリックすると完全な算出方法を開けるほか、データ検索と同じ定義を使用しています。

(成果)

4年の協働で、参加学生は約60名から12,000名を超えるまでに

2022年から2026年までの間に、博覧会は約60名の学生が参加するオフラインのイベントから、12,000名を超える学生がログインして参加するオンライン博覧会へと移行しました。ある回では開幕7日で、2,000名の学生が学生メールでログインしました。前年の年間サイトのページビュー10万回を、その回は10日で上回り、ライブ配信番組の視聴数も過去最高を更新しました。

ログインした学生の20%超が、7日を超えて連続でサイトを閲覧し、一回あたりの最長利用は3時間でした。さらに、10%超の学生が、一回で2時間を超えて利用しています。

各大陸ごとに雰囲気に合わせて学校の屋根と本体をデザインし、組み合わせの工夫で画面が単調にならないようにしています。オープニングでは、空を飛翔するような効果音に専用のBGMを重ね、世界から各地へとユーザーを導きます。

(Client note)