iChurch 網站設計案例|5,001 間教會名錄、搜尋與地圖系統建置

教會 iChurch 網站設計案例,整合全台 5,001 間教會資料,採用 Astro 建置名錄搜尋、互動地圖、活動查詢及 LINE 資料更新功能,分享 UI/UX 設計、API 串接與 SEO 優化成果

iChurch是益盛科技的名錄型網站建置案例:把全台 5,001 間教會、22 個縣市的資料,整理成可以多條件搜尋、看互動地圖、查教會活動,並透過 LINE 持續更新資料的公開網站。
益盛科技負責 UI/UX 設計、名錄 API 串接、Astro 靜態網站開發、RWD 響應式版面與 SEO 基礎設定,並製作品牌影片與社群影片。
網站於 2026 年 9 月底上線,桌機版 Lighthouse 實測 SEO 與無障礙功能皆為 100 分。上線後三週,Google 單日搜尋曝光從 20 次增加到 185 次。

教會網站設計 名錄型網站建置 地圖找教會 Astro 靜態網站 RWD SEO

iChurch 網站設計案例|5,001 間教會名錄、搜尋與地圖系統建置

教會名錄網站案例:整合 5,001 間教會資料,做成能搜尋、能看地圖、能看活動的信仰入口網站

全台教會搜尋・地圖找教會・教會活動・教會資訊文章・教會認領

ichurch.tw
5,001
全台教會資料
22 縣市
縣市與行政區篩選
3 支
品牌影片與社群影片
100
SEO 與無障礙
Lighthouse 皆為 100 分
大量資料型網站,可以怎麼應用?

iChurch 整合 5,001 間教會資料,處理的是三個常見問題:資料量大不容易搜尋、資料更新來源分散,以及使用者很難找到符合自己需求的那一筆。
同樣的做法可以用在不同產業:

ASSOCIATION
協會與組織
會員名錄、專業人員查詢與服務據點搜尋。
B2B
企業與 B2B 平台
供應商名錄、產品資料搜尋與合作廠商媒合。
LOCAL
店家與服務平台
依地區、服務類型、營業資訊及距離篩選店家。

益盛科技會依實際資料量、使用者需求與更新方式,規劃合適的搜尋系統、地圖介面與網站管理流程。

品牌影片與社群影片

品牌影片「每一個光點,都是一間教會」用 40 秒帶出 iChurch 要做的事:讓想找教會的人,找得到離自己最近的那一間。
網站上線後,我們另外製作兩支社群影片:15 秒直式短片說明「找教會」怎麼用;「台灣百年教會,現在還在嗎?」從百年教會的話題切入,看完影片的人可以直接點進網站開始找教會。

品牌影片|40 秒

找教會?15 秒認識 iChurch 直式短片封面

直式短片|15 秒
點擊至 YouTube 觀看

話題影片|百年教會

網站首頁完整截圖
iChurch 教會名錄網站首頁完整截圖,包含找教會搜尋、依需求找教會、近期活動與最新文章
一、專案背景

iChurch 的想法很單純:第一次想去教會的人,常常不知道從哪裡開始找。
教會資料散落在各教會官網、臉書粉專與不同的名錄裡,聚會時間也不容易比對。

這次專案要做的,是把這些資料整理成一個公開網站,
讓訪客先用熟悉的條件找起,例如住的縣市、週日早上有沒有聚會、有沒有兒童主日學或青年聚會,
再決定要不要走進其中一間教會。

名錄型網站的資料量大,使用者卻只有幾秒鐘判斷找不找得到。
所以這個專案把重心放在三件事:找得到、看得懂、資料可靠。

網站資料來自「華人教會機構名錄」,並取得 CCNDA 的個別 API 授權。
頁面都會標示資料來源與同步日期,也提醒訪客聚會時間以教會官方最新公告為準。

專案實績摘要

服務對象

iChurch 教會名錄,提供全台教會搜尋、活動與基督教生活資訊的公開網站。

專案類型

名錄型網站建置、地圖與搜尋介面、活動頁、內容文章、教會認領流程、品牌影片與社群影片製作。

