目次／サービス運営・運用／要望対応

Webサイトの全体像解析

項目番号 098

10秒でわかる！要点まとめ

「木を見て森を見ず」は事故の元。修正依頼が来た箇所以外への「波及」を予測する
前任者が残した「謎の仕様」や「スパゲッティコード」を解読し、現在の地図を描き直す
他社が作ったサイトを引き継ぐ（リプレイス）際、最初に行うべき最重要の調査業務

1. 概要：ブラックボックス化したサイトの「解剖」

Webサイトの全体像解析とは、既存のWebサイトにおいて、ページ構成（サイトマップ）、システム環境（サーバー・CMS・言語）、共通パーツの読み込みルール（ヘッダー・フッター等）、およびデータ連携の仕組みを調査し、サイトがどのような構造で動いているかを把握する業務です。

特に、長年運用されてドキュメント（仕様書）が更新されていないサイトや、他社から運用を引き継いだ案件において重要になります。表面上のデザインだけでなく、裏側の「ファイル構造」や「データベースの繋がり」までを透視し、安全に改修を行うための土台を作ります。

2. なぜ重要なのか：「副作用」によるサイト崩壊を防ぐ

Webサイトは、レゴブロックのように複数のパーツが組み合わさってできています。「トップページの文字を赤くして」という依頼に対し、安易に共通のCSSファイルを書き換えると、関係ない下層ページのデザインまで赤くなってしまう（副作用/デグレ）ことがあります。

全体像が見えていない状態での修正は、目隠しをして手術をするようなものです。どこが共通化されていて、どこが独立しているのか。この依存関係を把握しておかないと、軽微な修正のつもりがサイト全体を破壊する重大事故に繋がります。

3. 実務のポイント：共通パーツの特定とドキュメント化

実務では、失われた設計図をリバースエンジニアリング（逆生成）する作業になります。

ディレクトリ構造の把握：FTPソフトなどでサーバーにアクセスし、フォルダ構成を確認します。「/common/に共通ファイルがある」「/wp-content/にテーマがある」といった物理的な配置を理解します。
インクルード関係の整理：ヘッダー、フッター、サイドバーなど、どのファイルがどのページで読み込まれている（インクルードされている）かを特定します。
システム環境の調査：PHPのバージョン、利用しているプラグイン、外部API連携（Google Mapsなど）の有無を洗い出します。ここが古いと、改修時にエラーが出る原因になります。

4. スキルアップのヒント：「Wappalyzer」とソースコード表示

ブラウザ拡張機能の「Wappalyzer」を使ってみてください。そのサイトが何で作られているか（WordPressか、jQueryか、Google Analyticsかなど）がワンクリックで分かります。また、Ctrl + U（MacはCmd + Option + U）でページのソースコードを表示し、「このCSSファイルはどこから読み込まれているか？」を追跡する癖をつけましょう。魔法のように見えるWebサイトも、すべてはコードの積み重ねであることが理解できれば、解析への恐怖心はなくなります。