- コンテンツ更新を外部ベンダーに依頼する必要があり、迅速な対応ができなかった
- セキュリティ対応が追いつかず、攻撃対象になりやすい状態だった
- Webページの応答時間が遅く、性能面での改善が困難だった
- ページをCMS管理下に置き、社内で迅速なコンテンツ更新が可能に
- 外部ベンダーへの依頼頻度が半分以下に減少
- Lighthouseスコアが向上し、サイト表示速度が体感できるレベルで改善
「エネルギーフリー社会の実現」をビジョンに掲げ、エネルギーと暮らしの新しいあり方を追求する株式会社Looopは、コーポレートサイトのリニューアルにあたってmicroCMSを導入しました。
今回は、株式会社Looopシステム統括部のご担当者と、マーケティング本部 広報・PR課の福田さん、microCMSのパートナー企業であり、開発を担当した株式会社トライビート Tech事業部 執行役員の後藤恭智さん、営業本部の丹治茂男さんに、microCMSの導入背景から活用状況などをお聞きしました。
導入の背景:外部への委託から、社内で運用を完結できる仕組みへ
microCMSを導入した背景を教えてください。
-システム担当者さま
以前のコーポレートサイトではWordPressを利用していたのですが、セキュリティ面で攻撃対象になりやすく、パッチ適用など保守運用作業に追われていました。また、ページ表示の応答時間を改善することも難しい状況だったため、コーポレートサイトのシステム構成全体を見直すことになったのが導入のきっかけです。
前身のシステムでは社内での更新作業を満足に行えず、ちょっとした修正の際にも外部ベンダーに作業を依頼していました。自社で更新作業を完結させることも、コーポレートサイトをリニューアルする目的のひとつでした。

CMSの選定はどのように行われましたか?
-トライビート・丹治さん
新しいサイトに最適な方法を検討していく中で、静的ホスティングの仕組みを採用することになりました。MovableType、Strapi、Contentful、WordPressのヘッドレス化、microCMSなどの候補を挙げてLooopさまと要件定義を進めていき、最終的にmicroCMSを選びました。

-システム担当者さま
ヘッドレスCMSについての知見をトライビートさまが持っていたことと、microCMSが国産サービスであり、日本語のドキュメントが充実していたことが決め手になりました。
また、今回はWebサイトのデザインは既存のものをそのまま活かし、CMSとインフラだけを刷新する手法を取りました。microCMSのようなヘッドレスCMSであれば、フロントエンドとバックエンドが切り離されているため、デザインはそのままにCMS移行を実施するハードルが高くないのも選定ポイントの1つとなりました。
-トライビート・後藤さん
サポートが必要になったときに、業務要件を日本語で伝えながら相談できるのは心強いですよね。承認フローの細かな設定など、日本の企業の組織構造や商習慣にフィットした機能設計がなされている点も安心材料でした。
サイトのリニューアルはどのように進めていったのでしょうか。
-システム担当者さま
事前調査や前身システムの調査、コンペの実施なども含めて、約1年半ほどの期間をかけました。弊社のプロジェクト体制としては、プロジェクトオーナー、プロジェクトマネージャー、テクニカルアドバイザーが1名ずつ、そのほか実際に運用を担当する広報・PR課からも状況に応じて3〜5名が携わりました。
-トライビート・後藤さん
要件定義や設計の段階から広報チームの方々にも参加いただいたことで、管理画面のデザインなどのフィードバックを随時いただきながら進めることができました。弊社側ではフロントエンドチームが3〜4名、インフラチームが2〜3名、テストチームが2〜3名の合計10名前後で開発を行いました。

導入にあたって参考にした事例はありましたか?
-トライビート・丹治さん
サイトに掲載されている事例記事を見て、大手企業や有名サービスにもmicroCMSが使われていることを確認しました。また、Looopさまの要件に合った実装方法を確認するために、実際のWebサイトの構造などを拝見しながら進めました。
活用の状況:ほぼすべてのページをmicroCMSで管理
microCMSをどのように利用されていますか?
-システム担当者さま
数ページの例外を除き、コーポレートサイトのすべてのページをmicroCMSで編集できるようにしています。当初は、汎用的な「お知らせ」や実績紹介のページのみでの利用を検討していましたが、最終的には広報チームがすべて管理できる体制にすることにしました。個別のページについてはフォーマットを定めて、文字や画像などの差替のみ可能とした制限をつけて運用しています。
システムの技術構成を教えてください。
-トライビート・後藤さん
フロントエンドではNext.jsを使用し、SSG(Static Site Generation)でレンダリングしています。ホスティングはAWS Amplifyで、セキュリティ対策としてWAF(Web Application Firewall)も入れています。
実際の運用フローを教えてください。
-福田さん
ニュースや事例記事などの更新は、基本的にはすべて広報チームの担当者が下書きを作成し、レビュー機能を使って上長に承認依頼を行っています。編集担当者には承認権限がなく、承認担当者には編集権限がないという役割分担になっていて、ひとりだけで公開することはできない仕組みです。

