メインコンテンツまでスキップ

ツールと設定

Theme Builderでは、サイトの分析、デザイン、構築を行うためのツール群を使用します。バージョン1.16.0では、sd-ai-agent/site-scrapeがティア1ツールになりました。これにより、Theme Builderでデフォルトで利用できるようになりました。

利用可能なツール​

ティア1ツール（常に利用可能）​

ティア1ツールは、追加の設定なしでTheme Builderにデフォルトで利用できます。

sd-ai-agent/site-scrape​

目的: 既存のウェブサイトを分析し、デザインのインスピレーション、コンテンツの構造、機能性を抽出します。

機能:

  • ウェブサイト分析 — 競合他社やインスピレーションとなるウェブサイトをスクレイピングして分析します。
  • デザイン抽出 — 色、フォント、レイアウトパターンを特定します。
  • コンテンツ構造 — ページの構成や階層を理解します。
  • 機能検出 — プラグインや機能性を特定します。
  • パフォーマンス分析 — ページ速度と最適化を確認します。
  • SEO分析 — メタタグや構造化データをレビューします。

使用例:

Analyze the design of example.com and use it as inspiration for my site.

抽出できるもの:

  • カラーパレットと色の使用方法
  • タイポグラフィ（フォントとサイズ）
  • レイアウト構造と余白
  • ナビゲーションパターン
  • コンテンツの構成
  • 画像やメディアの使用方法
  • インタラクティブな要素
  • モバイル対応状況

制限事項:

  • パスワードで保護されたサイトはスクレイピングできません。
  • robots.txtやサイトのポリシーを尊重します。
  • 動的コンテンツをキャプチャできない場合があります。
  • JavaScriptが多用されているサイトは分析が限定的になる場合があります。
  • 大規模なサイトは分析に時間がかかる場合があります。

ティア2ツール（オプション）​

ティア2ツールは、Theme Builderの設定で明示的に有効にした場合に利用できます。

Advanced Analytics​

詳細なパフォーマンス指標を提供します。

  • ページ読み込み時間
  • Core Web Vitals
  • SEOスコア
  • アクセシビリティスコア
  • ベストプラクティススコア

Content Optimizer​

以下の項目について分析し、改善案を提案します。

  • 可読性
  • SEO最適化
  • キーワードの使用
  • コンテンツ構造
  • CTA（行動喚起）の配置

ティア3ツール（プレミアム）​

ティア3ツールは、追加の設定やプレミアム機能が必要です。

AI Content Generator​

以下のコンテンツを生成します。

  • 商品説明
  • サービスページ
  • ブログ記事
  • メタディスクリプション
  • CTAコピー

Advanced Design Tools​

高度なデザイン機能を提供します。

  • カスタムCSSの生成
  • アニメーションの作成
  • インタラクティブ要素のデザイン
  • 高度な配色理論
  • タイポグラフィの最適化

ツール設定​

ツールを有効にする方法​

Theme Builderで追加のツールを有効にするには、以下の手順に従ってください。

  1. Gratis AI Agent → Settings に移動します。
  2. Theme Builder → Tools に進みます。
  3. 必要なツールをオン/オフに切り替えます。
  4. 設定を保存します。

ツール権限​

一部のツールは権限が必要です。

  • サイトスクレイピング — インターネットアクセスが必要です。
  • Analytics — Google Analyticsの連携が必要です。
  • コンテンツ生成 — APIキーが必要です。
  • 高度な機能 — プレミアムサブスクリプションが必要な場合があります。

APIキーと認証情報​

APIキーが必要なツールは、以下のように設定してください。

  1. Gratis AI Agent → Settings → API Keys に移動します。
  2. 各ツールに認証情報を入力します。
  3. 接続をテストします。
  4. 安全に保存します。

sd-ai-agent/site-scrape の使用方法​

基本的な使い方​

Theme Builderにウェブサイトの分析を依頼します。

Analyze the design of my competitor's site at competitor.com
and suggest design improvements for my site.

特定の分析​

