WORK

概要

「修正依頼から反映まで数日」を「即時・数分」へ。AIとDiscordを活用した静的サイトの運用自動化

美容室「chez cie」様のWebサイト運用における、テキストやメニュー価格の変更・修正業務を半自動化するシステムを構築。CMSを導入せず、静的サイトとして高品質かつ安全に保守管理を行う環境で、月1回程度発生する軽微な修正作業をAIおよび各種ツールでシステム化しました。クライアントのフォーム入力を起点に、AI解析、Discord上でのビフォーアフター画像生成、ワンタップでの本番デプロイまでを一気通貫で自動処理し、依頼から反映までのタイムラグを実質ゼロへ短縮しています。

chez cieのWebサイト修正前後をDiscordで確認する画面
chez cieのWebサイト修正内容をDiscordで確認・承認する画面
chez cieのWebサイト修正を依頼するGoogleフォーム

01/03

顧客の課題とコンセプト

  • 間に入る関係者の多さによるタイムラグ：「クライアント ⇄ デザイナー（窓口） ⇄ コーダー（制作担当）」と関係者が多く、連絡やスケジュール調整、作業タイミングのずれによって、軽微な修正でも本番反映まで数日間を要していた。
  • 修正指示・仕様取りまとめのコミュニケーション負担：文字や金額の変更でも意図が正確に伝わりにくく、デザイナーが毎回指示書として整理・確認し、エンジニアへ手配する運用コストが常態化していた。
  • 手動修正に伴うミスと手間の蓄積：静的サイトのHTML・CSSを都度手動で編集していたため、人為的ミスのリスクと、コード修正・テスト・デプロイにかかる負担が制作側へ積み重なっていた。
CONCEPT

「タイムラグゼロ・ストレスゼロ。誰も手を煩わせず、24時間即時反映できる運用基盤の構築」。クライアントがGoogleフォームへ入力するだけで、AIが指示内容を文脈から理解してコードを修正。Discordへ修正前後のキャプチャ画像とコード差分を自動生成し、承認ボタンを1回押すだけで本番環境へ安全に反映できる仕組みを目指しました。

工夫した点・実績

依頼から反映までを数日から数分へ短縮

窓口担当者やコーダーの稼働状況に依存しない自動フローを構築。これまで数日を要する場合もあった修正反映が、依頼提出からわずか数分で完了するようになりました。クライアントが「今変えたい」と思った瞬間に反映できる運用体制を実現しています。

Discord上でビフォーアフタープレビューを自動生成

フォーム入力を起点にAIが該当コードを特定・修正し、Visual Diffと修正前後のビジュアル画像を生成してDiscordへ自動通知。コード知識のない担当者でも、スマートフォンやPCから「何がどう変わるか」を直感的に確認できるよう設計しました。

ワンタップで完結する安全な本番デプロイ

Discord上の承認ボタンを押すだけで、GitHub Actions等を経由して本番サーバーへのデプロイが完了。人間は最終確認と承認だけを行い、事故のリスクを抑えながら手離れのよい運用を可能にしました。

関係者全員のコミュニケーション負担を解消

クライアントはフォーム入力だけで意図を正確に伝えられ、デザイナーは修正指示の取りまとめや連絡・管理から解放。コーダーも都度の手動編集を行う必要がなくなり、それぞれが本来のクリエイティブ・開発業務へ集中できる環境を整えました。

制作情報

制作期間
2026年7月（1日間）
担当領域
  • ディレクション
  • AIシステム設計・自動化構築
  • Webコーディング（保守運用）
制作ツール
  • Googleフォーム
  • Discord
  • GitHub
  • GitHub Actions
  • Claude Code
制作体制
一人制作（ディレクター／自動化エンジニア／開発全般を兼任）