この記事では、資格試験の予備校・講座・書籍を比較できるWebサイト「ライブラリ」の制作事例を紹介します。
「ライブラリ」は、資格試験の予備校・講座・市販の書籍を比較して選べるWebサイトです。企画・設計・開発・運営を手がけ、試験ごとに別のサイトとして公開しています。
公開しているサイト
- 司法書士ライブラリ
- 司法試験ライブラリ
- 行政書士ライブラリ
- 社労士ライブラリ
- 宅建ライブラリ
- マンション管理士・管理業務主任者・賃貸不動産経営管理士ライブラリ
- 土地家屋調査士ライブラリ
- 公務員ライブラリ
- IT・AIライブラリ
制作の目的
予備校を選ぶ人は、各社の公式サイトを1つずつ開き、講座の内容や受講料を見比べる必要があります。そこで、各予備校の講座と市販の書籍を同じ項目で並べ、比べやすくしました。
また、X・YouTube・noteで発信されている勉強の進め方や教材選びの情報も、同じサイトで探せるようにしています。外部のコンテンツは、公式の埋め込みとリンクで紹介しています。
工夫したこと
比較表はデータから自動で作る
講座・書籍の情報は、各予備校・出版社の公式ページで確認して登録しています。比較表はそのデータから自動で作るため、手作業による転記ミスが起きにくくなります。また、順位やおすすめは付けず、読者が自分の条件で選べるようにしています。
文章のルールを決めて点検する
結論を先に書き、1文に1つの内容にしています。用語は初めて出たところで説明します。表記や略語のルールは文書にまとめ、プログラムで自動的に点検しています。
操作しやすい画面にする
絞り込みや並べ替えは、ページを読み込み直さずに切り替わります。切り替えてもページの高さが変わらないため、読んでいた位置を見失いません。
使用した技術
- Next.js（App Router）・Tailwind CSS
- Supabase（データベース）
- Cloudflare Workers（公開先）
1つのプログラムから試験ごとのサイトを作る構成にしています。新しい試験のサイトも、同じ仕組みで追加できます。
