ai-summary-request

AI サマリーのリクエスト

概要

このスキルは、訪問者がウェブサイトの AI サマリーをリクエストできる、AI プラットフォームのアイコン付きフッターコンポーネントを作成します。ワークフローでは、まずウェブサイトのドメインを検出して確認し、次に AI による見つけやすさを高めるための llms.txt ファイルを任意で生成するかどうかを尋ねます。

このスキルを使用するタイミング

次の場合にこのスキルを使用します。

• ユーザーが自分のサイトに AI プラットフォーム連携ボタンを追加したい
• ユーザーが訪問者に自分のビジネスの AI サマリーを簡単に取得してもらいたい
• ユーザーが「AI サマリー」または AI プラットフォームボタンについて言及した
• ユーザーがウェブサイト用の llms.txt ファイルを作成したい（任意）
• ユーザーが、自分のウェブサイトを AI に見つけてもらう方法について質問した

ワークフロー

前提条件：ドメインの検出と確認

どの手順に進む前にも、必ずウェブサイトのドメインを特定してください。

手順 1：自動検出を試みる

次の優先順位でドメイン情報を検索します。

1. 環境ファイル（.env、.env.local、.env.production）- SITE_URL、BASE_URL、NEXT_PUBLIC_URL、NUXT_PUBLIC_SITE_URL、VITE_SITE_URL などを確認します
2. デプロイ設定ファイル（vercel.json、netlify.toml、firebase.json、fly.toml）- ドメインやエイリアスの設定を確認します
3. public/ またはルートディレクトリ内の CNAME ファイル
4. 設定ファイル（package.json の homepage フィールド、next.config.js、nuxt.config.js、vite.config.js）
5. HTML ファイル - インデックスファイル内のメタタグまたは <base> タグ
6. 公開サイトの URL に言及している README またはドキュメント

手順 2：ドメインを確認するか、ユーザーに尋ねる

ドメインを検出できた場合は、ユーザーに確認するか、別のドメインを提示するよう尋ねます。

「このサイトではドメイン [DETECTED_DOMAIN] が使用されているようです。これで正しいですか？正しくない場合は、正しいドメインを入力してください。」

ドメインを検出できなかった場合は、ユーザーに直接尋ねます。

「このウェブサイトのドメインを自動的に検出できませんでした。AI サマリーのリンクにはどのドメインを使用しますか？（例： https://example.com）」

手順 3：ドメインを正規化して保存する

• ユーザーがプロトコルなしでドメインを入力した場合は、先頭に https:// を付けます
• 末尾のスラッシュをすべて削除します
• 正規化したドメインを ${WEBSITE_URL} として保存し、以降の手順で使用します

正規化の例：

• example.com → https://example.com
• https://example.com/ → https://example.com
• http://example.com → そのまま使用します（ユーザーに特定の要件がある可能性があります）

---

前提条件：llms.txt を作成するかどうかの確認

ドメインの確認後、ユーザーに次のように尋ねます。

「このウェブサイト用の llms.txt ファイルも生成しますか？このファイルは AI モデルがサイトのコンテンツや構成をよりよく理解するのに役立ち、AI が生成するサマリーの品質向上につながる可能性があります。

• はい：内容を厳選した llms.txt ファイルを作成し、フッターコンポーネントからそのファイルを参照します
• いいえ：フッターコンポーネントのみを作成し、AI プロンプトでユーザーにウェブサイトを直接閲覧するよう案内します」

ユーザーの選択を ${INCLUDE_LLMS_TXT}（true/false）として保存します。

---

STEP 1：llms.txt ファイルを生成する（任意 - ユーザーが「はい」を選択した場合のみ）

ユーザーが llms.txt ファイルを生成しないことを選択した場合は、この手順全体をスキップしてください。

言語モデルがサイトの最も価値の高いコンテンツをすばやく理解し、参照できるように、指定されたウェブサイト向けの高品質な llms.txt ファイルを生成します。

ウェブサイトのコンテンツ階層を分析する

• 利用可能な XML または HTML サイトマップ（商品、ページ、投稿）を確認し、ナビゲーションメニューを調べて、主な商品カテゴリ、サービス、重要な情報ページ、ブログ記事やニュース記事を特定します
• URL を一つ残らず列挙するのではなく、最上位カテゴリと代表的な下位カテゴリ、または主要な商品に注目します
• 重要なサポートページやポリシーページ（例：会社概要、お問い合わせ、利用規約、プライバシー、配送と返品）を特定します

コンテンツを選定・厳選する

• 主要なカテゴリーごとに、主要なランディングページと、代表的なサブカテゴリーまたは価値の高い製品ページをいくつか選びます
• 信頼性の高いガイド、ハウツー記事、計算ツール、トレーニングプログラム、その他のリソースへのリンクを含めます
• 異なるトピック（チュートリアル、業界の知見、成功事例）を紹介するブログ記事やケーススタディをいくつか選びます。記事を何十件も列挙するのは避けてください
• チェックアウトの手順、ログインページ、内容の薄いマーケティングページなど、価値の低いページは除外します

明確な説明文を作成する

