ランディングページスキル / cskwork/landing-page-skill

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

概要

美しくインタラクティブなランディングページを、フレームワークやビルド手順なしで、プレーンなHTML/CSS/JSで構築するための、完全なデザインシステム + コンポーネントライブラリです。再利用可能なCSSデザイントークン、JSインタラクションパターン、HTMLコンポーネントテンプレートとして提供されます。

基本原則: デザインシステムファイルをコピーし、コンポーネントテンプレートからセクションを構成し、トークンをカスタマイズします。すべてがゼロ依存で動作します（オプション: Google Fonts CDN）。

使用すべきケース

• 製品ランディングページ、マーケティングサイト、またはショーケースの構築
• インタラクティブ要素を含むドキュメントサイトの作成
• GitHub Pages、Netlify、または任意の静的ホストへのデプロイ
• ダーク/ライトテーマ切り替え、スクロールアニメーション、ツールチップが必要な場合
• React/Vue/ビルドツールを使わずに洗練されたデザインを実現したい場合

使用すべきでないケース:

• 状態管理を伴う複雑なWebアプリケーション（フレームワークを使用してください）
• サーバーサイドレンダリングページ（これは静的専用です）
• 内部管理ダッシュボード（過剰です）

クイックリファレンス

コンポーネント	ファイル	主要クラス
デザイントークン	design-system/design-system.css	:root 変数、--accent-*、--gradient-*
ナビゲーションバー	components-reference.html	.navbar、.nav-links、.lang-toggle
ヒーロー	components-reference.html	.hero、.hero-title、.gradient-text、.hero-stats
機能カード	components-reference.html	.feature-grid、.feature-card、.reveal
コードブロック	components-reference.html	.code-block、.code-header、.code-copy
ツールチップ	components-reference.html	.tooltip-trigger、[data-tooltip]
タブ	components-reference.html	.tab-list、.tab-btn、.tab-panel
テーマ切り替え	design-system.css + app-template.js	[data-theme]、.icon-btn[data-toggle="theme"]
言語ボタン	design-system.css	.lang-toggle、.lang-btn[data-lang]
スクロールリビール	app-template.js	.reveal → .visible（IntersectionObserver経由）
i18n	app-template.js	[data-i18n] + 翻訳辞書

デザインシステム

design-system.css は、両方のテーマの完全なトークンセットを提供します。ブランドに合わせてこれらを調整してください。詳細はファイルを参照してください。

維持しているダーク/ライトトークンについては design-system/design-system.css を参照し、ここに2つ目のトークンリストを維持するのではなく、要求されたブランドに合わせて調整してください。

ファイル

ファイル	目的
design-system/design-system.css	完全なCSS: トークン、ナビゲーションバー、ヒーロー、カード、コードブロック、ツールチップ、タブ、フッター、レスポンシブ
design-system/app-template.js	JS: スクロールリビール、ナビゲーションバースクロール、コードコピー、タブ、テーマ切り替え、モバイルメニュー、i18n
design-system/components-reference.html	コピー＆ペースト可能なHTMLスニペットを含むすべてのコンポーネント
templates/landing-template.html	完全な開始用テンプレート — すべてのセクションを含むワイヤーフレーム

ツールチップパターン

ツールチップは、デスクトップ（ホバー）およびモバイル/タッチ（タップで切り替え）で動作します。タッチサポートには app-template.js が必要です。

<!-- 上方向に開く（デフォルト） -->
<span class="tooltip-trigger" data-tooltip="役立つ説明はこちら">
    ホバーしてね
</span>

<!-- 下方向に開く（ページ上部近くのトリガー用） -->
<span class="tooltip-trigger tooltip-bottom" data-tooltip="説明">
    ホバーしてね
</span>

<!-- 長いテキスト用のワイドバリアント（モバイルで折り返し） -->
<span class="tooltip-trigger tooltip-wide" data-tooltip="長い複数行の説明...">
    ホバーしてね
</span>

