非エンジニアによる脱SaaS│AI解析マニュアル作成・共有システム

2026年4月24日 22:49

はじめに - SaaSコスト削減を今年度の裏目標に掲げてGWSをフル活用

社内のマニュアル管理に外部SaaS（T〇〇〇Biz）を使っているのですが、アカウント数は200弱あるようで、年間コストは3ケタ…。
Google Workspace導入直後はNotebookLMでのマニュアル運用も考えたのですが、やはりチャットボットではなく画像や検索性という点で100%の移行は難しい。

ただ、現状の外部SaaSにも課題はある。

「社内文書をPDFをアップロードしたら自動でマニュアル化してくれたらいいのに」
「タグ付けを手動でやるの面倒だな」

UI/UXを見る限り、以前投稿した「名刺管理のWEBアプリ」よりも今回はシンプルにいけそうだったことから、週明けの月曜から着手。他部署のスタッフにレビューしてもらった部分の修正と機能追加を実施してその週の金曜には完成、という正味6時間くらいの開発だったというお話しです。

非エンジニアの私が、AIと二人三脚で作った「マニュアル管理システム」。結果的に、既存SaaSを超える機能を実装できてコストはほぼゼロ。

なぜGAS？

Google WorkspaceならAppSheet？

ここは単なる好みというか、AppSheetの開発環境があまり好きではなくて、
Gemini Pro+Canvas、スプレッドシート、GAS、デプロイしたURLを行ったり来たりしながら進めるのが好きだというだけです。
ここには特にこだわりといった感情はありません。

作ったのは「AI解析マニュアル作成・共有システム」

システムの全体像

今回開発したのは、以下の機能を持つマニュアル管理システムです：

主要機能

マニュアルの作成・編集・閲覧
フォルダ分類とタグ管理
閲覧数カウント
QRコード生成（スマホで即アクセス）
PDF/印刷出力
PDF資料のAI自動解析
タグの自動抽出
スマホ対応

構成はシンプルで、以下の3つのファイルだけです：

Apps Script（コード.gs） - バックエンド処理
HTML（index.html） - 画面デザイン

データベースはスプレッドシートを使用。「Manuals」「Steps」「Users」「Folders」の4シートのみ。

既存SaaSよりも使える3つの機能改善

1. PDF資料のAI自動解析で一瞬でマニュアル化

これが最大の目玉機能です。従来は、紙のマニュアルやWord、時にExcelなどの資料を見ながら、コピペしたり手作業で画面に打ち込んでいました。でも今回のシステムでは：

Copy// Gemini APIでPDFを解析
function analyzePDFWithGemini(base64PdfData) {
  const prompt = "マニュアルPDFを解析し、JSON形式で返せ...";
  const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-pro:generateContent?key=${apiKey}`;
  // レスポンスから構造化データを抽出
}

PDFをアップロードするだけで、GeminiがOCRと内容理解を同時に行い、「タイトル」「概要」「ステップごとの説明」を自動で抽出。JSONで返してくれます。

まるで優秀な秘書が資料を読み取ってメモしてくれるような体験。これだけで作業時間が約70%削減されました。

2. タグの自動抽出機能で分類作業が不要に

マニュアルを後から探しやすくするには、適切なタグ付けが必須です。でも「このマニュアルには何のタグをつけよう？」と考えるのは意外と時間がかかります。

そこで、マニュアル本文を解析してタグを自動生成する機能を実装：

Copyfunction generateTagsWithGemini(text) {
  const prompt = `マニュアル内容から関連タグを3〜15個抽出。
  先頭に#をつけてカンマ区切りで出力...`;
  // Geminiが自動でタグ生成
}

例えば「レジ操作マニュアル」なら：

自動生成タグ: #会計, #レジ, #POSレジ, #釣り銭, #レシート,#クーポン

既存のSaaSでは手動入力しかできなかったタグ付けが、ボタン一つで完了。検索性が格段に向上しました。

