<p>「おすすめの制作会社は？」「この課題に合うサービスは？」を、Google の検索窓ではなく ChatGPT、Gemini、Perplexity に聞く人が増えています。キーワードで10件を見比べる前に、会話の中で候補が絞られる。広報も SEO も、順位表だけを見ていると、<strong>比較の土俵に乗っていない</strong>ことに気づきにくいです。</p><p>ここで必要なのは、クリック率を上げるタイトルタグの延長だけではありません。回答を組み立てる側が、「この文は誰の、何についての、確認できる事実か」を取り違えないサイトです。業界では GEO や LLMO と呼ばれますが、公式の順位指標ではありません。実務の言い方をすれば、<strong>信頼できる情報源として引用されやすい状態を、制作工程で仕込む</strong>ことです。検索順位対策を捨てる話ではなく、引用される本文と、エンティティ（誰が何を提供するか）を、ページ上で固定する話です。</p><p>この記事では、フリーランスのWebディレクター兼エンジニアとして、企画から HTML、Next.js、WordPress、microCMS まで見てきた立場から、ChatGPT や Gemini に「紹介してもらう」ために着工前に決めることを整理します。必ず推薦される、とは書きません。紹介されにくい作りと、紹介の文が歪みにくい作りを分けます。</p><h2 id="h347e3e4db5">なぜ AI は特定のサイトを引用・紹介するのか</h2><p>モデルは、おしゃれさで出典を選びません。取得できたテキストと、他の公開情報との重なり、発信者が追えるか、を材料にします。現場で触るなら、次の3つに分解すると発注が具体になります。</p><h3 id="h02d1241c7f">1. 機械読み取り性（マシンリーダビリティ）</h3><p>クローラや抽出処理が見るのは、画面の完成イメージより DOM です。見出しの順、表のセル、定義リストの対応、メインと余白の区別。<code>div</code> だけで見た目を再現していると、どこからがサービス説明で、どこがキャンペーンバナーかが切れます。クライアント側だけで描画する料金表は、取得時点の HTML に数字が無いことがあります。Next.js の SSG や、サーバーで HTML を出す実装は、その点で有利です。「動く」と「初回 HTML に事実がある」は別です。</p><h3 id="heb0f77a3dc">2. ファクトの明確さと構造化</h3><p>「伴走します」「ワンストップ」だけでは、比較質問に答えられません。対象、非対象、手順、期間の目安、FAQ の質問文が、本文に書かれているか。可能なら同じ文を JSON-LD（<code>FAQPage</code>、<code>Service</code>、<code>Organization</code> など）にも載せる。構造化データは、画面に無い実績を足す場所ではありません。独自の数値は、出典（計測日、範囲）とセットで本文に置く。無い数字を Schema に書くと、モデルも検索も、確からしい嘘を増幅します。</p><h3 id="h32cf60722e">3. E-E-A-T（一次情報と、誰が言っているか）</h3><p>Google の品質評価で使われる E-E-A-T は、JSON-LD を置いた瞬間に上がるスコアではありません。経験・専門性・権威性・信頼は、<strong>ページ上で著者と運営者が読め、一次情報（自社の範囲、事例の条件、更新日）があるか</strong>です。匿名の「おすすめ5選」より、実名と連絡先と「何をしないか」が書いてあるページの方が、取り違えにくい。他サイトの説明と矛盾する誇張は、引用されてもブランドを傷つけます。</p><p>この3つは、アクセシビリティの「役割の見える HTML」とほぼ重なります。選ばれるサイトは、結果として人にも読みやすいです。</p><h2 id="hd99d9448b7">AI に無視されやすいサイトと、出典に残りやすいサイト</h2><p>固有の企業名や、確認できない「カード付きで推薦された」実績は出しません。工程で見る型です。</p><h3 id="hc88843e0b4">悪い例：雰囲気は良いが、事実が画像とスクリプトの奥にある</h3><p>ファーストビューは動画と画像のキャッチ、料金はタブ切替の JavaScript、仕様はインフォグラフィック1枚。ブラウザではリッチでも、取得される本文はナビと「お問い合わせ」に寄ります。「おすすめは？」と聞かれたモデルは、説明可能な他社の文章を拾い、自社は比較表に出てきません。出てきても、対象外の業種を対象にしている、など取り違えが起きます。</p><p>失敗の核はデザインの良し悪しではなく、<strong>比較に使える文が HTML に無い</strong>ことです。</p><h3 id="ha4fce618e3">良い例：比較できる文と、同じ事実のマークアップがある</h3><p>サービスページに、誰向けか、何をするか、何をしないか、進め方、よくある誤解を見出しで置く。比較は <code>table</code>、用語は <code>dl</code>、運営者はフッターだけでなくプロフィールブロック。JSON-LD は、その本文と同じ語で <code>Organization</code> と <code>Service</code> を定義する。</p><p>この状態でも推薦は約束できません。ただし回答が付くとき、<strong>自社の前提（対応範囲、非対応、連絡方法）が残りやすい</strong>です。紹介の質は、露出の回数より、誤解の少なさで測った方が安全です。</p><h2 id="h6a426ddee6">【職種別】制作工程で仕込む「選ばれ方」</h2><h3 id="hc20ab71572">Webディレクター / マーケター：キャッチより、比較に耐える定義</h3><p>抽象コピーは広告で使えても、相談型の質問には弱いです。「未来をつくるパートナー」より、「WordPress の更新が重いサイトを、表示と運用が分かる形へ組み直す」の方が、モデルも人も事業を特定できます。着工前に、次を1枚にします。</p><ul><li>誰の、どの状態を、どこまで引き受けるか</li><li>やらないこと（対象外）</li><li>料金の出し方（固定 / 見積もり / 税の扱い）</li><li>FAQ の質問文は、営業が実際に聞かれる文にする</li></ul><p>ミニ事例です。トップが形容詞だけだと、AI の要約が「総合コンサル」になり、問い合わせの期待がずれます。サービス定義を箇条書きと FAQ にしたページは、回答に「対象は中小のコーポレート」など、現場の断りが残ります。後者の方が、問い合わせの質は上がりやすいです。</p><h3 id="heae71152b0">UI/UXデザイナー：比較と人の情報を、画像で終わらせない</h3><p>スペック、対応範囲、料金の条件は、HTML テキストと CSS で組む前提にします。どうしても図にするなら、同じ内容の表かリストを近くに置く。運営者・著者・監修がいる場合は、顔写真だけでなく、氏名、役割、責任範囲をテキストで置けるレイアウトにします。画面の端の小さいグレー文字だけ、は機械にも人にも弱いです。</p><p>ミニ事例です。スペック表を画像にしたページは、更新のたびに書き出しが必要で、引用側に古い値が残ることがあります。<code>table</code> とキャプションにし、必要なら同じ内容を JSON-LD に載せるページは、セル単位で直せます。レスポンシブでカードに「見せる」のは構いませんが、対応関係が消えるほど分解しない。</p><h3 id="h0249bcd4d7">フロントエンドエンジニア / コーダー：文脈が切れない HTML と、本文と一致する JSON-LD</h3><p><code>main</code> の中に、そのページの主題があること。サービス説明は <code>article</code> または見出し付きの <code>section</code>。用語の対応は <code>dl</code>。表データは <code>table</code>。クライアント JS で後から差し込む価格は、クローラ用に初期 HTML へ同じ内容を出すか、公開時点でサーバーレンダリングする。</p><p>悪い例です。文脈がクラス名にしかありません。</p><pre><code class="language-html">&lt;div class=&quot;p-hero&quot;&gt;
  &lt;div class=&quot;c-ttl&quot;&gt;伴走するパートナー&lt;/div&gt;
  &lt;div id=&quot;price&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre><p>良い例です。定義と FAQ が、文書として残ります。</p><pre><code class="language-html">&lt;main&gt;
  &lt;article&gt;
    &lt;h1&gt;コーポレートサイトの改善支援&lt;/h1&gt;
    &lt;p&gt;対象は、更新担当が社内にいる中小企業の既存サイトです。&lt;/p&gt;

    &lt;h2&gt;できること / しないこと&lt;/h2&gt;
    &lt;dl&gt;
      &lt;dt&gt;できること&lt;/dt&gt;
      &lt;dd&gt;情報設計の整理、セマンティックな実装、CMS 入稿ルールの設計&lt;/dd&gt;
      &lt;dt&gt;しないこと&lt;/dt&gt;
      &lt;dd&gt;広告運用の代行、確認できない実績数値の作成&lt;/dd&gt;
    &lt;/dl&gt;

    &lt;h2&gt;よくある質問&lt;/h2&gt;
    &lt;h3&gt;全国対応ですか？&lt;/h3&gt;
    &lt;p&gt;オンラインでの打ち合わせを前提にします。訪問の可否は案件ごとに確認します。&lt;/p&gt;
  &lt;/article&gt;
