事例

教会ネットワークの一覧サイトを作り直す

日本語教会開拓ネットワーク · jcpnetwork.com

既製のWordPressテーマとレンガ壁の素材写真だったサイトが、加盟教会をきちんと探せる高速なバイリンガルサイトになりました。英語ページも初めて検索エンジンに読まれるようになりました。

課題

JCPNのサイトは既製のWordPressテーマで動いていました。どのページも、本文が現れる前に画面いっぱいのレンガ壁の素材写真から始まります。加盟教会の一覧はテキストリンクが並ぶだけで、英語版はブラウザ側で切り替えるだけの仕組みだったため、検索エンジンには一度も登録されませんでした。近くの日本語教会を探しに来た方には、地図もなければ、どこから見ればよいかの手がかりもありませんでした。

行ったこと

サイト全体を事前生成の静的ページとして作り直し、加盟教会を操作できる地図に載せ、日本語と英語を切り替えではなくそれぞれ独立した検索対象のページにしました。フォントは必要な文字だけを取り出して自前で配信し、最初の描画を妨げないようにしています。画像は端末に応じて出し分ける仕組みに移し、性能はテストで固定して、気づかないうちに悪化しないようにしました。

結果

サイトは公開中で、JavaScriptはほとんど送っていません。英語ページは初めて検索対象になり、教会一覧はリンクの羅列ではなく実際に使える地図になりました。一方でアクセシビリティは、文字色のコントラスト不足が数か所あり5ポイント下がっています。これは実際の後退であり、下の表に記載したうえで修正中です。

制作前と制作後

トップページ

教会一覧

以前の加盟教会ページ。レンガ壁のヘッダーの下に、州の見出しごとに下線付きのテキストリンクが並んでいる。 — 前 — 州ごとのテキスト一覧

作り直した加盟教会ページ。教会ごとにピンが立った北米の地図があり、その下に一覧が続いている。 — 後 — 全加盟教会を載せた操作できる地図

団体紹介ページ

利用者にとって変わったこと

教会ネットワークの一覧サイトを作り直す
項目	前	後	変化
英語ページ	ブラウザ側の切り替えのみ、検索対象外	/en/ 配下に8つの事前生成ページ	検索対象に
教会一覧	州ごとに並んだテキストリンク	全加盟教会を載せた操作できる地図	作り直し
ウェブフォント	描画を止めるGoogle FontsのCSS	必要な文字だけを自前配信、描画を止めない	自前配信に
ブラウザ側のJavaScript	ページ全体をブラウザで組み立て	約1KBのナビ用スクリプトと地図のみ	ほぼ不要に
旧WordPressのURL	作り直しで切れるはずだった	公開済みURLは新しい場所へ301転送	維持
サイトマップ	手作業更新で実態とずれていた	ルート定義から自動生成	ずれない

計測した変化

教会ネットワークの一覧サイトを作り直す
指標	前	後	変化
パフォーマンススコア	77	98	+21 ポイント
アクセシビリティスコア	100	95	−5 ポイント
SEOスコア	83	100	+17 ポイント
最初の描画 (FCP)	2.9 s	1.7 s	−41%
主要素の表示 (LCP)	4.8 s	2.1 s	−56%
ページ容量	668 KiB	483 KiB	−28%

計測日: 2026年8月5日
計測方法: モバイル版Lighthouseで、通信速度を模擬的に制限して計測。対象はトップページです。パフォーマンスの数値は3回計測した中央値、アクセシビリティとSEOは結果が一定のため1回の計測値です。
注意点: 「前」の数値は、JCPN自身のバックアップ（Twenty Seventeenテーマとアップロード済みファイル）と保存記録のHTMLから、元のWordPressサイトを手元で再現して計測したものです。ディスクから直接配信しているため応答時間は実際のサーバーより速く、元のサイトがこれより高い数値だったことはあり得ません。おそらくもっと低かったはずです。