概要
Vtuberおよびクリエイターの「Web上の拠点」を構築するための、ポートフォリオ制作プロジェクト「VS Create」のプロモーション用ランディングページ。サイバーパンクな近未来感と、スマートフォンの狭い画面内に情報を凝縮させる「1カラム特化型」の設計を特徴としています。コンセプトの立案から、インタラクティブなアニメーション実装、Tailwind CSSを用いたレスポンシブデザインまでを一貫して担当しました。
ターゲット
Webサイトの必要性を感じつつも、制作ハードル（費用・技術）を抱えている個人Vtuberやクリエイター。SNS（X/YouTube）を主な活動拠点としているが、情報の集約や信頼性の向上を求めている層。
課題
Vtuber業界では、情報の流動性が非常に高く、重要な告知やガイドラインがSNSのタイムラインに埋もれてしまうことが大きな課題です。また、個人活動において「Webサイト」は贅沢品と捉えられがちですが、企業案件の獲得やブランディングの観点では必須となります。この「必要性と心理的障壁のギャップ」を埋めるための、熱狂を煽りつつも信頼感を醸成するデザインが求められました。
目的
「その活動に、専用の拠点を。」というメッセージを軸に、サイトを持つことのベネフィットを直感的に理解させること。制作実績の拡充を目的としたキャンペーンであることを明確にし、X（Twitter）のDMへのコンバージョン（相談・申し込み）を最大化させることをゴールとしました。
情報設計
PC・スマートフォンのどちらでも「縦スクロールの没入感」を最大化できるよう、メインコンテンツの幅を450pxに制限。PC環境では背景のグリッドアニメーションや浮遊する幾何学オブジェクトで画面の余白を埋めつつ、視線が常に中央のメインメッセージに集中するよう設計しています。 構成は、ヒーロービジュアル（期待感）→ なぜサイトが必要か（価値の提示）→ キャンペーン内容（具体案）→ プラン比較（選択肢の提示）という論理的な流れを採用しました。
デザインプロセス
「ブラック × ネオンミント × ネオンピンク」の配色で、デジタルで鋭い質感を追求。フォントは、近未来的な「Orbitron」と可読性の高い「Noto Sans JP」を組み合わせ、情報の強弱を明確にしました。 演出面では、スクロールに合わせて要素が浮き上がるフェードインや、無限ループのティッカー（文字ニュース）を実装し、ページ全体に「生きている」ような動的な印象を与えました。ボタンはネオンの光彩が明滅するようなエフェクトを加え、ユーザーのタップを促すUI/UXの最適化を図っています。
制作期間
企画
デザイン・コーティング
合計期間
2日
3日
5日
使用ツール
Figma / Illustrator / Photoshop / VScode
言語・フレームワーク
HTML / CSS / JavaScript / Tailwind CSS