特定の種類の分析をリクエストします。

Extract the color palette from example.com and use it as inspiration.
Analyze the navigation structure of example.com and apply similar
organization to my site.
Check the mobile responsiveness of example.com and ensure my site
is equally responsive.

比較分析​

複数のサイトを比較します。

Compare the designs of site1.com and site2.com and create a design
that combines the best elements of both.

ツールの制限事項と考慮事項​

レート制限（Rate Limiting）​

  • サーバーの過負荷を防ぐため、スクレイピングにはレート制限が設けられています。
  • 同じサイトへの複数リクエストは制限される場合があります。
  • 大規模なサイトは分析に時間がかかる場合があります。

コンテンツの正確性​

  • 動的コンテンツは完全にキャプチャされない場合があります。
  • JavaScriptでレンダリングされたコンテンツは不完全な場合があります。
  • リアルタイムデータは反映されない場合があります。
  • 一部のコンテンツはペイウォール（有料の壁）の背後にある場合があります。

法的および倫理的な考慮事項​

  • robots.txtやサイトのポリシーを尊重してください。
  • 著作権で保護されたコンテンツを複製目的でスクレイピングしないでください。
  • 分析はインスピレーションとして使用し、コピー目的で使用しないでください。
  • 抽出したコンテンツを使用する権利があるか確認してください。
  • 分析対象サイトの利用規約を遵守してください。

パフォーマンスへの影響​

  • 大規模なサイトのスクレイピングには時間がかかります。
  • 複数のスクレイピングを同時に行うと、より時間がかかる場合があります。
  • ネットワーク接続が速度に影響します。
  • 大量のデータセットは、より多くの処理を必要とする場合があります。

ベストプラクティス​

サイト分析の利用方法​

  1. 複数のサイトを分析する — 複数の情報源からインスピレーションを集めましょう。
  2. 構造に焦点を当てる — レイアウトや構成パターンを学びましょう。
  3. 色を抽出する — カラーパレットを出発点として使用しましょう。
  4. タイポグラフィを研究する — 好きなフォントの組み合わせを特定しましょう。
  5. ナビゲーションを確認する — メニューの構成を理解しましょう。

倫理的なスクレイピング​

  1. robots.txtを尊重する — サイトのガイドラインに従いましょう。
  2. コンテンツをコピーしない — 分析はインスピレーションとしてのみ使用しましょう。
  3. 権利を確認する — 抽出したコンテンツを使用する権利があるか確認しましょう。
  4. 情報源を明記する — インスピレーションの源泉をクレジットしましょう。
  5. 規約に従う — サイトの利用規約を遵守しましょう。

ツールの効果を最大化する方法​

  1. 具体的に依頼する — 特定種類の分析をリクエストしましょう。
  2. 背景情報を提供する — サイトの目的を説明しましょう。
  3. 期待値を設定する — デザインの目標を説明しましょう。
  4. 反復する — 結果に基づいて洗練させましょう。
  5. ツールを組み合わせる — 包括的な分析のために複数のツールを使いましょう。

トラブルシューティング​

サイトがスクレイピングできない​

  • サイトが一般に公開されているか確認してください。
  • robots.txtがスクレイピングを許可しているか確認してください。
  • 別のサイトを試してみてください。
  • インターネット接続を確認してください。
  • 問題が解決しない場合は、サポートに連絡してください。

分析が不完全な場合​

  • サイトが動的コンテンツを持っている可能性があります。
  • JavaScriptが完全にレンダリングされていない可能性があります。
  • 大規模なサイトはタイムアウトする可能性があります。
  • 代わりに特定のページを分析してみてください。
  • 特定の分析タイプをリクエストしてみてください。

パフォーマンスが遅い場合​

  • 大規模なサイトは分析に時間がかかります。
  • 複数のスクレイピングを同時に行うと、より時間がかかります。
  • ネットワーク接続が速度に影響します。
  • 混雑を避けた時間帯に試してみてください。
  • まずはより小さなセクションから分析を試みてください。

関連ドキュメント​