「見た目がちゃんとしてれば、サイトは完成」——そう思っていた時期が、つい最近まであった。
BELLA TECHのポートフォリオサイト。デザインは整えた。ブログも書いた。独自ドメインで公開して、Cloudflare Pagesにデプロイもした。表面上は何の問題もなかった。
でも、裏側を専門的な視点で診断してみたら、19個の問題が見つかった。
この記事では、実際に何が問題だったのか、どう直したのか、結果としてどれくらい改善したのかを、すべて数字付きで公開する。
診断で見つかった「重大な問題」5つ
サイトをセキュリティ・パフォーマンス・SEOの3つの観点で同時に診断した。返ってきた結果のうち、「すぐ直すべき」と判定されたのが以下の5つ。
1. ドメインの不一致。サイトのコードの中で、本番ドメインとデプロイ用のデフォルトURLが混在していた。これはGoogleに「同じサイトが2つある」と誤認させる状態で、検索順位に悪影響を及ぼす。
2. canonical URLが未設定。「このページの正式なURLはこれです」とGoogleに伝えるタグがなかった。ドメイン混在と合わせて、重複コンテンツと判定されるリスクがあった。
3. 構造化データが未実装。Googleの検索結果で会社名やロゴがリッチに表示されるためのデータ（JSON-LD）が一切なかった。
4. セキュリティヘッダーがゼロ。HTTPS強制やクリックジャッキング防止などの基本的なセキュリティ設定が何もなかった。
5. OGP画像URLのドメインが不統一。SNSでシェアした時に表示される画像のURLが、本番ドメインと一致していなかった。
改善結果を数字で見る
問題がわかったら、あとは直すだけ。すべての項目を修正した結果がこちら。
パフォーマンス
画像サイズ：831KB → 214KB（74%削減）。PNG画像をWebPという新しい形式に変換した。見た目は変わらないのに、ファイルサイズが約4分の1になる。サイトの表示速度が直接改善される。
HTMLファイル：1,280行 → 417行（67%削減）。デザイン（CSS）と動き（JavaScript）のコードがHTMLにベタ書きされていたのを、それぞれ専用のファイルに分離した。ブラウザがキャッシュを利用できるようになるため、2回目以降の表示が高速化される。
アニメーションの自動停止を実装。トップページのパーティクルアニメーションが、画面外にスクロールしても裏で動き続けていた。画面に見えていない時は自動で停止する仕組みを追加し、バッテリー消費とCPU負荷を軽減。
SEO
構造化データを全ページに追加。トップページにOrganizationスキーマ、ブログ3記事にArticleスキーマを追加。Googleのリッチリザルトに対応した。
ドメインを統一し、canonical URLを設定。全ページで本番ドメインに統一し、正式なURLを明示することで、重複コンテンツのリスクを解消。
ブログ記事間の相互リンクを追加。各記事の末尾に「関連記事」セクションを追加し、サイト内の回遊率とクローラビリティを向上。
セキュリティ
セキュリティヘッダー：0個 → 6個。HSTS（HTTPS強制）、CSP（コンテンツセキュリティポリシー）、X-Frame-Options（クリックジャッキング防止）など、Webサイトの基本的な防御を追加。
「見た目は変わらない改善」こそ価値がある
今回の改善は、サイトを見た人には気づかれない。デザインは何も変わっていないから。
でも、Googleはこの違いを見ている。ブラウザはこの違いを感じている。そして、セキュリティの穴を狙う攻撃者にとっては、この違いが壁になる。
「うちのサイト、見た目は問題ないんだけど……」という状態は、むしろ一番危険かもしれない。見えないところに、問題が隠れているから。
BELLA TECHでは、こうした「サイトの裏側の改善」も含めた業務改善を行っています。自分のサイトの状態が気になる方は、お気軽にご相談ください。