出版社の記事配信CMSをReact+REST APIで刷新し、公開リードタイムを1/3に短縮

背景と課題

B社は総合出版社として、ニュースメディア・専門誌・Webマガジンなど複数の媒体を運営し、月間数百本の記事をデジタル配信しています。紙媒体からデジタルへの移行を早期に進めた結果、Web配信の規模は年々拡大していましたが、その基盤となる自社CMSは10年以上前に構築されたもので、現在の業務規模に対応しきれなくなっていました。

編集部からは日常的に業務効率への不満が上がっており、以下のような課題が深刻化していました。

• CMSのUI老朽化による業務効率の低下：10年以上前に設計されたCMSの操作画面は、当時の技術水準に基づくもので、現在の編集者が求める操作性とは大きく乖離していた。画像の挿入・リンクの設定・見出しの調整といった基本操作にも手数がかかり、執筆以外の作業に多くの時間を費やしていた
• 記事公開までのリードタイムの長さ：記事の入稿から校正・承認・公開までの各ステップに手動操作が多く、1本の記事を公開するまでに平均6時間を要していた。速報性が求められるニュース記事でもこのフローを経る必要があり、競合メディアへの遅れが目立つようになっていた
• マルチデバイスプレビューの欠如：CMS上でスマートフォンやタブレットでの表示を確認する機能がなく、編集者が自身の端末で別途確認する手作業が発生していた。確認漏れによるレイアウト崩れが公開後に発覚するケースも散見された
• 外部ライターとの原稿管理の破綻：フリーランスのライターや寄稿者との原稿やり取りがメール添付ベースで運用されており、修正のたびにファイルが増殖。どれが最新版か分からなくなる版管理の問題が恒常的に発生していた

「記事を出すスピードがメディアの競争力に直結する時代に、CMSがボトルネックになっている」という編集長の課題意識から、XECINへCMS基盤の刷新をご相談いただきました。

XECINのアプローチ

編集部へのヒアリングを通じて、記事公開フローの全ステップを可視化することから着手しました。入稿・校正・プレビュー・承認・公開という5段階のうち、特にボトルネックとなっていた入稿・プレビュー・公開承認の3工程にフォーカスし、段階的にUIを刷新する方針を策定しました。

• 業務フロー分析：編集者・校正者・デスクそれぞれの1日の作業を実地観察し、CMS操作に費やす時間と手戻りの発生頻度を定量計測
• 技術選定：既存CMSのデータ構造を活かしつつフロントエンドのみを刷新するヘッドレスCMSアーキテクチャを採用。バックエンドはREST APIとして再構築し、将来的なマルチチャネル配信にも対応可能な設計に
• 段階移行：既存CMSと新エディタを一定期間並行運用し、編集部のフィードバックを反映しながら機能を段階追加

実施内容

体制

• XECINからプロジェクトマネージャー1名、バックエンドエンジニア2名、フロントエンドエンジニア2名を配置
• B社側の編集部リーダー・情報システム部担当者と隔週の定例ミーティングを実施し、編集現場の声を開発へ継続的に反映

技術領域

リッチテキストエディタの刷新

記事執筆の中核となるエディタUIをReact + TypeScriptで全面構築しました。見出し・画像・引用・埋め込みコンテンツなどをブロック単位で直感的に配置できるブロックエディタ方式を採用し、編集者がコンテンツの構造を視覚的に把握しながら執筆できる環境を整えました。

• React + TypeScriptによるSPA構成で、画面遷移なしにシームレスな編集体験を実現
• 下書き自動保存機能により、ブラウザの予期せぬ終了時にも作業内容を保全
• 記事テンプレート機能を実装し、定型フォーマットの記事（インタビュー・レビュー・ニュース速報等）を構造化されたテンプレートから即時作成可能に

REST APIベースのヘッドレスCMS基盤

バックエンドをREST APIとして再構築し、記事データ・メディア資産・ユーザー管理を統合的に扱えるAPI基盤を整備しました。

• Python（FastAPI）によるREST API設計・実装
• PostgreSQL（RDS）で記事データ・版管理履歴・メディアメタ情報を一元管理
• 記事のバージョン管理機能を実装し、変更履歴の追跡と任意バージョンへの復元を実現

マルチデバイスリアルタイムプレビュー

エディタ画面上でPC・タブレット・スマートフォンの表示をリアルタイムに切り替えて確認できるプレビュー機能を構築しました。校正段階での見落としを防ぎ、公開後のレイアウト修正を大幅に削減しています。

• 各デバイス幅でのレンダリングをiframe内でリアルタイムに再現
• 公開用テンプレートと同一のスタイルシートを適用し、プレビューと実際の表示の差異をゼロに

外部ライター向けWeb入稿画面

フリーランスライターや寄稿者がブラウザから直接原稿を入稿できるWeb画面を新設しました。権限管理により、外部ライターは担当記事のみにアクセスでき、編集部との校正やり取りもCMS上で完結します。

• メール添付運用を完全廃止し、原稿の版管理をシステム側で一元化
• コメント・指摘機能により、校正のやり取りを記事画面上でインラインに実施

インフラ

• AWS上にAPI基盤を構築し、ECS（Fargate）でコンテナ運用
• S3を画像・動画などのメディア資産のストレージとして利用し、CloudFront経由で配信
• CloudWatch Logsによるエラー監視と、記事公開パイプラインの異常検知アラートを設定

成果

新CMSへの移行完了後、編集部の業務効率と記事品質の両面で改善が得られました。

• 記事公開リードタイムが平均6時間→2時間に短縮。速報記事では1時間以内の公開も実現し、競合メディアとの速報競争で遅れを取らなくなった
• リアルタイムプレビューの導入により、校正戻し回数が月40件→12件に減少。公開後のレイアウト修正がほぼ不要になった
• 外部ライター向けWeb入稿画面の導入でメール添付運用を完全廃止。版管理の混乱が解消され、校正サイクルが短縮された
• 記事テンプレート機能により定型記事の作成時間を50%削減。インタビュー記事やレビュー記事など、フォーマットが決まっている記事の初期構成が即時完了するようになった

「エディタが変わっただけでこんなに仕事が速くなるとは思わなかった。特にスマホプレビューは編集者全員が毎日使っている」と編集長から評価をいただきました。

継続支援

現在は新CMSの安定運用を支援しながら、記事のパフォーマンス分析ダッシュボードの開発や、SNS連携による自動配信機能の追加を進めています。今後は記事内の構造化データを活用した検索機能の強化も予定しています。