Before：説明要素が多く、訴求の読み順が弱い状態
画面ごとの要素は揃っている一方で、ヒーロー、実績、説明、フォームがそれぞれ独立して見えやすく、初見でどこに注目すべきかが散りやすい構成でした。
- コピー、実績、説明の視線誘導が分散
- 入口とログイン導線の役割差が弱い
- 白紫ベースでサービスの印象がやや平坦
デザイン2026
デザイン改修比較：VTuber LP
同一サービスのデザイン導線を大幅に見直し、情報優先度と行動導線を整えた比較作品です。
Before/AfterWeb UIInformation ArchitectureDesign Refactor
BEFORE / AFTER比較表示
Before / After で見る改修内容
同じVTuberマッチングサービスを、Beforeでは情報の配置と導線の課題、Afterでは訴求順・役割別入口・フォーム体験の整理として比較できるようにまとめました。
After：訴求順と行動導線を整理した状態
ファーストビューから実績、課題解決、特徴、レポート例、価格までを淡いブルーのトーンで接続し、サービス内容とCTAの読み順を明確にしました。
- 役割別入口で広告主とVTuberの行動を分離
- 見出しの強弱と余白で読み順を整理
- フォーム画面でも不安解消と次アクションを同居
Before
補助画面
サービス入口
世界観を強く出している一方で、入口カードとコピーの主従がやや曖昧な状態です。
Googleログイン
背景ビジュアルに対してフォームが独立し、登録前の安心材料が少ない構成です。
ログイン / 新規登録
ログインと登録が縦に並び、役割別の判断がフォーム内で完結しづらい状態です。
After
補助画面
役割別入口
広告主とVTuberを同じ画面で分け、初手の判断を短くしています。
広告主向けフォーム
価値訴求、補足メリット、登録フォームを同じ視界に入れています。
インフルエンサー向け入口
ログイン前に案件数、提案、サポートの期待値を補足しています。