【緊急UI改修】「Web予約」復活の舞台裏。他者記述のCSSスパゲッティを解きほぐし、CV導線を即日復旧した話
Webサイトの運用において、仕様変更は日常茶飯事です。しかし、時に「数時間以内に元の仕様に戻しつつ、デザインは最新に保つ」という、パズルのような緊急ミッションが発生することがあります。
今回は、クライアント様案件にて発生した、予約導線の緊急改修事例をご紹介します。「LINE予約のみ」への一本化から、再び「Web予約＋LINE予約」の併用へ。一見シンプルな「戻し作業」に見えますが、そこには予期せぬ技術的な落とし穴が潜んでいました。
「ボタンを戻すだけ」では済まない技術的負債
事の発端は、クライアント様からの「Web予約の導線を復活させたい」という緊急のご要望でした。しかし、サイト内部を確認した私の前に立ちはだかったのは、単純な非表示解除では解決できないコードの状態でした。
以前の担当者（別会社）により、ヘッダーやフッターのCSSが直接書き換えられており、独自のメディアクエリ等の多用によって、レイアウトの構造そのものが変質していたのです。
具体的な手順・解決策
即日対応が求められる中、以下のプロセスで「安全かつ迅速な」復旧を行いました。
| フェーズ | 直面した課題 | 実施した解決策 |
|---|---|---|
| 調査 | 独自CSSによる強引な上書き（width: 33.333%等の直接指定） | Chrome DevToolsで影響範囲を特定し、header.php内の不要なインラインスタイルを削除 |
| 実装 | SP版フローティングメニューのレイアウト崩れ | Flexboxの再定義と、ボタン2つ配置用へのCSSクラス再設計 |
| 調整 | 文言修正（相談→予約）と画像差し替えの追加要望 | 全ページ（ヘッダー、フッター、CTA、サイトマップ）を一括置換し整合性を確保 |
特に難航したのが、スマートフォン表示時のフローティングメニュー（画面下部追従ボタン）です。前のコードが複雑に絡み合っていましたが、不要な記述を勇気を持って削除（リファクタリング）することで、正常な表示を取り戻しました。
【Cross Talk】経営×現場の視点
出利葉（代表）：今回は、クライアント様からの要望共有が私のところで1日止まってしまっていて、現場には本当に急な対応をお願いしてしまったね。(本当にごめん、、、)あの状況で、よくこれだけ早く対応できたなと驚いているんだけど、実際どうだった？
相原（現場）：正直、最初は「ボタンを戻すだけならすぐ終わる」と思っていたんです。でも蓋を開けてみたら、前の担当者の方がCSSをかなり独自に書き換えていて…。
特にスマホ表示の制御が複雑怪奇になっていたので、解析に一番時間を使いました。ただ、ディレクターが「無理はしないで」と声をかけてくれたので、焦らずコードの整理に集中できました。
出利葉（代表）：なるほど、目に見えない「技術的負債」が隠れていたわけか。私の共有漏れというミスを、現場の技術力とチームワークでカバーしてもらった形だね。改めて、スピーディーな復旧と、文言修正まで完璧にこなしてくれて感謝してます。
まとめ・LIHのスタンス
今回の事例は、単なる修正作業ではなく「運用フェーズにおけるコード品質の維持」の重要性を再認識する機会となりました。どんなに緊急であっても、場当たり的なパッチワーク修正ではなく、後のメンテナンス性まで考慮したコードを書くこと。それがプロフェッショナルとしてのLIHの流儀です。
Webサイトの表示崩れや、急な仕様変更への対応にお困りではありませんか？LIHに無料相談する