GAS＋スプレッドシートによるHTMLデータ管理設計

担当領域
実装・CMS構築
期間
2025年5月

案件背景

CMSを導入していない静的HTMLサイトにおいて、Googleスプレッドシートを更新画面として利用できる仕組みを設計・実装。非エンジニアでも価格や在庫情報を安全に更新できる運用フローを構築し、保守性と更新性を向上。

課題

  • CMSを導入せずに、掲載情報を簡単に更新できる仕組みが必要だった
  • Webに不慣れな担当者でも、安全に更新できる運用が求められていた
  • テスト環境と本番環境を明確に分け、誤更新を防ぐ必要があった

やったこと

  • Googleスプレッドシートを更新画面とする運用フローを設計
  • Google Apps Scriptを用いたJSON APIを実装
  • JavaScript（Fetch API）によるデータ取得・画面反映を実装
  • テスト・本番環境を自動で切り替える環境判定を実装
  • 備考欄など複数行データの整形処理を実装
  • キャッシュ対策を考慮したデータ取得処理を実装
  • 更新対象を限定し、誤操作を防ぐ運用設計を実施

実現したこと

  • 非エンジニアでもWebページの情報を更新できる運用を実現
  • CMSを導入せず、既存サイトのまま更新性を向上
  • テスト・本番環境を分離し、安全な更新フローを構築
  • 更新作業の属人化を防ぎ、運用負荷を軽減

設計のポイント

CMSを使わず更新できる運用設計

CMSを導入するのではなく、担当者にとって使い慣れたGoogleスプレッドシートを更新画面として採用。更新性と導入コストのバランスを考慮した運用フローを設計しました。

運用を考慮した安全な更新フロー

テスト環境と本番環境を自動で切り替える仕組みや、更新対象を限定した設計を採用。誤更新のリスクを抑えながら、非エンジニアでも安心して更新できる運用を実現しました。

よくなったこと

Googleスプレッドシートを更新画面として活用し、CMSを導入せずに静的HTMLサイトの更新フローを改善。非エンジニアでも安全に情報を更新できる仕組みを構築し、保守性と運用性を高められた。

補足

  • Googleスプレッドシートによる更新フローを構築
  • GASを活用したJSON APIを実装
  • テスト・本番環境を考慮した安全な運用設計
  • CMSを使わない更新システムを実現

Category

実装・CMS構築 改善・運用

Mimu Fujiwara

フリーランスのテクニカルPM／Webディレクター。 Webサイトのリニューアルや改善の相談を受ける中で、「本当に解決したいこと」と「依頼内容」が少しずれている場面によく出会います。 依頼されたものをそのまま作る前に、目的や課題、運用状況を整理し、「何を作るべきか」から一緒に考える立場で関わっています。 WordPressやHubSpotなどのCMS案件を中心に、要件整理・情報設計・技術調整・運用改善までを横断して支援。公開して終わりではなく、その後も無理なく運用・改善できる状態をつくることを大切にしています。