【GAS×Gemini】UI/UX意識した社内Webアプリを15分で作るプロンプト

はじめに

Gemini 3で色々作れるようになったけど、仕事で日常使いするなら、やっぱりスプシとかスライドとかそのあたりじゃないですか。

サーバー周りとか考えないでWebアプリ作りたい時、ちゃちゃっとGoogleアカウントで解決したい時のGAS（Google Apps Script）Webアプリ開発用プロンプトを作りました。

「タスク管理アプリ作って」の一言で、v0.1としては十分なレベルのアプリが生成されます。

これは何？

社内向けGoogle系アプリのUI/UX開発を爆速化するGemini Gem用プロンプトです。

• 「タスク管理アプリ作って」の一言指示で94.5点のアプリが生成
• HIG（ヒューマンインターフェースガイドライン）準拠のUI/UX 20項目
• GAS固有の制約（非同期処理、論理削除等）に対応
• 6テーマ、日本語UI、ローディング、Undo機能等が標準実装

※ただし、生成されたコードは「サンプル」です。GASの知識（デプロイ、デバッグ等）がある程度必要で、バイブコーディング（感覚的にコードを調整していくこと）での修正が前提です。

デモアプリ

先に作ったものおいておきます。多分誰でも実行できるはず（Googleアカウントのログインは必要）。

▽ポン出しタスク管理アプリ

何作ろうって思ったんですけど、個人開発の登竜門らしいのでなんかこれでいっか、と。 一応WBSみたいなの作りたい～、JSON貼り付けで～、スプシで掃き出し想定～とかなんか細かく指示をしたらそれ相応にやってくれます。 語彙力ゲーは変わりません。

こんな人向け

✅ 社内向けのGoogle系ツール作りたい ✅ スプレッドシートをDBにして十分 ✅ サーバー管理・認証周りに時間使いたくない ✅ 爆速でMVP作りたい ✅ でも「UI/UXがない」とか「なんかダサいね」は言われたくない ✅ GASの基礎知識がある程度ある（デプロイ、デバッグ等）

こんな人には向かない

❌ 本格的なWebアプリ作りたい（Next.js、Firebase推奨） ❌ Google外のユーザーに公開したい ❌ 大量データ・高速処理が必要（数万行以上） ❌ エンタープライズレベルのセキュリティが必要

GAS Webアプリとは

Google Apps Scriptは「スプレッドシートのマクロ」だけではありません。イメージ強いですが。 HtmlServiceを使えば、Webアプリケーションが作れます。

結論：GASでWebアプリは作れるのか？

結論から言うと、作れます。

しかも、

• サーバー構築不要
• 認証はGoogleアカウントに任せられる
• フロントエンドとバックエンドが同一プロジェクト

という特徴があり、小〜中規模の業務Webアプリ にはかなり相性が良いです。 というかわざわざ、やるかあ、って時に考えるもんは少ない方が良いので個人的に結構GASwebアプリはいいぞ～って言ってます。

できること

• スプレッドシートをデータベース化：CRUD操作、検索、集計
• Gmailと連携：受信トレイから情報取得してダッシュボード表示
• Google Driveと連携：ファイル管理UI、共有設定の自動化
• 社内申請フォーム：承認フロー + Slack/メール自動通知

メリット

✅ サーバー不要（Googleが管理） ✅ 無料（Googleアカウントあればok） ✅ 認証がGoogle任せ（OAuth実装不要） ✅ デプロイが爆速（ボタン一つ） ✅ フロントとバックエンドの連携が簡単（google.script.runで直接呼び出し）

デメリット

❌ 実行時間制限（1回6分まで） ❌ 同時接続数制限（30人同時アクセスで重い） ❌ WebSocketなし（リアルタイム通信不可） ❌ 本格的なWebアプリには不向き ❌ 学習コストあり（独特のAPI、デバッグ方法） ❌ Node.js / npmは使えない（Webpack / Vite などのビルド環境不可） ❌ Google Workspaceアカウントで作成した場合、外部公開不可

• 基本的に社内展開（指定ドメイン）のみ
• 「URLを知っている全員」という公開設定ができない（社内の人全員はできる）
• 社外の人に使ってもらいたい場合は、個人アカウントで作成する必要がある

GAS Webアプリを選ぶべき時・選ばない方が良い時