• 各ページの内容を説明する、簡潔で事実に即した説明文（10〜15語）を使用します
• 大げさな表現や、ページタイトルの冗長な繰り返しは避けます
• サブカテゴリーの要約では、簡潔にするため、括弧内にまとめます

llms.txt を Markdown で作成する

• ウェブサイト名または会社名と短い説明を含む H1 タイトルから始めます
• 事業内容と対象顧客を簡潔に説明する引用ブロック（> で始まる）を追加します
• このリストが AI による利用を想定して厳選されていることを説明する文を追加してもかまいません
• 次のような H2 見出しでコンテンツを整理します：

  • 製品カテゴリー（またはサービス業の場合は「サービス」）

  • 代表的なページ または ## 人気製品

  • ガイドとリソース

  • 記事とケーススタディ

  • ポリシーとサポート

• 該当するセクションの下に、各リンクを箇条書き（- [タイトル](URL): 説明）で記載します
• ファイルは UTF-8 エンコーディングで保存し、すべての URL を網羅しようとせず厳選することで、100 KB を大幅に下回るサイズにします
• 任意で「利用ガイドライン」セクションを追加し、AI モデルにコンテンツをどのように帰属表示または利用してほしいかを記載します。バージョン管理用に `` のような HTML コメントも含めます

検証して公開する

• すべての URL が HTTP 200 を返し、一般にアクセス可能であることを確認します
• Markdown の構造（H1 が 1 つ、適切な見出しと箇条書き）を確認します
• 完成した llms.txt をウェブサイトのルートに配置し、可能であれば robots.txt に Llmstxt: /llms.txt の行を追加して見つけやすくします
• 製品、サービス、コンテンツの変更を反映できるよう、定期的な更新（例：四半期ごと）を計画します

成果物

上記の形式に従って作成した llms.txt ファイルの完全な内容を、現在のウェブサイトの公開ウェブルートに配置してください。

---

ステップ 2：AI 要約リクエスト用フッターコンポーネントを作成する

以下の仕様に従って、「AI 要約リクエスト」フッターコンポーネントを作成します。

コンポーネントの構成

• ヘッダーとアイコンの行を含む、中央揃えのセクション
• ヘッダーテキスト：「[COMPANY_NAME] の AI 要約をリクエスト」
• クリック可能な AI プラットフォームアイコンを 5 つ、次の順序で配置：ChatGPT、Claude、Gemini、Grok、Perplexity

ビジュアルスタイル

• コンテナー：縦方向のフレックスレイアウト、中央揃え、縦方向の間隔は 16px
• ヘッダー：中央揃え、基本フォントサイズ（16px）、中程度の太さ、セマンティックグレー（#111827 または同等の色）
• アイコンコンテナー：横方向のフレックスレイアウト、中央揃え、水平方向の間隔は 12px、折り返し有効
• 各アイコンリンク：クリック可能な領域は 40x40px、表示するアイコンは 28x28px、背景は丸形
• アイコン：モノクロの黒色にするため、CSS フィルター brightness(0) を適用します
• 円内のパディング：6px（1.5rem 相当）
• ホバー効果：cubic-bezier(0.4, 0, 0.2, 1) のトランジションを 150ms で適用し、拡大率を 1.1 にします

アイコン素材

重要：このスキルには resources/ ディレクトリ内にバンドルされた SVG アイコンファイルが含まれています。必ずこれらのアイコンをそのまま使用してください。汎用アイコンライブラリを使ったり、代替アイコンを探したり、代用品を作成したりしないでください。

同梱アイコン（必須）

resources/ から以下の SVG ファイルをユーザーのプロジェクトのアセットディレクトリにコピーします。

プラットフォーム	ファイル	説明
ChatGPT	resources/chatgpt.svg	曲線状のセグメントが互いに組み合わさった、六角形の花／絞り模様
Claude	resources/claude.svg	抽象的な幾何学模様（Anthropic のバックスラッシュロゴではありません）
Gemini	resources/gemini.svg	四つの尖った星／きらめきのアイコン
Grok	resources/grok.svg	角ばった結晶状／三角形の模様（X／Twitter のロゴではありません）
Perplexity	resources/perplexity.svg	アイソメトリックな立方体の遠近感を表現した六角形の模様

実装手順

1. アイコンをプロジェクトにコピーする：このスキルの resources/ ディレクトリにある 5 つの SVG ファイルをすべて、ユーザーのプロジェクト（例：/public/icons/ai/ または /assets/icons/）にコピーします
2. コンポーネント内で参照する：フッターコンポーネントで、コピーした SVG ファイルへの相対パスを使用します
3. 代替しない：これらが唯一使用を承認されたアイコンです。CDN リンクやアイコンライブラリを使用したり、説明をもとにアイコンを作り直したりしないでください

アイコンの検証

仕上げる前に、以下を目視で確認します。

• ChatGPT アイコンが吹き出しや一般的なチャットアイコンではない
• Claude アイコンが単なるバックスラッシュや文字ではない
• Gemini アイコンが星座やふたご座のシンボルではない
• Grok アイコンが X／Twitter の鳥やロゴではない
• Perplexity アイコンが疑問符や一般的な Markdown 記号ではない

