プロジェクト概要と役割
本サイトは、グッドスマイルカンパニーが主催する新作フィギュア展示イベント「スマイルフェス2024」の公式プロモーションサイトです。フィギュアファンやイベント参加希望者をメインターゲットに、開催概要、展示情報、限定グッズ、キャンペーンなどの最新情報を発信することを目的としています。
私はこのプロジェクトにおいて、フロントエンド開発全般を担当しました。
採用した技術スタック
- HTML5
- CSS3
- JavaScript (ES6+)
- jQuery
- Slick Carousel (スライドショー)
- Lightbox2 (画像モーダル)
- tsParticles (パーティクルアニメーション)
- destyle.css (CSSリセット)
- Google Analytics (アクセス解析)
これらの技術を選定し、イベントの特性に合わせた動的かつモダンな開発環境を構築しました。
こだわった設計と実装
イベントの高揚感を演出するリッチなUI実装
イベントの持つ「お祭り感」や高揚感をWeb上で表現するため、複数のJavaScriptライブラリを効果的に組み合わせています。Slick Carouselによるギャラリースライド、Lightbox2による画像拡大表示、さらにtsParticlesによる背景のパーティクルアニメーションを実装し、静的なページにはない動的でリッチなユーザー体験を構築しました。
デバイスを問わないレスポンシブ対応
PCユーザーだけでなく、外出先から情報を確認するスマートフォンユーザーにも最適化された体験を提供するため、レスポンシブデザインを徹底しました。メディアクエリを用いてブレイクポイントを厳密に管理し、あらゆる画面幅でレイアウトが崩れることなく、情報が正確に伝わるよう設計しています。
UXとパフォーマンスへの配慮
ユーザーの離脱を防ぐため、ページの表示速度にも配慮しました。特にファーストビュー（FV）の体感速度は重要だと考え、FVで使用される主要なロゴ画像に対して rel="preload" を指定し、ブラウザがリソースを優先的に読み込むよう最適化しました。これにより、ユーザーのストレスを軽減し、快適なブラウジング体験を目指しました。
情報拡散を意識したOGP・メタデータ設計
本プロジェクトはイベント告知という特性上、SNSでの情報拡散が非常に重要です。TwitterやFacebookなどで共有された際に、魅力的なタイトル、説明文、画像が正しく表示されるよう、OGP（Open Graph Protocol）およびTwitter Cardsのメタデータを網羅的に実装し、拡散力の最大化を図りました。
グローバルなファン層を意識した多言語対応
「スマイルフェス」は日本国内だけでなく、海外にも多くのファンを持つイベントです。そこで、日本語（JP）に加え、英語（EN）と中国語（ZH）の言語切り替え機能を実装しました。これにより、海外のユーザーにも正確なイベント情報をタイムリーに届け、グローバルな集客に貢献する設計としました。
アクセシビリティと保守性の確保
section や nav といったセマンティックHTMLを適切に使用し、サイトの構造をマシンリーダブル（機械可読）に保ち、アクセシビリティの基礎を確保しました。また、destyle.css を用いてブラウザ間の表示差異をリセットし、独自のスタイル（index.css）とロジック（index.js）を適切に分離することで、保守性と一貫性を高める工夫をしています。
