jQueryライブラリ群を駆使したインタラクティブなWeb3 Future 2024公式カンファレンスサイト制作

プロジェクト概要と担当業務

「Web3 Future 2024」カンファレンスの公式ランディングページ（LP）制作において、フロントエンド開発全般を担当しました。

本プロジェクトの目的は、Web3の未来を議論する本イベントの権威性と先進性をビジュアルで表現しつつ、登壇者情報やプログラム詳細を分かりやすく伝え、チケット購入（Peatix）へとシームレスに誘導することです。

HTMLのセマンティックな設計、CSSスタイリング、そして複数のJavaScriptライブラリを連携させたリッチなインタラクション実装までを一貫して担当しました。

本プロジェクトでは、リッチなアニメーションと多くの情報を整理するインタラクションを、安定して両立させるため、実績のある以下の技術スタックを選定・構築しました。

これらの技術を組み合わせ、情報量の多いカンファレンスサイトを分かりやすく、かつ先進的なデザインで構築しました。

大規模カンファレンスの「顔」として、デザインの先進性と情報へのアクセシビリティを両立させる点に注力しました。

本LPの核となる「Speakers」セクションでは、多数の登壇者をリッチに見せる必要がありました。

Slick.js: スピーカー一覧にSlick.jsを採用し、スマートフォンでもスワイプで直感的に閲覧できるカルーセルUIを実装しました。
iziModal.js: 登壇者（`modal-open`）をクリックした際に、`iziModal.js`を連携させ、詳細なプロフィールをモーダルウィンドウで表示する機能を構築しました。これにより、ページ遷移のないシームレスな情報閲覧体験を実現しています。
mCustomScrollbar: 「NEWS」セクションでは`mCustomScrollbar`を導入し、限られたスペースで最新情報をティッカー形式（自動スクロール）で表示する工夫を行いました。

main.jsにて、これら複数のライブラリが競合しないよう適切に初期化し、イベントを管理しました。

Web3の「先進性」を表現するため、ファーストビュー（FV）ではCSSアニメーションを駆使した複雑な背景ビジュアル（`bg_fv`内の`bg01`〜`bg06`）を実装しました。

同時に、`destyle.css`でブラウザ間の表示差異をリセットし、`Google Fonts` (Poppins, Noto Sans JP) を採用することで、デザインの意図を正確に再現しつつ、全デバイスで高い可読性を確保しました。

pc_none, sp_noneといったユーティリティクラスを設計し、PCとスマートフォン両方で最適なレイアウトを実現するレスポンシブデザインを徹底しています。

イベントサイトとして、SNSでの拡散力と情報構造の正確性は非常に重要です。

OGP設計: og:title, og:image, og:typeに加え、`twitter:card` (summary_large_image) といったOGPメタデータを網羅的に設計・実装しました。これにより、X (旧Twitter) やFacebookで共有された際の視覚的な訴求力を最大化しました。
セマンティックHTML: header, nav, main, article, sectionといったHTML5のセマンティックタグを適切に配置。特に「OVERVIEW」セクションでは`dl`, dt, ddタグを使用し、情報構造を論理的にマークアップすることで、SEOとアクセシビリティに配慮しました。

*GTM導入:** Google Tag Managerを導入し、マーケティングチームが柔軟に計測タグを管理できる基盤を提供しました。