建置範圍

首頁、找教會、地圖找教會、教會活動、教會資訊文章、公益網站、一起參與、刊登教會。

上線時間

2026 年 9 月底上線,之後持續更新教會資料、活動與文章,並以 Search Console 與 GA4 追蹤搜尋表現。

二、網站打造前的第一步

教會名錄網站常見兩個問題:資料很多但搜尋很難用,或者畫面做得很漂亮,卻找不到聚會時間。

動手設計之前,我們先做了兩件事:確認資料從哪裡來、能用到什麼程度,再依資料欄位決定網站要提供哪些找法。整理出五個層次:

資料來源
串接名錄 API,保留來源與同步日期
找教會
縣市、行政區、關鍵字、宗派與聚會時段
地圖
在地圖上看附近教會與導航
活動與內容
教會活動頁與生活、信仰類文章
教會參與
用 LINE 認領教會、更新資料

本案的關鍵判斷:
名錄裡有 5,001 間教會,其中 2,484 間有聚會資料,4,976 間有可用座標(依 2026 年 10 月名錄同步資料統計)。
資料有缺口,網站就不替沒有的欄位寫猜測的內容,
聚會時間待更新的教會照實標示,停車、無障礙等沒有資料的欄位維持未知。

例如:
搜尋結果的卡片只放教會名稱、地區、聚會時間與特色標籤,
圖片優先用教會自己的照片,沒有授權照片的教會,改用統一的示意圖,
訪客一眼就能分辨哪些是真實照片,哪些是示意圖。

三、使用者需求與導覽流程設計

這個網站的訪客大致分成三類。

TYPE 01
第一次找教會的人
不知道教會有哪些宗派,也不確定要選哪一間。
需要用縣市、離家距離和簡單的條件開始找,
再看到清楚的聚會時間與地點。
TYPE 02
有特定需求的家庭與青年
想找有兒童主日學、青年聚會、台語或英文聚會、有停車場的教會。
網站把這些條件做成十二個需求入口與進階篩選。
TYPE 03
教會同工
需要確認自己教會的資料正不正確,也想補上活動與照片。
他們不一定熟悉網站後台,所以更新方式要簡單。

導覽列把常用的入口放在最前面,其餘內容收進選單。
訪客進站後,從任何一頁都能在一個點擊內回到找教會或看地圖。

找教會 地圖找教會 教會活動 教會資訊 公益網站 一起參與 刊登教會
四、網頁設計亮點
1. 首頁:用天空與教堂建立第一印象,搜尋放在最前面

首頁主視覺是淡藍天空、晨光、白色教堂與白鴿,色調柔和,不帶壓力,
主視覺下方直接接上搜尋區,可以選縣市、行政區,輸入教會名稱,或按「尋找附近教會」。
搜尋區下面放了「台北教會」「親子友善」「有青年聚會」等熱門搜尋,點一下就能看到結果。

再往下依序是熟悉的城市、十二個需求入口、教會卡片、近期活動與最新文章,
每一個區塊都有明確的「看更多」入口,訪客可以從任何一段接著往下找。

2. 找教會與地圖找教會:同一份資料,兩種找法

「找教會」頁用列表呈現,可以再依宗派、適合族群、聚會語言與聚會時段縮小範圍。
「地圖找教會」頁把同一份資料放在地圖上,教會多的地方以數字標記合併,放大後再展開,
點選標記就能看聚會時間與導航連結。

22 縣市行政區篩選宗派週日早上/週六晚上親子友善青年、兒童、大專聚會台語、英文聚會附近教會

「附近教會」使用瀏覽器定位,直線距離在訪客自己的裝置上計算,網站程式不會把訪客的精確座標送出或儲存。
地圖底圖由第三方圖磚服務提供,瀏覽器載入地圖時,會向該服務請求畫面所在區域的圖片。
訪客拒絕定位時,頁面會改提示用地區搜尋。

iChurch 地圖找教會介面,地圖標記群集與附近教會搜尋結果
3. 教會活動頁:用日期、類型與對象篩選

