citycraft

ランディングページビルダー

基本理念

このスキルでは、大胆で印象的なビジュアルのランディングページを作成します。一般的な入れ子のコンテナ、カードグリッド、ありきたりなウェブテンプレートとは一線を画します。すべての出力が、意図を持って作り込まれたデザイン作品に感じられるようにします。

• 大胆なレイアウト — 水平線の代わりにクリップパスの仕切りを使います。画面の外まで大胆にはみ出す文字。グリッドから飛び出す要素。ビューポート全体に広がる見出し。
• デザインの中心となる SVG — 飾りとして散りばめるものではありません。SVG パスはスクロールに合わせてアニメーションし、アイコンには個性を持たせ、<feTurbulence> のノイズで背景テクスチャを作ります。
• 階層と奥行き — GSAP ScrollTrigger で、実際の空間的な奥行きを作り出します。セクション同士が重なり、前のセクションを覆う演出、コンテンツが上をスライドする間、固定されるスティッキーパネル、別々の Z レイヤー上の視差効果などです。
• 背景の質感 — すべてのセクションにテクスチャを加えます。単色だけのフラットな背景は使いません。
• ナビゲーションの意外性 — ナビゲーションに、ありきたりな横長バーは使いません。

---

同梱アセット（これらを使うこと。独自に作り直さない）

このスキルには、あらかじめ作成されたアセットが含まれています。直接読み込んで使用してください。

ファイル	内容	使用する場面
assets/style-preview-template.html	57 都市のスタイルプレビューカード	ステップ 2：sed で __PRODUCT_NAME__ と __PRODUCT_HEADLINE__ を埋め、style-preview.html として保存して開く
assets/options-preview-template.html	ナビゲーションスタイル、カラーバリエーション、トランジションスタイル、ヒーロー／特徴／お客様の声のバリエーションのインタラクティブなデモ	ステップ 3：sed で都市のカラートークンと製品名を埋め、options-preview.html として保存して開く
assets/textures.css	6 種類の CSS テクスチャクラス（.texture-kyoto、.texture-paris、.texture-tokyo など）	該当するクラスを style.css にコピーする
assets/gsap-snippets.js	6 種類の GSAP アニメーション関数（ぼかしでの出現、ライン表示、視差効果、固定ステップ、ブームメニュー、マグネティックピル）	関連する関数を main.js にコピーする
assets/clip-paths.css	8 種類のクリップパス仕切りクラス（.clip-diagonal-br、.clip-parallelogram、.clip-arc-bottom など）	style.css のセクション仕切りに少なくとも 2 つ使用する
assets/sections/hero-variants.html	3 種類のヒーローセクションテンプレート（全画面の大胆な演出／分割画面の緊張感／ミニマルな下降）	ステップ 4：ユーザーのタイポグラフィの好みに合うバリエーションを選び、コピーして調整する
assets/sections/features-variants.html	6 種類の特徴セクションテンプレート（大きな数字／交互表示／タイムライン／ベンタグリッド／横スクロール／開閉式 Q&A）	ステップ 4：コンテンツの種類に基づいて選ぶ（統計 → 大きな数字、使い方の説明 → タイムライン）
assets/sections/testimonial-variants.html	6 種類のお客様の声テンプレート（コンパクトカード／単列引用／モザイクコラージュ／スクロールバナー／会話バブル／アバターウォール）	ステップ 4：お客様の声の件数とビジュアルスタイルの好みに基づいて選ぶ
assets/sections/conversion-variants.html	料金表、FAQ、ブランド一覧、強力な CTA	ステップ 4：関連するセクションをコピーする。すべて CSS カスタムプロパティを使用
references/product-demo-hero.md	製品デモヒーローの原則とシーン設計ガイド	ユーザーがヒーローで製品のワークフローを見せたい場合に読む（ステップ 3／4 を参照）

このスキルの品質を保証するには、これらのアセットを使うことが重要です。 これらのアセットには、出力に独自性をもたらす具体的なデザイン上の判断が盛り込まれています。やり方を説明するのではなく、コードをコピーして調整してください。

---

ワークフロー

ステップ 1：製品を理解する

ユーザーがすでに提示した製品情報とスタイルを再利用します。製品情報が不足している場合にのみ質問します。

「ランディングページの内容を教えてください。製品／サービスの名前と、ひと言での紹介をお願いします。」

ユーザーが製品の説明をすでに提示している場合、都市を選択済みの場合、または Agent に選択を委任している場合は、該当するステップに直接進みます。

ステップ 2～3：任意のスタイルとレイアウトのプレビュー

