改修例
製造・加工業のサイトで実際によく見つかる不具合を3種類、それぞれ改修前・改修後で並べています。画像ではなく、どれも実際に動くページです。
その1は検索結果での見え方、その2はスマートフォンでの表示崩れ、その3は問い合わせ手段の欠落です。それぞれ、掲載している情報はまったく同じで、直した箇所だけが違います。
いずれも架空企業のサンプルです。「サンプル精機株式会社」「サンプル金属工業有限会社」「サンプル鉄工所」は実在しません。ただし改修前の側は、実際の製造・加工業サイトを計測した結果で観測された不具合を、そのまま組み合わせて再現したものです。想像で作った「分かりやすく悪い例」ではありません。
再現元(その1):説明文の未設定・titleの長さ超過。再現元(その2):画面幅の固定指定(縮小率3.7倍)、14px未満の本文が多数、説明文の未設定、見出しタグの欠落、著作権表記2007年、更新停止、問い合わせフォームなし。再現元(その3):問い合わせフォームなし・電話とFAXのみ。いずれも初期に詳細記録した8社の計測記録にある事実です。
その1:検索結果での見え方
相手が最初に見るのは、サイトそのものではなく検索結果です。ページ自体の見た目はほとんど変わりません。変わるのは、検索結果に並んだときにどう見えるかです。ページのタイトルと説明文(meta description)だけを直すと、こうなります。
改修前
https://sample-kinzoku.example.com
サンプル金属工業有限会社|板金加工・溶接・製缶・試作品対応の金属加工なら大阪府の当社へ
説明文が設定されていないため、検索エンジンが本文から自動で抜き出した、脈絡のない文章が表示されます。表示内容は検索の都度変わります。
タイトルが43文字あり、検索結果では途中で省略されます。説明文は未設定です。
改修後
https://sample-kinzoku.example.com
板金加工・溶接・製缶|サンプル金属工業有限会社
サンプル金属工業有限会社は、大阪府で板金加工・溶接・製缶を行っています。試作の単品から小ロットまで対応し、図面をお送りいただければ2営業日以内にお見積りをお返しします。
タイトルは23文字に収まり、説明文(84文字)を自社で管理できます。検索結果で毎回同じ文章が表示されます。
上のイメージは実際の検索結果の再現ではなく、一般的な検索結果の見え方を模したものです。実際のページはこちらでご覧いただけます(内容・レイアウトは改修前後で同一です): 改修前のページ/改修後のページ
| 項目 | 改修前 | 改修後 |
|---|---|---|
| ページタイトルの長さ | 43文字(約30文字で省略される) | 23文字 |
| 検索結果に出る説明文 | 未設定(自動生成に依存) | 84文字(自社で管理) |
| ページの見た目・掲載内容 | 変更なし | 変更なし |
その2:スマートフォンでの表示崩れ
複数の不具合が重なった、やや極端な例です。一般的なスマートフォンと同じ画面幅(375px)で表示しています。枠の中はスクロールできません。ページ全体は、枠の下の「ページ全体を見る」からご覧ください。
枠が画面に収まらない場合は、枠ごと横に動かせます。ページ自体は横スクロールしません。改修前の枠は、スマートフォンの画面に相当する375×812pxの中に、画面幅1400pxで作られたページを実機と同じ倍率で縮小して表示しています。
| 項目 | 改修前 | 改修後 |
|---|---|---|
| 縮小率 | 3.7倍 | 1.0倍(縮小なし) |
| 実効描画幅 | 1400px | 375px |
| 本文の実際の表示サイズ | 約3px(12px指定 ÷ 3.7) | 16px |
| 14px未満で指定された本文 | 25箇所 | 0箇所 |
| 検索結果に出る説明文 | 未設定 | 84文字 |
| ページタイトルの長さ | 41文字(約30文字で省略される) | 25文字 |
| 最上位見出し(h1) | なし | 1個 |
| 問い合わせ手段 | 電話・FAXのみ | フォーム+電話・FAX |
| 最新のお知らせ | 2018年10月 | 2026年7月 |
| 著作権表記 | 2007年 | 2026年 |
| レイアウトの組み方 | 表組みによる段組み(5個) | 画面幅に応じて折り返す組み方 |
その3:問い合わせ手段
電話・FAXのみだったサイトに、問い合わせフォームを追加した例です。フォームがないこと自体は、サイトを見ればすぐ分かりますが、見え方の問題ではなく機会損失に直結する不具合として扱っています。
違いが出るのはページ下部の問い合わせ欄なので、枠の中はあらかじめその位置まで送ってあります(改修前と改修後で同じ位置です)。枠の中はスクロールできません。ページ全体は、枠の下の「ページ全体を見る」からご覧ください。
| 項目 | 改修前 | 改修後 |
|---|---|---|
| 問い合わせ手段 | 電話・FAXのみ | フォーム+電話・FAX |
| HTTPSリダイレクト(参考) | 未設定 | 設定済み |
HTTPSリダイレクトは、証明書自体は導入済みだが転送設定だけが漏れている状態を想定しています(404社の計測で40社に観測)。上のページ自体はどちらもこの比較ページと同じくHTTPSで配信されているため、枠の中だけをHTTP接続にして再現することはできません。実際の診断では、この項目は別途お伝えします。
この比較で示していないこと
都合の悪い点も書いておきます。3例とも共通です。
- 写真はイメージ写真です。改修前と改修後で同じ写真を同じ位置に置いてあります。実際の改修では御社の既存写真をそのまま使います。改修後の見た目が良く見えるのは、写真の差し替えによるものではありません。
- 文章は書き換えていません。改修前と改修後で、掲載している文章・電話番号・会社概要はすべて同一です。読みやすさの違いは、文章の巧拙ではなく表示の仕方によるものです。
- フォームは無効にしてあります。サンプルのため送信できません。実際の改修では動作するフォームを設置します。
- その1の検索結果イメージは実際の検索結果の再現ではありません。一般的な見え方を模したもので、実際の表示は検索エンジン側の仕様により変動します。
- その3のHTTPSリダイレクトは、この比較ページ自体がHTTPSで配信されているため再現できていません。表の数値のみで示しています。
- これは架空企業のサンプルであり、納品実績ではありません。実在企業の改修事例は、お客様の許可をいただいたうえで掲載します。
この改修にかかる費用
その1・その3のように不具合が1種類だけの場合は、その項目単体の単発修正で直せます。その2のように複数の不具合が重なり、スマートフォン対応の組み直しが必要な場合は、初期改修プランの範囲になります。
| 例 | 内容 | 費用の目安(税込) |
|---|---|---|
| その1 | title調整(5,000円)+meta description作成(5,000円) | 単発修正 合計10,000円 |
| その2 | 複数の不具合が重なった、スマートフォン対応を含む組み直し | 初期改修スタンダード 100,000円 |
| その3 | 問い合わせフォームの設置(30,000円)+HTTPSリダイレクト設定(5,000円) | 単発修正 合計35,000円 |
その2の縮小表示の解消だけを見ると簡単そうに見えますが、画面幅の指定を1行足すだけでは直りません。今度は横方向にはみ出して、かえって読みにくくなります。読みやすくするには組み直しが必要で、そこが費用の大半を占めます。
直すのではなく、作り直す場合
ここまでの3例は、今あるページの情報をそのままにして、表示の仕方や不足している設定だけを直したものです。「せっかくなら構成から作り直したい」という場合の見本も用意しています。製造・加工業、建設・地域工事、士業・専門サービスの3業種分です。
こちらも画像ではなく実際に動くページで、スマートフォンの画面幅で並べています。そのままスクロールして中身を確かめられます。
費用は200,000円(税込)です。5ページまで、写真とロゴは御社からご支給いただき、文章は今あるものを整理して配置します。撮影・新しい文章の執筆・ロゴ制作は含みません。
スクロールに合わせて動きを付けることもできます。同じ見本に動きだけを足した版を並べてありますので、見比べてみてください。動きを足しても表示速度は落ちていません。JavaScriptを使わず、CSSだけで作っているためです。
見本は架空企業のサンプルで、納品実績ではありません。写真の多くはイメージ写真で、代表者の顔写真の枠だけグレーの枠(プレースホルダ)のままです。
御社のサイトでも同じことができるか、無料でお調べします
サイトのURLとご連絡先だけで診断できます。5営業日以内に、改善できる点を、根拠と費用の目安を添えてメールでお返しします。ご発注の義務はありません。
メールで直接お送りいただいても構いません:contact@maeda-digital.com
お送りいただきたい内容:御社名/サイトのURL/気になっている点(お分かりになる範囲で構いません)