VTuber「琥珀」の限定グッズ「宵闇の喫茶店セット」を販売するためのプロモーション用ランディングページ（LP）を制作しました。「大正浪漫 × サイバーパンク」という彼女独自のコンセプトを、洗練されたタイポグラフィと余白設計で表現。コンセプト立案から、生成AIを活用したビジュアル制作、Tailwind CSSによる実装までを一貫して行いました。

琥珀のコアなファン層。特に、単なるキャラクターグッズ以上の「ライフスタイルに馴染む上質なアイテム」を求める層。

キャラクターグッズの紹介サイトは、しばしば「キャラクターの絵」に頼りすぎてしまい、世界観の深みや商品の質感が伝わりにくい傾向があります。今回は「喫茶店の店主としての琥珀」の空気感を重視し、ファン以外の層が見ても「一つのブランド」として魅力的に感じる洗練されたデザインの両立が課題でした。

「午前2時に開く喫茶店」という物語性を視覚的に体験させ、商品の希少性とブランド価値を高めること。単なる購入ボタンの設置ではなく、スクロールを通じて「喫茶店の扉を開け、世界に触れる」という体験を提供し、ECサイトへの最終的な誘導（コンバージョン）を最大化することを目的としました。

PC・スマートフォンのどちらで閲覧しても「縦長の没入感」を損なわないよう、メインコンテンツを450px幅に集約。PC環境では、背景に真鍮ゴールドの配色と動的なタイポグラフィを配置することで、画面の広がりと視認性を両立させました。構成は、イントロダクション（世界観の提示）から、商品の「背景にあるストーリー」を各セクションで深掘りし、最後に限定セットの付加価値を提示する流れを採用しています。

「ブラック」をベースに「ゴールド」をアクセントにした配色で、重厚かつ神秘的な質感を追求。「極細のセリフ体」と「力強い明朝体」の対比により、高級感を演出しました。 演出面では、スクロールに合わせて要素が浮かび上がる「フェードイン」や、マウスの動きに同期する「背景パララックス」を実装。ボタンエフェクトは、高級感を損なわないよう上品なシマー（光の透過）効果に留め、ユーザーの体験を妨げないUI/UXの最適化を図りました。

Figma / Illustrator / Photoshop / VScode

HTML / CSS / JavaScript / Tailwind CSS