Tilda Publishing

Tilda Publishing は何をしますか？

概要

Tildaはブロックベースのウェブサイトビルダーです。ブロックをページにドラッグし、視覚的にカスタマイズして公開します。バックエンドの管理やホスティングの設定は不要です。開発者向けには、任意のブロックにカスタムHTML/CSS/JSを注入し、Tilda APIを使用してプログラム的にコンテンツを管理し、フォームを任意のバックエンドに接続し、カスタム統合を構築できます。マーケティングサイト、ランディングページ、非技術者が独立してコンテンツを更新する必要がある小規模なeコマースストアに最適です。

使用するタイミング

• マーケティングサイトやランディングページを迅速に構築する場合
• 非技術者が簡単に更新できるCMSが必要な場合
• 中小規模のeコマース（Tildaの組み込みストア）
• 高度なアニメーションを備えたカスタムランディングページ
• ビジュアル編集とカスタムコードの両方を必要とするサイト

手順

サイト構造

Tildaサイトは次のように構成されています：

• プロジェクト → ページを含む
• ページ → ブロック（セクション）を含む
• ブロック → 事前設計されたセクション（ヒーロー、特徴、価格、ギャラリーなど）
• Zero Block — 完全なデザインの自由度を持つカスタムブロック

ブロック内のカスタムHTML/CSS/JS

<!-- カスタムコードの追加方法：設定 → 詳細 → <head>内のHTMLコード、または</body>の前 -->

<!-- カスタムCSS（head） -->
<style>
  /* Tildaのデフォルトを上書き */
  .t-title {
    font-family: 'Inter', sans-serif !important;
  }

  /* カスタムアニメーション */
  .t-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
  }
  .t-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* レスポンシブオーバーライド */
  @media (max-width: 640px) {
    .t-cover__wrapper {
      min-height: 60vh !important;
    }
  }
</style>

<!-- カスタムJavaScript（</body>の前） -->
<script>
  // スクロールアニメーション用のIntersection Observer
  document.addEventListener('DOMContentLoaded', () => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('is-visible');
        }
      });
    }, { threshold: 0.1 });

    document.querySelectorAll('.t-animate').forEach((el) => observer.observe(el));
  });

  // カスタムフォーム処理 — 独自のAPIに送信
  document.querySelector('.t-form')?.addEventListener('submit', async (e) => {
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData);

    // Tildaの組み込み処理と並行してバックエンドに送信
    await fetch('https://api.myapp.com/leads', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
  });
</script>

Zero Block（カスタムデザイン）

Zero Blockは、Artboardのような完全な制御を提供します。要素を正確な位置に配置し、カスタムの配置、アニメーション、レスポンシブブレークポイントを設定できます。

<!-- カスタムインタラクティブ要素を備えたZero Block -->
<div class="custom-calculator" id="price-calc">
  <h3>価格計算機</h3>
  <div class="calc-row">
    <label>ユーザー数</label>
    <input type="range" id="users" min="1" max="1000" value="10">
    <span id="users-count">10</span>
  </div>
  <div class="calc-row">
    <label>プラン</label>
    <select id="plan">
      <option value="starter">スターター — $5/ユーザー</option>
      <option value="pro">プロ — $12/ユーザー</option>
      <option value="enterprise">エンタープライズ — $25/ユーザー</option>
    </select>
  </div>
  <div class="calc-result">
    合計: <span id="total">$50</span>/月
  </div>
</div>

<script>
  const prices = { starter: 5, pro: 12, enterprise: 25 };
  const usersInput = document.getElementById('users');
  const planSelect = document.getElementById('plan');

  function updatePrice() {
    const users = parseInt(usersInput.value);
    const price = prices[planSelect.value];
    document.getElementById('users-count').textContent = users;
    document.getElementById('total').textContent = '$' + (users * price).toLocaleString();
  }

  usersInput.addEventListener('input', updatePrice);
  planSelect.addEventListener('change', updatePrice);
</script>

Tilda API

// api/tilda.ts — Tildaコンテンツをプログラムで管理
const TILDA_PUBLIC_KEY = process.env.TILDA_PUBLIC_KEY;
const TILDA_SECRET_KEY = process.env.TILDA_SECRET_KEY;
const BASE_URL = "https://api.tildacdn.info/v1";

// すべてのプロジェクトを取得
async function getProjects() {
  const res = await fetch(
    `${BASE_URL}/getprojectslist/?publickey=${TILDA_PUBLIC_KEY}&secretkey=${TILDA_SECRET_KEY}`
  );
  return res.json(); // { status: "FOUND", result: [{ id, title, ... }] }
}

// プロジェクト内のすべてのページを取得
async function getPages(projectId: number) {
  const res = await fetch(
    `${BASE_URL}/getpageslist/?publickey=${TILDA_PUBLIC_KEY}&secretkey=${TILDA_SECRET_KEY}&projectid=${projectId}`
  );
  return res.json();
}

// ページの完全なコンテンツを取得（HTML + CSS + JS）
async function getPageFull(pageId: number) {
  const res = await fetch(
    `${BASE_URL}/getpagefull/?publickey=${TILDA_PUBLIC_KEY}&secretkey=${TILDA_SECRET_KEY}&pageid=${pageId}`
  );
  return res.json();
  // 戻り値: { html, css, js, images[], title, descr, ... }
}