活動頁的卡片左上角是日期徽章,一眼看得出是幾月幾號,
下方是活動名稱、主辦教會、地點、日期與時間。
篩選區可以依地區、日期(本月、未來三個月)、活動類型與適合對象查找,例如課程、聚會、特會、兒童、夫妻、家庭或教會領袖。

活動資料只收錄教會官方網站公開發布的內容,每筆都附上來源網址與核對日,
官網沒有寫的時間與費用一律留白,不自己補寫。

iChurch 教會活動頁設計,活動卡片、日期徽章與地區日期類型對象篩選
4. 教會資訊頁:文章分類清楚,讓人願意多看一篇

教會資訊頁收錄生活與信仰類文章,分成教會生活、親子生活、認識信仰、節慶日常、每日禱告與建置日誌。
文章卡片用統一比例的圖片、分類標籤與摘要,版面整齊,
第一次接觸教會的人可以從「第一次去教會」這類文章開始看。

iChurch 教會資訊頁設計,教會生活、親子生活、認識信仰等文章分類與卡片
5. 刊登教會頁:教會同工用 LINE 就能認領與更新

教會同工完成簡單的身分確認後,可以直接用 iChurch LINE 更新教會資料、聚會時間、照片與近期活動,不需要登入後台,也不用學網站操作。
如果教會本來就有經營官網、Facebook、Instagram 或 YouTube,也可以提供官方來源,由 iChurch 整理公開資訊。

iChurch 刊登教會頁設計,教會認領、LINE 更新資料與提供官方來源
6. 一起參與頁:讓不會寫程式的人也能幫忙

這一頁說明 iChurch 的起心動念,也列出可以參與的方式,包括提供網站建議、回報錯誤、補充教會資訊、提供教會活動、協助校對、UI/UX 設計與程式開發。
頁面下方介紹一起經營網站的同工,讓訪客知道網站背後有人在維護。

iChurch 一起參與頁設計,說明參與方式與介紹同工
7. 公益網站:與教會名錄分開整理

網站最上方固定顯示一行提醒:iChurch 不會向使用者收取奉獻和捐款,有奉獻心意的人可以幫助有需要的公益團體。
公益網站頁分成基督教與天主教兩區,各自整理團體的官方網站,與教會名錄的搜尋分開,不混在一起。

公益網站
8. Astro + AI 網站維護助理:用對話更新靜態網站

Astro 靜態網站具有載入速度快、公開網站攻擊面較小等優點,但內容更新通常需要修改資料來源、重新建置並部署網站。
對不熟悉程式的管理人員來說,日常維護仍有一定門檻。
因此,益盛科技規劃讓 iChurch 搭配自行開發的 AI 網站維護助理「林小虎」,
讓管理人員能透過自然語言提出修改需求,不需要直接編輯網站原始碼。
例如:
- 「幫我新增一篇教會活動公告。」
- 「把這篇文章的標題改成新的名稱。」
- 「更新首頁的介紹文字。」
- 「檢查這篇文章的 SEO 標題與描述。」
AI 助理會先找到對應的內容,顯示修改前後的差異,經過管理人員確認後,才執行允許的更新操作。
由於 Astro 採用靜態網站架構,內容修改完成後,
仍需要配合資料來源、版本管理及自動化建置部署流程,才能讓正式網站顯示最新內容。
整個流程採用:
管理人員提出需求 → AI 辨識修改內容 → 顯示修改前後差異 → 人工確認 → 更新內容來源 → 重新建置 Astro → 部署網站
這種設計可以保留靜態網站的效能與維護優勢,同時減少管理人員日常更新內容時對工程師的依賴。
延伸閱讀:AI 網站維護助理「林小虎」:用說的改網站,確認後才更新

五、網站功能與前端技術架構

網站使用 Astro 靜態網站架構建置,頁面在建置階段就先輸出成 HTML,訪客瀏覽時不需要等伺服器端程式運算。
公開網站上沒有傳統 CMS 後台與資料庫可以直接被存取,攻擊面比較小;第三方套件、部署權限與資料同步流程,仍然要定期檢查與管理。