-システム担当者さま
権限は業務フローに沿って細かく設定しています。管理者はあらゆる権限を持っているという運用がよくあると思いますが、弊社では上位権限者も必ずダブルチェックを挟むような統制を取って、誤操作や独断での公開を防ぐ運用にしています。こうした設計が実現できたのはありがたいですね。
導入の効果:直感的な管理画面で、タイムリーな投稿が可能に
microCMSの使い勝手はいかがでしょうか。
-福田さん
プレスリリースやメディア掲載情報などをタイムリーに投稿できるようになりました。管理画面のデザインも直感的で使いやすいです。別の職場でWordPressを扱っていたのですが、そのときは「間違って変な場所をクリックしたらどうしよう」という不安が少しありました。microCMSはシンプルな画面で安心して使えます。
-システム担当者さま
管理画面をわかりやすくすることは、設計段階から意識していました。開発者しか使わないような情報は編集項目に入れないなど、広報チームとすり合わせながらデザインしています。

microCMSを導入した効果は感じていますか?
-システム担当者さま
社内の別部署の人から「サイトの表示が速くなった」という声が上がっています。脆弱性や性能面の改善についても実現できました。Lighthouseのスコアも向上しており、SEOにも効いているのではないでしょうか。また、パッチ適用などのメンテナンス工数がなくなったり、外部ベンダーへの依頼頻度が大幅に減ったりといったコスト削減効果も感じています。
-トライビート・後藤さん
公開後にPV数が一時的に増加し、データ転送量が契約プランの閾値を超えたことがあります。そのときは対策のため、PV数が特に多いページの画像最適化を行ったのですが、microCMSの画像APIを使うことで簡単に対応できて驚きました。リリース以降にも裏側の再設定などをしやすくて、Web開発への理解があるCMSだなと思いながら使っています。

今後の展望:サービスサイトへの横展開や、運用フローの最適化を目指す
今後、microCMSをどのように活用していきたいですか。
-システム担当者さま
実はサービスサイトでもmicroCMSを利用しているのですが、こちらではヘッドレスCMSの力を十分に活かしきれていないと感じています。今回のコーポレートサイトでの設計を参考にして、サービスサイトもよりよく改善していければと思います。
最近の弊社内の傾向として、スピーディーに新規Webページを公開したいときに、本来のmicroCMSの枠組みから外れてHTMLページを作成することがあるんです。たしかに、CMSのフィールドを設定したりテンプレートを用意したりするのは少し手間がかかるのですが、その後の更新作業や保守運用を考えるとmicroCMSを利用したほうがいいはずです。このあたりの運用面の調整は、あらためて社内で整理していきたいと思っています。

microCMSに期待することはありますか。
-福田さん
記事を投稿してから反映されるまでにタイムラグがあって、たとえば11時ちょうどにプレスリリースを公開したいなら数分前に投稿するなどの調整が必要なんです。できれば即時反映されると助かります。
-トライビート・後藤さん
ビルドにSSGを採用している以上、どうしても数分程度のラグが発生してしまうんですよね。「お知らせ」ページなど即時反映が望ましい部分はISR(Incremental Static Regeneration)を使って動的にレンダリングするなど、仕組みを改善していきたいです。
Looopさまの運用フローでは必ず承認者を設定するので、レビュー依頼をする際に「承認者を設定すること」が必須にできるオプションがほしいですね。現状だと、承認者を設定せずにレビュー依頼だけを上げられてしまうので、承認者の設定忘れをシステム的に防げていません。レビュアーの有無のステータスを返すようなAPIがあればこちらで機能を作ることもできるので、検討いただけると嬉しいです。
取材協力:エディット合同会社(ライター:藤井亮一 撮影:関口佳代)