3. スマホ完全対応で現場での即アクセス

外部SaaSの多くは、PCでの閲覧を前提に設計されています。スマホで見ると画面が崩れたり、操作しづらかったり。

今回のシステムでは、TailwindCSSを使ってレスポンシブデザインを徹底：

Copy<div class="w-full md:w-1/2">
  <!-- スマホは全幅、PCは半幅 -->
</div>

さらに、QRコード生成機能も実装。マニュアル詳細画面で「QR」ボタンを押すと、その場でQRコードが表示され、スマホで即座にアクセスできます。

非エンジニアでも作れた理由

以前の名刺管理アプリとの比較

以前、名刺管理のWEBアプリをGASで作った時は、正直かなり苦戦しました。コードは複雑で、エラーとの戦いの日々。完成までに3ヶ月以上かかりました。

でも今回のマニュアル管理システムは、実質6時間で完成。

Gemini APIに処理を丸投げ
スプレッドシートのシンプルなテーブル設計
TailwindCSSで即座にデザイン完成

Gemini（Canvas + Pro）の力

今回の開発でもCanvas機能を使うことで、コードの生成→確認→修正のサイクルをどんどん回しながら最終68回目のデプロイで完成となりました。

PDF解析機能の実装も、Canvasに「GASでGemini APIを使ってPDFを解析したい」と入力するだけでコードを変更してくれるのでAPIキーをスクリプトプロパティに格納する形で記述するだけ。

Copy// Geminiが生成したコード（一部）
const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-pro:generateContent?key=${apiKey}`;
const payload = {
  "contents": [{ "parts": [
    { "text": "マニュアルPDFを解析し、JSON形式で返せ..." },
    { "inline_data": { "mime_type": "application/pdf", "data": base64Data }}
  ]}]
};

コードはシンプル、構成は3ファイル

Apps Script（バックエンド）

バックエンドの心臓部はたった295行のスクリプト。
主な関数は：

doGet() - ウェブアプリの起動
getAppInitialData() - データ一括取得
saveManual() - マニュアル保存
analyzePDFWithGemini() - PDF解析
generateTagsWithGemini() - タグ自動生成

HTML/CSS（フロント）

HTMLは809行に留まりました。
TailwindCSSのおかげで、CSSファイルを別途書く必要がなく、HTMLだけで完結。レスポンシブ対応も簡単に実現できました。

Copy<button class="bg-emerald-600 text-white px-4 py-1.5 rounded-md 
               text-sm font-bold shadow-sm hover:bg-emerald-700 
               transition-colors">
  新規作成
</button>

実装の要点を公開

AI解析部分のコード解説

PDF解析の核心部分を詳しく見てみましょう：

Copyfunction analyzePDFWithGemini(base64PdfData) {
  const apiKey = PropertiesService.getScriptProperties()
                 .getProperty('GEMINI_API_KEY');
  
  const base64Data = base64PdfData.split(';base64,')[1];
  
  const payload = {
    "contents": [{ "parts": [
      { "text": "マニュアルPDFを解析し、JSON形式で返せ..." },
      { "inline_data": { 
          "mime_type": "application/pdf", 
          "data": base64Data 
        }}
    ]}]
  };
  
  const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-pro:generateContent?key=${apiKey}`;
  
  const response = UrlFetchApp.fetch(apiUrl, {
    "method": "post",
    "contentType": "application/json",
    "payload": JSON.stringify(payload)
  });
  
  const result = JSON.parse(response.getContentText());
  const responseText = result.candidates[0].content.parts[0].text;
  
  // JSON部分だけを抽出
  const jsonMatch = responseText.match(/\{[\s\S]*\}/);
  return { success: true, data: JSON.parse(jsonMatch[0]) };
}
Copy

ポイント:

Base64エンコードされたPDFデータを受け取る
Gemini APIにマルチモーダル入力（テキスト+PDF）
レスポンスからJSON部分を正規表現で抽出
パースして構造化データとして返す

