HP制作・改修

自社サイト内製リニューアル｜外注と内製のちょうどいい判断軸（PageSpeed 60→94）

2026年04月21日 by

なぜ「自社サイト」を実績として公開するのか

「ホームページの制作を外注したい」「リニューアル業者を探している」と検索された方に、まずお見せしたいのがこの記事です。理由はシンプルで、いま読んでいただいているこの bentenweb.com 自体が、私が一人で全面リニューアルした成果物だからです。テーマ移管・表示速度改善・構造化データ実装・セキュリティヘッダー対応まで、外部に発注せず内製で完結させました。

通常の制作実績は守秘義務で「裏側の判断」が見えにくいもの。自社サイトであれば何を採用し、何を捨て、なぜそう決めたかまで全て開示できます。お伝えしたいのは、派手な機能ではなく「ちゃんと動いて長く使える、ちょうどいい仕組み」をどう設計したかです。PageSpeed 60→94 という変化は、その判断軸を積み重ねた結果の副産物として後段にまとめています。

クライアント概要

サイト: bentenweb.com（BENTEN Web Works コーポレートサイト）
規模感: 個人事業（フリーランス IT/Web 受託）
事業領域: 情シス代行・業務自動化・WordPress 制作

自社サイトは、お客様案件で常に意識する「自分が運用し続けられる構成かどうか」を、妥協なく問える場でもあります。

課題・依頼背景（Before）

リニューアル前のサイトは、長年「とりあえず動く」状態でした。

表示速度が遅い: PageSpeed Insights モバイル 60 点台。CSS/JS が直列読み込み
計測が二重化: 解析ツールが二系統動いており、データ精度に不安
構造化データが古い: Organization スキーマのみ
不要プラグインの蓄積: 表示と保守の両面に影響
セキュリティヘッダー未設定: HSTS・CSP がなく信頼性が可視化できていない

リニューアルの動機は、自社サイトを恒常的に育てていく土台として、まず「ちゃんと動き続ける」状態を整えることでした。表示速度や構造化データは、後から追加する施策の効きを左右する前提条件です。

提案・解決アプローチ（思考プロセスを見せる）

「全部やりたい」ではなく、何を捨てるか を最初に決めました。

案A: 既存テーマを段階的に改修

メリットは安全性。一方でデメリットは、根本原因（テーマ自体の重さ）に手を入れにくいこと。CSS/JS の重複や直列読み込みは、テーマ構造を変えないと改善しきれません。

案B: 独自テーマに移管（採用）

PHP/CSS/JS を自前で組み直し、Xserver 上に新テーマとしてデプロイ。CSS は1ファイルに統合、JS は非同期化。中間プラグインを排し、解析タグは直接埋め込む。採用理由は「派手だから」ではなく「長く運用できるから」。プラグイン依存を抑えて表示が崩れるリスクを下げ、自前テーマはそのままお客様への提案にも転用可能です。

あえて採用しなかった選択肢（思考プロセスの可視化）

外注ホームページを比較検討するときは、「何を採用したか」より「何を採用しなかったか、その理由は何か」を聞いてみるのがおすすめです。事業者の価値観がここに出ます。

ヘッドレスCMSへの移行：運用コストと既存資産との互換性から見送り。自分が日々触れない構成では責任を持って提案できない
ページビルダー導入：表示速度の天井を下げる。「楽になる」と「ちゃんと動く」のトレードオフは取らない
最新フレームワークでの全面再構築：自社サイトに必要な機能はWordPressで十分。過剰な選択肢は「ちょうどいい」から外れる

「やらないこと」を先に決めたうえで、段階的に組み上げました。何を捨てるかを最初に握れる事業者かどうかは、外注先選びでぜひ見てほしいポイントです。

実装内容

リニューアル前後の比較とちょうどいい設計判断 — PageSpeed 60→94を支えた「派手な機能より、ちゃんと動く」判断軸

技術スタック

CMS: WordPress（Xserver、SSH 経由デプロイ）
テーマ: 独自テーマ（PHP / CSS / JS をフルスクラッチ）
画像最適化: EWWW Image Optimizer（JS 機能は無効化、画像圧縮と .htaccess リライトのみ）
構造化データ: LocalBusiness 複合型（address / geo / sameAs / Organization をネスト）
セキュリティ: HSTS / Permissions-Policy 即時適用、CSP は Report-Only でテスト中
解析: GA4 に統一、中間プラグインを削除

工夫した点

CSS/JS の依存解消: 重複読み込みを排除し、不要なプラグイン同梱の CSS を Dequeue で除外
画像最適化の二重化排除: 新しい仕組みを足さず、動いているものを整理する方向で対応
構造化データの設計: トップは LocalBusiness、サービスページは Service と階層分け
301 リダイレクト整備: 旧パスを正しい URL に集約し、これまで積み上げた評価を保全

