--- title: "一般社団法人落語協会 Webサイトリニューアル" client: "一般社団法人落語協会" date: 2025-05-09 tags: 構成, UIデザイン, ヘッドレスCMS構築, フロントエンド実装, ディレクション, アクセシビリティ対応 project_url: https://www.rakugo-kyokai.jp/ canonical: https://www.liberogic.jp/casestudy/rakugo/ --- # 一般社団法人落語協会 Webサイトリニューアル ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/d11bc5a39a5a4fd38fbe5a2c20c40c19/casestudy_rakugo.png) 一般社団法人落語協会のWebサイトリニューアルに関するケーススタディです。 プロジェクトURL: [https://www.rakugo-kyokai.jp/](https://www.rakugo-kyokai.jp/) ## プロジェクト概要 従来の落語協会の公式サイトは、10年以上前に構築されたLAMP構成のウェブサイトでした。更新作業の手間や管理画面の使いにくさといった課題を抱えていました。さらにページ表示速度も遅く、ユーザーと運営双方に負担のかかるサイトになっていました。 当プロジェクトではサイトの構造を大幅に刷新し、ユーザー体験の向上と運営効率の改善を目指してリニューアルを実施しました。 ## 使用技術 ホスティングプラットフォームとしてVercelを採用しています。これにより、Next.jsの機能をフルに生かしたサイト構築が可能になりました。また、コンテンツ管理システムにはmicroCMSを採用し、非エンジニアでも直感的にコンテンツを更新できる環境を整えました。 ## 主な開発要件 ### 定席番組の登録 ![定席番組のサイト表示のキャプチャ。出演者が一覧で表示。](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/f7fb2353333a40e8a3f68a0f289e649a/contentImg01.jpg) ### 本日の寄席の登録 ![本日の寄席のサイト表示のキャプチャ。時間ごとの出演者が一覧で表示。](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/fc01e84f2f5c4ac7a8aa400a7fe503bc/contentImg02.jpg) ### 所属芸人の登録 ![芸人一覧のサイト表示のキャプチャ。検索機能もあり。](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/c436b1b59c9a4d44a8cedb64b2ae55d4/contentImg03.png) ![芸人詳細画面のサイト表示のキャプチャ。プロフィールや芸歴を表示。](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/3a8b0879d74545438749eda1a9593459/contentImg04.png) ### 落語会情報の登録 ![落語会情報のサイト表示のキャプチャ。イベント概要、会場などを表示。](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/1bffce174c9143f3826799fcc4d0dad5/contentImg05.jpg) ## CMS化に伴い工夫した点 今回のリニューアルで課題となった要件が、定席番組の登録と本日の寄席の登録です。 従来のサイトでは、定席番組を複製して本日の寄席を作成する運用でした。 運用フローの変更は学習コストが必要となってくるため、リニューアル後も既存の運用を保つことを前提に設計を進めました。 ![城跡番組を複製し、本日の寄席を作成する概要図。](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/d7923ce69d19445fb35b57185353fda7/contentImg06.png) microCMS化に伴い大きな課題となったのが、「交互」と呼ばれる枠の存在です。 落語の公演には日によって出演者が変わる「交互」という枠があります。出演する芸人が前日にならないと確定しないため、開演前日に手動で出演者を更新する必要があります。 データの構造も多少変わるためmicroCMSで「定席番組API」と「本日の寄席API」を作成することにしたのですが、ここで運用上の課題が発生します。 microCMSの管理画面では、異なるAPI間でコンテンツを複製したり、独自のプログラムを組み込む機能などは提供されていません。つまり、microCMS単体ではこれまでの運用フローで行われていた定席番組を複製して、本日の寄席を作ることが出来ません。 そこでヘッドレスCMSの柔軟性を活かし、本日の寄席用に独自の管理画面を開発しました。当管理画面を活用することで、必要最低限の手順で本日の寄席の登録が行うことができます。 ![独自開発の管理画面の説明図](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/d469234625c2479997d022ac10d7918a/contentImg07.png) ## Webアクセシビリティ対応について リベロジックでは、WCAG 2.0〜2.2、適合レベルA〜AAAに対応した独自のチェックリストを作成し、Webアクセシビリティ対応したサイト制作に取り組んでいます。 当プロジェクトは、WCAG 2.2のAA準拠を目標に掲げ、細部までチェックを実施しました。フォントサイズや色のコントラスト、キーボード操作の対応など、特に高齢のユーザーやアクセシビリティを必要とする方々に配慮した設計を行っています。 結果として、落語協会サイトはWCAG 2.2のAA準拠を達成し、幅広いユーザーに安心して利用していただけるサイトに仕上がっています。 [ウェブアクセシビリティ検査結果](https://www.rakugo-kyokai.jp/accessibility_report) ## 最後に 今回のサイトリニューアルによって、定席番組や本日の寄席の情報が初心者でも簡単にチェックできるサイトに生まれ変わりました。「ちょっと行ってみたいな」と思ったその瞬間に必要な情報が、すぐに手に入ります。 寄席は、なんといっても気軽に足を運べる伝統文化です。 数千円で1日中楽しめる寄席では、昼から夜までさまざまな演目を堪能できます。落語だけでなく、漫才や講談、紙切りなど、日替わりで変わるプログラムが盛りだくさん。「今日はどんな演目に出会えるんだろう？」というワクワク感も、寄席ならではの醍醐味です。 その中心にあるのが、落語協会が提供する「定席番組」です。 「上席」「中席」「下席」といったプログラムに分かれ、その度に異なる芸人さんが登場する定席番組では、ひと月の中で何度でも新しい演目に出会える機会があります。多くの落語ファンを魅了してやまない理由がここにあります。 さらに、寄席ならではの「交互」システムも楽しみのひとつです。 出演者が日替わりで入れ替わり、当日まで誰が登場するかわからないというライブ感は、寄席を一層特別な空間にしています。 お気に入りの芸人さんを見つけるのはもちろん、知らなかった演目や芸人との新しい出会いも楽しめます。寄席は、一回一回が特別な時間を生み出す場所です。 改めてリニューアルされた落語協会サイトでは、寄席の情報を気軽にチェックすることができます。 次の休みにはぜひ寄席に足を運んでみてはいかがでしょうか。 笑いと感動があふれる空間で、日本の伝統文化を心ゆくまで堪能できます。 ## クレジット | 担当 | 氏名・組織 | | --- | --- | | ディレクション | 伊勢、繁田 | | 構成 | 伊勢、繁田 | | UIデザイン | 長橋 | | マークアップ | 松塚、平林 | | フロントエンド実装 | 大塚、松塚 | | アクセシビリティ対応 | 二俣 |