2026.05.11

お知らせ機能と見積もり・無料診断を載せて、ターゲットを 3 業種に絞った 2 日半

技術日記業務

はじめに

前回の記事(5/8 17 時)を公開した直後から、丸 2 日半でまた結構いろいろやりました。今回は 「サイトに機能を載せる」「ターゲットを絞る」 の 2 本立てです。

ざっくり言うと:

お知らせ(News)機能を CMS に追加: /news/ 公開ページ + /admin/news/ 管理画面 + API 一式
見積もりシミュレーター・サイト内検索・タグページ を追加
無料サイト診断機能 を追加。PageSpeed Insights + Gemini で実装 → Cloudflare 30s タイムアウトとの戦い → 最終的に AI 所感を撤去して PSI に予算全振り
SEO/a11y 改善: PSI に指摘された robots.txt 構文・色コントラスト・cache-control を一括修正
ターゲット 3 業種に絞り込み: 音楽教室・ゲストハウス/民宿・治療院。徳島ローカルのリサーチ結果から逆算

30 コミット入っているので、時系列で書いていきます。

1. お知らせ(News)機能を CMS に追加(5/9 夕)

ここから 5/9 夕の作業。当初は「ブログのトップに最新お知らせを並べる」だけのつもりが、設計を整理したら 「お知らせ」は Blog とは別コレクションにすべき という結論になりました。

理由:

Blog = 1500〜3000 字の技術/日記。tags が主軸
News = 100〜300 字の短文。日付重視
同じ DB に混ぜるとタグ運用・一覧 UI が破綻する

実装したもの:

Content Collection news(title / slug / status / publishedAt / updatedAt / author)
/news/ 一覧 + /news/[slug]/ 詳細(NewsArticle JSON-LD 付き)
/admin/news/ 管理画面(一覧・新規・編集、プレビュー / autosave)
functions/api/news/ で GET / POST / PUT / DELETE / publish / unpublish
Header / MobileNav / admin ダッシュボードに News 切替

ここで 1 つやらかして、最初 「/blog/ にお知らせも統合する」 方向で実装(ec445d4)。Blog のトップに News カードを混ぜる構造にしたんですが、見てみたら「タグで絞り込めない要素が混ざる」「一覧が日付バラバラで読みづらい」となって、20 分後に revert(cc02521)。/blog/ はブログ専用に戻し、/news/ を独立ページとして復活させました。

学び: 「最初に分けた理由」を後から忘れて統合すると、だいたい元に戻る羽目になる。データモデルが違うものは UI レイヤーでも分けるのが正解。

2. 見積もりシミュレーター + サイト内検索 + タグページ(5/9 夜)

立て続けに 3 機能をまとめて追加:

/estimate/ 見積もりシミュレーター

プラン(LP / HP / CMS)+ オプションを選ぶと、初期費用と月額の概算が即時表示
内訳をクリップボードコピー可
「この内容で相談する」ボタンで /contact/ に選択内容を引継ぎ(URLパラメータ経由)

オプションのチェックマーク表示には CSS の :has(:checked) を使って、JS なしで「選択中の枠線強調」を実現しました。

/blog/tags/ + /search/

/blog/tags/: タグ雲(記事数つき) + /blog/tags/[tag]/ で絞込一覧
/search/: Pagefind による全文検索。ブログ + お知らせの本文を data-pagefind-body で対象指定
npm run build を astro build && pagefind --site dist に変更

Pagefind は静的サイト向けの全文検索ライブラリで、ビルド時にインデックスを生成して、クライアントサイドだけで検索できる。Cloudflare Pages にそのまま乗る。

3. 無料サイト診断(/diagnosis/)— Cloudflare 30s との戦い(5/9 夜)

ここが今回の最大の山場。「URL を入れたら Lighthouse スコアと改善ポイントが出る」 ページを /diagnosis/ として追加しました。当初の構成:

PSI(PageSpeed Insights API)で Lighthouse スコア + メトリクス取得
Gemini 2.5 Flash で「3 行所感」を生成
D1 に日次クォータ(230 req/日)と 1h キャッシュ
PSI 28s / Gemini 12s のタイムアウト

これを 1 発で動かしたら、すぐ問題が出ました。

問題: Cloudflare Workers の 30 秒上限

Cloudflare Pages Functions(Workers と同じ実行基盤)は 1 リクエスト 30 秒で強制終了 される。PSI は重いサイトだと普通に 30 秒以上かかる。Gemini もタイムアウトすると Workers 全体が死ぬ。

ここから 5 連続の修正:

時刻(5/9)	修正内容	コミット
20:31	Cloudflare 30s 回避 + 原因別エラーメッセージ	`ced5d2d`
21:05	PSI のレスポンスを日本語化(`locale=ja`)	`7ced18d`
21:09	PSI に与える時間予算を 26s に拡張	`ad8765b`
21:23	`waitUntil` 非同期化 + 診断→相談プリフィル導線	`9e4a536`
21:38	重いサイトのフォールバック計測 + 部分結果対応	`cb979a4`
21:48	カテゴリ削減ではなく desktop strategy にフォールバック	`d38bda3`
21:55	mobile/desktop 並列発火 + AI 所感の可視化強化	`b8c9065`

最終決断: AI 所感を撤去して PSI に予算全振り(`38f32da`)

