Landing Scroll Story

Landing Scroll Storyは、サービスのURL、README、紹介文から、そのまま動くNext.jsのランディングサイトを一式作成します。質問は最大3つ。実行してデプロイできるプロジェクトのzipが届きます。

2種類のテンプレート

Light(SEO重視)

• 動くバーのダークヒーロー、フローティングのピル型ナビ、ベントカード、スクロールで固定されるショーケース、利用手順、FAQ
• 詳細ガイドページ、FAQPageとWebSiteのJSON-LD
• 本番URLを設定するまでsitemapとrobotsは閉じたままです(Previewデプロイは一切インデックスされません)

Cinematic(ビジュアル重視)

• GSAP + ScrollTrigger + Lenisによる演出
• ヒーローがベントグリッドへ縮小し、スクロールで進むLottieイントロ、バリューカード、マーキーのショーケース、カーテン式フッターが続きます
• モバイル対応レイアウト付き

使い方

1. URL、README、または短い説明を渡します。
2. lightかcinematicを選びます。スキルがおすすめと理由を伝えます。
3. 文面を入れ、ブランドカラーをコマンド1つで設定し、ビルド、型チェック、デスクトップとモバイル幅の確認まで行います。
4. 実行・文面の編集・デプロイ(Vercel、Cloudflare、Search Console)の短いメモ付きで、プロジェクトのzipが届きます。

出力サンプル

以下のスクリーンショットは、このスキルで作成した架空のサンプルサービス(「Brewly」)のものです。

ご注意

• cinematicテンプレートのアートワークは、コードで生成したシンプルな図形です。仕上がりを高めたい場合は、public/landing/のファイルを独自のアートワークに差し替えてください。
• cinematicテンプレートは複数のセクションをハイドレーション後に描画するため、サーバーHTMLに本文の大半が含まれません。検索順位が重要な場合はlightを選んでください。
• 開発環境で、デスクトップと幅390pxのビューポートで確認しています。実機やSafariでのテストは含まれません。
• 文面の品質は元の資料に左右されます。スキルが数字、顧客、受賞歴を作り出すことはありません。

ライセンスと帰属表示

• cinematicテンプレートは、SEED Design System(github.com/daangn/seed-design)のランディングページのコードを元にしています。Apache-2.0、Copyright 2025 Danggeun Market Inc.。ライセンス本文と表示は納品プロジェクトに含まれます。SEEDおよびDaangnのロゴ、名称、メディアは含まれません。本製品はDaangnとは無関係で、提携・後援・推薦を受けていません。
• GSAPは無料のStandard Licenseで使用しています。フォントPretendardはSIL OFL 1.1です。