CASE 01問い合わせを、手で表に写すのをやめたい（サイトの見た目のまま、無料で顧客の一覧に入る）

問い合わせが来るたびに、メールから表に写している

問い合わせのフォームから届いたメールを開いて、名前、会社名、内容を表に写す。返事をしたかどうかも、表に印をつけて覚えておく。件数が少ないうちは回りますが、写し漏れや、返事のし忘れが起き始めます。

顧客を管理する道具（CRM。HubSpot など）を入れれば片付くことは分かっていても、「お金がかかりそう」「入れるとサイトの見た目が崩れそう」で止まっている人が多いはずです。写す作業そのものを、なくしてしまうのがいちばん早い解き方です。

解決したあとは、送られた瞬間に顧客の一覧に入っている

	前	後
問い合わせが来たら	メールを開いて、表に写す（1件5分ほど）	送られた瞬間に、HubSpot の顧客の一覧に入る（0分）
返事をしたか	表の印で覚えておく	顧客ごとに、やり取りの記録が残る
サイトの見た目	CRM を入れると崩れそうで、止まっている	いまのフォームの見た目のまま
費用	ー	0円（HubSpot の無料プラン）

このサイト（tiaramiss.com）のお問い合わせも、この形で作っています。

まずやること：フォームはサイトで作り、送り先だけ HubSpot にする

フォームの「見た目」はサイトが受け持ち、「受け取り」だけを HubSpot に任せます。この順番で進めてください。

1. HubSpot（無料プラン）でフォームを作る。 名前、メールアドレス、会社名、相談の種類、困っていることなど、受け取りたい項目を決めます。
2. サイトに、同じ項目のフォームを HTML（ページの中身を書く言葉）で置く。 見た目は自由にできます。
3. 送信ボタンを押したら、HubSpot の「フォーム送信 API」に送る。 API は、ほかの仕組みから使うための窓口です。この窓口は認証（鍵を見せて、本人だと示すこと）がいりません。
4. 試しに1件送り、HubSpot の顧客の一覧に入るか確かめる。 確かめたら、試しの連絡先は消します。

HubSpot の埋め込みフォームは、使わない

HubSpot には、サイトに貼るだけのフォームもあります。ただ、無料プランで貼ると次の2つが起きます。サイトの見た目を大事にするなら、埋め込みフォームは使わないでください。

• フォームの下に「構築には HubSpot が使われています」「貴社もフォームを無料で作成し…」と出る
• 送信ボタンが HubSpot のオレンジのままで、サイトの色にならない

サイトに埋め込むと、こうなります。サイトの色は茶色なのに、ボタンだけオレンジです。

埋め込みフォームは HubSpot の iframe（ページの中の別のページ）の中に出るので、サイトの CSS（色や形を決める指定）が届きません。HubSpot の表示を消すのは、有料プランの機能です。

費用は0円、時間は約45分

費用は0円です。 わたしの場合、HubSpot のアカウントを作ってから、サイトのフォームで顧客の一覧に入るのを確かめるまで、約45分でした。つまずいた時間も含んでいます。

かかった時間の内訳約45分4つの工程内訳を見る

問い合わせを手で写していたなら、その時間がまるごと浮きます。あなたの会社の数字で試算してみてください。

試算：あなたの会社だと

1か月の問い合わせの件数20件

1件あたりの手作業（転記、確認、振り分け）5分

担当の人の時給2,000円

1年で浮く時間

20.0時間

お金にすると

40,000円

20件 × 5分 × 12か月 ÷ 60 = 20.0時間
× 2,000円 = 40,000円

作り方：送る部分は、短いスクリプトで足りる

ここからは、自分で作りたい人のための細部です。お金のかかる道具はいりません。

道具	役目
HubSpot（無料プラン）	問い合わせを受け取る CRM
フォーム送信 API	サイトのフォームから HubSpot に送る口。認証はいらない
サービスキー	フォームや項目を API で作るときだけ使う鍵。画面で作るならいらない
Astro	このサイトを作っている道具。ほかの作り方のサイトでも同じやり方で組める

送る部分は、これだけです。

await fetch(`https://api.hsforms.com/submissions/v3/integration/submit/${portalId}/${formId}`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    fields: [
      { objectTypeId: '0-1', name: 'email', value: email },
      { objectTypeId: '0-1', name: 'firstname', value: name },
      { objectTypeId: '0-1', name: 'message', value: message },
    ],
    context: { pageUri: location.href, pageName: document.title },
  }),
});

自分でやるときにつまずく4つの所

作る前に、この4つだけ知っておいてください。

• 新しいアカウントでは「非公開アプリ」が使えない。 2026年の時点で、新しく作ったアカウントでは非公開アプリ（レガシーアプリ）が作れず、「サービスキー」を使います。場所は「開発 → キー → サービスキー」です。
• API でフォームの設定を一部だけ直すと、ほかの設定が初期値に戻る。 言語を日本語にしていたのに、英語に戻りました。設定は丸ごと送り直します。
• 埋め込みのスタイルを変えても「未公開の変更」のまま。 画面の右上の「更新」を押すまで、埋め込みには出ません。
• 送信 API は認証なしで呼べる。 そのぶん迷惑な送信も受けやすいので、人には見えない入力欄を置き、そこに入力があれば送らないようにします。

多くの会社は、ここまでで十分

問い合わせを顧客の一覧に集めるだけなら、無料プランとこの形で十分です。 有料プランを考えるのは、送ったあとのメールを条件で分けて段階的に送るなど、HubSpot の中で自動の流れを作り込みたくなってからで構いません。どこまで無料でできるかは、HubSpot のプランの比較表で確かめてください。

頼むなら、どこまで頼めるか

フォームの項目の決め方から、HubSpot の設定、サイトへの組み込み、送信後のお礼の表示、問い合わせまでの道のりの計測まで受けます。お問い合わせには「HubSpot の無料プランを使っている」と一言書いてください。 話が早く進みます。

サイトの数字を見に行くのが面倒な悩みは、CASE 02 にまとめています。ほかの悩みの解き方は、CASE の一覧から探せます。