本プロジェクトでは、特定のキャラクターイメージである「自然（緑）」と「華やかさ（ピンク）」をテーマに、最新のウェブトレンドであるグラスモーフィズムを全編に採用した公式サイトを構築しました。
1. デザインコンセプト：自然とデジタルの融合
メインカラーには鮮やかなライムグリーンを、アクセントには淡いピンクを採用し、補色に近い関係性を活かした視覚的インパクトを狙っています。
視覚的なこだわり
- グラスモーフィズムの実装: 背景を透過させつつぼかしを加える
backdrop-filter: blur(12px)を多用し、清潔感と奥行きを演出しています。 - 動的な視覚効果: 背景に薄いグリッドとグラデーションを配置し、スクロールやホバーに合わせて要素が浮き上がるようなインタラクションを組み込んでいます。
- タイポグラフィ: 英字部分にはフューチャリスティックな
Orbitronを、日本語には可読性の高いNoto Sans JPを採用し、ブランドイメージを統一しています。
2. フロントエンドの高度な実装
A. シームレスなビデオヒーローセクション
サイト訪問時の第一印象を決定づけるヒーローセクションでは、2つの動画を組み合わせた演出を行っています。 「イントロ動画」の再生終了をトリガーに「ループ動画」へと切り替えることで、単一のループ動画では表現できないドラマチックな導入を実現しています。
TypeScript
const handleFirstVideoEnded = () => {
setIsPlayingLoaded(true);
if (loadedVideoRef.current) {
loadedVideoRef.current.play().catch(console.error);
}
};
B. グラスパネルの共通化
カード型レイアウトには、共通の .glass-panel クラスを適用しています。 疑似要素（::before）を用いた光の反射エフェクト（shine アニメーション）を実装することで、静的なページに高級感のある動きを加えています。
C. ユーザビリティに配慮したガイドライン表示
活動に関するルールを記載するセクションでは、情報の優先順位を明確にするために以下の工夫を行っています。
- 階層構造: 一般的なルールと、配信時のルールを別々のパネルで表示。
- 視覚的強調: 収益化の可否をハイライトし、禁止事項はアンダーラインや赤字で警告することで、ユーザーの誤解を防ぎます。
3. システム構成と技術スタック
本サイトは Next.js (App Router) を基盤として構築されており、高い保守性とパフォーマンスを両立しています。
- スタイリング:
CSS Modulesを採用し、コンポーネントごとのスタイル干渉を防止。 - レスポンシブ設計:
grid-template-columns: repeat(auto-fit, ...)を活用し、PC、タブレット、スマートフォン全てのデバイスで最適なレイアウトを提供。 - SEO・アクセシビリティ: 適切なメタデータ設定とセマンティックなHTML構造により、検索エンジン最適化を図っています。
4. まとめ
今回の実装では、CSS変数を中心としたカラーマネジメントにより、テーマカラーの変更にも柔軟に対応できる構造としました。 グラスモーフィズムによる透明感と、動画による動的な演出を組み合わせることで、次世代のタレント公式サイトに相応しいクオリティを実現しています。
著者
