プロジェクト概要と役割

本プロジェクトは、「ペルソナ4 ジ・アルティマックス ウルトラスープレックスホールド」に登場する「アイギス EXオルギアモード 1/6スケールフィギュア」の製品紹介および販促を目的としたランディングページ（LP）です。ターゲット層であるペルソナファンやフィギュアコレクターに対し、製品の精巧な造形と魅力をインタラクティブに伝えることを目指しました。

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

採用した技術スタック

• HTML5
• CSS3 (Destyle.cssによるリセット含む)
• JavaScript (ES6+)
• jQuery
• Slick.js (カルーセルライブラリ)
• Lightbox2 (画像モーダルライブラリ)
• Cloudimage-360-view (360°ビューライブラリ)
• WebP (画像フォーマット)
• Google Fonts
• Google Analytics (gtag.js)

これらの技術を選定し、製品のビジュアルを最大限に引き出す、モダンで効率的な開発環境を構築しました。

私がこだわった設計と実装

リッチなUIによる製品魅力の最大化

フィギュアというビジュアルが命の商品特性に合わせ、ユーザーが製品のディテールをあらゆる角度から確認できるよう、複数のJavaScriptライブラリを効果的に組み合わせて実装しました。

• Slick.js: ファーストビューのメインビジュアルおよびサムネイル連動スライダーに採用し、製品の「顔」となる画像を直感的に切り替えられるUIを提供しました。
• Lightbox2: 詳細画像をクリックした際に、モーダルウィンドウで高解像度な画像を表示。ユーザーが細部まで確認したいという要求に応えました。
• Cloudimage-360-view: 「360° View」セクションでは、ドラッグ操作で製品を回転させられるUIを実装し、Web上でフィギュアを実際に手に取って眺めるようなリッチな体験を実現しました。

パフォーマンスとレスポンシブ対応

画像アセットが非常に多いページであるため、ページの表示速度とユーザー体験の維持を最重要課題の一つとして取り組みました。

画像最適化（WebPの採用）

ページの大部分を占める画像リソースは、軽量かつ高品質なWebP形式を全面的に採用しました。これにより、読み込み速度（Core Web Vitals）を意識し、ユーザーの離脱を防ぐ快適なブラウジング体験を目指しました。

レスポンシブデザイン

PCとスマートフォンで表示要素（例: sp_none, pc_noneクラス）を制御するCSSメディアクエリを記述し、デバイスを問わず最適なレイアウトで情報が閲覧できるよう精密に実装しました。

アクセシビリティとマーケティングサポート

細部まで配慮することで、開発者としてサイトの品質向上に努めました。

• マルチデバイス対応: iOSのApple Touch Icon、Windowsのタイルアイコン（msapplication）、AndroidのChromeアイコンなど、多岐にわたるプラットフォームのファビコンを網羅的に設定しました。これにより、ユーザーがどのデバイスで「お気に入り」や「ホーム画面に追加」を行っても、適切なブランドアイコンが表示されるよう配慮しました。
• SNSシェア対応: 製品情報がSNSで共有された際に、意図通りの画像や説明文が表示されるよう、OGP（Open Graph Protocol）およびTwitter Cardsのメタデータを正確に設定し、バイラルマーケティングを技術面からサポートしました。
• ローディング処理: ページ読み込み完了までの間、ローディングアニメーションを表示する処理（`id=”loading”`）を実装し、ユーザーの待ち時間を視覚的にフォローする工夫をしました。