街データの貼り方｜自社サイトに1行で入れる

1貼るタグ

これをコピーして、出したい場所に貼るだけです。data- の4つを御社のものに書き換えてください。

タグは登録したドメインでだけ動きます（未登録のサイトでは登録の案内だけが出ます）。ドメインの登録はお問い合わせフォームから会社名と貼りたいサイトのドメインを送ってください。最初の30日は無料です。

<script src="https://hikari622192-tech.github.io/lp-studio/machi-data/v1/machidata.js"
        data-co="芦屋ハウジング"
        data-color="#c8102e"
        data-muni="兵庫県芦屋市"
        data-contact="https://example.co.jp/contact/"></script>

書くところ	意味
`data-co` 任意	窓の上に出る御社名。書かないと社名の行が消えます
`data-color` 任意	御社のコーポレートカラーを1色だけ。見出しやボタンに使う濃い色と、背景に使う薄い色は自動で作ります。明るすぎる色（黄色・水色など）は、白い文字が読めるところまで自動で濃くします
`data-muni` 任意	最初から出しておく市区町村。`兵庫県芦屋市` のように都道府県から書いてください。書かなければ、読んだ人が住所を入れたところから始まります
`data-contact` 任意	いちばん下のボタンの行き先。御社のいつもの問い合わせページのURLです。書かないと、ボタンごと出しません（押せるのに何も起きないボタンは作りません）
`data-label` 任意	そのボタンの文言。既定は「この街について聞く」

全部書かなくても動きます。<script src="…"></script> だけでも、住所を入れる窓として使えます。

2どこに貼るか

WordPress の場合

投稿・固定ページの編集画面で、ブロックを追加 →「カスタムHTML」を選び、そこに貼ります。本文の途中でも、記事の最後でも構いません。

ペライチ・Wix・Jimdo などの場合

「HTMLを埋め込む」「コードを追加」といった名前のパーツを置いて、その中に貼ります。

HTMLを直接さわれる場合

出したい場所にそのまま置いてください。<head> ではなく、出したい場所に置きます。タグは自分の置かれた場所に窓を作ります。

同じページに2つ以上置けます

市区町村ごとに別の窓を出したいときは、data-muni を変えて2回貼ってください。 2つめ以降はデータを共有するので、重さはほとんど変わりません。

3実際に動いているもの

下は、このページに 1で書いたタグをそのまま貼ったものです。説明用の画像ではありません。

▼ ここから下がタグの出力

▲ ここまで

4お約束していること

御社サイトのデザインを壊しません

窓の中身は Shadow DOM という仕組みで外から隔てています。御社サイトのCSSは窓の中に入りませんし、窓のCSSも御社サイトに漏れません。 .oka や #result といったクラス名・ID名が御社サイトと同じでも、ぶつかりません。

文字の書体だけは、わざと御社サイトのものを引き継ぎます（浮かないように）。文字の大きさ・色・行間は窓の側で持ちます。

お客さまの個人情報を、こちらでは受け取りません

窓にはお名前やメールアドレスを入れる欄がありません。いちばん下のボタンは、御社のいつもの問い合わせページへ移るだけです。読んだ人の情報は、これまでどおり御社のフォームにだけ届きます。

窓が受け取るのは住所（市区町村）の文字だけで、それも保存していません。

ページを重くしません

最初に読み込むのは 38KB です（タグ本体18.6KB＋市区町村の索引18.9KB、いずれも圧縮後）。そのあと1つの街を出すのに 0.5KB しか増えません。写真1枚よりずっと軽い量です。

読み込みは御社サーバではなく配信元から行うので、御社のサーバに負担はかかりません。

5うまく出ないとき

症状	たいていの原因
何も出ない	ページ編集ソフトが `<script>` を消していることがあります。「カスタムHTML」「コード埋め込み」のパーツを使っているか確かめてください。貼ったあとに保存し直すと消える編集ソフトもあります（保存後にページを表示して確認してください）
「街データを読み込めませんでした」と出る	通信が届いていません。社内のネットワークが外部の読み込みを止めていないかご確認ください
指定した街が出ない	`data-muni` に都道府県が入っていない可能性があります。「中央区」「北区」のように全国に同じ名前がある市区町村は、都道府県から書かないと別の街になります
色が指定と違う	明るい色は、白い文字が読めるところまで自動で濃くしています。そのままの色で出したい場合はご相談ください

原因を調べるとき

ブラウザの検証ツール（F12）のコンソールに [machidata] で始まる行が出ていれば、そこに失敗したURLがそのまま書いてあります。その1行をお知らせいただければ切り分けできます。

6数字の出どころ

土地の高さ…国土地理院標高API。地価公示の調査地点で測った値です
災害リスクの地図…国土地理院ハザードマップポータルの重ねるタイル
相場…国土交通省「不動産取引価格情報」の実取引と、「地価公示」2026年
家賃…総務省「住宅・土地統計調査」令和5年
学校数…各市区町村の公表資料

収録は1,525市区町村（国の地価公示に調査地点がある市区町村）。うち1,511市区町村は町丁目ごとの成約価格まで出ます。無い項目は空欄にせず「—」と表示します。