Next.jsとContentfulで町内会のホームページをリニューアルした話
町内会
突然ですが、皆さんは町内会に所属していますか？
僕は世帯で町内会に入っていたのですが、ついに親からバトンタッチで町内会の委員を担うことになりました。
今回の記事では、町内会にふと入ったSEが町内会のデジタル化を少し進めた話を紹介します。今回ホームページのリンクを公に載せないで欲しいと言われたので、ホームページのUIは画像で紹介していきます（町内会の特定を避けるために画像中の文章の大部分をマスキングしていますがご了承ください🙇♂️）。
町内会のホームページ
町内会に所属している方々はご高齢の方が多く、またかなりアナログで情報をやり取りしていました。アナログな情報のやり取りの代表が回覧板で、それをデジタル化することは情報伝達の速さや、いつ・どこでもスマホでデータを見ることができるという観点でメリットがあると思いました。そこで、まず町内会のホームページを検索してしまうと、なんと発見。デジタルの施策を推進していたのが驚きでした。
ですが、作成されているホームページはいわゆる昔ながらのホームページで、スマホでレスポンシブに対応していなかったり、回覧板で流している内容の更新頻度が低いなど、多くの問題がありそうでした。
そこで、小さい時からお世話になっている町内会への恩返しの気持ちを込めて、町内会のホームページをリニューアルすることにしました。「今のホームページいけてないから、新しいホームページを作りたいんだけど...」と町内会の偉い方に相談したところ、二つ返事で「ぜひ作って欲しい！」と言われました。あれこれ聞かずに、ホームページのリニューアルを一任していただいたので、作業を進めやすかったです。
要件
新ホームページの要件は旧ホームページのいけてない部分を直すことを目的とし、以下の要件としました。
- レスポンシブ対応（スマホでも見やすいUI）
- 旧ホームページで載せていた必要な情報は新ホームページにも載せる（旧ホームページでは、町内会の部の紹介コーナーがあったので、部のページを作成しました）
- 記事を簡単に追加できる仕組み
- インフラコストがかからない（当初は知らなかったのですが、旧ホームページの運用代として、サーバー代として月に2000円に加え、ホームページ更新のためのインターネットの契約として月4000円がコストとしてかかっていました）
技術選定
仕事外でのプログラミングの醍醐味は、仕事では触れない技術を体験できることです。
フロントは、仕事でReactを使用していたので、使ったことはないけど興味があったNext.jsを選択しました。
Next.jsでは結果的に、
- Vercelへのデプロイが圧倒的に楽
- プレビュー環境でテスト可能
- SSGやISRで遊べる
- 独自ドメインの登録が楽
だったので、とても良かったです。
次にバックエンドですが、インフラコストをかけずとも、十分にコンテンツを蓄える必要がありました。
そこで、無料枠の多いヘッドレスCMSであるContentfulを採用しました。
Contentfulは25,000件までのコンテンツ（投稿や画像）を登録することができるので、町内会のホームページを運用するには十分な量と判断しました。
ページの実装
ページのデザインは友人のデザイナーに「簡単なもので良いから作って！」と無理なお願いをしてデザインしてもらいました。持つべきものは友。温かみのあるシンプルなデザインをしてもらい、そのデザインをもとに実装を進めました。
具体的な実装として、以下を行いました。
- ニュース・部の案内ページの作成
- ニュースは掲示板を眺めるようなUXとする
- 町内会の活動予定
ニュース・部の案内ページの作成
旧ホームページは何を一番知らせたかったのかをヒアリングすると、大きく2つの目的がありました。
- 町内会に入会している方々への情報共有
- 町内会が活動していることを近隣の方々に伝える・知らせること
1は予想できた答えでしたが、2の答えは意外でした。
2の目的を達成するためには、活動に関する情報がトップページですぐに分かることや、ニュースや部の情報がまとまって見やすいことが望ましいと考えました。
ニュースは掲示板を眺めるようなUXとする
町内会では回覧板や掲示板を使ってニュースを共有します。新ホームページでは掲示板のようなニュースの伝え方をするために、ただニュースの情報を羅列して表示するのではなく、ニュースを四角で囲み、それを横並びに表示し、過去のニュースはスワイプで閲覧できるようにしました。
この対応で、ホームが縦に長すぎず見やすいUIとなったかと思います。この実装はSwiperを使用しました。
上記の画像で3件ニュースがが表示されていますが、横にスワイプすると最大で10件のニュースが表示されるように実装しています。 「詳しく見る」を押すと、ニュースのみ表示されるニュース詳細ページに遷移します。
部の案内ページ
旧ホームページにあった、部の案内ページを新ホームページでも実装しています。
部の紹介で使用するアイコンをページのデザインをお願いした友人のデザイナーにお願いして作ってもらいました。
その結果、親しみやすい部の紹介画面を作成できました。
また、部の活動の中でも最新の活動内容を表示するようにしました。
部の活動内容も、先程紹介したニュースと同じUXでスワイプして閲覧できます。
ここでラベルとして表示している「○○部」については、以前にZennに投稿したContenfulの新機能Tagsを使ってみたでも紹介しましたが、ContenfulのTag機能を使って付与しています。
町内会の活動予定
これは自分が求めていた機能で実装しました。町内会の活動予定がいつなのか、回覧板と掲示板でしか把握できなかったので、ホームページに反映することにしました。
定期的に回ってくる掃除当番がいつなのかを把握できていなかったので、ホームページにその情報を載せるようにしています。
予定を管理するデータは、GoogleカレンダーとContentfulでもたせました。使い分けとしては、Contentfulは掃除当番のデータをもたせ、Googleカレンダーにはそれ以外の予定全てを載せるようにしました。理由は、Googleカレンダーに毎週の掃除当番データを登録するのが、かなり手間だったため、ContentfulにJSONデータで登録するようにしました。
青の領域はContentfulに登録したデータを取得して表示しています。
リニューアル後のメリット
町内会の方々に、新ホームページを触っていただいたところ、「町内会の情報を見やすくなった！」のお言葉をいただきました。また、「毎日町内会のホームページをチェックしているよ」というお言葉もいただき、実装して良かったなと思いました。
また、リニューアルではコストカットを意識して技術選定を行いました。今回のリニューアル対応で、ホームページの運用費として毎月固定費としてかかっていた6000円を0円にすることができました。町内会の会員が減り歳入が減る中、これだけのコストカットにより、町内会が本当に必要なところにお金をかけることができるようになりました。
リニューアル後に残る問題点
「毎日町内会のホームページをチェックしているよ」
この方を満足させるには、課題がありました。それは、コンテンツを投稿するのは開発者である僕しかできなかったことでした。
ニュースおよび部の活動情報を投稿するには、Contentfulにログインして、適切なContentfulのモデルに対して日付やタイトル、記事の内容を入力する必要があります。そして、それを実行するのは開発者本人で行うしかありません。
Contentfulのガイドを作っても良いのですが、
- 言語が英語で分かりづらい
- 誤操作のリスクがある
- そもそもPCを触ってる人があまりいない
という問題があり、ガイドを作るだけでは町内会の方が気軽に記事を投稿することはできません。
これでは、コンテンツを頻繁に更新することはできず、町内会のホームページの更新を楽しみにしてくれるユーザーを満足させることができません。
この課題を解決するために、新たな施策としてContentfulをラップした簡易的なCMSを作りました。こちらは次回の記事の題材とします。
まとめ
町内会のホームページリニューアルを行い、旧ホームページの運用でかかっていたコストをなくし、新しいホームページはUIの良いページをユーザーに提供しました。付随して、リニューアルを通して、Next.jsやContentfulの知識を身につけることができました。
リニューアルを通してエンジニアとして身近な人たちに貢献できることはとても幸せなことです。皆さまの身近な周りでもシステムエンジニアリングによって、世の中も困りごとを解決してみてはいかがでしょうか？
Discussion