AI プラットフォームへのリンク

あらかじめプロンプトを設定した、各 AI プラットフォームへの URL エンコード済みリンクを生成します。

1. ChatGPT：https://chat.openai.com/?q=[ENCODED_PROMPT]
2. Claude：https://claude.ai/new?q=[ENCODED_PROMPT]
3. Gemini：https://gemini.google.com/?q=[ENCODED_PROMPT]
4. Grok：https://grok.com?q=[ENCODED_PROMPT]
5. Perplexity：https://www.perplexity.ai/?q=[ENCODED_PROMPT]

プロンプトテンプレート（llms.txt の選択に応じて選ぶ）

前提手順でユーザーが選択した llms.txt の設定に応じて、適切なテンプレートを使用します。

テンプレート変数：

• ${WEBSITE_URL} - 前提手順で確認／正規化したドメイン
• ${COMPANY_NAME} - 会社名／サイト名（コードベースから明らかでない場合は、ユーザーに確認します）
• ${KEY_ASPECTS} - ビジネスの種類に応じて調整します（例：サービスの場合は「機能、料金、納品物」、e コマースの場合は「商品、配送、返品」）

llms.txt を使用する場合（ユーザーが llms.txt の生成を選択した場合）

Please read the structured information at ${WEBSITE_URL}/llms.txt to understand ${COMPANY_NAME}.

As a potential client, I want to concretely understand what I will receive with ${COMPANY_NAME} (${WEBSITE_URL}).

Detail step by step what the service includes: ${KEY_ASPECTS}.

Explain it simply, as if you were describing the real experience of the service.

llms.txt を使用しない場合（ユーザーが llms.txt を生成しないことを選択した場合）

Please visit and analyze ${WEBSITE_URL} to understand ${COMPANY_NAME}.

As a potential client, I want to concretely understand what I will receive with ${COMPANY_NAME} (${WEBSITE_URL}).

Detail step by step what the service includes: ${KEY_ASPECTS}.

Explain it simply, as if you were describing the real experience of the service.

実装チェックリスト

• ウェブサイトのドメインを検出または確認し、ユーザーの承認を得る
• llms.txt ファイルを生成するかどうかをユーザーに確認する
• llms.txt を生成する場合：llms.txt を作成し、ウェブサイトのルートに配置する
• resources/ の SVG アイコンを 5 つすべてプロジェクトのアセットディレクトリにコピーする
• llms.txt の選択に応じて、正しいプロンプトテンプレートを選ぶ
• 著作権表示の上にコンポーネントを配置する
• encodeURIComponent() または同等の方法でプロンプトを URL エンコードする
• 各リンクを新しいタブで開く：target="_blank" rel="noopener noreferrer"
• aria-label を追加する：「Get AI summary from [Platform Name]」
• 5 つすべてのプラットフォームへのリンクをテストし、プロンプトが正しく事前入力されることを確認する
• 同梱 SVG がアイコンに使用されていることを確認する（一般的な代替アイコンは使用しない）
• 一貫したモノクロ表示にするため、brightness(0) フィルターを適用する
• モバイルでのアクセシビリティを確保するため、タッチターゲットを最低 44x44px にする
• レスポンシブ対応：幅が 640px 未満の画面ではアイコンを折り返す

---

技術メモ

• llms.txt ファイルは、AI が読み取れるサイトドキュメントの新たな標準に準拠しています
• フッターコンポーネントはフレームワークに依存しない設計にしますが、React、Vue、Svelte、またはバニラ HTML/CSS 向けに調整できます
• プロンプト内の特殊文字に対応できるよう、すべての URL を適切にエンコードする必要があります
• コンポーネントはアクセシブルで、WCAG 2.1 ガイドラインに準拠する必要があります

同梱リソース

resources/

各 AI プラットフォームの公式 SVG アイコンが含まれています。

• chatgpt.svg - OpenAI ChatGPT の六角形の開口部アイコン
• claude.svg - Anthropic Claude の幾何学模様アイコン
• gemini.svg - Google Gemini の四芒星アイコン
• grok.svg - xAI Grok の結晶模様アイコン
• perplexity.svg - Perplexity の六角形キューブアイコン

これらのアイコンは、必ずユーザーのプロジェクトにコピーして直接使用してください。代替のアイコンは使用しないでください。

成功基準

実装が成功するには、次の条件を満たす必要があります。

1. 作業に進む前に、ユーザーにウェブサイトのドメインを確認する
2. llms.txt の生成を含めるかどうかをユーザーに尋ねる
3. llms.txt を作成する場合は、厳選された、構成の整った 100KB 未満の llms.txt ファイルを作成する
4. 正しいブランド表記を用いた、視覚的に一貫性のあるフッターコンポーネントを作成する
5. ユーザーが llms.txt の生成を選択したかどうかに応じて、適切なプロンプトテンプレートを使用する
6. 各 AI プラットフォームでプロンプトがあらかじめ入力される、動作するリンクを生成する
7. デスクトップとモバイルの両方のデバイスで利用できるようにする
8. resources/ に同梱されている SVG アイコンを使用する（代替品は使用しない）