オンライン英会話スクール比較サイト

概要

複数のオンライン英会話スクールを多軸で比較できる Gatsby.js + Sanity 製の比較サイト。ソートや絞り込みの結果が即座に反映されるストレスのない閲覧体験を提供した。

課題・背景

スクールごとの料金・特徴を多角的に比較する必要があり、PHP サイト的なページ遷移ベースの実装ではソート・絞り込みのたびにロードが入りストレスになる。CMS 側もコンテンツ構造を厳密に設計できる必要があった。

アプローチ

フロントエンドは Gatsby.js で SSG 化し、絞り込み・ソートは静的データに対するクライアント側処理で即時反映。CMS は Sanity を採用し、何を／どのように／どれくらい格納するかを構造的に設計できる利点を活かした。Sanity 側でデータをホスティングしてくれるため、オンライン管理・モノレポ化といった副次的なメリットも得られた。

成果

ストレスのないソート・絞り込み体験を実現し、編集側もスキーマ設計に沿った安定したコンテンツ運用が可能になった。

担当範囲

企画立案／要件定義／コーディング／テスト／保守・運用

技術スタック

Gatsby.js／Sanity／Material UI／Gatsby Cloud／TypeScript／React