コーポレートサイトを「営業装置」に作り替えた話 — AIに読まれるサイトへ
アルヴァ株式会社は2026年8月、コーポレートサイト alva.company を全面的に作り替えました。会社紹介のための1枚ページから、AI導入支援と社外情シスの2つのサービスで案件を獲得するためのサイトへ。技術的には Notion + Wraptas から、Astro + Notion API + Vercel の構成に移行しています。この記事では、なぜ作り替えたのか、何を変えたのか、そして「AIに読まれるサイト」のために何をしたのかをまとめます。
なぜ作り替えたのか
旧サイトは Notion で書いたページを Wraptas で公開する構成でした。手軽で、更新も楽でした。ただ、案件獲得にはつながっていませんでした。理由は3つです。
- 商品がなかった。 「こんな会社です」という紹介はあっても、「何を、誰に、いくらで」が書かれていない。問い合わせる側は判断材料がありません。
- 導線が1本だった。 問い合わせフォームは最下部に1つだけ。途中で離脱すれば、それで終わりです。
- SEOを制御できなかった。 URL、meta情報、構造化データ、表示速度。Wraptas経由ではどれも細かく調整できず、検索にもAIにも「読まれにくい」サイトになっていました。
何を変えたのか
| 項目 | 旧サイト | 新サイト |
|---|---|---|
| 構成 | 1枚もの(会社紹介) | トップ / AI導入支援 / 社外情シス / 実績 / 記事 / 会社概要 / 問い合わせ |
| 商品の見せ方 | 事業内容の列挙 | 2サービスそれぞれに「誰向け・何を・いくらで」を明記(社外情シスは月額15万円〜・税別目安) |
| 問い合わせ導線 | 最下部のフォーム1本 | 常設の「無料相談」ボタン、各ページ2箇所の中間CTA、「自分のAIに聞く」ボタン |
| 技術 | Notion + Wraptas | Astro(静的生成)+ Notion API + Vercel |
| 更新方法 | Notionで編集 | Notionで編集(変わらず)。事例・記事・FAQはNotionのデータベースから自動生成 |
| フォーム | 外部フォームサービスの埋め込み | 自前フォーム。無料相談とIT環境簡易診断を分岐 |
見た目は白とグレーを基調にしたミニマルなデザインにして、色はサービスごとのグラデーションだけに絞りました。AI導入支援は青、社外情シスは緑。どのページにいても「今どちらの話か」が分かるようにしています。
AIに読まれるための設計
今回いちばん力を入れたのが、検索エンジンだけでなく ChatGPTやClaudeのようなAIに正しく読まれる ことです。「〇〇な会社を探している」とAIに聞く人が増えているのに、AIが読みにくいサイトでは候補に挙がりません。やったことは4つです。
1. llms.txt を置いた
サイトの機械向け要約を /llms.txt に置いています。会社概要、2つのサービスの「誰向け・何を・いくらで」、主要ページのURL、取引実績を1ファイルにまとめたものです。AIがサイトを調べるときの入口になります。
2. 構造化データ(JSON-LD)を全ページに入れた
会社情報(Organization)、サービスと価格(Service / Offer)、FAQ(FAQPage)、事例と記事(Article)、パンくず(BreadcrumbList)。人が読む本文とは別に、機械が誤解しない形でも同じ事実を書いています。
3. 各ページの冒頭に「宣言段落」を置いた
AIは段落単位で引用します。だから各サービスページの最初の段落で、誰向けの・何の・いくらのサービスかを言い切っています。「柔軟に対応します」のような曖昧な言葉で終わらせない、というルールも決めました。
4. FAQは1問1答で完結させた
「前の質問の答えを参照してください」のようなFAQは、切り出されたときに意味が通りません。1問ずつ独立して読めるように書いています。
「自分のAIに聞く」ボタン
新サイトの右下には「自分のAIに聞く」というボタンがあります。押すと、ChatGPT・Claude・Geminiのいずれかが開き、こんな質問が自動で入力されます。
アルヴァ株式会社の「社外情シス」が、私の会社に合うかどうか、Web上の最新情報を調べた上で客観的に評価してください。合わない場合は、その理由も教えてください。
サイトに埋め込んだチャットボットではありません。訪問者が普段使っている、自分が信頼しているAI に、第三者として評価してもらう仕組みです。会話はそのAIサービス上で完結し、内容が当社に送られることはありません。
誘導する文面にしなかったのは意図的です。最近のAIは誘導に乗りませんし、「合わないなら合わないと言ってくれる」ほうが、問い合わせの質が上がります。合わない会社に来てもらっても、お互いに時間の無駄になるからです。
上の「AIに読まれる設計」は、このボタンの回答品質にも直結しています。AIがWeb検索でこのサイトを読み、その内容をもとに答えるからです。
更新はNotionのまま
技術構成を変えても、日々の更新はNotionのままです。事例・記事・FAQはそれぞれNotionのデータベースで管理し、「公開状態」を「公開」に変えて反映ボタンを押せば、数分でサイトに出ます。
裏側では、ビルドのたびにNotion APIから内容を取得して静的なHTMLに変換しています。Notionの画像は期限付きURLなので、必ずダウンロードしてサイト側に置き直しています(これをやらないと、数時間で画像が消えます)。閲覧時にはNotionに一切アクセスしないので、Notionに障害があってもサイトは表示され続けます。
速度
ページはすべて静的に生成し、JavaScriptは「自分のAIに聞く」ボタンとフォームの分だけに絞りました。ヒーローのビジュアルは画像ではなくCSSのグラデーションなので、読み込むものがほとんどありません。
計測では、Lighthouseの4項目(Performance / Accessibility / Best Practices / SEO)がすべて90以上でした。
同じ課題を持つ会社へ
「会社紹介サイトはあるが、問い合わせが来ない」「AIに聞いても自社が出てこない」。同じ状況の会社は多いはずです。
今回やったことは、大がかりな開発ではありません。商品を決めて、誰向け・何を・いくらでを言い切り、機械が読める形でも同じことを書く。それだけです。この考え方は、当社の AI導入支援 でもそのまま使っています。
ITまわりを丸ごと任せたい場合は 社外情シス by ALVA をご覧ください。ヒアリングと初回提案は無料です。
旧サイトはこういうデザインでした(参考まで)
