ln-dev7/landing-pages

これは何？

主な機能

• 01カスタマイズしたshadcn/uiコンポーネントを使った、Next.jsとTailwind CSSの基盤
• 02各ランディングページが独立しており、個別に実行可能
• 03複数のページでインタラクティブな3Dシーンを採用
• 04ビルド工程不要の静的なショーケースサイト（www/）
• 05変更のないプロジェクトのビルドをスキップする、Vercelへのデプロイ手順

ユースケース

• Next.jsでコンセプトを重視した表現豊かなランディングページを作る方法を学ぶ
• 動作するテンプレートをもとに、マーケティングページやポートフォリオページを作成する
• Reactのコードベースで3DやインタラクティブなWebビジュアルを試す
• 1つのモノレポから複数の小規模サイトをVercelにデプロイする

クイックスタート

1. 1

   プロジェクトフォルダー（例: fallow）に移動します

   cd landing-pages/fallow
2. 2

   pnpm で依存関係をインストールします

   pnpm install
3. 3

   開発サーバーを起動します

   pnpm dev

使う前に知っておきたいこと

• !Node.js 20.9 以降と pnpm が必要です。
• !Sundaze の Canvas UI エフェクトには MIT + Commons Clause が適用され、商用利用が制限されています。
• !フォント、画像、サードパーティ製コンポーネントには、それぞれ独自のライセンスが適用されます。

トピック

よくある質問

landing-pages とは？

Next.js、Tailwind CSS、shadcn/uiで構築した、個性豊かなオープンソースのランディングページ集。それぞれが独立したプロジェクトです。 お化け屋敷を巡る3Dの旅、インタラクティブなサーフィンスクールを備えたサーフクラブ、独立系のボルダリングクラブなど、それぞれ異なるコンセプトを軸にデザインされたランディングページを集めたリポジトリです。landing-pages/ 配下の各フォルダは独立したNext.jsプロジェクトで、pnpmを使って個別にインストールして実行できます。

landing-pages は無料で使えますか？ライセンスは？

landing-pages は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

landing-pages は今もメンテナンスされていますか？

活発にメンテナンス中。landing-pages の最終コミットは 2026年11月6日 です。

landing-pages は何に使えますか？

Next.jsでコンセプトを重視した表現豊かなランディングページを作る方法を学ぶ 動作するテンプレートをもとに、マーケティングページやポートフォリオページを作成する Reactのコードベースで3DやインタラクティブなWebビジュアルを試す 1つのモノレポから複数の小規模サイトをVercelにデプロイする

landing-pages のインストール方法は？

プロジェクトフォルダー（例: fallow）に移動します: cd landing-pages/fallow pnpm で依存関係をインストールします: pnpm install 開発サーバーを起動します: pnpm dev

landing-pages はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/ln-dev7/landing-pages