プロジェクトサイト

概要

大学のプロジェクトで制作した、ハッカソン運営チームの公式Webサイト。フルスクリーンのスクロールスナップ、マウス追従型のアニメーション、CSSによるタイプライターエフェクト、カルーセルなど、インタラクティブな要素を多数盛り込んだシングルページアプリケーション（SPA）として構築しました。

開発期間

2024/05/21 ~

使用技術

作成してみて

ハッカソンの顔となる、閲覧者の印象に残る公式ウェブサイトを目指して開発しました。私は主にページ構成を担当し、ローディング画面およびハッカソンの記載内容は他のチームメンバーが担当しました。当初は簡素な構成でしたが、全画面スクロールやマウスの動きに連動した演出など、複数の視覚効果を同時に組み込む過程で、技術的な課題に直面しました。特に、異なる外部機能（ライブラリ）同士の干渉や、要素の重なり順による表示崩れといった問題が発生しました。これらを解決するために、画面の状態を一元管理する仕組みを構築し、「現在どの画面を見ているか」に応じて、各要素の表示を適切に切り替える処理を実装しました。単に機能を配置するだけでなく、複数の技術を調整・連携させ、利用者にとって心地よい操作体験を作り上げる設計力を養うことができました。また、プライバシー保護の観点からリポジトリは非公開となっていますが作成したWebサイトは以下のリンクから閲覧することができます。