デスクトップ: CSS :hover でツールチップを表示します。モバイル/タブレット: JS がタップで切り替え、外側クリックで閉じる機能を追加します。キーボード: Tab でフォーカス、Enter/Space で切り替え、Escape で閉じます。

タッチおよびキーボードパスは、トリガーに .tooltip-active をトグルすることで機能します。手書きのツールチップCSSは、.tooltip-trigger:hover::after と .tooltip-trigger.tooltip-active::after を一緒にスタイリングする必要があります。そうしないとタップが機能しません。独自のツールチップを記述する前に、design-system/design-system.css のセクション10（ツールチップ）を読んでください。

重ね合わせ: ツールチップは、.feature-card:hover、.code-block:hover、および .callout:hover の z-index:10 によってコンテナから逃れます。これらのルールを維持し、子要素（.feature-card::before が行うように）に border-radius で角丸をクリップしてください。コンテナに overflow:hidden があるとツールチップがクリップされ、どんなz-indexでも救えません。

ビルドワークフロー

1. design-system.css、app-template.js、templates/landing-template.html（index.htmlにリネーム）をプロジェクトに コピー します。テンプレートがファイル名でリンクしているため、3つのファイルはすべて同じ場所に置きます。
2. components-reference.html から セクションを追加 します（機能、コードブロック、タブ、コールアウト、フッター）をワイヤーフレームに追加します。
3. :root 内の トークンをカスタマイズ します（色、フォント、グラデーション）。
4. HTMLに コンテンツを追加 し、多言語の場合は data-i18n キーを設定します。
5. ローカルでテスト — ブラウザで index.html を開き、以下の「よくある間違い」のすべての行を確認します。各行が問題なければ完了です。
6. 確認済みの ファイルを納品 します。要求された場合にのみ、合意されたホストとリポジトリワークフローを使用してデプロイします。

GitHub Pagesへのデプロイ

公開が要求された場合は、既存のリポジトリとPages設定を確認し、レビュー済みのファイルを準備し、そのデプロイワークフローに従います。許可があった場合のみ、パブリックリポジトリを作成するか可視性を変更します。指定された出力ファイルをステージングし、無関係な作業を保持します。公開URLを報告する前に、デプロイされたリビジョンとライブコンテンツを確認します。HTTP 200だけでは視覚的な証明にはなりません。

よくある間違い

間違い	修正
meta viewportがない	<meta name="viewport" content="width=device-width, initial-scale=1.0"> を追加
<html> に [data-theme] がない	デフォルトテーマとして <html data-theme="dark"> を設定
リビール要素が非表示	app-template.js がロードされ、.reveal に対応する .visible ロジックがあることを確認
非表示のタブパネル内のリビール	タブ切り替えで自動リビール。または、タブコンテンツから .reveal を削除
ツールチップが上部で切れる	ビューポート上部近くのトリガーには .tooltip-bottom バリアントを使用
読み込み時のテーマフラッシュ	レンダリング前に localStorage.getItem('lp-theme') を data-theme に読み込む <head> 内のインライン <script> — すでに templates/landing-template.html にあり
JSなしでコンテンツが非表示	<html> に class="no-js" + .no-js .reveal { opacity:1 } フォールバック
コードコピーが動作しない	.code-copy ボタンが存在し、JSがロードされていることを確認
スタイル未適用コンテンツのフラッシュ	スタイルシートの前に <head> にフォント <link> を配置
フォーカススタイルがない	すべてのインタラクティブ要素には組み込みの :focus-visible アウトラインあり

アクセシビリティ

デザインシステムには以下が含まれます:

• すべてのインタラクティブ要素に :focus-visible アウトライン（キーボードナビゲーション）
• prefers-reduced-motion メディアクエリ（アニメーション無効化）
• .no-js フォールバック（JavaScriptなしでコンテンツ表示可能）
• アイコンのみのボタンに対するARIAラベル
• セマンティックHTML構造（適切な見出し階層）
• テーマのコントラストトークン。WCAG準拠を主張する前に、カスタマイズ後にコントラストを確認してください。