1. HOME
  2. 実績一覧
  3. エンジニア向けキュレーションメディア「POSTD」をWordPressからGatsby.js(React)へ移行
  • 開発

自社サービス
エンジニア向けキュレーションメディア「POSTD」を
WordPressからGatsby.js(React)へ移行

1.プロジェクト概要

株式会社リクルートで運用されていた「POSTD」をニジボックスへ運用移管した際に、デザインのリニューアルと同時にコードベースをGatsby.js(React)に変更しました。

POSTDとは?

「POSTD」はエンジニアに向けたキュレーションメディアです。2014年に株式会社リクルートからリリースされ、国内のエンジニア層に愛読していただきました。2019年に更新を停⽌してからも引き続き参照され続け、2021年5月にニジボックスがメディアの運営を引き継ぎ再始動しました。

新⽣「POSTD」でも引き続き、海外のエンジニアやテックアナリストが発信する上質な記事を厳選し、⽇本語に翻訳してお届けしています。これまで英語での購読を余儀なくされていた、海外テック分野の専⾨性の⾼い情報に気軽に触れることができます。

アウトプット

プロジェクト全体像

プロジェクト実施内容
・WF設計
・デザイン
・フロントエンド開発
・デプロイフロー設計/実装
プロジェクト期間
2021年1月~2021年4月(4ヶ月)
体制
ニジボックス
・ディレクター:1名
・デザイナー:1名
・テクニカルディレクター:1名
・フロントエンドエンジニア:2名

2.プロジェクト背景


旧「POSTD」はもともとWordPressによる運用が行われていましたが、更新を休止する際にサーバー維持コスト面を優先し、静的HTMLをFirebaseで公開する形式が選択されていました。今回、「POSTD」の再始動にあたって、メディア運用の利便性からCMSの導入が再度必要となりました。

3.プロセス

1)要件定義

CMSを検討する際に、移管後の運用などを考慮し以下の2点を重視しました。

・休止期間中のメリットであった静的HTMLサイトの軽快なブラウジング体験を維持する
・企画から開発までをワンストップで対応可能なニジボックスの強みを活かした構成にする

上記を実現するため、静的サイトジェネレーター(SSG)の導入を決定し、今回は ReactをベースとしたGatsby.jsを採用しました。

2)移管作業

移管にあたり、限定された期間の中での開発効率を上げるため、作業を以下の3つのフェーズに分割、実施しました。


・既存のページから記事情報を抽出
・デザインの設計とコンポーネント分割
・デプロイ、プレビューに関する設計

4.結果

パフォーマンスを維持しつつ、自社の強みを活かした設計への移管に成功

ニジボックスの開発組織はフロントエンドに強みを持っています。
今回使用したGatsby.jsはReactをベースとしたフレームワークです。 そのため、ニジボックスのフロントエンド開発力を遺憾無く発揮したコンポーネント設計や運用体制の構築を実現することができました。
また、当初の目的であった、サイトのレスポンス速度などのパフォーマンスも維持することができました。Googleが提供しているWebサイト診断ツール、PageSpeed Insightsの採点でも98点を獲得しています。

'