作り替え ／ 工務店
工務店サイトの作り替え（Before/After比較）
デモ｜自主制作要点
- Beforeは当時の普通の作りを仕様どおりに再現（人為的な遅延や巨大ファイルは入れていません）。再現項目の一覧をこのページに公開しています
- 変えたのは3点だけです。スマホ対応、施工事例の整理、問い合わせ導線。原稿と情報量はそろえています
- BeforeとAfterは同じホスティング・同じ条件で計測し、作りの差だけを比べます。差が小さく出ても、そのまま載せます
2013年頃に作って放置された、という設定の工務店サイトを当時の普通の作り方で再現（Before）し、同じ原稿・同じ情報量で今の作りに作り替え（After）、実測値で比較します。
デモを開く この構成で相談する 選択式・約1分。こちらから電話はしません
想定した依頼者と課題
地域の工務店。サイトは2013年頃に作ったまま更新が止まり、スマホでは文字が小さく、問い合わせは電話だけ、という想定です。
Before（作り替え前）
- Beforeを開く（5ページ: トップ／会社案内／施工事例／お知らせ／問い合わせ）
再現した項目（「当時の普通の作り方」だけです）
- 固定幅（800px）レイアウトで、スマホ対応なし
- 画像見出し風のバナーと、電話番号の目立つ配置
- 左サイドメニュー型のナビゲーション
- 撮ったままの大きな写真を縮小表示する前提の画像配置（このデモでは軽い枠で代替）
- 問い合わせは電話だけ（フォームなし）
- 更新が止まったお知らせ欄（2013年のまま）
人為的な遅延処理、意味のない巨大ファイル、わざと壊したHTMLは入れていません。都合よく悪く作っていないことは、この一覧と実物で確認できます。
After（作り替え後）
- Afterを開く（同じ5ページ、同じ原稿・同じ情報量）
変えたのは3点だけです
- スマホ対応: 画面幅に合わせて組み直し、文字の大きさとボタンの押しやすさを確保。スマホでは下部に「電話」「問い合わせ」の固定ボタンを置きました。
- 施工事例の整理: 写真と文字が並ぶだけだった事例を、種類と内容の説明つきのカードに整理しました。
- 問い合わせ導線: 電話だけだった窓口に、フォームを追加しました（デモのため送信はできません）。
原稿・会社情報・お知らせの内容はBeforeとそろえてあります。写真はBeforeと同じく軽い枠で代替し、重さの細工はしていません。
スマホ対応のチェック（手作業で確認）
| 項目 | Before | After |
|---|---|---|
| 文字がそのまま読める（拡大操作なしで） | ×（固定幅のため、スマホでは縮小表示になる） | ○ |
| ボタン・リンクが押しやすい | ×（サイドメニューの文字リンクのみ） | ○（固定ボタンと十分な大きさのリンク） |
| 電話番号を押して発信できる作り | ×（番号は画像見出し風の表示で、発信リンクなし） | ○（発信ボタンあり。デモのため実際の発信は無効化しています） |
| 問い合わせフォームがある | ×（電話のみ） | ○ |
診断レポートの見本
無料サイト診断でお渡しする定型レポートを、このBeforeに対して出力した見本です（実際の診断では、お客様のサイトのURLを計測してお渡しします）。
| 診断項目 | 結果（Before） | 直す場合の優先順位 |
|---|---|---|
| 表示速度（モバイル） | 下の計測結果の表をご覧ください | 高（写真の載せ方と作りの見直し） |
| スマホ対応 | 固定幅で非対応。文字が読めず、発信もできない | 最優先 |
| 問い合わせ導線 | 電話のみ。フォームなし | 高 |
| 更新のしやすさ | お知らせが2013年で停止 | 中（テキスト管理＋更新代行で解消） |
| 作り替えの概算 | 15万円〜（5ページ規模）／目安 15〜20営業日 | ― |
受託時に標準で行うこと
作り替えで事故になりやすいのは、見た目ではなく切り替えの部分です。受託時は次を標準作業にしています。
- 旧URLから新URLへの転送設定（検索やブックマークからの訪問を切らさない）
- メールを止めない切り替え手順（ドメインの設定を先に確認してから切り替える）
- 公開前後の計測レポート（このページと同じ形式でお渡しします）
担当範囲
担当：Beforeサイトの再現、Afterサイトの制作、比較ページの設計と計測。写真・原稿は架空のものを用意（受託時はお客様の既存サイトから引き継ぎます）。
AIと人の分担: 実装・原稿の下書き・検査はAI、構成の判断と公開前の確認は人が行っています。 AIの下書きは誤ることがあるため、公開前に人が全ページを確認します。
使用技術
静的サイト生成（Astro）、ホスティングは Cloudflare Pages を想定。端末標準フォントで表示を軽くしています。
計測結果（Before／Afterの比較）
Before と After は、同じホスティング・同じ条件で計測しています。比べているのはサイトの作りの差だけで、サーバーの差は含みません。
作り替え前（Before）
| 項目 | 値 | 計測日 | 計測ツール・条件 |
|---|---|---|---|
| 表示速度スコア（モバイル） | 計測予定 | — | PageSpeed Insights／After と同じホスティング・同じ条件で計測（Week2） |
| 主要部分が出るまで（LCP） | 計測予定 | — | PageSpeed Insights／同上 |
| ページの重さ | 計測予定 | — | PageSpeed Insights／同上 |
| レイアウトのずれ（CLS） | 計測予定 | — | PageSpeed Insights／Before と同じホスティング・同じ条件で計測 |
作り替え後（After）
| 項目 | 値 | 計測日 | 計測ツール・条件 |
|---|---|---|---|
| 表示速度スコア（モバイル） | 計測予定 | — | PageSpeed Insights／Before と同じホスティング・同じ条件で計測 |
| 主要部分が出るまで（LCP） | 計測予定 | — | PageSpeed Insights／Before と同じホスティング・同じ条件で計測 |
| ページの重さ | 計測予定 | — | PageSpeed Insights／Before と同じホスティング・同じ条件で計測 |
| レイアウトのずれ（CLS） | 計測予定 | — | PageSpeed Insights／Before と同じホスティング・同じ条件で計測 |
注記: デモ環境での計測であり、実際のサイトでの改善幅や問い合わせの増加を保証するものではありません。 架空サイトのため、検索順位や問い合わせ数は計測できません。
同等構成の料金と納期の目安
150,000円〜 ／ 目安 15〜20営業日（詳細は料金ページ。確定前の下書きです）
無料で相談する 選択式・約1分。こちらから電話はしません