ROUTE06では、社内の様々な業務においてGitHubを活用しています。全社導入の背景や実際の利用状況については以前の記事でもご紹介した通りで、GitHubはドキュメント管理ツールの枠を超えて全社のあらゆる業務を支える基盤となっています。

本記事では、ROUTE06のコーポレートサイトの構築においてGitHubを実質的なヘッドレスCMS(Content Management System)として活用した事例についてご紹介します。どのような背景からGitHubをCMSと定め、具体的にどう運用しているか、また今後どう改善していきたいのか等についてまとめました。

コーポレートサイトの設計思想

当初コーポレートサイトは必要最低限の会社情報を掲載したランディングページのみの状態でしたが、昨年の資金調達のプレスリリースのタイミングに合わせ、現在のサイトへリニューアルしました。企画からデザインや実装及び運用まで社内で行なっており、日々改善を続けている状況です。

リニューアル後、ROUTE06ではコーポレートサイトを顧客を中心としたステークホルダー向けの情報サービスと位置付けています。大手企業のデジタル・トランスフォーメーション(以下、DX)を支援する上で、自社だけではなく様々な人・企業・システム等との連携は必須であり、広範な知見も求められます。自社の足元での事業領域より広義のテーマを対象とし、常に社内でも調査や論考を重ねながら、DXに関わる様々な知見の蓄積と信頼性に重きおいたコンテンツ制作を行なっています。

同時にコーポレートサイトも自社プロダクトの一つとして、機能追加やUI変更などアジャイルに改善し続けながら、様々なチャレンジができる場であることも大事にしています。メディアとしてのグロースさせるために必要なサイトの表示速度や構造化データなどの改善などにも取り組んでいます。顧客企業向けのプロダクト開発では使用していない新しい技術やデザイン、データ分析環境の試験的な実装を行うことによって、通常の営業活動では得られない知見の蓄積を目指しています。

GitHubをCMSに選定した背景

サイトの構築にあたり、様々なCMSの選択肢があるなかで、GitHubを選定した理由は主に2つあります。

1. BizOpsとDevOpsの一体化

最も効率的なWebサイトの運用体制はどのようなものか。それはBizOpsとDevOpsの境目がない状態であり、コンテンツを制作管理するオペレーター(ライター／編集者)と、システムの実装及び運用を担う開発者の2者間で、業務情報及びITスキルの格差が極小化された状態であると考えています。

もしシステムの実装者＝ライターであれば、管理画面がなくともコンテンツ編集・操作を行うことができ、制作中のコンテンツに合わせて柔軟にUIを変更することも可能になります。BizOpsとDevOpsの一体化によって、開発と制作の間で摩擦の少ない効率的な業務プロセスを実現することができます。

そのような考え方が背景にあるため、GitHubを実質的なヘッドレスCMSとして活用し、オペレーター(ライター／編集者)が開発者及びデザイナーと同じGitHubのRepository内でコンテンツ作成・編集できる環境を構築しました。

具体的な業務フローについては後述の通りですが、コーポレートサイトの企画・制作・デザイン・実装に関わるあらゆる関係者が一つのRepositoryのなかで課題やタスクなどのログを共有することで、チームの情報格差が少ない状態を実現できています。管理画面のデザイン・実装・管理などの工数を削減できていることも分かりやすい利点の一つです。また認証や権限管理などセキュリティ面でのメリットも少なくありません。

オペレーション担当者と開発者がお互いの抱えているタスクや課題を共有するための手段やツールは数多く存在しますが、GitHubをCMSかつコミュニケーション及びプロジェクト管理ツールとして活用することで、よりシームレスかつリアルタイムにお互いの業務状況を知ることができます。

特にROUTE06はフルリモートワーク組織であるため、ソースコードだけでなく記事の本文や画像においてもオープンなバージョン管理及びレビュー体制があることで、オフィス等で同期的な会話をしていなくても、多様なメンバーがお互いの業務をフォローしやすい環境を実現することができています。

2. GitHub Flowの学習機会

GitHub Flowとは現代の多くのソフトウェア開発の根幹となっているワークフローの考え方です。一方、たとえプロダクトマネージャーやデザイナーであっても、GitHubに触れるのはIssue作成やコメント、一部のPull requestのレビューなどの対応に限定され、Branch作成からPull requestのMerge及びDeployまでのプロセスに実務上関わる機会は一般的にそう多くはありません。

