メインコンテンツへスキップ

金融系公的機関の情報サイト構築

数千ページ規模の事業者情報サイトを、要件定義からフロント・バックエンド・インフラまで一人で構築。Jamstack × Algoliaで「見たことない検索体験」を実現。

Tech Stack

Gatsby.jsNext.js (App Router)Node.jsStrapiPostgreSQLAlgoliaFuse.jsTailwind CSSHerokuNetlifyGitHub Actions

プロジェクト概要

金融系公的機関の事業者情報サイトを新規構築しました。基幹システムで管理している事業者情報を、セキュアかつ高速に検索・閲覧できるサイトです。

要件定義から、フロントエンド・バックエンド・インフラまで、すべて一人で担当しました。

その後、同じクライアントから応募サイトの制作も依頼され、PMからデザイン・開発まで一貫して担当。継続的な信頼関係を築いています。

技術的なチャレンジ

Jamstack構築によるセキュリティと高速化

公的機関という性質上、セキュリティは最重要課題でした。Gatsby.js × StrapiのJamstack構成を採用し、フロントエンドとバックエンドを完全分離。基幹システムのデータを安全に公開できる環境を実現しました。

数千ページ規模のビルド設計

ページ数が数千にのぼる大規模メディアサイトだったため、ビルド時間とパフォーマンスの設計が重要でした。Gatsbyのincremental buildやキャッシュ戦略を駆使し、運用可能なビルド時間に収めました。

Node.jsバッチ処理の開発

基幹システムのデータをStrapiに同期するため、Node.jsでバッチ処理アプリを開発しました。PostgreSQL連携やIPアドレス設定などインフラ周りも含め、フレームワークに頼らない形でのNode.jsアプリ開発は貴重な経験でした。

Herokuは日本語の文献がほとんどなく、英語ドキュメントを読み込みながらの実装でしたが、なんとかやり切りました。

Algoliaによる高速検索

フリーワード検索とタグベースのカテゴリ検索をAlgoliaで実装。リリース後、クライアントからは「こんなにさくさく動く検索体験は見たことない」という声をいただきました。

継続案件:応募サイトの制作

2024年には、同じクライアントから応募サイトの制作を依頼されました。

  • 技術: Next.js (App Router) × Strapi × Fuse.js
  • 担当: PMからデザイン・開発まで
  • 特徴: 募集中/終了のステータス動的切替、8項目のカテゴリ検索、ISR + オンデマンド再検証

デザイナーは外部の方だったため、締め切りに合わせてデザイン提出のタイミングや質をハンドリングしました。工数が間に合わなそうな場面では、各ページのレイアウトを揃えることで工数を削減できるよう、デザイナーとクライアントの間を取り持ってディレクションしました。

クライアントとの信頼関係

最初にJamstack構築の説明をしたとき、興味を持っていただけたのを覚えています。

リリース後は、Algoliaの検索速度やページ遷移の速さに驚いていただきました。先方の要望は何一つ漏らすことなく全て実装し、修正対応も迅速に行ったことで、リリース時から信頼を得ることができました。

その信頼が、継続案件につながっています。

得られた経験

  • インフラ周りの理解: パフォーマンス・ビルド設計、Heroku/Netlifyの運用
  • Node.jsアプリ開発: フレームワークに頼らないバッチ処理の設計・実装
  • ディレクション経験: デザイナー・クライアント間の調整、工数管理

求職者の方へ

この案件で経験したことは、TamaTだからこそ得られたものだと思います。

一人でこの規模のフロントエンド・バックエンドを開発する機会は、なかなかありません。

トップダウンの体制ではないからこそ、自分で技術選定をしたり、顧客と直接折衝したりする経験が積めます。

AI時代において、ただコードが書けるだけでは差別化が難しくなっています。プロジェクト全体の舵取りができる人材が求められる中、TamaTではそういった経験を若いうちから積むことができます。

挑戦したい方、ぜひ一度お話ししましょう。

一緒に働きませんか?

カジュアルにお話ししましょう。お気軽にお申し込みください。