✅ こんな時に便利

1. 社内・部署内のGoogle系ツール
2. スプレッドシートがDBで事足りる規模（数千行まで）
3. サーバー管理したくない（インフラ知識不要）
4. 認証をGoogleアカウントに任せたい(認証管理本当にだるい)
5. 爆速で動くもの作りたい（15分〜1時間）

❌ こんな時は他の選択肢を

1. 本格的なWebアプリ
2. 大量データ・高速処理が必要（数万行以上）
3. Google外のユーザーに公開
4. 実行時間6分以上かかる処理

他の選択肢との比較

あと昨今的な流れのAI組み込ませたあれこれは、ちょっとGASの範囲超えがち。API絡むので。

抑えておくと良いUI/UX 20項目

「UI/UXがない」と言われないために、抑えておくと良い項目をHIG（ヒューマンインターフェースガイドライン） から厳選して、こねこねしました。

Phase 1：全アプリ必須（7項目）

Phase 2：フォーム・入力UI（8項目）

Phase 3：UX向上（5項目）

プロンプトの中身

これら20項目をGAS固有の制約（非同期処理、論理削除等）と組み合わせてプロンプト化しました。

主な特徴

1. GAS制約への対応

• 非同期処理の遅延（1-3秒）→ ローディング表示必須
• 処理の中断不可（GAS実行中は止められない）→ クライアント側キャンセル対応
• 取り消し不可能な操作（スプレッドシート編集）→ 論理削除（アーカイブ）推奨
• リアルタイム性の限界（WebSocketなし）→ ポーリング実装

2. デザインシステム

• 6テーマ：ライト、ダーク、オーシャン、フォレスト、サンセット、サクラ
• 12色構成：背景2色、テキスト3色、UI要素4色、セマンティック3色
• 日本語UI必須：英語表記禁止（フッター以外）

3. 機能要件

• ロード画面のスムーズなフェードアウト
• テーマ切り替え（localStorage保存）
• Driver.jsによるツアー機能（5ステップ以上）
• モーダル外クリックで閉じる

4. チェックリスト

出力前にAIが自己確認する40項目以上のチェックリスト：

• 必須要素チェック（9項目）
• 日本語チェック（4項目）
• HIG準拠チェック Phase 1-3（20項目）
• GAS制約対応チェック（7項目）

プロンプト本体

プロンプトは約1,200行、詳細な実装例とコード例付きです。 多分この辺りがGemの認知負荷の限界かなあ、と探った感じの体感です。 本当はもっとあったんですけど、ポンコツする率上がったので、この辺りが現状の良いラインかも？って感じです。

# GAS Webアプリたたき台開発用 Gemini Gem用プロンプト（HIG準拠版）

## 開発対象アプリの概要
- アプリ名：日本語/カタカナのみ
- 目的・機能：ユーザー指示から定義

## UI/UXデザインシステム要件
### UIテキスト・命名規則
- 日本語/カタカナのみ使用

### ヒューマンインターフェースガイドライン準拠
#### Phase 1：全アプリ必須（7項目）
1. ユーザーの主導権を保証する
2. コンストレイント（制約）を活用する
3. オブジェクトは自身の状態を体現する
4. すべての操作可能な要素は意味を持つ
5. デフォルトボタンには具体的な動詞を用いる
6. エラー表示は建設的にする
7. 黙って実行する（不要な確認を排除）

（各項目に詳細な説明とコード例）

#### Phase 2：フォーム・入力UI（8項目）
8. 入力フォームにはストーリー性を持たせる
9. 操作の流れを作る（ボタン重力）
...

#### Phase 3：UX向上（5項目）
16. ユーザーの記憶に頼らない
...

### GAS固有の制約とHIG実装の注意点
1. 非同期処理と待機時間
2. 処理の中断不可
3. 取り消し不可能な操作
4. リアルタイム性の限界
5. セッション管理の制約

（各制約に対応策とコード例）

### 必須ライブラリとフォント
- Noto Sans JP（最優先）
- Material Icons
- Driver.js

### CSSデザインシステム
- 6テーマ定義
- 12色構成
- CSS変数

### 機能要件 & UIロジック
- ロード処理
- 設定モーダル
- ツアー機能

### HTML構造テンプレート

