2008年当時の作り
- スマホ非対応（横スクロール・ピンチズーム必須）
- メニューが画像1枚に文字を焼き込み・更新不能
- 定休日の説明が極小・低コントラストの注記のみ（約2.8:1）
- marquee・blink・偽カウンターなど古い演出
- 電話番号がタップ発信できない・予約は電話のみ
- OGP・説明文なしでSNS共有・検索に弱い
Before → After
サイト改修 ビフォーアフター事例（飲食店）
古い作りのままになっている個人経営の飲食店サイトを、スマホ対応・メニューの読みやすさ・アクセシビリティ・予約導線の観点でまるごと作り直すと、どこまで変わるのか。架空の大衆食堂「ますだ食堂」を題材に、2008年当時の作り（Before）を現行標準（After）へ改修した過程を、「なぜその変更が来店・予約につながるのか」とあわせて整理しました。
⚠️ 店名・店主名・住所・電話番号・価格・メニュー・口コミなどはすべて架空のサンプルです。実在の飲食店・人物・団体とは関係ありません。画像はSVGのプレースホルダーです。
At a glance
ひと目でわかる違い
スマホでの違いを体感するには、ブラウザの開発者ツールで幅320px程度に切り替えてご覧ください。Before は横スクロールとピンチズームが必須になります。
現行の標準（レスポンシブ）
- モバイルファースト・320pxでも横スクロールなし
- HTMLで読める・更新できるメニュー＋価格を明記
- 営業時間テーブル・定休日（水・日）を明確に表示
- セマンティックHTML5・スキップリンク・ARIA整備
- 全箇所 tel: リンク化＋24時間予約フォーム新設
- title・description・OGP・自作SVGの地図を整備
What changed
改修内容（Before → After 対応表）
見た目の好みではなく、一つひとつの変更が「来店・予約・信頼」にどう効くかをセットで設計しました。
| 課題 | 改修（After で行ったこと） | 効果 |
|---|---|---|
| スマホで横スクロール必須 | <meta viewport> 追加＋モバイルファースト設計。固定800px幅を撤廃 | 幅320pxでも横スクロールなし。スマホでそのまま読める |
| メニューが画像で更新不能 | 画像メニューを、価格付きのHTMLメニューカードへ。説明文も付与 | 店主が自分で更新でき、読み上げ・検索・コピーにも対応 |
| 価格が画像内で不明瞭 | 各メニューに税込価格を明記。人気・名物にラベル付け | 来店前に予算がわかり、「思ったより高い」離脱を防ぐ |
| 定休日が×印と低コントラスト注記のみ | 営業時間テーブルを高コントラスト・スマホ幅対応に再設計し「定休日 水・日」を本文で明示 | 「開いている日」を取り違えての来店トラブルを防ぐ |
| marquee/blink/偽カウンター | 静的な「お知らせ」リスト＋落ち着いた藍基調へ刷新 | 「きちんと営業している店」という第一印象 |
| <font>・align・alt無し画像 | セマンティックHTML5＋全画像に説明的alt | 読み上げ・SEO・画像非表示時にも内容が伝わる |
| タップ発信できない電話番号 | すべて tel: リンク化。タップ領域44px以上 | スマホからワンタップで予約電話。離脱を防ぐ |
| 弱いtitle・OGP無し | 検索意図を含むtitle＋description＋OGP/Twitterカード | 「近くの定食屋」検索・SNSでクリックされやすくなる |
| 予約が電話のみ | 予約・お持ち帰り・宴会に対応した24時間フォームを新設 | 営業時間外でも受付でき、予約の取りこぼしを減らす |
Measurable
測定できる改善
数値は本サンプルの実装値・設計値に基づく例示です（実在サイトの計測値ではありません）。
| 観点 | Before | After |
|---|---|---|
| スマホ表示（幅320px） | 横スクロール＋ピンチズーム必須 | 横スクロールなし・等倍で判読可 |
| メニューの更新性 | 画像のため店主が更新不能 | HTMLテキストで店主が更新可・検索/読み上げ対応 |
| 価格表示 | 画像内・変更困難で不明瞭 | 各品に税込価格を明記（来店前に把握可） |
| 電話番号のタップ発信 | 不可（プレーンテキスト） | 可（全箇所 tel: リンク） |
| 本文コントラスト比（例） | 約2.8:1（AA不適合） | 約12:1（AAA水準） |
| 定休日の伝わりやすさ | 小さな注記・低コントラスト | テーブル＋「定休日 水・日」ラベルで明示 |
| 見出し構造（SEO） | 見出しタグ・ランドマークなし | h1〜h3＋header/nav/main/footer で構造化 |
| 予約手段 | 電話のみ（営業時間内） | 電話＋24時間受付フォーム（予約/持ち帰り/宴会） |
このサイトは、既存サイト修正案件で実際に行う作業を架空題材で再現したものです。
Before / After を実際に開いて、スマホ幅での違いをご確認ください。