プロジェクト概要

このプロジェクトは、人気ゲーム「東方LostWord」の公式音楽イベント『LostWord LIVE 2024』の特設サイトです。ターゲットはゲームの既存プレイヤー、原作ファン、および出演アーティストのファンであり、イベントの開催概要、出演者、チケット、グッズといった情報を集約し、ライブへの期待感を高め、参加を促進することを目的としています。

私はこのプロジェクトにおいて、フロントエンド開発全般を担当しました。

採用した技術スタック

• HTML5
• CSS3
• JavaScript (ES6+)
• jQuery 3.x
• Rellax.js (パララックス効果ライブラリ)
• simplebar.js (カスタムスクロールバーライブラリ)
• Google Fonts (Inter, League Spartan, Noto Sans JP)
• destyle.css (CSSリセット)
• Google Tag Manager (GTM)

これらの技術を選定し、モダンで効率的な開発環境を構築しました。

こだわった設計と実装

パララックス効果による没入感のあるUI

サイトを閲覧するユーザーの体験価値を高めるため、JavaScriptライブラリ「Rellax.js」を導入しました。特にチケット情報セクション（class="js-rellax"）などで、スクロールに応じて背景と前景の要素が異なる速度で動くパララックス（視差効果）を実装し、サイトに奥行きと没入感を与えました。

ブランドイメージと可読性を両立するタイポグラフィ

イベントのクールな世界観をタイポグラフィで表現するため、Google Fontsを導入しました。見出しや英字には「League Spartan」や「Inter」を、本文の日本語には「Noto Sans JP」を割り当てることで、デザイン性と可読性を両立させるフォント設計を行いました。

マルチデバイスに対応するレスポンシブ設計

PC、タブレット、スマートフォンなど、あらゆるデバイスからのアクセスを想定し、メディアクエリを用いたレスポンシブデザインを徹底しました。スマートフォン表示時には、#sp_header や #sp_nav といった専用のUIに切り替え、ハンバーガーメニュー（#btn_hum）によるナビゲーションを提供することで、限られた画面領域でも快適な操作性を実現しました。

保守性と拡張性を考慮したCSS設計

将来的な情報更新やセクション追加に備え、保守性の高いCSS設計を意識しました。CSSリセットライブラリ（destyle.css）でブラウザ間の差異を吸収した上で、チケットセクション（.p-ticket__）やグッズセクション（.p-goods__）など、特定の領域ではBEM（Block Element Modifier）記法に準拠したクラス命名規則を採用しました。これにより、スタイルの影響範囲を局所化し、予測可能で堅牢なCSS構築を目指しました。

イベントの拡散性を高めるSNS連携

X (旧Twitter) やFacebookでの情報拡散は、イベントの成功に不可欠です。そのため、OGP (Open Graph Protocol) およびTwitter Cardのメタデータを網羅的に設定しました。特に twitter:card には summary_large_image を指定し、シェアされた際にキービジュアルが大きく表示されるよう工夫することで、ユーザーのクリック率を高める施策を講じました。