概要
ユピテルのオリジナルキャラクター「霧島レイ」「富士サクラ」「葵茶々」によるユニット「羽衣6（ハゴロモシックス）」のオフィシャルサイトです。キャラクターの世界観を表現しながら、ニュース・キャラクター紹介・対応製品・グッズ・楽曲・動画・アプリ・イベントと多岐にわたるコンテンツを一つのサイトに集約しています。
また、ユピテルの会員システムと連携したファンクラブ機能を備え、ファンとの継続的な接点づくりを支えています。今回は既存サイトのリニューアルとしてコンテンツを全面再構築し、情報の整理・回遊性・ビジュアル表現を一新しました。
課題
羽衣6はキャラクターコンテンツであると同時に、カーエレクトロニクス製品・グッズ・楽曲・アプリ・イベントと展開が幅広く、「世界観の表現」と「多様なコンテンツの整理・回遊性の確保」を両立するサイト設計が求められました。リニューアルにあたっては、蓄積されたコンテンツを整理し直しながら、新たなUIで世界観をより魅力的に伝える構成へと再構築する必要がありました。
担当範囲
- リニューアルに伴うコンテンツの再構築・情報設計
- キービジュアル・新規イラスト描き下ろし
- UI・デザイン設計・制作
- フロントエンドコーディング・実装
- 外部システムとの連携対応（会員システム・オンラインストア等）
実装・制作のポイント
- コンテンツの再構築: リニューアルにあたり、製品・グッズ・楽曲・動画・アプリ・イベントといった多岐にわたるコンテンツを整理し、ユーザーが目的の情報へスムーズにたどり着けるサイト構成に再設計しました。
- 世界観を伝えるUI・デザイン: 3人のキャラクターそれぞれの個性を際立たせながら、ユニットとしての統一感を持つビジュアル設計を行い、ファンが没入できるサイト体験を実現しています。
- SPAによる快適な回遊: Vue.js（Nuxt）によるシングルページアプリケーション構成とし、ページ遷移のストレスなくニュース・キャラクター・製品・グッズを回遊できます。事前レンダリングにより表示速度と検索エンジン対応も両立しています。
- ファンクラブ・オンラインストアとの連携: 会員システムを活用したファンクラブ導線や、ユピテルダイレクト（公式オンラインストア）との連動により、コンテンツ閲覧から購入まで一貫した導線を構築しています。
使用技術
- HTML / CSS / JavaScript / Vue.js / Nuxt /（フロントエンド実装）
- 会員システム連携
- 外部オンラインストア（Yupiteruダイレクト）連携
関連サービス
- Web制作 — キャラクターブランドサイト・会員連携サイトの企画・デザイン・実装から運用まで