&lt;/main&gt;

&lt;script type=&quot;application/ld+json&quot;&gt;
{
  &quot;@context&quot;: &quot;https://schema.org&quot;,
  &quot;@graph&quot;: [
    {
      &quot;@type&quot;: &quot;Organization&quot;,
      &quot;name&quot;: &quot;Web Creator Yasuhiro Ito&quot;,
      &quot;url&quot;: &quot;https://webdesign-code.com/&quot;
    },
    {
      &quot;@type&quot;: &quot;Service&quot;,
      &quot;name&quot;: &quot;コーポレートサイトの改善支援&quot;,
      &quot;provider&quot;: {
        &quot;@type&quot;: &quot;Organization&quot;,
        &quot;name&quot;: &quot;Web Creator Yasuhiro Ito&quot;
      },
      &quot;areaServed&quot;: &quot;JP&quot;,
      &quot;description&quot;: &quot;更新担当が社内にいる中小企業の既存サイトを対象に、情報設計と実装、CMS入稿ルールを整理します。&quot;
    },
    {
      &quot;@type&quot;: &quot;FAQPage&quot;,
      &quot;mainEntity&quot;: [
        {
          &quot;@type&quot;: &quot;Question&quot;,
          &quot;name&quot;: &quot;全国対応ですか？&quot;,
          &quot;acceptedAnswer&quot;: {
            &quot;@type&quot;: &quot;Answer&quot;,
            &quot;text&quot;: &quot;オンラインでの打ち合わせを前提にします。訪問の可否は案件ごとに確認します。&quot;
          }
        }
      ]
    }
  ]
}
&lt;/script&gt;</code></pre><p>JSON-LD の <code>description</code> は、見出し直下の本文と食い違えない。<code>Product</code> は物販の型です。役務なら <code>Service</code> の方が取り違えにくいです。確認できない価格を <code>offers</code> に書かない。</p><h2 id="h60af6343f1">クライアントは知らない。先に決める運用</h2><h3 id="hbe7c4274f7">クローラを止めるか、出典に残すか</h3><p>GPTBot や Google-Extended を全部 <code>Disallow</code> すると、学習も回答のための取得もまとめて細くなりやすいです。検索用の Googlebot と、生成 AI 向けの Google-Extended は別、という説明が先です。出典に残したいサービスページは許可し、会員エリアと下書きは遮断する。方針は法務と広報で一文にし、<code>robots.txt</code> は各社ドキュメントのボット名を確認してから書く。名前は変わります。</p><h3 id="hfeaab3bacb">納品後のブログが、引用を雑にしないための入稿ルール</h3><p>制作で綺麗にしたトップも、運用記事が「世界一」「必ず成果」と数字なしで積み上がると、モデルは強い語の方を拾います。納品時に、短い入稿ガイドラインを渡します。</p><ul><li>数値には、日付と範囲（何を数えたか）を付ける。無ければ書かない</li><li>他社比較は、確認できる公開情報だけ。推測で順位を付けない</li><li>見出しは、見た目のためではなく質問文や対象が分かる語にする</li><li>著者名と更新日を、本文の近くに出す</li><li>画像の中だけに結論を置かない</li></ul><p>これは SEO 記事の品質と同じで、AI 引用のためだけの特殊ルールではありません。人が検証できる文が、結果として引用に耐えます。</p><h2 id="h2de24d30a3">AI引用適合度チェックシート</h2><p>キックオフで必須行だけ合意します。推薦の保証チェックではありません。</p><table><tbody><tr><th colspan="1" rowspan="1"><p>確認項目</p></th><th colspan="1" rowspan="1"><p>担当</p></th><th colspan="1" rowspan="1"><p>チェック内容</p></th></tr><tr><td colspan="1" rowspan="1"><p>比較に耐える定義</p></td><td colspan="1" rowspan="1"><p>ディレクター / マーケ</p></td><td colspan="1" rowspan="1"><p>誰向け、何をする、何をしない、が本文にある</p></td></tr><tr><td colspan="1" rowspan="1"><p>抽象コピーの扱い</p></td><td colspan="1" rowspan="1"><p>マーケ</p></td><td colspan="1" rowspan="1"><p>キャッチは補助。事業内容は具体文で重複させる</p></td></tr><tr><td colspan="1" rowspan="1"><p>料金・仕様の所在</p></td><td colspan="1" rowspan="1"><p>ディレクター / エンジニア</p></td><td colspan="1" rowspan="1"><p>初回 HTML に事実がある。JS だけにしない</p></td></tr><tr><td colspan="1" rowspan="1"><p>表とFAQ</p></td><td colspan="1" rowspan="1"><p>デザイナー / エンジニア</p></td><td colspan="1" rowspan="1"><p>画像だけにしない。FAQ は画面と JSON-LD で同じ文</p></td></tr><tr><td colspan="1" rowspan="1"><p>マシンリーダビリティ</p></td><td colspan="1" rowspan="1"><p>エンジニア</p></td><td colspan="1" rowspan="1"><p><code>main</code> <code>article</code> <code>table</code> <code>dl</code>。見出し順が文書になっている</p></td></tr><tr><td colspan="1" rowspan="1"><p>Schema</p></td><td colspan="1" rowspan="1"><p>エンジニア / SEO</p></td><td colspan="1" rowspan="1"><p><code>Organization</code> / <code>Service</code> / <code>FAQPage</code> が本文と一致</p></td></tr><tr><td colspan="1" rowspan="1"><p>著者・運営</p></td><td colspan="1" rowspan="1"><p>デザイナー / ディレクター</p></td><td colspan="1" rowspan="1"><p>氏名、役割、連絡先がテキストで読める</p></td></tr><tr><td colspan="1" rowspan="1"><p>一次情報</p></td><td colspan="1" rowspan="1"><p>マーケ</p></td><td colspan="1" rowspan="1"><p>数値に日付と範囲。無い数字を作らない</p></td></tr><tr><td colspan="1" rowspan="1"><p>クローラ方針</p></td><td colspan="1" rowspan="1"><p>ディレクター</p></td><td colspan="1" rowspan="1"><p>許可するページとボットを文書化。最新名を確認</p></td></tr><tr><td colspan="1" rowspan="1"><p>入稿ルール</p></td><td colspan="1" rowspan="1"><p>ディレクター</p></td><td colspan="1" rowspan="1"><p>納品後ブログの禁止表現と必須項目</p></td></tr><tr><td colspan="1" rowspan="1"><p>レンダリング</p></td><td colspan="1" rowspan="1"><p>エンジニア</p></td><td colspan="1" rowspan="1"><p>SSG/SSR か、クローラ向けの初期 HTML があるか</p></td></tr><tr><td colspan="1" rowspan="1"><p>検証の期待値</p></td><td colspan="1" rowspan="1"><p>全員</p></td><td colspan="1" rowspan="1"><p>引用は保証しない。取り違えが減ったかで見る</p></td></tr></tbody></table><h2 id="hab182a5033">まとめ：選ばれるサイトは、人にも説明しやすい</h2><p>ChatGPT や Gemini に紹介してもらう準備は、裏技のプロンプトではありません。相談されたときに、対象と非対象が本文にあり、表が表のまま残り、誰のサイトかが追えること。それは GEO / LLMO という新語より前に、セマンティックでアクセシブルな Web 制作がやっていたことです。</p><ul><li>機械が迷わない DOM と、初回 HTML の事実</li><li>比較できる文と、矛盾しない構造化データ</li><li>著者・運営と、検証できる一次情報</li><li>クローラ方針と、運用記事の入稿ルール</li></ul><p>既存サイトなら、まず「おすすめは？」と自社カテゴリで聞かれたときに、今の公開ページのどの文を出典にしてほしいかを先に書いてください。その文が HTML に無ければ、施策はマークアップより情報設計です。</p><p>AI 検索での引用されやすさの点検や、比較に耐えるサービスページの作り込みは、<a href="/contact/">相談・お問い合わせ</a>からどうぞ。診断で推薦を約束はしません。残したい事実が、今の DOM にあるかどうかから見ます。</p>

チュートリアル

ChatGPTやGeminiに自社を紹介してもらうには？AI検索に選ばれるWebサイトの作り方

AIプロンプトはMarkdownで書くべきか？構造化の意味と実務での使い方

Categories