名錄資料以一份 JSON 快照提供,搜尋與篩選在訪客的瀏覽器裡完成,每頁只建立 24 張卡片,
資料更新時,執行同步指令、通過驗證後重新建置,再部署新版本。
同步程式遇到授權錯誤、格式異常、筆數少於 1,000 筆或資料突然減少超過 20% 時,會保留前一版,不覆蓋現有資料。

Astro 靜態網站輸出
CCNDA API 資料同步與驗證
瀏覽器端搜尋與多條件篩選
Leaflet 地圖與標記群集
附近教會距離於瀏覽器端計算
RWD 響應式版面(320 至 1440 px)
教會活動日期與類型篩選
LINE 教會認領流程
JSON-LD 結構化資料與 sitemap
title、description、OG 與分享按鈕
WebP 圖片壓縮
鍵盤焦點與跳至主內容連結
PageSpeed 實測表現

測試日期:2026 年 10 月 7 日|測試工具:Lighthouse(PageSpeed Insights 使用的同一套檢測引擎)|測試裝置:桌機版|測試網址:ichurch.tw 首頁

87
效能
Performance
100
無障礙功能
Accessibility
92
最佳做法
Best Practices
100
SEO

桌機版無障礙與 SEO 皆為 100 分,最佳做法 92 分,效能 87 分。
首頁有主視覺大圖、教會卡片與嵌入的介紹影片,效能分數受這些內容影響。
Lighthouse 的 SEO 分數代表頁面技術設定通過檢查,和 Google 搜尋排名是兩回事,實際搜尋表現請看第八段的 Search Console 數據。
實際分數會依測試時間、網路環境與第三方資源載入狀況略有變動。

專案另以 axe 自動檢查桌機與手機版的 WCAG 2 A/AA 與 2.1 AA 規則,首頁檢查結果沒有違規。
自動檢查無法取代人工的無障礙驗證,這點也一併記錄在交付文件裡。

版面在 320 至 1440 px 共七種寬度逐一檢查,手機、平板與桌機的閱讀順序一致。益盛科技的網站設計服務都以同樣的響應式檢查流程交付。

手上有幾千筆資料,訪客卻找不到要的那一筆?

名錄、店家、會員資料,都能做成可搜尋的網站

從資料來源與欄位開始評估,再規劃搜尋條件、地圖與資料更新流程。

諮詢名錄型網站建置 了解客製化系統開發
六、專案管理

名錄型網站要先確認資料,再做畫面。
專案從資料來源評估開始,依授權與可用程度把來源分級,確認可以串接的資料後,才進入設計與建置。
每一輪改版都附截圖與檢查紀錄,問題留在紀錄裡逐項修掉。

STEP 01
盤點資料來源
依授權與欄位完整度分級,決定哪些資料可以使用。
STEP 02
規劃網站架構
確認找教會、地圖、活動、文章與認領的頁面關係。
STEP 03
設計視覺風格
天空藍與白色教堂主視覺,搭配統一的卡片與圖示。
STEP 04
串接資料與製作頁面
同步名錄資料,完成搜尋、地圖、活動與內容頁。
STEP 05
測試與修正
七種寬度的版面檢查、互動測試、連結與無障礙檢查。
STEP 06
上線、影片推廣與數據追蹤
部署上線,製作品牌影片與社群影片,再用 Search Console 與 GA4 追蹤成效。

網站上線後仍持續更新:名錄資料建議每月同步一次,活動與文章依教會官方公告與編輯排程新增。

七、網站建置成果

iChurch 上線後,訪客可以在同一個網站裡搜尋教會、看地圖、查活動、讀文章,教會同工也有一條簡單的途徑認領並更新資料。網站提供的是一個起點,讓第一次想接觸教會的人找到下一步。

全台教會一站查詢

5,001 間教會、22 個縣市,可依地區、宗派、族群、語言與聚會時段篩選。

地圖與附近教會

