VTuberの公式サイトを作りました！ 魔法陣アニメーション×音楽プレイヤー実装例

はじめまして！

Web制作・AIコンテンツ制作をしている

Lupinus365💜

今回はVTuberキャラクター

「紫月ミュウ」の公式サイトを

制作しましたのでご紹介します✨

━━━━━━━━━━━━━━

🌙 制作したサイト

━━━━━━━━━━━━━━

パープル×ピンクの幻想的な

世界観に合わせたデザインで

制作しました。

━━━━━━━━━━━━━━

✨ 実装した機能

━━━━━━━━━━━━━━

🔮 魔法陣アニメーション

キャラクター画像の背景に

SVGで描いた魔法陣を配置。

3つのリングがゆっくり回転し

ふわふわ浮く演出を加えました。

🎵 音楽プレイヤー

楽曲ジャケット画像に

再生ボタンを重ねて配置。

クリックするとSunoの

再生ページに飛ぶ仕組みです。

🖼️ ギャラリーセクション

AI生成イラスト8枚を

スタイリッシュなグリッドで表示。

ホバーエフェクト付きです。

🛍️ グッズセクション

Tシャツ・アクリルスタンド・

ミニアルバムのグッズ紹介ページを

実装しました。

━━━━━━━━━━━━━━

💜 こんな方におすすめ

━━━━━━━━━━━━━━

・VTuberの公式サイトを作りたい

・キャラクターの世界観を

　Webで表現したい

・音楽やイラストを

　かっこよく見せたい

・アニメ・ゲーム系の

　デザインが好き

━━━━━━━━━━━━━━

📋 制作メニュー

━━━━━━━━━━━━━━

ご依頼・ご相談はお気軽に

メッセージください💜

キャラクターの世界観に合わせた

オリジナルサイトを制作します✨