Tool

ローカルビジネス構造化データ生成ツール

お店の情報をフォームに入力するだけで、検索エンジン向けの構造化データ(JSON-LD)を自動で作れる、Web制作の業務用ツールです。

ローカルビジネス構造化データ生成ツールのメイン画像
Client
自主制作
Category
Tool
Role
企画 / AIへの実装指示 / 動作確認
Tech
HTML / CSS / JavaScript / JSON-LD / Claude Code

概要

Web制作の現場では、店舗や会社のサイトに「構造化データ(LocalBusiness)」を設置する機会がよくあります。ただ、JSON-LDを手書きすると記述ミスや項目の抜けが起きやすく、担当者によって品質にばらつきが出てしまいます。

そこで、フォームにお店の情報を入力するだけで、schema.orgの仕様に沿ったJSON-LDを自動で作れるツールを制作し、日々の制作業務で使っています。インストール不要で、ブラウザだけで使えます。

主な機能

  • 業種・店舗名・住所・電話番号・営業時間・画像URLなどを入力して、JSON-LDのコードを出力
  • 郵便番号を入力すると、都道府県・市区町村を自動で入力
  • 住所から地図を表示し、緯度・経度を自動で取得。Google マップの共有URLや埋め込みコードを貼り付けて、正確な位置に調整することも可能
  • 支店(複数の拠点)を追加すると、1つのコードにまとめて出力
  • 出力後に、schema.org公式の検証サイトへのリンクを表示し、エラーがないか確認できる

工夫したポイント

  • 2種類のGoogle マップのコードに対応:共有URL(/@緯度,経度 形式)と、埋め込み用のiframeコード(!3d !2d 形式)では、緯度・経度が書かれている場所が異なります。どちらを貼り付けても座標を読み取れるようにしました(座標が含まれない短縮URLは対象外である旨を画面に表示)
  • お問い合わせ先とSNSを入力欄から分けた:お問い合わせフォームのURLは contactPoint、SNSなどのURLは sameAs と、出力先の項目が仕様で異なります。混ざらないよう入力欄を分け、それぞれ正しい項目に出力されるようにしました
  • 業種の分類を仕様と照合:選べる業種の中に、schema.orgで定義されていない分類が含まれていたことを検証サイトで確認し、すべて有効な分類に置き換えました
  • コードの書式をそろえた:インデント幅やコロンのあとのスペースなど、出力するコードの書式を統一し、いつ誰が作っても同じ見た目のコードになるようにしました

使用技術

制作環境・開発支援

  • Claude Code

言語

  • HTML / CSS / JavaScript(1ファイルで完結)
  • JSON-LD(schema.org / LocalBusiness)

外部サービス・API

  • 郵便番号検索API — 住所の自動入力
  • Nominatim(OpenStreetMap)— 住所から緯度・経度を取得
  • Schema Markup Validator — 出力したコードの検証