地圖標記群集與瀏覽器定位,讓訪客直接看到離自己最近的教會。

活動資料有來源

只收錄教會官方公開的活動,每筆附來源與核對日。

教會同工容易更新

用 LINE 完成認領與資料更新,不需要登入後台。

品牌影片與社群影片

一支 40 秒品牌影片、一支 15 秒直式短片與一支話題影片,片尾都引導觀眾回到網站找教會;影片導流成效仍在追蹤中。

Lighthouse SEO 與無障礙 100 分

桌機版技術檢查兩項滿分,頁面設定符合檢查項目;搜尋曝光與點擊請看第八段 Search Console 數據。

八、上線後 SEO 成效
網站上線不到一個月,Google 搜尋曝光開始成長

iChurch 於 2026 年 9 月底上線。新網站前幾週要看的,是 Google 有沒有找到網站、能不能理解內容,以及有沒有開始從相關搜尋把人帶進來。流量大小暫時還不是重點。

單日曝光的變化:上架首日後28天,單日流量成長 9.25 倍,這是兩天的單日比較,不代表整體流量成長率。
10 月中旬開始,網站曝光增加,代表更多人在搜尋結果裡看到 iChurch,但點擊與進站人數不會跟著等比例增加,後續還要持續追蹤。

除了品牌名稱,「找教會」等一般搜尋也開始有排名

從搜尋字詞來看,iChurch 已經出現在一般使用者的搜尋結果裡(Search Console 平均排名,統計期間同上):

「找教會」:平均排名約第 4.22 名
「長老教會浸信會差別」:平均排名約第 6.04 名
「教會活動」:平均排名約第 8.17 名

「台灣基督教宗派介紹」相關文章累積 215 次搜尋曝光。
信仰知識與實用指南開始成為網站的自然搜尋入口,這也是規劃網站架構時,在名錄與地圖之外另外經營教會資訊文章的原因。

GA4 使用者與 AI 搜尋曝光

根據 GA4 統計(2026/09/23~10/20), 以使用者的最初招攬來源分析,直接流量占 38.2%,Google 自然搜尋占 24.5%,Facebook 引薦流量合計占 22.9%,Threads 占 8.3%。
Google、Bing 與 Yahoo 自然搜尋合計約占 27.7%,顯示網站上線初期已開始透過搜尋引擎接觸新訪客。
由於網站仍在起步階段,後續將持續追蹤自然搜尋與社群流量的變化,觀察哪些內容能帶來實際訪客。

部分 iChurch 內容已出現在 Google 生成式 AI 搜尋功能的統計範圍內。
這個數字還無法說明 AI 搜尋帶來多少流量,我們先把它當作後續觀察 AI 搜尋能見度的基準。

上線後持續看數據調整

iChurch 目前的搜尋流量規模還小,但已經有可以比較的起點。網站會持續用 Search Console 與 GA4 追蹤搜尋曝光、進站來源,以及哪些文章與搜尋功能真的有人在用,再依數據調整內容。

這個案例裡,益盛科技負責的範圍包含大量資料整合、搜尋體驗設計、前端效能優化,以及上線後依實際數據修正內容。
想了解搜尋成效追蹤的做法,可以參考SEO 與 AI 搜尋優化服務。

資料來源:Google Search Console、Google Analytics 4;統計截至 2026 年 10 月,數據會隨時間變化。

