デザイン2026

Static LP Template Collection

添付のReact / TSX構成をもとに、4テーマのLPと登録ページをテンプレートとして整理したコレクションです。

ReactTypeScriptTemplate LPGSAPMotionThree.js

PREVIEW ROUTES下層ページ

VCreation Match

クリエイター × VTuber マッチングのLPテンプレート

YouTube・配信レポート分析SaaSのLPテンプレート

オンラインボーカルコーチングのLPテンプレート

インフルエンサー案件管理のLPテンプレート

TEMPLATE LP添付React / TSX構成

添付された React / TSX 版は、LPページ4本、会員登録ページ4本、共通フォーム、テーマ切替、登録フロー管理を含むテンプレート集です。PREVIEWではビルド済みの画面を開き、ポートフォリオ上では各テンプレートの用途と構成が分かる形で整理しています。

クリエイター × VTuber マッチング

ポートフォリオ、AIマッチング、DM、決済、ライセンス管理までを訴求するマッチングLP。

Three.jsGSAPMotion

YouTube・配信レポート分析SaaS

複数プラットフォームの再生数、収益、視聴者データを可視化する分析SaaS向けLP。

D3GSAPMotion

オンラインボーカルコーチング

レッスン導線、講師訴求、料金、申込までをひと続きにしたスクール系LP。

Anime.jsGSAPMotion

インフルエンサー案件管理

案件管理、進行状況、成果レポートを整理するマーケティング支援LP。

@xyflow/reactGSAPMotion

RegisterFormFields.tsx

4ステップ登録フォームUIを共通化し、各サービスの登録ページで再利用します。

ThemeToggle.tsx / ThemeContext.tsx

ライト・ダーク切替をテンプレート全体で扱える構成です。

useRegisterFlow.ts

登録フローの入力状態、ステップ遷移、完了処理を管理します。

threegsapmotionanimejsd3@xyflow/reactlenisreact-routerlucide-react