株式会社ニジボックス株式会社ニジボックス
icon_chevronicon_chevron
自社サービス エンジニア向けキュレーションメディア「POSTD」を WordPressからGatsby.js(React)へ移行
自社サービス エンジニア向けキュレーションメディア「POSTD」を WordPressからGatsby.js(React)へ移行
静的サイトジェネレーター導入によるサイトパフォーマンス改善
nijibox_designparts
クライアント
株式会社ニジボックス
当社スコープ
Webサイト構築・リニューアル
開発
体制

ニジボックス

  • ディレクター:1名
  • デザイナー:1名
  • テクニカルディレクター:1名
  • フロントエンドエンジニア:2名
期間
  • 2021年1月~2021年4月(4ヶ月)
実施内容
  • WF設計
  • デザイン
  • フロントエンド開発
  • デプロイフロー設計/実装
nijibox_designparts
クライアント課題
株式会社リクルートで運用されていた「POSTD」をニジボックスへ運用移管した際に、デザインのリニューアルと同時にコードベースをGatsby.js(React)に変更しました。 旧「POSTD」はもともとWordPressによる運用が行われていましたが、更新を休止する際にサーバー維持コスト面を優先し、静的HTMLをFirebaseで公開する形式が選択されていました。今回、「POSTD」の再始動にあたって、メディア運用の利便性からCMSの導入が再度必要となりました。
POSTDとは?

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

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

nijibox_designparts
ミッション
CMS化に際して、静的HTMLサイトと同等の高速で快適な閲覧体験を実現する
nijibox_実績_postD
No items found.
No items found.
nijibox_designparts
ソリューション
静的サイトジェネレーター(SSG)の導入にあたり、ReactをベースとしたGatsby.jsを採用しました。
nijibox_designparts
要件定義

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

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

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

nijibox_実績_postD
No items found.
nijibox_designparts
移管作業

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

  • 既存のページから記事情報を抽出
  • デザインの設計とコンポーネント分割
  • デプロイ、プレビューに関する設計
No items found.
nijibox_designparts
No items found.
nijibox_designparts
No items found.
nijibox_designparts
No items found.
nijibox_designparts
成果
パフォーマンスを維持しつつ、自社の強みを活かした設計への移管に成功

ニジボックスの開発組織はフロントエンドに強みを持っています。

今回使用したGatsby.jsはReactをベースとしたフレームワークです。 そのため、ニジボックスのフロントエンド開発力を遺憾無く発揮したコンポーネント設計や運用体制の構築を実現することができました。

また、当初の目的であった、サイトのレスポンス速度などのパフォーマンスも維持することができました。Googleが提供しているWebサイト診断ツール、PageSpeed Insightsの採点でも98点を獲得しています。

お客様の声
nijibox_designparts
株式会社ニジボックス
株式会社ニジボックス
※本記事の内容は、記事作成当時の情報です
開発についてもお気軽にご相談ください
開発について詳しく見る
UI/UXデザインのお役立ち情報を無料公開中!
nijibox_pattern
nijibox_資料ダウンロード
UI/UXデザイン概要やその他の実績も掲載!
ニジボックスはリクルートのノウハウを活かし、お客様の事業フェーズに合わせて、5つのUXデザインフローをご用意。課題に即したサービスを提供しております。
こんな方におすすめ
square
ニジボックスの強みを知りたい方
square
具体的なデザインフローを知りたい方
square
ご相談事例ごとの参考価格を把握したい方
ほかの実績
実績一覧へ戻る