九、常見問與答 FAQ
Q1:iChurch 是全新建置的網站嗎?
是。資料來源評估、頁面規劃、視覺設計與前端建置都是新做的,上線後仍持續增加教會資料、活動與文章。
Q2:教會資料從哪裡來?準確嗎?
主要資料來自「華人教會機構名錄」,並取得 CCNDA 的個別 API 授權,頁面會標示來源與同步日期。
聚會時間與活動內容仍以教會官方最新公告為準,發現錯誤也可以透過來源名錄回報。
Q3:為什麼用靜態網站,而不是 WordPress 或 Joomla?
iChurch 的內容以名錄、活動與文章為主,更新有固定節奏,不需要一個大型後台。
靜態架構載入快、維護單純,公開網站上沒有 CMS 後台與資料庫可以直接被存取,攻擊面比較小;
第三方套件、部署權限與資料同步流程仍需要定期管理。
教會資料用同步指令更新,文章與活動用檔案管理,改動都有紀錄可以追。
Q4:5,001 間教會的搜尋會不會很慢?
搜尋在瀏覽器裡完成,資料只在進頁時下載一次,每頁只建立 24 張卡片,所以切換條件時畫面反應很快。
Q5:「附近教會」會不會收集訪客的位置?
定位在訪客自己的瀏覽器裡執行,直線距離也在本機計算,網站程式不會把訪客的精確座標送出或儲存。
地圖底圖由第三方圖磚服務提供,載入地圖時瀏覽器會向該服務請求畫面所在區域的圖片。
訪客拒絕定位時,網站會改成引導使用地區搜尋。
Q6:教會想更新資料,要怎麼做?
教會同工到「刊登教會」頁加入 iChurch LINE,完成簡單的身分確認後,就能直接傳新的聚會時間、照片與活動。
教會也可以提供官方網站或社群連結,由 iChurch 整理公開資訊。
Q7:沒有教會照片的教會,頁面會顯示什麼?
網站不使用來源名錄的照片。
有取得授權或經人工核准的官網照片就用真實照片,其餘使用統一的教堂示意圖,並標示圖片來源,避免訪客把示意圖當成教會實景。
Q8:這類名錄型網站後續可以做 SEO 嗎?
可以。網站已有 title、description、結構化資料與 sitemap,上線三週已開始在「找教會」「教會活動」等搜尋詞取得排名。
後續可以針對「台北教會」「親子友善教會」「第一次去教會」這類搜尋詞增加文章與專題頁,再用 Search Console 確認哪些內容真的帶來點擊。
Q9:這個案例適合哪些單位參考?
適合手上有大量資料的組織,例如協會、聯盟、地方名錄、店家或機構目錄、醫療院所查詢、B2B 媒合平台、活動資訊平台與公益團體,也適合想把資料整理成可搜尋、可看地圖網站的單位。
Q10:想做類似的名錄或地圖網站,要先準備什麼?
先準備資料來源與授權情況,例如自己的資料表、公開資料或第三方 API,再確認訪客最常用的找法,例如地區、類型、時間或距離。
資料欄位愈完整,後面的搜尋與地圖愈好做;
資料有缺口也沒關係,我們會在規劃時一起決定怎麼處理。
費用與時程的常見問題可以參考客製化系統報價問與答。
關於作者與製作團隊

撰文:Ring|益盛科技 專案經理

負責 iChurch 的專案管理、網站規劃與上線後的 SEO 數據追蹤。
平時主責益盛科技的網站規劃、RWD 設計、SEO/GEO 內容製作與數位廣告,持有 Google Ads 評估認證。

益盛科技 des13.com

益盛科技長期協助企業與組織建置官方形象網站、名錄與資料型網站、多語系網站,並提供 SEO 優化、品牌影片與短影音製作,以及客製化系統開發。
本案例由益盛科技負責網站架構規劃、視覺設計、前端建置、資料串接、RWD 測試與上線檢查,並製作品牌影片與社群影片。
更多同類型作品請見信仰/公益網站作品。

適合服務對象包含協會與公益團體、教會與非營利組織、需要整理大量資料的名錄平台,以及想用影片帶動網站流量的品牌。
歡迎來電或來信洽詢:04-3707-2202|ring@des13.com

您手上有大量資料,卻不知道怎麼讓人找得到嗎?

想把資料整理成能搜尋、能看地圖的網站?

我們可以協助評估資料來源、規劃搜尋與地圖介面,並搭配品牌影片與社群影片,讓更多人找到你的網站。

諮詢名錄型網站建置 了解網站設計服務
我願你凡事興盛,身體健壯,正如你的靈魂興盛一樣。- 約翰三書 1:2
© 2013-2026 益盛科技. All Rights Reserved. Designed By des13.com