タグ自動抽出の仕組み

タグ生成も同様にシンプル：

Copyfunction generateTagsWithGemini(text) {
  const prompt = `以下のマニュアルのテキスト内容を解析し、
  関連するタグを最低3個、最大15個抽出してください。
  タグには必ず先頭に # をつけてください。
  出力はコンマ区切りの文字列のみとし、
  その他の説明は一切不要です。
  
  【マニュアル本文】
  ${text}`;
  
  // Gemini APIを呼び出し
  const tags = result.candidates[0].content.parts[0].text.trim();
  return { success: true, tags: tags };
}

工夫点:

プロンプトで「#をつけて」「カンマ区切りで」と明確に指示
「その他の説明は不要」と念押しして、余計な出力を防ぐ
最低3個、最大15個と範囲を指定

つまずいたポイントと解決法

スマホ対応のレスポンシブ化

最初、TailwindCSSのCDN版を使っていたのですが、動的クラスが効かない問題に直面しました。

Copy/* この指定だけでは不十分 */
<div class="md:table-cell"></div>

解決策として、CSSに明示的にメディアクエリを追加：

Copy@media (min-width: 768px) {
  .md\:table-cell { display: table-cell !important; }
  .md\:hidden { display: none !important; }
}

学び: CDN版TailwindCSSは便利だけど、本番環境では制約がある。重要な部分は自前で補完することも必要。

AIプロンプトのチューニング

最初、PDF解析の精度が低く、抽出される情報が少なすぎてマニュアルに使えないレベルでした。そこで少しだけプロンプトを付け足しました。

改善したプロンプト：

CopyマニュアルPDFを解析し、JSON形式で返せ。
マニュアルではなく社内文書だった場合は
詳細まで確認したのちに内容を省略することなく
マニュアル構造へ変換し、JSON形式で返すこと。
但し改行のタグなどは削除する。

ポイント:

「社内文書でも変換して」と柔軟性を持たせる
「改行タグは削除」と不要な要素を明示
出力形式を厳密に指定

このチューニングで、精度が大幅に向上しました。

コスト比較 - GWS vs 外部SaaS

アカウント数無制限のメリット

実際にコスト試算をしてみましょう：

既に導入して数年経過しているので月額利用料のみですが、GASならほぼゼロ(API利用分のみ)。しかも、アカウント制限はなく、機能追加も自分でできる。

実際のコスト計算は載せられませんが、私の所属している会社では年間3桁万円、契約解除した名刺管理システムとあわせると本部スタッフのGoogle Workspace年間コストを補って余ります。

まとめ - 非エンジニアこそGAS開発を

『Google Workspaceも入れるだけではコスト増』という事実がずっと頭にあって、成果は「便利になった」ではなくコストを減らしてこそという考えだったのですが、Xでフォローさせて頂いている方が同じことを投稿されていたことが2つ目のSaaS解約に向けたWEBアプリ開発を後押ししてくれました。

管理本部長なんてしていると、「AIツールはコスト削減になりますか？」と聞かれることが多いですが、正直に言うとそのまま使えば、ほぼ確実にコストアップします。
理由は単純で、「人は減らず、業務も減らずGAFAMへの支払いだけが増えるから」です。

続く↓
— ひとごとMD (@hitogoto_butyo) December 15, 2025

AI時代の個人開発のすすめ

非エンジニアでも、今の時代なら十分にアプリ開発ができます。必要なのは：

明確な課題意識 - 「これ面倒だな」でOK！
AIツールの活用
小さく始める姿勢 - まずは最小機能で動かす

GASは、その入り口として最適です。ファイル構成はシンプル、デプロイも簡単、Googleサービスとシームレス連携。

「便利ツールを自分で作ってみよう」

その一歩が、業務効率化とコスト削減の両方を実現する。非エンジニアこそ、GAS開発にチャレンジする価値があると思っています。