// ページを自分のホスティングにエクスポート
async function exportPage(pageId: number) {
  const page = await getPageFull(pageId);
  const { html, css, js } = page.result;

  // 自己完結型HTMLを構築
  return `
    <!DOCTYPE html>
    <html>
    <head>
      <style>${css}</style>
    </head>
    <body>
      ${html}
      <script>${js}</script>
    </body>
    </html>
  `;
}

フォーム処理とWebhook

// webhook/tilda-form.ts — Tildaフォームの送信を受け取る
/**
 * Tildaでの設定: ブロック設定 → フォーム → Webhook URL
 * Tildaは送信ごとにフォームデータを含むPOSTを送信します。
 */
export async function handleTildaForm(req: Request) {
  const formData = await req.formData();
  const data = Object.fromEntries(formData);

  // data: { Name: "Kai", Email: "[email protected]", Phone: "+1234567890", ... }

  // CRMに保存
  await fetch("https://api.mycrm.com/leads", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      name: data.Name,
      email: data.Email,
      phone: data.Phone,
      source: "tilda-landing",
    }),
  });

  // Telegramに送信
  await fetch(`https://api.telegram.org/bot${BOT_TOKEN}/sendMessage`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      chat_id: CHAT_ID,
      text: `🔔 新しいリード！\n名前: ${data.Name}\nメール: ${data.Email}\n電話: ${data.Phone}`,
    }),
  });

  return new Response("OK");
}

eコマース（Tildaストア）

<!-- カスタム商品ページの拡張 -->
<script>
  // カスタム処理でカートに追加
  document.addEventListener('DOMContentLoaded', () => {
    // カートに追加イベントを追跡
    document.querySelectorAll('.js-store-buttons-buy-btn').forEach((btn) => {
      btn.addEventListener('click', () => {
        const productName = btn.closest('.js-product')
          ?.querySelector('.js-product-name')?.textContent;

        // アナリティクスに送信
        if (window.dataLayer) {
          window.dataLayer.push({
            event: 'add_to_cart',
            product_name: productName,
          });
        }
      });
    });
  });
</script>

SEOとアナリティクスの設定

<!-- 設定 → 詳細 → <head>内のHTMLコードに追加 -->

<!-- Google Analytics 4 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

<!-- Facebook Pixel -->
<script>
  !function(f,b,e,v,n,t,s){/* ... Facebook Pixelコード ... */}();
  fbq('init', 'YOUR_PIXEL_ID');
  fbq('track', 'PageView');
</script>

<!-- カスタム構造化データ -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "My Company",
  "url": "https://mycompany.com",
  "logo": "https://mycompany.com/logo.png",
  "contactPoint": { "@type": "ContactPoint", "telephone": "+1-234-567-8900" }
}
</script>

例

例1: マーケティングランディングページの構築

ユーザープロンプト: 「SaaS製品向けのランディングページを作成してください。ヒーロー、特徴、価格、FAQ、お問い合わせフォームを含め、スタッフがテキストと画像を更新できるようにしてください。」

エージェントはTildaブロックでページをデザインし、フォームwebhookを設定し、ブランドの一貫性を保つためのカスタムCSSを追加し、アナリティクストラッキングを設定します。

例2: Tilda上のカスタムインタラクティブ要素

ユーザープロンプト: 「Tildaサイトに価格計算機とインタラクティブな製品比較表を追加してください。」

エージェントはZero Blockレイアウトを作成し、計算機と比較表用のカスタムHTML/JSを実装し、Tildaテーマに合わせてスタイルを調整します。

例3: TildaフォームをCRMに接続

ユーザープロンプト: 「すべてのフォーム送信をCRMに送信し、Telegramで営業チームに通知してください。」

エージェントはTilda webhookを設定し、送信を受け取るサーバーレス関数を作成し、データをCRMとTelegramに転送します。

ガイドライン

• 構造にはブロック、カスタムにはZero Block — 迅速な構築には事前構築ブロックを、完全な制御が必要な場合はZero Blockを使用
• 設定内のカスタムコード — CSS/メタタグは<head>内、JavaScriptは</body>の前に配置
• フォームには組み込みwebhook — 送信を任意のURLに転送可能
• Tilda APIは読み取り専用 — コンテンツのエクスポートは可能だが、API経由でページを作成することは不可
• ページごとのSEO設定 — タイトル、説明、OGタグはページ設定で構成
• カスタムドメイン — DNSをTildaに向け、SSLは自動
• eコマースは組み込み — 商品カタログ、カート、チェックアウト、決済に対応
• デフォルトでレスポンシブ — ブロックは自動適応するが、ブレークポイントをテストして調整
• スタッフはすべてを編集可能 — テキスト、画像、ブロック、ページ順序をビジュアルエディターで変更
• セルフホスティング用にエクスポート — APIから完全なHTML/CSS/JSを取得して独自デプロイが可能
• 重要なTildaクラスを上書きしない — カスタムCSSには名前空間をプレフィックスとして付与
• Google Tag Manager — 複雑なトラッキング設定にはインラインスクリプトではなくGTMを使用