## コード修正時の厳格ルール
- 修正アルゴリズム
- 禁止操作チェックリスト

## 出力前セルフチェックリスト
- 必須要素チェック
- 日本語チェック
- HIG準拠チェック Phase 1-3
- GAS制約対応チェック

## 出力ファイル要件
- コード.gs
- 無題.html（オールインワン）

完全版プロンプトはこちら： 👉 GitHub: gas-webapp-prompt

検証：「タスク管理アプリ作って」

指示内容

プロンプトをGemini Gemに登録後、以下の一言を入力：

タスク管理アプリを作りたい

たったこれだけ。機能の詳細指示なし。

生成結果

約30秒で以下のファイルが生成されました：

1. Code.gs（約150行）

   • PropertiesServiceにデータ保存
   • タスクCRUD処理
   • 論理削除（アーカイブ）
   • サンプルデータ生成

2. Index.html（約1,000行）

   • HTML/CSS/JS オールインワン
   • 6テーマ実装
   • Driver.jsツアー
   • Undo機能付きトースト通知

生成例はGitHub: examples/task-managerで確認できます。

機能

基本機能

• タスクの追加・編集・削除
• 完了チェック
• アーカイブ（論理削除）
• キーワード検索（デバウンス300ms）

UI/UX

• 6テーマ切り替え
• 重要度の視覚化（色分け）
• Optimistic UI（即座にUI更新→サーバー送信）
• Undo機能（4秒以内に「元に戻す」）
• 初回起動時のサンプルデータ自動生成
• 自動ツアー起動
• 期限の情報表示（「今日」「明日」「あと〇日」）

GAS連携

• PropertiesServiceにデータ保存（スプレッドシート不要）
• 論理削除（isArchivedフラグ）
• ローディング表示
• エラーハンドリング

評価結果

20項目のチェックリストで評価した結果：

詳細は評価シートを参照。

特に優れていた点

1. 論理削除が適切に実装

function archiveTask(id) {
  const tasks = getAllTasksRaw();
  const index = tasks.findIndex(t => t.id === id);
  if (index >= 0) {
    tasks[index].isArchived = true;
    saveTasksToStore(tasks);
  }
  return tasks.filter(t => !t.isArchived);
}

トースト通知に「元に戻す」ボタンが表示され、4秒以内にクリックで復元可能。 ええやん、えらいぞ。

2. Optimistic UI実装

プロンプトに明示していないのに、高度なテクニックを実装：

function toggleStatus(id, currentStatus) {
  // 楽観的UI更新（即座に反応）
  const taskEl = document.getElementById(id);
  if(taskEl) taskEl.classList.toggle('completed');

  // その後サーバー通信
  google.script.run
    .withSuccessHandler((updatedTasks) => {
      allTasks = updatedTasks;
    })
    .toggleTaskStatus(id, isCompleted);
}

空気読むの上手くなった…？かもしれない。 楽観的UIという単語はむしろ、なんだそれ…ってなってるけどまあよし。

3. 初回体験が良好

// 初回訪問チェック
if (!localStorage.getItem('visited')) {
  localStorage.setItem('visited', 'true');
  setTimeout(startTour, 1000); // 自動ツアー起動
}

空のアプリではなく、すぐに触れるサンプルデータが用意される。 あと初回時に自動ツアー出るのえらすぎ。 一次資料読まないとかReadmeの概念がしにがちなので(虚しい負けの経験がある)

4. GAS制約への適切な対応

すべてのGAS呼び出しに：

• withSuccessHandler / withFailureHandler
• ローディング表示
• ボタンのdisable（連続クリック防止）

オタク連打阻止。

改善が必要だった点

1. エラーメッセージが汎用的（-3点）

解決方法が示されていない。理想的には「ネットワーク接続を確認してください」など具体的な対処法を提示。

これはまあちょっと厳しいかって感じ。そうなったら、AIに聞きな、で良いか。

2. 統計情報の表示がない（-3点）

タスク数、完了率などの「情報」表示がない。「データよりも情報」の原則からすると改善余地あり。

まあこれもバイブコーディングよろしく、Gemで始めた会話に「こういう機能ほしい」って言ったら追加でソースコード改修とか場所をこうしろ、が言われるので問題なし。

3. フォームの視覚的グループ化が弱い（-4点）

項目の論理的順序は良いが、視覚的な区切り（セクション）がない。