ユーザーがすでに選択している場合は、その選択を再利用します。Agent に選ばせる場合は、関連する都市の項目を読み、理由を説明してから続行します。比較が必要な場合は、プレビューワークフローに従ってローカルプレビューを生成します。プレビュー機能が利用できない場合は、会話内で少数の候補を提示し、ページを開いたことをユーザーが選択済みであるかのように扱わないでください。

ステップ 4：ランディングページを生成する

{product-name}-landing/ に出力します。

{product-name}-landing/
├── index.html
├── style.css
├── main.js
└── assets/
    └── icons.svg

4a — Bash による組み立て（ファイルを書く前に、まず実行してください）

目的は、バンドルされたアセットのコードをモデルのトークンとして出力しないことです。 代わりに、Bash を使用して、用意済みのアセットをコピーし、出力ファイルにパイプします。モデルが記述するのは、製品固有のコンテンツ（コピー、トークン、オーバーライド）のみです。

ステップ 1 — ディレクトリをセットアップする

_SKILL_DIR="<当前 Skill 的绝对目录>"
_OUT="./{product-name}-landing"
mkdir -p "$_OUT/assets"

ステップ 2 — セクションのバリアントをステージングファイルに組み立てる

使用するバリアントを計画し（下の表を参照）、それぞれをステージングファイルにパイプします。

# Replace B / C / B / PRICING with the user's actual choices
python3 "$_SKILL_DIR/assets/scripts/extract_variant.py" \
  "$_SKILL_DIR/assets/sections/hero-variants.html" B > "$_OUT/_sections.html"
python3 "$_SKILL_DIR/assets/scripts/extract_variant.py" \
  "$_SKILL_DIR/assets/sections/features-variants.html" C >> "$_OUT/_sections.html"
python3 "$_SKILL_DIR/assets/scripts/extract_variant.py" \
  "$_SKILL_DIR/assets/sections/testimonial-variants.html" B >> "$_OUT/_sections.html"
python3 "$_SKILL_DIR/assets/scripts/extract_variant.py" \
  "$_SKILL_DIR/assets/sections/conversion-variants.html" PRICING >> "$_OUT/_sections.html"
python3 "$_SKILL_DIR/assets/scripts/extract_variant.py" \
  "$_SKILL_DIR/assets/sections/conversion-variants.html" CTA >> "$_OUT/_sections.html"

お客様の声には、A、B、C、D、E、Fを使用します。 コンバージョンセクションには、PRICING、COMPARE_PRICING、BRAND_WALL、CTA、FAQ_A、FAQ_Bを使用します。

ステップ 3 — バンドルされた CSS ユーティリティを style.css のベースにコピーする

# Texture: use --texture flag (never read full city-styles.md)
python3 "$_SKILL_DIR/assets/scripts/get_city_tokens.py" "CITY_NAME" --texture > "$_OUT/_texture.css"
# Clip-paths: copy all classes, model picks which to apply via class names
cat "$_SKILL_DIR/assets/clip-paths.css" >> "$_OUT/_texture.css"

ステップ 4 — GSAP のスニペットを main.js のベースにコピーする

cat "$_SKILL_DIR/assets/gsap-snippets.js" > "$_OUT/_gsap-base.js"

次に、3 つのステージングファイル（_sections.html、_texture.css、_gsap-base.js）を読み、利用可能な内容を確認してから、最終的な出力ファイルを作成します。

4b — セクションバリアントのリファレンス

一般的なページ構成：

• SaaS ツール：ヒーロー D → 特徴 C → 特徴 A → お客様の声 A → 料金 → FAQ A → CTA
• エージェンシーのポートフォリオ：ヒーロー A → 特徴 B → お客様の声 C → CTA
• 開発者向けツール：ヒーロー B → 特徴 C → 特徴 A → お客様の声 A → 料金 → FAQ B → CTA
• 高級製品：ヒーロー C → 特徴 B → お客様の声 B → CTA
• B2C アプリ：ヒーロー E → 特徴 E → お客様の声 F → CTA