派手な新機能（チャットボット・ポップアップ・アニメーション等）は今回一切追加しませんでした。読者が読みやすい状態を作ることに資源を集中するほうが、過剰な装飾より目的に沿うと判断したためです。

成果

目的は順位やスコアそのものではなく、「読者が快適にコンテンツに到達できる基盤を整えること」です。

指標	Before	After	意味
PageSpeed Insights（モバイル）	60 点台	94 点	読者がストレスなく読める表示速度
計測ツール重複	2本	1本（GA4 直挿入）	データ精度の安定
不要画像	22 ファイル（約 14MB）	削除	保守対象の削減
構造化データ	Organization 単体	LocalBusiness 複合型	事業内容を正しく伝える
セキュリティヘッダー	なし	HSTS / Permissions-Policy / CSP（Report-Only）	信頼性を可視化
旧 URL リダイレクト	なし	旧パスを 301 に集約	既存の評価を保全

定性面では、「これから何を足しても崩れにくい土台」が整ったことが最大の収穫です。お客様サイトにも同じ品質で還元できます。順位はリニューアル直後のためベースライン計測中。サイト品質という前提条件を整えてから、コンテンツ追加で段階的に育てていく設計です。

私の働き様

β：検討プロセス（一人称で振り返り）

このリニューアルで体現したかったのは、BENTEN Web Worksとして大切にしている 「ちゃんと動く・ビジネスに寄り添う・ちょうどいい」 という価値観です。3つのエピソードで振り返ります。

エピソード1：ヘッドレス化を採用しなかった理由（→ ちょうどいい／ビジネスに寄り添う）

最初は欲が出ました。ヘッドレス化、Tailwind、コンポーネント駆動。技術的に新しい構成は魅力的です。考え直したとき、自分が運用し続けるサイトであり、同じ構成をお客様にもご提供する立場であることを思い出しました。日々触れない構成では責任を持って保守できません。「派手で新しい」より「手の届く範囲で、ちょうどいい」を優先する判断です。

エピソード2：プラグイン依存を選ばなかった理由（→ ちゃんと動く／ビジネスに寄り添う）

LiteSpeed Cache等のプラグインは入れれば数値が上がりますが、プラグイン依存の改善はアップデートで簡単に崩れます。長期運用で『ある日突然崩れる仕組み』はビジネスに寄り添えていない。だからテーマ側で根本対応する道を選びました。

エピソード3：CSPを即時適用しなかった反省（→ 思考プロセス／ちゃんと動く）

CSPは当初すぐに本番適用しようとしましたが、外部スクリプトの依存洗い出しに想定の倍以上の時間がかかり、Report-Onlyに切り替えました。セキュリティを「強くする」より「壊さず強くする」のが本番の難所です。強引に適用していたら「セキュリティを上げた結果、ちゃんと動かなくなる」本末転倒に陥っていました。「ちゃんと動く」を最優先するからこそ、施策の即時性は犠牲にしていい場面がある、という判断です。

α：コミュニケーション抜粋（自分の発言だけ）

このリニューアルは自分一人で実施したため、相手とのやり取りログはありません。代わりに、意思決定時に自分自身に向けて書いた判断メモから、価値観の軸が出ている部分を引用します。

「ヘッドレス化は技術的に魅力だが、お客様提案の再現性が下がる。WordPress + 独自テーマで、自分の手が届く範囲で最大の品質を出す。これが『ちょうどいい』の意味。」

「PageSpeed の数値は手段であって目的ではない。読者が快適にコンテンツに到達できる基盤を整えるための指標。スコア自慢にしない。」

「CSP は本番即時適用しない。Report-Onlyで依存を観察してから本番化する。『ちゃんと動かなくなったら本末転倒』が判断軸。」

これらの判断軸はお客様サイトの提案でもそのまま使えます。派手で新しいより、ちゃんと動いて、ビジネスに寄り添えて、ちょうどいい。これがBENTEN Web Worksの制作スタンスです。

学び・横展開

このリニューアルから整理できた、BENTEN Web Worksとしての判断軸は3つ。自社サイトに限らず、お客様の外注ホームページ案件にもそのまま適用します。

何を捨てるかを先に決める：「全部やる」は「ちゃんと動く」を壊す
自分が運用できる構成しか提案しない：派手な技術より長期運用できる構成。これが「ビジネスに寄り添う」の具体的な意味
数値改善は手段、ビジネス継続が目的：PageSpeedも構造化データも、その先の目的につながっていなければ意味がない

リニューアル検討中の方は、「この事業者は、自分が運用できる構成で提案してくれるか？」「やらないことを先に握れるか？」「派手さより継続性を選んでくれるか？」 を質問してみるのがおすすめです。今回のテーマ構成・構造化データ・セキュリティヘッダー設定は、お客様サイトでも横展開できる形でモジュール化しています。