N高S高N中等部文化祭2021 サイト制作 編集記
今回、すべてオンラインで開催されたN高S高N中等部文化祭、通称「磁石祭」。その中核である文化祭サイトを私ども、株式会社ジュニがお手伝いさせていただきました。（「磁石祭」は「生徒みんなが、色々な人を引き寄せる祭り」だそうです！）
はじめまして、私はジュニの広報担当の関田と申します。
簡単にジュニを紹介させていただきますと、アソビゴコロのあるアイデアとテクノロジーを武器に、デジタルなものづくりを行うプロダクションです。
今回は、完全オンラインでの実施となった「磁石祭」についての編集後記を、サイト制作の立場から、各担当者さまの声をあわせてレポート形式でお届けさせていただきます！
オンライン開催の文化祭サイトにあたって
私どもジュニに、生徒たちと直接関わりのある先生がたをはじめ、学校の運営サイドの方々より、本年の文化祭がオンラインのみの実施であることの相談がございました。
そこで、わたしたちは、さまざまな企画がにぎやかに展示され、活動そのものがイメージしやすいサイトを考えました。
ジュニでは、学園らしい文化祭を思い起こさせるさまざまなアイテムをサイト上に散りばめよう！と、今のサイトの形のベースとなるアイデアを提案いたしました。
そこで、まず先生方と相談の上、今回のサイトではさまざまな活動をイメージしやすいオブジェクトをリストアップし、モデルデータを組み立てていくところから制作を着手いたしました。
みんなで作るにぎやかな文化祭の世界を表現
生徒のみなさんの普段の活動を思い起こさせる、にぎやかな文化祭サイトを目指して、まずは、サイト設計を行いながら、平行して学園らしさ、文化祭を感じる３Dオブジェクトをつくっていきました。
△３Dモデルの制作ソフトは、学園の授業でも取り扱われるというBlenderを使用しています。
△このモデリングは3Dデザイナーのアマンダが担当しました。
アマンダ「今回、N高・S高・N中等部の学園生活を連想させるアイテムをデザイン、モデリングしました。少しデフォルメしたポップで親しみのあるスタイル、そして色味にこだわって15点程制作しました！実は学園のキャラクター、"N高テレビちゃん"は、調整に苦労をしたのですが、このようなモデリング自体が新鮮で、手掛けられて楽しかったです！（というのも、私はアメリカ出身でこれまで、このようなキャラクターをあまり編集することがなかったのです。）ちなみに、15点の中でも特に気に入っているのはデザインにこだわったUFOです。」
そして、15点の完成したオブジェクトを、サイトを彩るデザインパーツとして配置していきました。
サイトに落とし込むときは、さまざまな大きさのブラウザや、スマートフォンでの配置レイアウトでも見づらくないように丁寧に設計しながらデザインを行います。
△デザイン・レイアウトはデザイナーの諸岡が担当しました。
諸岡「文化祭の賑やかさと企画の数々が混在した様子をイメージしてデザインしています。このサイトは、生徒たちの個性あるサムネイルが加わって文化祭らしさが完成しますが、デザインの面では鮮やかな色使い、周りに浮かんでいるN高S高N中等部の日常を連想させる3DCGのオブジェクト、背景の混ざり合うグラデーションで表現しました。そして、サイトの使い勝手に関わる導線へのこだわりは、展示会やイベントでよく目にする縦型のタペストリーや垂れ幕をイメージしたボタンを配置して、キャッチーでユーザーを迷わせないデザインで表現しました。」
サイト構築時は、生徒それぞれの企画が目に留まるための工夫と、学園らしい世界観をより深める演出に力を入れました。
まず、生徒数が合計で2万人近い文化祭で、数多くの生徒の企画が埋もれず、なるべく多くの目に留まるために２つの工夫を施しています。１つ目は企画をランダムに配置することで見るたびにページ内に変化をもたせました。２つ目は企画をタグでカテゴリ別に絞り込めるようにして探しやすくしています。
そして、学園らしい未来を感じさせる世界観に、WebGLで奥行きを与える演出を加えました。
まず、ページ全体に3DCGのオブジェクトがバランス良く配置されるように調整を加えました。ページのスクロールに合わせてオブジェクトが移動する演出の際は、浮遊感のある柔らかい動きになるように心がけ、さらに、オブジェクトが近くなるほど、一眼レフカメラのようなボケの表現を付けて遠近感を生み出しています。
△左：サイト構築を担当したエンジニアの中村、右：サイト演出を担当したエンジニアの右近
中村「ページ内に浮遊するモチーフの立体感と調和するマイクロインタラクション（クリックアニメーションやホバーアニメーション）の実装を楽しんで取り組めました。また、PC・SPをはじめ多様な端末に対応した、閲覧の最適化にも注力しています。」
右近「今回は浮遊するモチーフがページの手前と奥に存在する、奥行きのある世界観が特徴です。これを実現するためにCanvas（WebGLの描画を行う要素）を２枚使用したため、パフォーマンスの調整がとてもシビアでした。各画面解像度に対応した細かな調整や描画コストの高いボケ表現の軽量化を行うことでパフォーマンスを高め、視認性の高いサイトにしています。」
企画展を盛り込んだ文化祭サイトが完成
最後に生徒の作品情報を入れ込んで、現在のサイトの形になりました。
自由な発想で好きなことを好きなだけ学べる、学園らしい世界観、そして生徒ひとりひとりが主役となる、にぎやかな文化祭を目指して、奥行きと発見、さらに表示パフォーマンスにも配慮したサイトを完成させました。
角川ドワンゴ学園 文化祭担当 高野
2万人近い学園生が自分たちの空間だ！と思えるサイトってどんなものだろう？と探していく中でジュニさんの素敵なサイトの事例を見つけました。"これだー！！"と制作されたジュニさんにお声がけさせていただきました。
職員だけでは考えられなかった素敵なアイデアと技術でどんどん文化祭の空間ができていくのがとってもワクワクしました！
特にお気に入りなのは、いいね♡ボタンです。来場してくださった方との繋がりが見えることに感動しました！
株式会社ジュニ 代表 岡村
この度は、とても面白いご依頼をいただきまことにありがとうございました！お話を伺ってからは、担当者一同で学園の勢いや楽しい雰囲気を感じながら、「文化祭」オリジナルサイトにさまざまなアイデアを盛り込ませていただきました！
各制作を担当したジュニのスタッフも、その楽しい雰囲気を「文化祭」という世界に落とし込むというとても挑戦的で、貴重な体験をさせていただきました。生徒のみなさまも、文化祭サイトを訪れる方にも、雰囲気と一緒に各展示を楽しんでいただけたら、とてもうれしく思います。
株式会社ジュニ スタッフリスト
・プランナー/ディレクター 岡村・伊藤
・アートディレクター 黒図
・デザイナー 諸岡
・3Dデザイナー アマンダ
・エンジニア 諸橋・中村・右近
この記事が気に入ったらサポートをしてみませんか？