2008年当時の作り
- スマホ非対応（横スクロール・ピンチズーム必須）
- テーブルレイアウト＋12pxの小さな文字
- 低コントラストで読めない配色
- marquee・blink・偽カウンターなど古い演出
- 電話番号がタップ発信できない
- OGP・説明文なしでSNS共有に弱い
Before → After
サイト改修 ビフォーアフター事例
古い作りのままになっている店舗・クリニックのサイトを、スマホ対応・読みやすさ・アクセシビリティ・集客導線の観点でまるごと作り直すと、どこまで変わるのか。架空の整骨院「わかば整骨院」を題材に、2008年当時の作り（Before）を現行標準（After）へ改修した過程を、「なぜその変更が来院・問い合わせにつながるのか」とあわせて整理しました。
⚠️ 院名・院長名・住所・電話番号・料金・お客様の声などはすべて架空のサンプルです。実在の整骨院・人物・団体とは関係ありません。画像はSVGのプレースホルダーです。
At a glance
ひと目でわかる違い
スマホでの違いを体感するには、ブラウザの開発者ツールで幅320px程度に切り替えてご覧ください。Before は横スクロールとピンチズームが必須になります。
現行の標準（レスポンシブ）
- モバイルファースト・320pxでも横スクロールなし
- CSS Grid / Flexbox ＋ clamp() で可読性向上
- 全テキストを WCAG AA 以上のコントラストに
- セマンティックHTML5・スキップリンク・ARIA整備
- 全箇所 tel: リンク化＋タップ領域44px以上
- title・description・OGP・24時間予約フォーム新設
What changed
改修内容（Before → After 対応表）
見た目の好みではなく、一つひとつの変更が「集客・信頼」にどう効くかをセットで設計しました。
| 課題 | 改修（After で行ったこと） | 効果 |
|---|---|---|
| スマホで横スクロール必須 | <meta viewport> 追加＋モバイルファースト設計。固定820px幅を撤廃 | 幅320pxでも横スクロールなし。スマホでそのまま読める |
| テーブル＋spacer.gifの段組み | CSS Grid / Flexbox によるレイアウトへ全面置換 | 文言追加でも崩れにくく、更新コストが下がる |
| 12px・行間1.3の小さな文字 | clamp() で本文16〜17px・行間1.85に。丸ゴシック系Webフォント | 中高年でも疲れず読める。情報が頭に入る |
| 溶けて読めない配色 | 全テキストを WCAG AA 以上のコントラストで再設計 | 休診日・保険の但し書きが確実に伝わる |
| marquee/blink/偽カウンター | 静的な「お知らせ」リスト＋落ち着いたティール基調へ刷新 | 「きちんと運営されている院」という第一印象 |
| <font>・align・alt無し画像 | セマンティックHTML5＋全画像に説明的alt | 読み上げ・SEO・画像非表示時にも内容が伝わる |
| タップ発信できない電話番号 | すべて tel: リンク化。タップ領域44px以上 | スマホからワンタップで発信。離脱を防ぐ |
| 弱いtitle・OGP無し | 検索意図を含むtitle＋description＋OGP/Twitterカード | 検索・SNSでクリックされやすくなる |
| 電話のみの問い合わせ | アクセシブルな予約・問い合わせフォームを新設 | 営業時間外でも24時間受付でき、取りこぼしを減らす |
Measurable
測定できる改善
数値は本サンプルの実装値・設計値に基づく例示です（実在サイトの計測値ではありません）。
| 観点 | Before | After |
|---|---|---|
| スマホ表示（幅320px） | 横スクロール＋ピンチズーム必須 | 横スクロールなし・等倍で判読可 |
| 本文の文字サイズ | 12px（行間1.3） | 約16〜17px（行間1.85、clamp()で可変） |
| 電話番号のタップ発信 | 不可（プレーンテキスト） | 可（全箇所 tel: リンク） |
| 本文コントラスト比（例） | 約2.8:1（AA不適合） | 約11:1（AAA水準） |
| フッターリンク（例） | 約1.9:1（判読困難） | 約9:1（AA以上） |
| 見出し構造（SEO） | 見出しタグ・ランドマークなし | h1〜h3＋header/nav/main/footer で構造化 |
| 問い合わせ手段 | 電話のみ（営業時間内） | 電話＋24時間受付フォーム |
このサイトは、既存サイト修正案件で実際に行う作業を架空題材で再現したものです。
Before / After を実際に開いて、スマホ幅での違いをご確認ください。