2026-11-13

整骨院のホームページを自作して失敗する5つの型

「自分で作れば費用が浮く」と思って手をつけたものの、公開してから数か月、問い合わせはゼロ——整骨院のホームページを自作した方から、よく聞く話です。センスや熱意が足りないわけではありません。つまずく場所がだいたい決まっているだけです。

ここでは、自作でよくある失敗を5つの型に分け、それぞれの直し方を具体的にまとめます。

失敗の型1:見た目に「素人感」が出てしまう

デザインが下手なのではなく、余白・文字サイズ・写真の3点が整っていないだけ、というケースがほとんどです。

直し方は数値で決めてしまうのが早いです。

とくに効くのが余白の統一です。実際に動くとこうなります。スライダーを左右に動かして、整える前と後を見比べてみてください。

▲ 実際に動いています(スクロール・ホバーも試せます)|この部品をカタログで見る

失敗の型2:書けない言葉を書いてしまう

整骨院のサイトで一番こわいのが表現です。「治る」「完治」「○%改善」「必ず良くなる」といった断定や効果の保証は、広告として問題になり得ます。

書き換えの型を持っておくと迷いません。

書きがちな表現言い換え
腰痛が治ります腰まわりの状態を確認し、からだを整えます
完治を目指します日常生活で動かしやすい状態を目指します
必ず改善します一人ひとりの状態に合わせて施術します
無痛で痛みゼロ刺激の強さは相談しながら調整します

公開前に、原稿を検索して該当語が残っていないか確認する習慣をつけてください。

失敗の型3:予約導線がない

「お問い合わせフォーム」がページ最下部に一つだけ、という構成は取りこぼしが大きいです。スマホでは画面下に固定のボタンを置くのが定番です。


<div class="fixed-cta">
  <a href="tel:0312345678">電話する</a>
  <a href="https://line.me/R/ti/p/@xxxx">LINEで予約</a>
</div>

.fixed-cta{
  position:fixed; left:0; right:0; bottom:0;
  display:flex; z-index:50;
}
.fixed-cta a{
  flex:1; padding:16px 0; text-align:center;
  font-size:16px; color:#fff; text-decoration:none;
}
.fixed-cta a:first-child{ background:#2f6f4f; }
.fixed-cta a:last-child{ background:#06c755; }
body{ padding-bottom:64px; }

電話番号は画像ではなくテキストにし、tel: リンクにすること。これだけで、スマホからの電話予約の取りこぼしが減ります。

失敗の型4:更新が止まる

ブログを毎日書こうとして3日で止まる——自作で一番多いパターンです。更新の目的は記事数ではなく、「営業している院だ」と伝わることです。

よくある質問を置いておくのも、更新の代わりになります。開閉する形なら、ページが長くなりません。

▲ 実際に動いています(スクロール・ホバーも試せます)|この部品をカタログで見る

失敗の型5:スマホで崩れる

PCで作ってPCだけで確認した結果、スマホで横スクロールが発生する。原因はたいてい次の3つです。


<meta name="viewport" content="width=device-width, initial-scale=1">

*{ box-sizing:border-box; }
img{ max-width:100%; height:auto; }
.container{ width:100%; max-width:1100px; margin:0 auto; padding:0 16px; }

公開前に、スマホ実機で「地図」「表」「写真の横並び」の3か所を確認してください。崩れるのはほぼこのどれかです。

自作にこだわらない選択肢

ここまで直せば自作でも十分戦えます。ただ、開業準備と施術の合間に全部やるのは現実的に重い、という方も多いはずです。整骨院や整体院に特化して、見本を先に作って届け、書けない言葉の自動チェックまで含めて制作費0円・月9,800円で運用するAETHERのようなサービスもあります。自作と比べて判断するための、選択肢のひとつとして知っておくとよいと思います。

まとめ

失敗の型は5つだけです。余白と文字サイズを数値で決める、言い換え表を持つ、固定ボタンを置く、月1回の更新に絞る、スマホ実機で3か所見る。

まずは今のサイトをスマホで開いて、横スクロールが出ないかを確認するところから始めてください。

動くパーツ、探すより選ぶ方が早いかもしれません。

この記事のようなアニメーションが、コピペで使える形で500点。ぜんぶ実物が動くカタログで公開中です。

無料でカタログを見る →
© NOVAMOR / motionAETHER 特定商取引法に基づく表記 プライバシーポリシー