概要
本デモサイトは、
高校の文化祭・学校行事を想定して構築した参加型イベントWebサイトです。
文化祭の開催情報やプログラムを掲載するだけではなく、
弾幕コメント・LIVE PANEL・写真投稿・Webサイト専用AIなどを組み合わせ、在校生・保護者・卒業生・来場者が一緒に文化祭を楽しめる構成としています。
ライブステージ、演劇、模擬店、クラス企画など、校内で同時にさまざまな催しが行われる文化祭だからこそ、
「文化祭の情報を見るサイト」から、
「文化祭に参加するサイト」へ。
という考え方で制作しています。
ご依頼の背景
文化祭では、
・開催日時を確認する
・プログラムを見る
・模擬店やクラス企画を探す
・ステージの時間を確認する
・学校へのアクセスを調べる
など、来場者へ多くの情報を伝える必要があります。
一方で、文化祭の魅力は情報だけではありません。
ライブで盛り上がったり、
クラス企画を楽しんだり、
友達のステージを応援したり、
写真を撮ったり。
その日、その場所にいる人たちが一緒につくる空気そのものが文化祭の大きな魅力です。
そこで本サイトでは、通常の学校行事サイトとして必要な情報を掲載しながら、コメント・弾幕・写真・AIなどを使って、Webサイト側にも文化祭の熱量が伝わる仕組みを取り入れています。
制作内容
・文化祭向けVideo Hero
・文化祭メッセージ掲載
・PROGRAM／企画紹介
・ライブステージ紹介
・演劇・ステージイベント紹介
・クラス企画・模擬店紹介
・文化祭FAQ
・NEWS／お知らせ
・SCHOOL GUIDE／学校案内
・弾幕コメント機能
・コメント投稿機能
・LIVE PANEL
・リアルタイム閲覧人数表示
・写真投稿・共有機能
・Webサイト専用AI案内機能
・スマートフォン表示最適化
文化祭開催前の情報発信だけではなく、開催中の参加や、開催後の思い出まで残せるサイトを意識しています。
制作時に意識したポイント
① 文化祭の「楽しさ」が最初に伝わるVideo Hero
トップページには、文化祭の雰囲気が伝わる映像を大きく使用しています。
学校案内のような落ち着いた見せ方ではなく、模擬店・ライブ・演劇・クラス企画など、文化祭当日の楽しさや熱量が最初の画面から伝わることを意識しています。
開催中には弾幕コメントも映像上に表示され、通常の学校Webサイトとは異なる、その日だけの特別な雰囲気を演出します。
② PROGRAMから「今日何をする？」を探せる構成
文化祭では、校内のさまざまな場所で同時に企画が開催されます。
そのため本サイトでは、
LIVE STAGE
ライブ・バンド演奏などのステージ企画
STAGE EVENT
演劇・発表・パフォーマンスなどの企画
CLASS EVENT
模擬店・お化け屋敷・展示などのクラス企画
MEMORIES
文化祭の写真や思い出
といった形で企画を整理しています。
来場者が「次はどこへ行こう？」と考えるときにも使えるWebサイトを目指しています。
③ 弾幕で文化祭の盛り上がりをWebにも
ライブやステージを見ながら投稿されたコメントを、Video Hero上に弾幕として表示できます。
「軽音部きた！」
「3年1組のお化け屋敷怖かった」
「焼きそば売り切れ😭」
「先生歌ってるwww」
といった、その瞬間だからこそ生まれるコメントが流れることで、校内の盛り上がりをWebサイトにも持ち込むことを意識しています。
単なる掲示板ではなく、「今、文化祭が動いている」と感じられるUIを目指しています。
④ LIVE PANELに文化祭の参加機能を集約
LIVE PANELには、
・コメント
・写真
・閲覧状況
・AI案内
などの機能をまとめています。
文化祭を楽しみながらスマートフォンからコメントしたり、撮影した写真を投稿したりできるため、Webサイトそのものを文化祭の一部として利用できます。
PCだけではなく、当日スマートフォンを持って校内を歩く来場者を想定した設計としています。
⑤ Webサイト専用AIを「文化祭案内係」に
本サイトでは、Webサイト専用AIを文化祭の案内係として利用することを想定しています。
たとえば、
「軽音部のライブは何時？」
「お化け屋敷はどこ？」
「一般参加できますか？」
「模擬店は何がありますか？」
「体育館では今何をやってる？」
といった質問に対して、サイト内の情報をもとに案内します。
大量のプログラムから自分で情報を探すだけではなく、聞けば教えてくれる文化祭サイトという使い方を想定しています。
⑥ 開催前・開催中・開催後で役割が変わるサイト
文化祭サイトは、開催案内だけで役目を終える必要はありません。
開催前
日時・アクセス・プログラム・注意事項を確認する。
開催中
企画を探す・コメントする・弾幕を見る・AIに聞く・写真を投稿する。
開催後
写真・ステージ・思い出・企画の記録を振り返る。
このように、イベントの前後を含めて使えるWebサイトを意識しています。
本サイトの特徴
本サイトは、高校文化祭における
「知る」
「探す」
「参加する」
「盛り上がる」
「思い出を残す」
を一つのWebサイトにつなげることを意識した構成です。
・Video Heroによる文化祭の世界観
・PROGRAMによる企画紹介
・弾幕によるリアルタイムな参加
・LIVE PANELによるコミュニケーション
・写真投稿による思い出の共有
・Webサイト専用AIによる文化祭案内
・FAQ、NEWS、SCHOOL GUIDEによる基本情報提供
・スマートフォン対応
など、通常の学校Webサイトとは少し違う、イベント当日にも使いたくなるWebサイトを目指しています。
まとめ
文化祭は、生徒がつくった企画を来場者が見るだけのイベントではありません。
ライブを応援したり、
模擬店を回ったり、
友達と写真を撮ったり、
コメントしたり。
参加する人たちの反応まで含めて、その年の文化祭がつくられていきます。
本デモサイトでは、
「文化祭を案内するWebサイト」から、
「文化祭の一部になるWebサイト」へ。
そんな学校イベントサイトの形をイメージして制作しています。
Showcaseタグ
高校
学校
文化祭
学園祭
学校行事
イベント
ライブ
ステージ
模擬店
クラス企画
学校サイト
イベントサイト
参加型Webサイト
WebサイトAI
弾幕
コミュニティ
UIタグ
Video Hero
弾幕UI
LIVE PANEL
AI UI
写真投稿UI
参加型UI
動画UI
イベントUI
モバイル対応