概要
架空のVTuber事務所「NEO-REVERSE」の第1期生オーディション募集用ランディングページ（LP）のデザインおよびコーディングを行いました。「既存の自分を壊し、再構築する」というコンセプトの立案から、Figmaでのデザイン、Tailwind CSSを用いた実装まで一貫して行いました。
ターゲット
「変わりたい」という強い衝動を持つVTuber志望者。既存の王道アイドル路線よりも、サブカルチャーやサイバーパンクな世界観を好み、個性や尖った才能を発揮したいと考えている若年層。
課題
数あるVTuberオーディションの中で埋もれないよう、一目で「他とは違う」と認識させる強烈なインパクトが必要でした。また、ターゲット層は主にスマートフォンで閲覧するため、情報の網羅性と没入感を両立させつつ、エントリーまでの離脱を防ぐ動線設計が課題でした。
目的
事務所のコンセプトである「破壊と再構築」を視覚的に表現し、ターゲット層の感性に刺さるブランディングを行うこと。公式LINEへの登録（コンバージョン）を最大化することを目的としました。
情報設計
ユーザーの没入感を削ぐナビゲーションメニュー（ハンバーガーメニュー等）をあえて排除し、スクロールのみでストーリーを完結させるシングルカラム構成を採用しました。「世界観への没入（Hero）」→「共感（Concept）」→「具体化（Slots）」→「信頼（FAQ）」という流れを作り、熱量が高まった状態でスムーズに応募へ進めるよう設計しています。
デザインプロセス
「侵食するデジタル」をテーマに、黒背景にネオンカラーとグリッチノイズを効かせたサイバーパンクなデザインで統一しました。 コーディング面では、PC閲覧時もスマホアプリのような没入感を提供するため、コンテンツ幅を450pxに固定し、背景に専用のグラフィックを配置する特殊レイアウトを採用。 また、応募ボタン（CTA）を常に画面下部に追従させることで、ユーザーが「応募したい」と思った瞬間に機会を逃さずアクションできるよう、UI/UXの最適化を図りました。
制作期間
企画
デザイン・コーティング
合計期間
2日
2日
4日
使用ツール
Figma / Illustrator / Photoshop / VScode
言語・フレームワーク
HTML / CSS / JavaScript / Tailwind CSS
