Google Forms + Google Sheets で簡単無料Web QAシステム「Sputa」で質問対応を効率化しよう

アイキャッチ

はじめに

パソコンやスマートフォンのトラブルに関する質問を、整理して対応したいけど、複雑なシステムは導入したくない…そんなお悩みはありませんか?

Sputa は、Google Forms で質問を受け付けて、Google Sheets で進捗管理しながら、Web ページでリアルタイム表示するシンプルな質問対応・タスク管理システムです。複雑なバックエンド構築は不要。Google のサービスと PHP が動くサーバーがあれば、すぐに始められます。

具体的には、このサイトで質問箱を設置したいが、進捗や結果が見えると質問した人へ回答できるなと思ったためです。

さくらのレンタルサーバスタンダードプランで導入ができています。
サンプルサイトとして以下、質問箱をご覧ください。CSSなどもっと素敵にデザインすると良いと思います。
質問箱

Googleフォームの内容やスプレッドシートの項目名の変更をAIエージェントなどへ相談すればカスタマイズも自由にできると思います。

Googleフォーム以外でもSlackワークフローからスプレッドシートへ入力するなどでも良いと思います。

質問箱ページサンプル画像
Googleフォームから送信があると、質問箱ページに表示される

ad

Sputa とは?目的と機能

Sputa は、以下の流れで質問対応を効率化するシステムです:

質問者の流れ:

  1. Google Forms で質問を送信
  2. Web ページで対応状況と回答をリアルタイム確認

管理者(回答者)の流れ:

  1. Google Sheets でステータスと進捗を更新
  2. コメントや関連記事 URL を追加
Suputa スプレッドシート サンプル画面
サンプル画面 スプレッドシートを更新するとWeb画面も自動的に更新されます。

主な機能

  • Google Forms 連携: 質問の自動保存(フォーム作成時に自動実装)
  • 進捗表示: 未着手・対応中・完了・掲載終了の 4 段階ステータス
  • リアルタイム更新: Web ページが 60 秒毎に自動更新
  • コンパクト UI: モバイル対応のモダンなデザイン
  • 自動フィルタリング: 掲載終了のタスクは自動的に非表示
  • 関連情報リンク: 記事 URL やコメントを表示

導入難易度は?必要な環境

Sputa の導入は中程度です。以下の環境があれば可能です:

必要なもの

  • Google Cloud プロジェクト … Google Sheets API を有効化
  • PHP 7.4 以上のサーバー … 共有レンタルサーバーでもOK
  • Google Sheets と Google Forms … 無料

私は、さくらのレンタルサーバ スタンダードプランで構築しています。

技術レベル

  • Google Cloud Console でサービスアカウント作成 → 初心者向け
  • .env ファイルの設定 → 初心者向け
  • Node.js でのビルド → 初心者向け
  • サーバーへのファイルアップロード → 初心者向け

難しい部分はほぼありません。 設定ファイルをコピーして、自分の情報を入れるだけで動きます。

ユーザーと管理者の使い方

ユーザーの使い方(質問者)

  1. 質問フォームから送信
  • Web ページの「質問箱フォーム」をクリック
  • Google Forms で質問を入力
  • 送信完了
  1. Web ページで進捗を確認
  • Web ページを定期的にチェック
  • タスク一覧が 60 秒毎に自動更新
  • ステータスと進捗% をリアルタイム確認
  • コメントや関連記事 URL を参照

管理者の使い方(回答者)

  1. Google Sheets で情報を編集
   G列: ステータスを「未着手」→「対応中」→「完了」に更新
   H列: 進捗%を入力(0-100)
   I列: 関連記事 URL を入力(任意)
   J列: コメントを入力(調査結果など)
  1. 古いタスクを非表示にする
  • G列のステータスを「掲載終了」に変更
  • Web ページから自動的に消える

操作は Google Sheets のみ。 複雑なバックエンド操作は不要です。

インストール方法 概要

詳細はgithubの README.mdなど、ドキュメントがありますのでそちらを確認ください。
GitHub: https://github.com/AtsushiCafeK/sputa

詳細ドキュメント群

1. リポジトリをクローン

git clone https://github.com/AtsushiCafeK/sputa.git
cd sputa

2. Google Cloud セットアップ

README.md に従って、以下を実施:

  • Google Cloud プロジェクト作成
  • Google Sheets API 有効化
  • サービスアカウント作成(JSON キーをダウンロード)

3. Google Forms & Sheets 作成

Google Forms で質問フォーム作成 → 自動的に Google Sheets に連携

4. Google Apps Script 設定

Google Sheets 上で「拡張機能 → Apps Script」を開き、config.gs と main.gs をコピー

image

5. フロントエンド設定・ビルド

重要: API URL を自分のサーバーに変更

src/main.ts を編集:

const API_BASE_URL = 'https://your-domain.com/app/api' // 自分のサーバーURLに変更

ビルド:

npm install
npm run build

6. サーバーにアップロード

以下をサーバーにアップロード:

  • /public → サーバーの /app/public/
  • /api → サーバーの /app/api/

.env ファイルと サービスアカウント JSON キーを設定

7. 完成

Web ページにアクセス:https://your-domain.com/app/public/index.html

詳細は GitHub リポジトリ の README.md を参照してください。

こんな場合に活躍

  • IT サポート窓口: ユーザーからの質問を整理・対応
  • オンライン相談窓口: 問い合わせをリアルタイム表示
  • FAQシステム: よくある質問の管理
  • バグ報告・機能リクエスト: GitHub Issues の簡易版
  • 社内ヘルプデスク: 従業員からの質問対応

まとめ

Sputa は、シンプルながら実用的な質問対応・タスク管理システムです。

Sputa の特徴:

  • Google サービスとの連携で簡単導入
  • 複雑なシステム不要(Google Sheets のみで管理)
  • 質問者はリアルタイムで対応状況を確認可能
  • 管理者の作業負荷が少ない
  • モバイル対応のモダンなデザイン
  • オープンソース(MIT ライセンス)

こんな方におすすめ:

  • 質問対応を効率化したい
  • 複雑なシステムは導入したくない
  • Google サービスを活用したい
  • カスタマイズ可能なシステムが欲しい

Sputa で、質問対応業務をスマートに!


GitHub: https://github.com/AtsushiCafeK/sputa

ライセンス: MIT

開発: IT-Libero

ad