ユーザーのニーズ	使用するテンプレート	バリアント
ヒーロー — 大胆で巨大なメッセージ	全画面の大胆なレイアウト	A
ヒーロー — 製品ビジュアル＋見出し	分割画面のインパクト	B
ヒーロー — エレガントで、ストーリーを重視	ミニマルな下降構成	C
ヒーロー — 製品のワークフローを見せたい	製品デモ型	D（references/product-demo-hero.mdも参照）
ヒーロー — タイポグラフィ主導で、インパクト重視	タイポグラフィを大胆に展開	E
ヒーロー — エディトリアルなストーリーテリング	雑誌風の大胆な構成	F
ヒーロー — 遊び心のある製品ローンチ	ポップアップカード型	G
特徴 — データ／指標を重視	大きな数値	A
特徴 — 製品のスクリーンショット	交互に配置	B
仕組み — ステップごとの説明	タイムライン	C
特徴 — モジュール式のストーリーブロック	Bento グリッド型	D
特徴 — 閲覧できる機能リボン	水平スクロールのリボン型	E
特徴 — 懸念への対応	質問と回答の展開型	F
料金表	料金表	PRICING
トグル付き料金比較	比較料金表	COMPARE_PRICING
お客様の声 — コンパクトなグリッド	コンパクトなカードグリッド	A
お客様の声 — 雑誌風	1 列の引用ウォール	B
お客様の声 — メイソンリーレイアウト	モザイクコラージュ	C
お客様の声 — 水平スクロール	水平スクロールバー	D
お客様の声 — 会話形式の吹き出し	会話吹き出し	E
お客様の声 — アバターウォール	動画アバターウォール	F
信頼を示すブランドロゴ	ブランドウォール	BRAND_WALL
最終 CTA	強力な CTA セクション	CTA
FAQ — エディトリアルなレイアウト	エディトリアルレイアウト型	FAQ_A
FAQ — カードグリッド	全幅フォーカス型	FAQ_B

4c — 出力ファイルを作成する

index.html — Write ツールを使用して書き込みます。Markdown ブロックは使わず、直接ファイルに書き込みます。

• ドキュメント構造：<html>、<head>（Google Fonts、GSAP CDN、style.css + main.js へのリンク）、<body>
• 選択したナビゲーションスタイルに合わせたナビゲーション HTML
• _sections.html の <style> ブロックと <section> HTML を、ページの順序どおりに貼り付けます
• すべてのプレースホルダーのコピーを、実際の製品コピーに置き換えます。シティの美的スタイルに合った語調にしてください
• Lorem Ipsum やプレースホルダーテキストは使いません
• テンプレートの均一さを崩します。各セクション内の項目ごとに、視覚的な重みを変えてください。テンプレートには繰り返しパターンがあります。1つの項目を主役にし（アクセント背景、大きなカード、注目バッジ、異なる内部レイアウトなど）、ほかの項目は控えめにします。クローンのグリッドのように見えるセクションがないようにしてください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

style.css — Write ツールを使用して書き込みます。構成：

1. :root ブロック — 完全なデザイントークンシステム：$CITY_* トークンの色、選択したフォント、間隔スケール、角丸。モデルがゼロから記述するのはこの部分だけです。
2. _texture.css のテクスチャ + clip-path CSS を貼り付けます
3. 選択したナビゲーションスタイルに合わせたナビゲーション CSS（references/nav-catalog.md から）
4. レイアウトとタイポグラフィのオーバーライド — セクションのデフォルトから異なるものだけを指定します

見出しのフォントサイズにはすべて clamp() を使用します。

• Hero のメイン見出し：clamp(2.8rem, 7vw, 7rem) — 大胆なスタイルでも 7rem を超えないようにします
• セクション見出し：clamp(2rem, 4vw, 4rem)
• 大きな数字／装飾的な数字：clamp(4rem, 10vw, 9rem)
• サブ見出し／説明文：clamp(1rem, 1.4vw, 1.2rem)

style.css にコメントを追加しないでください。コメントはトークンを消費し、出力ファイルに価値を加えません。

main.js — Write ツールを使用して書き込みます。構成：

1. gsap.registerPlugin(ScrollTrigger)
2. _gsap-base.js から関連する関数を貼り付けます。最低限、以下が必要です。
   • initHeroEntrance() — Hero の要素を順番に表示します
   • initParallax() — 異なる速度で動くレイヤーを少なくとも2つ設定します
   • ビューポートに入ったときのセクション見出しの表示
   • ナビゲーション／レイアウトに合った initStickySteps() または initBlastMenu() または initMagneticPill()
3. 最後に呼び出し順を記述し、フォントの読み込み後に ScrollTrigger.refresh() を実行します

main.js にコメントを追加しないでください。

assets/icons.svg — <symbol> 要素を含む SVG スプライト。最低限、ロゴマーク、ナビゲーションのトグル、矢印、チェックマーク、および製品に関連するアイコンを2〜3個含めます。アイコンの線の太さと形状は、シティの美的スタイルに合わせてください。

すべてのファイルを書き込んだら、ステージングファイルを削除します。

rm -f "$_OUT/_sections.html" "$_OUT/_texture.css" "$_OUT/_gsap-base.js"

---

デザインの原則（絶対に破らないこと）

