概要
ユピテルのオリジナルキャラクター「霧島レイ」「富士サクラ」「葵茶々」によるユニット「羽衣6（ハゴロモシックス）」のオフィシャルサイトです。キャラクターの美麗なグラフィックとリッチなアニメーションで世界観を表現しながら、ニュース・キャラクター紹介・対応製品・グッズ・楽曲・動画・アプリ・イベントと、多岐にわたるコンテンツを一つのサイトに集約しています。
さらに、ユピテルの会員システム「My Yupiteru」と連携したファンクラブ機能を備え、会員限定コンテンツの閲覧やメールマガジン配信など、ファンとの継続的な接点づくりを支えています。
課題
羽衣6はキャラクターコンテンツであると同時に、レーダー探知機などの実製品・グッズ・楽曲・アプリと展開が広く、「世界観の表現」と「多様なコンテンツの整理・回遊性」を両立するサイト設計が求められました。また、ファンクラブ限定コンテンツを提供するために、既存の会員基盤（My Yupiteru）とのシームレスなログイン連携が必要でした。
担当範囲
- サイト全体のUI・デザイン設計
- フロントエンド実装（アニメーション演出を含む）
- 会員システム「My Yupiteru」とのログイン連携・会員限定コンテンツの仕組み構築
- ファンクラブ会員向けメールマガジンの配信対象抽出などの会員データ管理（配信自体は外部の配信サービスを利用）
- 羽衣6関連のアプリ・ゲームコンテンツの開発
- 公開後のコンテンツ更新・運用サポート
企画・デザインから実装、システム構築まで一貫して弊社で対応しています。
実装・制作のポイント
- 世界観を伝えるビジュアル表現: キャラクターグラフィックを主役に据えたヒーロービジュアルと、スクロールに合わせたリッチなアニメーションで、ファンが没入できるサイト体験を実現しました。
- SPAによる快適な回遊: Vue.js（Nuxt）によるシングルページアプリケーション構成とし、ページ遷移のストレスなくニュース・キャラクター・製品・グッズを回遊できます。事前レンダリングにより表示速度と検索エンジン対応も両立しています。
- サーバーレスAPIによる運用性: ニュース等の動的データはAWS Lambdaを利用したサーバーレスAPIで配信し、低コストで安定した運用を実現しています。
- 会員基盤との連携: My Yupiteruのログインをそのまま利用できるファンクラブ導線を設計し、会員登録のハードルを下げながら限定コンテンツへ誘導しています。
- 外部ストアとの連動: グッズ・製品はユピテルダイレクト（公式オンラインストア）と連動し、サイトからそのまま購入導線へつながる構成としています。
使用技術
- Vue.js / Nuxt / Pinia
- AWS Lambda（サーバーレスAPI）
- My Yupiteru会員API連携
関連サービス
