愛知工業大学名電高等学校の文化祭「燈 ―Light Up the Future―」の公式 Web サイトを制作しました。

制作の背景

文化祭のプログラムや各クラスの企画情報を、来場者や保護者が手軽にスマートフォンで確認できる場として、紙のリーフレットと同等に使える公式 Web サイトの制作を担当しました。

実装内容

SvelteKit + TypeScript で構築し、Cloudflare Pages へデプロイしています。 ページには文化祭テーマ・校長あいさつ・タイムテーブル・スタンプラリー・フロアマップなど、当日必要な情報をすべて 1 ページにまとめた構成にしています。 フロアマップでは 1〜4 階の SVG 地図をフロアごとにスクロール連動で sticky 表示し、それぞれのクラス情報と対応させることで直感的に企画を探しやすい UI を実現しました。

こだわりポイント

背景には複数の SVG デコレーションを配置し、requestAnimationFrame を活用したスクロール連動のパラレックス演出を自前で実装しました。 各要素のスクロール速度を data-speed 属性で個別に設定することで、奥行きのある動きを軽量に実現しています。 また OGP・Twitter Card・canonical タグなどの SEO 対応も行い、SNS でのシェア時にも見栄えよく表示されるよう整えました。