ROUTE06ではプロダクト開発以外のドキュメント作成や承認フローでもGitHub Flowを活用しており、開発者以外が基礎を学べる機会を増やすことは重要です。そのため、記事のコンテンツ作成・レビュー・公開までのプロセスをGitHub Flowに準じて行うことのできる仕組みを構築することを考えました。

誰にでも解読可能なテキストによって構成される記事コンテンツであれば、ソースコードの作成やレビューに比べて心理的ハードルが大幅に低く、たとえ誤記があってもシステムの維持や機能に影響を与えることもありません。

誰でも気軽に挑戦/失敗できるが、開発実務に近いGitHub Flowの学習体験をどう構築するのかはプロダクト開発に関わる人材育成において重要な論点です。ROUTE06で取り組んでいる記事その他コンテンツ制作及び公開のプロセスが、その一つのサンプルプラクティスとなれるように引き続き環境構築にも努めていきたいと考えています。

記事公開の実際のプロセス

コーポレートサイトにおいて実際に運用されているフローは以下の通りです。これまでにこのフローのもとで約60本の記事及びニュースリリースが公開されています。

STEP 1 : 記事の企画管理

記事の企画はGitHub Issuesによって作成され、具体的な進捗はProjectsによって管理されています。個別のIssueでは具体的な記事内容などは記載せずに、企画内容の議論や、付随して発生する撮影業務などのタスク確認を行います。

STEP 2 : 記事の入稿

記事を入稿する際には、コーポレートサイト用のRepository内で記事追加用のBranchを作成し、記事本文及び画像等を対象branch内にmdファイル及びimageファイルとして追加します。サイト自体の改修や機能追加なども同じRepositoryを利用しており、BizOpsとDevOpsが一体となって管理されています。

STEP 3 : 記事のレビュー

記事を実際にレビューする際には、全ステップで作成したBranchのPull requestを行います。そのPull request及びReviewのアサインをトリガーとして、Cloudflare/Storybook/Chromatic等によって動的に生成されたPreview環境が立ち上がり、route06.co.jpドメインアカウントを有するメンバーのみが本番同様の表示確認行うことができます。

STEP 4 :  記事の公開

Approve後のPull requestをMergeすることで、記事その他コンテンツが本番環境に自動的にDeployされます。本番サイト上で公開されていることを確認できれば終了となります。

上記の通り、記事の制作から公開までの一連のプロセスはブラウザ上で行われており、実質的にGitHubをCMSとして活用している状態です。

実務は主にマーケティング担当者(入社までGitHubに触ったことがなかった社員が中心)が行なっており、基本的にエンジニアが手を動かすことはありません。一方、オペレーション過程におけるエラーの発生などはコミットログや通知(GitHub及びSlack)によって状況を確認しやすく、担当者が必要に応じてエンジニアやデザイナーに技術的なサポートを求めやすい環境になっています。

今後の取り組み

リニューアル後のコーポレートサイトは、検索経由の流入数だけ見ても前年同月比(2023年5月)で約420%にも増加しています。コンテンツ制作への注力に加え、画像ファイルの圧縮をはじめとしたサイト表示の高速化等のユーザビリティ改善に取り組んできたこともトラフィックの増加に少なからず貢献していると考えられます。

今後もコーポレートサイトをあらゆるステークホルダー向けの情報サイトとしてグロースさせるために様々なコンテンツを拡充していく方針であり、GitHub上での執筆・編集などの業務効率化のための機能追加なども検討しています。

例えば現在GitHub Copilotはコーディングのサポート機能が主体ではありますが、記事の校閲などにも活用できる可能性があり、そのような新しい機能の検証も積極的に行っていきたいと考えています。

今回GitHubのCMS活用としてコーポレートサイトの事例をご紹介しましたが、ROUTE06の社内向けのポータルサイト(Handook)の運用においてもGitHubは実質的なCMSとして利用されており、他にも現在企画中の採用サイト等でも類似の仕組みの実装を検討しています。

開発者以外のメンバーでもGitHubを日々の業務で利用する文化や環境を作り上げるハードルは相応に高いものの、GitHubはBizOpsとDevOpsの架け橋になれる数少ないプラットフォームです。ROUTE06ではより生産的かつ創造的なワークスタイルを目指して、今後も自社ならではのユニークなGitHub活用にチャレンジしていきます。

｜関連記事｜