最後まで残ったのが「PSI と Gemini を両方 30 秒以内に詰め込むのが無理」という根本問題。

PSI を成功させるか、AI 所感を出すか、どっちかしか取れない。

判断: PSI を取った。理由は単純で:

PSI のスコアは数字として一意に説明力がある
「AI の所感」は今の精度だとどっちつかずの感想になりがちで、ユーザーが見たいのは具体的なスコア
PSI に予算を全振りしたほうが、重いサイトでも結果が出る

functions/api/diagnosis.ts から Gemini 呼び出しを丸ごと撤去。c859077 で タイムアウト時に 1 回自動再試行(PSI の内部キャッシュを温める効果)も入れて、これで「重いサイトでも 2 回目には必ず結果が出る」状態にしました。

学び: 機能を欲張ると 30 秒で詰む。「絶対に取りたい数字」を 1 つに絞って予算を全振りするほうが、ユーザー体験は確実に良くなる。

4. PSIでの指摘事項に対応(5/9 深夜)

自作の /diagnosis/ を Onbit サイトに使って試したら、PSI 自身に以下を指摘されました:

robots.txt の構文揺れ: User-agent: * グループの中に空行 + コメントが入っていて、一部のパーサで読み方が割れる
色コントラスト不足: --color-sage-deep の #547a5f が cream 背景上で WCAG AA(4.5:1)を満たさない
cache-control の指定漏れ: favicon / OG 画像 / /images/* / robots.txt にキャッシュヘッダがなく、毎回フェッチされる

順番に修正(8eb5897):

robots.txt: コメント除去 + /admin /samples-preview を明示 disallow
色: --color-sage-deep を #547a5f → #3f5e47 に。テキスト用 text-sage を全ファイル text-sage-deep に置換(hover: 付きは保持)
cache-control: /favicon.* /og.* /images/* /robots.txt に max-age=604800(1週間)を追加。/_astro/* は引き続き immutable

これで自社サイトの PSI が再び満点 100/100/100/100 まで戻りました。自分のサイトを自分のツールで診断する のは、ドッグフーディングとして地味に効きが良い。

5. ターゲットを 3 業種に絞り込んだ(5/10 昼)

ここまでが 5/9 までの作業。5/10 は 「Onbit のターゲットは誰か」 を確定させる日にしました。

事前に ken エージェント(リサーチ担当)に徳島の Web 制作市場をリサーチさせて、5 軸スコアリングで「徳島で勝てるニッチ」を出していました(5 軸: 競合密度・購買意欲・予算規模・継続性・自分の興味)。

結果、Top 3 はこれ:

音楽教室・習い事(Waltz の実績がそのまま使える)
遍路宿・ゲストハウス/民宿(海陽・牟岐・三好の遍路宿 13 件を目視評価したリスト付き)
整骨院・治療院(月額モデルが組みやすく、LINE Bot との相性も良い)

これを HP のメッセージとオプションに完全反映:

Hero / About / FinalCTA / 各 meta: 3 業種を名指しするコピーに書き換え
WhyOnbit: 「寄り添う / 続ける / 育てる」という抽象表現 → 「自分で更新できる / 問い合わせを AI で受ける / 速くて止まりにくい」という具体能力ベースに刷新
options.ts: LINE 予約(¥20k + ¥1.5k/月)・AI 一次対応(¥30k + ¥2k/月)・多言語化(¥20k〜 + ¥0.5k/月)の 3 オプションを追加。整骨院テンプレの月額モデルから逆算した価格
services ページ: 「迷ったら基本プランで OK・オプションは後付け」の安心コピーを追加。小規模個人事業主が初手で詰まらないよう導線整備

同時にエージェント 4 体(ken / hiro / ren / yuki)に並列で素材を作ってもらって、.company/projects/inbound-intake/ に 5 本の資料を追加:

research-tokushima-web-market.md: 徳島の Web 制作市場全体。SERP 構造・地元競合 3 レイヤー・補助金経路
research-tokushima-niches.md: 5 軸スコアリング詳細
research-henro-inns.md: 遍路宿 13 件評価 + 営業 Top 3
proposal-template-clinic.md: 整骨院リプレース提案の型(3 プラン価格モデル・LINE Bot/AI 一次対応の技術設計)
case-studies/waltz-music-school.md: Waltz 事例ページ 13 セクション構成(音楽教室向け提案書を兼ねる)

最後に、コピーで使っていた「小さな宿」を 「ゲストハウス・民宿」 に統一(c2086e9)。「小さな宿」だと検索キーワードとして弱いのと、業態が想像しづらかったため。

まとめ

5/8 17 時から 5/10 13 時までで 30 コミット。テーマで分けるとこう:

顧客接点の機能化: お知らせ・見積もり・サイト内検索・無料診断
品質の底上げ: PSI 指摘の SEO/a11y 修正
ターゲット確定: 3 業種絞り込み + 各種営業材料の整備

「機能を載せる」と「方針を絞る」を同時にやった 2 日半でした。特に診断機能は、Cloudflare の 30 秒上限という物理制約に殴られながら「何を取って何を捨てるか」を判断するいい訓練になった気がします。

次は ターゲット 3 業種それぞれに対する具体的な営業の動き に入っていく予定。実装側は一段落、ここから手応えを取りに行く番。