簡単なタスク管理アプリなので確認がちょっとしにくかったかも。これは私の選定が悪い問題かも。

使い方

1. Gemini Gemを作成

1. Geminiにアクセス
2. 左サイドバーの「Gem」をクリック
3. 「新しいGemを作成」
4. Gem名：GAS Webアプリ開発アシスタント
5. 説明：HIG準拠のGAS Webアプリを生成

2. プロンプトを登録

GitHubのプロンプトをコピーして、Gemの「指示」欄に貼り付け。

3. 使ってみる

Gemとのチャットで：

タスク管理アプリを作りたい

または

スプレッドシートのデータを一覧表示するダッシュボードを作りたい

とか作りたいものを伝える。

4. GASにデプロイ

生成されたコードをGASエディタにコピペ：

1. Google Apps Scriptにアクセス
2. 「新しいプロジェクト」
3. Code.gs の内容を貼り付け
4. 「＋」→「HTML」→ Index という名前で作成
5. Index.html の内容を貼り付け
6. 「デプロイ」→「新しいデプロイ」→「ウェブアプリ」
7. アクセス権限を設定して「デプロイ」

使用上の注意

✅ できること

• 15分で「それっぽい」UIが出来る
• 社内向けGoogle系アプリのUI/UX開発を爆速化
• 初版、たたき台として十分なレベル

❌ できないこと（別途対応が必要）

• アクセシビリティ対応（スクリーンリーダー、キーボード操作等）
• 完全なレスポンシブ対応（スマホ最適化、タッチUI等）
• 本番レベルのセキュリティ（XSS対策、CSRF対策等）
• パフォーマンス最適化（大量データ処理、複雑な集計等）

前提知識

GASの基礎知識が必要です：

• デプロイ方法
• PropertiesServiceまたはスプレッドシートの操作
• エラーのデバッグ
• google.script.run の仕組み

生成されたコードは「サンプル」です。そのまま動くこともありますが、調整・修正が必要なケースもあります。いつものように(？)、バイブコーディングで仕上げていく前提でお使いください。

カスタマイズ方法とか

テーマを追加したい

プロンプトの以下の部分を編集：

### 2. CSSデザインシステム (Style)

以下の全**6種類**のテーマ定義を必ず含めてください。
→ 数を増やす、色を変える

HIG項目を減らしたい

プロンプトが長すぎる場合、Phase 2/3を削除してPhase 1（7項目）だけにすることも可能：

#### 【Phase 1】全アプリ必須の基本原則（7項目）
（これだけ残す）

#### 【Phase 2】フォーム・入力UIの原則（8項目）
（削除）

#### 【Phase 3】UX向上の原則（5項目）
（削除）

GAS制約対応を強化したい

プロンプトの「GAS固有の制約」セクションに項目を追加：

#### 6. 大量データの扱い

**制約**: スプレッドシートは数万行以上で遅延

**対応策**:
- ページネーション実装
- フィルタリングをGAS側で実施
- キャッシュ活用

まとめ

「UI/UXがない」

AIが爆速でコードを書く時代でも、生成UIは「なんかいまいち」だったりします。

プロダクトデザイナーから見れば改善の余地は山ほどあるでしょう。 でも、「たたき台」「MVP」「デモ前のデモ」を作る時に、 このくらい抑えておくと良いよねというラインがあります。

それを、社内向けのGoogle系サービス使ったウェブアプリ作るときのUI/UX系の開発を爆速化するためのプロンプトとして、1,200行に落とし込みました。

細かい調整はバイブコーディングで。

リンク集

• プロンプト本体：GitHub: gas-webapp-prompt
• 生成例（タスクナビ）：examples/task-manager
• 評価シート：docs/evaluation.md
• 別枠HIG参考資料：ソシオメディアHIG
• GAS公式ドキュメント：Google Apps Script

プロンプト配布のあれこれ

今回初めてプロンプト配布とかすっか～と思ってやったんですけど 長いプロンプトとかってZennだとテキストぽいー、mdぽいーが出来なくて Github経由じゃないとアカンな、ってなりました。

微妙に痒いとこだった、という気づき。お陰でリンクの飛び先ちまちま設定するの大変だった…。 気を付けてますが、ミスってたら人間のポンコツという事で勘弁ください。