jpskill.com
💼 ビジネス コミュニティ

page-builder

Tailarkのコンポーネントを活用して、ランディングページやマーケティングサイトを効率的に構築し、ビジネスの成長を支援するSkill。

📜 元の英語説明(参考)

Helper for building landing pages and marketing sites using Tailark components.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Tailarkのコンポーネントを活用して、ランディングページやマーケティングサイトを効率的に構築し、ビジネスの成長を支援するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o page-builder.zip https://jpskill.com/download/16911.zip && unzip -o page-builder.zip && rm page-builder.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/16911.zip -OutFile "$d\page-builder.zip"; Expand-Archive "$d\page-builder.zip" -DestinationPath $d -Force; ri "$d\page-builder.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して page-builder.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → page-builder フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Page Builder Skill

このスキルは、あらかじめ構築された「Tailark」コンポーネントを選択し構成することで、高品質なマーケティングページを作成するのに役立ちます。

ワークフロー

  1. 要件の分析: ページのタイプ（ランディング、価格、会社概要、お問い合わせ）と必要なセクション（Hero、Features、Social Proofなど）を決定します。
  2. コンポーネントの選択: reference.mdを参照して、各セクションに最適なコンポーネントを選択します。
  3. 実装:
    • 選択したコンポーネントを page.tsx にインポートします。
    • コピーとカスタマイズ: 単にインポートするだけでなく、テキスト、画像、またはレイアウトを大幅に変更する必要がある場合は、コンポーネントのコードを新しいローカルコンポーネント（例：src/components/landing/my-hero.tsx）にコピーすることを推奨します。
    • 構成: セマンティックな <main> タグ内にそれらを積み重ねます。

コンポーネント選択戦略

  • ランディングページ: HeroSection -> LogoCloud -> Features-12 -> WallOfLoveSection -> CallToAction。
  • 価格ページ: Pricing または PricingComparator -> FAQs。
  • 会社概要ページ: Content-2 -> StatsSection -> TeamSection。
  • お問い合わせページ: ContactSection。

カスタマイズ

すべてのコンポーネントは、Tailwind CSS と Shadcn UI で構築されています。

  • アイコン: lucide-react を使用します。
  • 画像: next/image を使用します。プレースホルダーを実際のアセットに置き換えてください。
  • 色: グローバルテーマを尊重します。

リファレンス

利用可能なコンポーネントの完全なリストと、視覚的な説明および推奨事項については、reference.md を参照してください。

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Page Builder Skill

This skill helps you construct high-quality marketing pages by selecting and composing pre-built "Tailark" components.

Workflow

  1. Analyze Requirement: Determine the type of page (Landing, Pricing, About, Contact) and the sections needed (Hero, Features, Social Proof, etc.).
  2. Select Components: Consult reference.md to pick the most suitable components for each section.
  3. Implementation:
    • Import the chosen components into your page.tsx.
    • Copy & Customize: Do not just import; feel free to copy the component code into a new local component (e.g., src/components/landing/my-hero.tsx) if you need to change text, images, or layout significantly.
    • Composition: Stack them in a semantic <main> tag.

Component Selection Strategy

  • Landing Page: HeroSection -> LogoCloud -> Features-12 -> WallOfLoveSection -> CallToAction.
  • Pricing Page: Pricing or PricingComparator -> FAQs.
  • About Page: Content-2 -> StatsSection -> TeamSection.
  • Contact Page: ContactSection.

Customization

All components are built with Tailwind CSS and Shadcn UI.

  • Icons: Uses lucide-react.
  • Images: Uses next/image. Replace placeholders with real assets.
  • Colors: Respects the global theme.

Reference

See reference.md for a complete list of available components with visual descriptions and recommendations.