BNI麒麟チャプター

サイト構築仕様書

BNI 麒麟チャプター公式Webサイトの技術構成と機能一覧

サイトURL：https://bni-kirin.jp

使用技術

Next.js 16

Vercel社が開発するWebフレームワーク

React 19

世界で最も使われているUI構築ライブラリ

TypeScript

型安全なJavaScript。バグを事前に防ぐ仕組み

Tailwind CSS 4

効率的にデザインを組める最新のスタイリング技術

注：フレームワーク＝Webサイトを効率よく作るための土台となるソフトウェア。 ライブラリ＝よく使う機能をまとめた部品集。ゼロから書かなくて済む。

外部サービス連携

本サイトはGoogleのサービス群をデータベース代わりに活用しています。 専用のデータベースサーバーを持たずに、以下の連携だけで運営が完結します。

table_chart

Google Sheets

メンバー名簿・定例会シート・アンケート集計

description

Google Forms

ビジター申込・メンバー登録・代理申請

calendar_today

Google Calendar

メンバー専用の予定共有

folder

Google Drive

メンバー写真の保存・ビジター配布資料

cloud

Vercel

ホスティング・自動ビルド・CDN配信

sync

GitHub Actions

定期的なデータ再検証トリガー

credit_card

Peatix

ビジター参加費のオンライン決済

videocam

Zoom

定例会のオンライン参加

font_download

Google Material Symbols

サイト全体のアイコン表示

注：デプロイ＝完成したサイトをサーバーに配置して公開すること。CDN＝世界中のサーバーからコンテンツを高速配信する仕組み。

技術的に工夫している点

Google Sheets をリアルタイムの名簿として活用

通常、会員名簿のあるサイトにはデータベースサーバーが必要ですが、本サイトではGoogleスプレッドシートをそのままデータベースとして使用しています。メンバーがフォームに入力すると自動的にスプレッドシートに記録され、サイトのビルド時にそのデータを読み取ってページを生成します。

  • ✓サーバー管理やデータベースの保守が一切不要
  • ✓同じメンバーが複数回送信した場合、最新情報だけを自動採用
  • ✓退会フラグが立ったメンバーは自動的に非表示

メンバー写真の自動変換

メンバーがGoogle Driveにアップロードした写真のURLを、サイト表示に最適なサムネイル形式へ自動変換。写真のリサイズや加工を手作業で行う必要がありません。

QRコード自動生成

各メンバーのWebサイトURLからQRコードを自動生成し、メンバーカードに表示。印刷時にも最適なレイアウトで出力されます。

印刷対応レイアウト

メンバー一覧ページはブラウザの印刷機能でそのまま綺麗に印刷できます。画面表示と印刷で自動的にレイアウトが切り替わり、QRコードの配置やカードサイズも最適化されます。

メンバー専用エリア

パスワード認証によるメンバー専用ページを用意。運営ツール・トレーニング情報・スライド管理ガイド・Googleカレンダーなど、メンバーだけがアクセスできる情報を集約しています。

自動化されている点

ISRによる自動キャッシュ更新

Vercelの ISR（Incremental Static Regeneration）により、メンバー名簿のキャッシュは1時間ごとに自動で更新されます。フルビルドなしでデータだけが最新化されるため、反映が高速です。

ワンボタンで即時更新

メンバー紹介ページに設置した更新ボタンを押すだけで、キャッシュを即座に無効化。次のアクセスで最新の名簿データが反映されます。

コード変更時の自動デプロイ

サイトのソースコードをGitHubにpushすると、Vercelが自動的にビルド・デプロイを実行。手動でサーバーにファイルをアップロードする作業は一切不要です。

フォームからサイト反映までの自動フロー

メンバーがフォームに入力
arrow_downward
自動Google スプレッドシートに自動記録
arrow_downward
自動ISRキャッシュ更新 or ボタンで即時反映
arrow_downward
自動サイトに反映（写真・QRコード付き）

人手を介さず、フォーム入力からサイト公開まですべて自動で完結します。

注：ISR＝ページ全体を再ビルドせず、データ部分だけをバックグラウンドで更新する仕組み。

まとめ

本サイトは、専用のデータベースやサーバー管理を必要とせず、Googleの無料サービスとVercelのISRを組み合わせることで、 運用コストを最小限に抑えつつ、メンバー名簿の即時更新・QRコード生成・印刷対応といった実用的な機能を実現しています。

リリース履歴

2026.03.26

Vercel移行・ISR対応

  • ホスティングをheteml（FTP）からVercelに移行
  • 静的エクスポートからISR（増分静的再生成）に変更
  • 名簿更新ボタンでキャッシュを即時無効化できるように改善
  • CDN配信により表示速度が向上
  • デプロイ時間を数分→約40秒に短縮
2026.03.22

初回リリース

  • Next.js 16 + React 19 + Tailwind CSS 4 で構築
  • Google Sheets をデータベースとしたメンバー名簿機能
  • QRコード自動生成・印刷対応レイアウト
  • GitHub Actions による自動ビルド・FTPデプロイ（heteml）
  • メンバー専用エリア（パスワード認証）

このシステムを導入したい他チャプターの方は、麒麟チャプター Web戦略制作の高橋までご連絡ください。

お問い合わせopen_in_new