一般社團法人落語協會 網站改版

專案概要

落語協會原有的官方網站,是十多年前建置的 LAMP 架構網站。網站存在更新作業繁瑣、後台管理介面不易操作等問題。此外,頁面載入速度也偏慢,對使用者與營運團隊而言都是負擔。

本專案全面重新規劃網站架構,以提升使用者體驗並改善營運效率,完成了此次改版。

使用技術

網站託管平台採用 Vercel。藉此得以充分運用 Next.js 的功能建置網站。內容管理系統則採用 microCMS,打造即使非工程師也能直覺更新內容的環境。

主要開發需求

固定節目登錄

定席節目的網站畫面截圖,以清單形式顯示出演者。

當日寄席登錄

當日寄席的網站畫面截圖,依時段以清單形式顯示各時段的出演者。

所屬藝人登錄

藝人一覽的網站畫面截圖,並提供搜尋功能。
藝人詳細頁面的網站畫面截圖,顯示個人簡介與藝歷。

落語會資訊登錄

落語活動資訊的網站畫面截圖,顯示活動概要、會場等資訊。

配合 CMS 化的設計巧思

本次改版中需要解決的需求,是定席節目的登錄以及當日寄席的登錄。
在舊網站中,當日寄席是透過複製定席節目來建立的。
由於營運流程的變更需要一定的學習成本,因此在設計時以改版後仍保留既有營運方式為前提。

複製城跡節目並建立當日寄席的概要示意圖。

配合 microCMS 化時,最大的課題是被稱為「交互」的時段。
落語公演中有一種名為「交互」的時段,會依日期不同而更換出演者。由於出演的藝人要到前一天才能確定,因此必須在開演前一天手動更新出演者。
由於資料結構也會有所改變,我們決定在 microCMS 中建立「定席節目 API」與「當日寄席 API」,但在此時產生了營運上的課題。
microCMS 的管理介面並未提供在不同 API 之間複製內容,或嵌入自訂程式的功能。也就是說,僅憑 microCMS 無法像過去的營運流程一樣,透過複製定席節目來建立當日寄席。

因此,我們活用無頭 CMS 的彈性,為當日寄席開發了專屬的管理介面。透過使用此管理介面,只需最少必要的步驟即可完成當日寄席的登錄。

自行開發之管理後台的說明示意圖。

關於網頁無障礙設計

Liberogic 依據 WCAG 2.0 至 2.2、適合等級 A 至 AAA,製作了獨自的檢查清單,並致力於製作符合網頁無障礙設計的網站。

本專案以達成 WCAG 2.2 的 AA 等級為目標,並進行了細緻的檢查。在設計上特別考量了字體大小、色彩對比、鍵盤操作支援等,以照顧年長使用者及需要無障礙功能的使用者。

最終,落語協會網站達成了 WCAG 2.2 的 AA 等級,成為能讓廣大使用者安心使用的網站。

網頁無障礙檢測結果

最後

隨著本次網站改版,定席節目與當日寄席的資訊,已改頭換面成即使是初學者也能輕鬆查看的網站。當您心想「好想去看看」的那一刻,所需的資訊都能立即取得。
說到寄席,最大的魅力在於能夠輕鬆前往的傳統文化。

在寄席,只要數千日圓就能從白天到夜晚盡情欣賞各式各樣的節目。不只是落語,還有漫才、講談、紙切等,每天節目內容都不同,精彩豐富。「今天會遇到什麼樣的表演呢?」這份令人雀躍的期待感,也是寄席獨有的醍醐味。

其核心便是落語協會所提供的「定席節目」。

定席節目分為「上席」「中席」「下席」等時段,每個時段都有不同的藝人登場,因此在一個月內,您有多次機會接觸到新的節目。這正是許多落語迷為之著迷的原因所在。

此外,寄席獨有的「交互」制度也是一大樂趣。
演出者每天輪替,直到當天才知道誰會登場,這種現場感讓寄席成為更加特別的空間。

不僅能找到喜愛的藝人,也能邂逅從未聽過的節目與藝人,樂趣無窮。寄席是每一次都能創造特別時光的地方。
全新改版的落語協會網站,讓您能輕鬆查看寄席的資訊。
下次休假時,不妨親自前往寄席走走吧!
在充滿歡笑與感動的空間裡,盡情感受日本的傳統文化。

指導
伊勢、繁田
結構
伊勢、繁田
UI 設計
長橋
標記
松塚、平林
前端實作
大塚、松塚
無障礙
二俣
公司名稱・服務名稱
落語協會