大規模サイトをどう設計し直すか──株式会社キテレツが取り組んだリニューアル事例に学ぶ運用改善の視点

大規模サイトなどで特に起こりやすい、サイトの複雑化や運用効率の低下。それらを抜本的に見直す際に考えるべき「設計方針」や「進行管理」とは？ 本記事では、その思考プロセスについて、実際のリニューアル事例をもとに株式会社キテレツ代表のKite氏によるアプローチ方法をお伝えします。（2025年春web professional summitセミナー資料より抜粋）

リニューアルのきっかけは、積み重なった運用負担

一般に、複数ブランドを抱えていたり、大量のページが存在したり、多人数での運用が求められたりするような大規模Webサイトでは、時間の経過とともに「サイト構造の肥大化」や、それを支える「運用体制の複雑化」が進みやすい傾向があります。

今回あげるケースでも、当初の設計方針のまま長期間運用を続けていたことにより、サイト拡張や維持管理が限界に達しようとしていました。

一番最初に着手した現状分析のフェーズでは、現在発生している課題を徹底的に整理しました。設計方針の見直しにつながる重要な出発点となるためです。

• データベースが肥大化し、WordPressアップデートも滞留
• 表示速度の低下やレイアウト崩れ
• サイト間（ブランド間）でのデザインルールの不統一
• 権限設計の複雑化による運用負荷の増大

判明したこれらの課題は、単なるシステム移行だけで解決するのが難しいものです。コンテンツの構造や運用体制そのものの再設計が必要となるためです。

今回のプロジェクト例では、現状分析と設計のフェーズにそれぞれ3ヶ月を確保し、課題の洗い出しや構造の整理に丁寧に取り組みました。このように、サイトのリニューアルにおいて、実装やシステム移行だけではなく、設計と分析にもしっかりと初期段階で向き合うことが、その後のサイト運用を支える土台になると言えるでしょう。

どこまで共通化する？　整理のポイントと考え方

現状分析フェーズで明らかになった運用課題をもとに、次の設計フェーズでは構造や体制の本格的な見直しを行います。

特に複数ブランドをひとつのサイト内で運用している場合、似たような情報がブランドごとに違う構造やルールでサイト内に点在していることがよくあります。

この状態が続くと「小さな更新の度に複数ページ修正が必要になる」といった問題が起きやすくなります。
そこで今回のプロジェクトでは、ブランドごとに分けた方がいいところと、まとめて管理できるところを見極めながら、構造やデザインの設計を進めていきました。

コンテンツ構造の設計

まずは全ブランドのページ構成を洗い出して、情報を整理します。

各ブランドに共通して存在していた「校舎情報」や「イベント情報」などは、構造的には似ている一方で、見せ方や運用の仕方が異なるケースが多く見られました。

そのため、各ブランドのページ情報を一覧にして、項目や構成の違いを比べました。

内容や構造がほぼ同じものは共通パーツとしてまとめ、違いが大きい部分は、それぞれのブランドで別々に作れるように設計しています。

スタイルの設計

UIを考える時は、パーツの見た目だけでなく「どんな場面でどう使うか」といったルールまで整理します。

Figma上で設計したコンポーネントには、用途や使い方のガイドを添えておき、更新や追加対応の際にも迷いが生じないようにしました。

また、カラーやタイポグラフィといったスタイル面でも、ブランド間で共通に使えるガイドを整備。

基本スタイルを揃えたうえで、ブランド固有のトーンは子テーマ側で調整する方針としています。

ルールの整備

パーツの設計やスタイルの整備に加えて、実際の更新作業で迷わないようにするためのルールづくりにも取り組みました。

たとえば、共通パーツには「どの場面で使うか」「どのパーツとどう使い分けるか」といった使い方のガイドを添えて、現場で判断しやすい状態を整えています。

また、テキストの表記についてもルールを定めておくことで、ブランド間の表現のばらつきを防ぎ、確認や修正の負担を減らしています。

こうした工夫が、のちの開発や運用での混乱を防ぎ、長く使いやすい仕組みにつながっています。

運用にあわせて見直した、サイトの仕組みと編集体制

設計フェーズで整理した構造やルールを、実際の運用やシステムにどう落とし込むか。実装に進むこの段階では、日々の更新作業がどう行われているかという視点が欠かせません。

今回のプロジェクトでは、マルチサイト構成や権限管理、承認フローの設計など、編集・管理まわりの仕組みを一から見直しました。

サイト構成

1つのWordPress内で全ブランドを固定ページとして持たせていた従来の構成から、サブドメイン型のWordPressマルチサイト構成へと移行しました。各ブランドは独立したサイトとして管理されつつ、親テーマ／子テーマの構成でコードやデザインを共有しています。

編集権限の管理

今回の事例では、720名にのぼる編集者を70以上のグループに分類する必要がありました。こういった階層的な管理は、通常の権限管理機能ではカバーできません。タクソノミー（分類機能）で編集権限をグループ化し、ユーザーと紐づける独自の仕組みを構築しています。

これにより、拠点・職能・ブランドなどの階層に応じて、編集範囲や承認フローを細かく制御できるようになっています。

承認フロー

既存のプラグインでは、運用上必要とされる条件に対応しきれず、バグや運用制限が発生していました。そこで、課題を整理した上で、独自に開発を行っています。設計段階ではプロトタイプを用いて仕様のすり合わせを実施し、複雑な承認パターンにも対応できるよう調整を重ねました。

データ管理

校舎情報のように、大量かつ定型的なデータの扱いも見直しました。従来はカスタムフィールドで個別に管理していましたが、これをカスタムブロックへと再設計し、全ブランドの情報をCSVベースで一元管理できる仕組みに変更しています。

この再構成により、管理画面上での更新作業が効率化されただけでなく、バックエンドのデータベースも大幅に軽量化。結果として、10GB近くあったデータベースは、300MB未満にまで圧縮されています。

長く使えるCMSのために、大事にしたい視点とは

今回のリニューアルでは、情報構造やコンテンツ設計の見直しに始まり、デザイン設計、CMS構成、編集体制の再構築まで、運用全体を見据えた改善に取り組みました。

プロジェクトを通じて重要視していたのは、どのフェーズでも「日々の更新が無理なく続けられるか」を判断軸に持つことです。見た目や開発手法がどれだけ優れていても、使いにくいものになっていたら、長くは使えないでしょう。

CMSを取り巻く状況や運用の課題は、プロジェクトによってさまざまあるでしょう。ただし、

• 構成をどう設計するか
• どんな仕組みで運用するか
• それを誰が担うか

といった視点は、多くの現場に共通するものです。

設計や連携のあり方を見直すタイミングで、どこに目を向けるべきかを考える際、ひとつのヒントになりそうです。

▼セッションで使用されたスライドの全ページは、以下よりご覧いただけます。

＜シリーズ記事はこちら＞

・第1回｜AI検索時代でも、Webサイトの成果を生むUX視点【マーケティングUXとアクセシビリティUX】
・第2回｜Web担当者が“楽”になるCMSとは？　NEW FOLKが提案する「ヘッドレスCMS」という選択肢

文／岡野花梨（ちょっと株式会社）