1. #ffffff の背景は禁止です。 セクションにもカードにも使わないでください。暖色系のニュートラルカラーは #f5ede0、寒色系は #edf0ee、ダークカラーは #08060f です。カードにはわずかに色味をつけ、純白にはしないでください。
2. #6366f1 は使わないでください。 色は都市スタイルのパレットから選んでください。
3. セクションの境界ごとに、トランジションの種類を個別に決めてください。 隣り合うセクションの各ペアには、それぞれ固有の視覚的な関係があります。どこでも同じ clip-path クラスを使い回さないでください。ユーザーはオプションのプレビューでトランジションの方向（幾何学的なシャープ／有機的で柔らか／ブレンド／最小限のライン／AI に自動選択）を選択します。その方向に応じて、選ぶクラスを絞り込んでください。GEOMETRIC → 斜線、面取り、段差、ORGANIC → 曲線、スカラップ、弧、BLEND → カバーオーバーレイとグラデーションによるフェード、MINIMAL → 極細の区切り線。__AI_CHOOSE__ の場合は、まず references/city-styles.md で選択された都市の項目を確認し、仕切りやトランジションに関する記述を探してください。その後、境界ごとに判断します。2 つのセクションの内容（ヒーロー → 特徴、特徴 → 料金など）、それぞれのエネルギー感、ページ全体のリズムを考慮してください。使用可能なクラスは assets/clip-paths.css にあります。斜線（clip-diagonal-*、clip-parallelogram）、曲線（clip-round-bottom、clip-scallop、clip-arc-bottom）、グラデーションによるフェード（section-dissolve）、フラットな区切り線（section-rule）。
4. 汎用的なアイコンは禁止です。 都市スタイルの線の太さと形状に合わせてください。
5. 書体は最低 2 種類使ってください。 見出しにはディスプレイ書体／セリフ体、本文にはすっきりしたサンセリフ体を使います。references/city-styles.md から選んでください。装飾的な書体／スクリプト書体（都市スタイルで指定されている場合）は、透かし、引用文、装飾要素に使ってください。ボタン、ナビゲーション、本文には使わないでください。
6. ナビゲーションには意外性を持たせてください。 references/nav-catalog.md から選んだナビゲーションを、その意外性を生み出す要素まで含めて実装してください。
7. バンドル済みのアセットを使ってください。 テクスチャ、GSAP スニペット、clip-paths はスキルのアセットファイルから使用し、一から再実装しないでください。
8. .line-wrap の CJK 対応を行ってください。 ページに中国語または日本語のテキストがあり、行の表示アニメーションに .line-wrap { overflow: hidden } を使う場合は、CJK の文字の上部が切れないように padding-top: 0.15em; margin-top: -0.15em; を追加してください。
9. 同じグリッドの繰り返しは禁止です。 セクション内に繰り返し項目（特徴の行、料金カード、FAQ 項目、お客様の声など）が複数ある場合、すべて同じ見た目にしてはいけません。1 つを大きくする、アクセントを加える、レイアウトを変えるなどして主役にし、ほかの項目はそれを引き立ててください。セクションは、同じ行が並ぶ表計算シートではなく、視覚的な階層のあるポスターのように感じられるべきです。ページが「テンプレート的」に見え、「デザインされた」印象にならない最大の原因はこれです。

---

参照ファイル

• references/city-styles.md — 各都市の美的スタイルに合わせた、正確なデザインパラメーター（フォント、色、テクスチャ、動き、アイコン）
• references/nav-catalog.md — 4 種類のナビゲーションスタイルと、完全な実装手順および GSAP コード
• references/imagery-derivation.md — 都市以外の説明（場面、時代、素材、感情）を具体的なデザイントークンシステムに変換する方法。ユーザーの説明が 57 の都市カードに該当しない場合は、必ず読んでください。
• references/product-demo-hero.md — ヒーロー内で時間駆動型の製品ワークフローのデモを構築する方法と、その適用場面（バリアント D）。シーン設計ガイド、3 幕構成、onEnter() コールバックのパターン、製品タイプからシーンへのマッピング表が含まれています。ユーザーがヒーローで製品のプロセスを見せたい場合は、必ず読んでください。

事実とフォールバック

テンプレート内の評価、顧客ロゴ、利用者数、価格は構成例にすぎません。根拠がない場合は削除するか、実際の製品説明に置き換え、推薦や実績を捏造しないでください。キーボード操作、prefers-reduced-motion、スクリプトや CDN の読み込みに失敗した場合でも静的なコンテンツを読める状態に対応してください。ビジュアル検収では、実際に確認したビューポートと状態を明記してください。レンダリングされていない場合、ビジュアル検収に合格したと主張してはいけません。