Next.js × microCMSによるJamstack構築とAI駆動開発を活用したWebサイト制作

サイトURL： https://matsubushi-rc.org/
担当範囲： 企画・設計 / ディレクション / フロントエンド開発 / CMS構築 / 公開

プロジェクト概要

埼玉県松伏町を拠点に活動する松伏ロータリークラブ様の公式Webサイトを新規制作しました。
これまで公式サイトを持っていなかったことから、地域の方々への活動内容の周知、新規会員の募集、例会やイベント情報の発信を目的として制作しました。
弊社では、企画・サイト設計からデザインディレクション、開発、公開までを一貫して担当しています。

スマートフォンを中心としたUI設計

スマートフォンからの閲覧を想定し、モバイルファーストの設計を採用しました。
PCで閲覧した場合もコンテンツ幅をスマートフォンに近いサイズに制限し、デバイスを問わず一貫した閲覧体験を提供しています。
また、地域のロータリークラブに関心を持つ方が、活動内容や例会情報、入会案内などの必要な情報へアクセスしやすい、シンプルなサイト構成としました。

Jamstackによる高速・安全なサイト構築

Next.jsとmicroCMSを組み合わせたJamstack構成を採用しました。
静的配信を活用することで、ページの表示速度を高めるとともに、セキュリティリスクの低減を図っています。
また、活動報告・お知らせ・例会スケジュールは、microCMS上でカテゴリを分けて一元管理できるように設計。会員紹介も含め、クラブの担当者自身がコンテンツを更新できる環境を構築しました。
日本語で直感的に操作できるmicroCMSを採用することで、更新作業の負担を軽減するとともに、運用コストにも配慮しています。

AI駆動開発による実装工程の効率化

本プロジェクトでは、弊社として初めてAIを活用した開発フローをクライアントワークに導入しました。
GitHub Issueに要件を整理し、その内容をもとにAIが実装を進める開発スタイルを採用しています。
これにより、従来は約1か月かかっていた実装工程を、約2週間でサイトの形を作るところまで進めることができました。
AIによる実装後は、エンジニア自身がコードレビューと動作確認を実施。開発の効率化を図りながら、品質の確保にも取り組みました。
AIにすべてを任せるのではなく、AIの実装能力とエンジニアの技術的な判断を組み合わせることで、効率的な開発を実現しています。

お客様自身で運用できるWebサイトへ

公開後は、クラブの担当者自身がmicroCMSを利用し、活動報告やお知らせなどの更新を行っています。
運用保守契約を前提とせず、お客様自身で継続的に情報発信できる仕組みを提供しました。
今後も弊社では、Jamstackによる技術的な品質とAIを活用した開発効率の向上を両立し、お客様の目的や運用体制に合わせたWebサイト制作に取り組んでまいります。