この記事はで読むことができます。
当ブログでは商品・サービスのリンク先にプロモーションを含みます。
Webサイトの更新作業、こんな風に感じていませんか？
「ほんの少しの文字修正なのに、ファイルをダウンロードして、修正して、テスト用の別名で保存して、FTPでアップロードして…正直めちゃくちゃ面倒」
「画像の差し替えやリンクの変更で、うっかりミスをしてしまわないかいつも不安」
その悩み、非常によくわかります。単純な手作業の繰り返しは、時間も気力も奪っていきますよね。
しかし、AI技術が発展した今、そんな非効率な作業フローは過去のものになりつつあります。
この記事では、AIコーディングエディタ「Cursor」とビジネスチャット「Slack」を連携させ、まるでSF映画のように「チャットで指示するだけ」でWebサイトの修正が完了する、次世代のワークフローを構築する方法を、全くの初心者でもわかるように、ゼロから解説します。
Webサイトの更新作業が面倒で時間がかかる
手作業による更新ミスやファイルの先祖返りが怖い
もっと効率的で安全なWebサイト管理の方法を知りたい
チャットで指示するだけでAIがコーディング…？なんだか難しそう…。
ご安心ください。むしろ逆です。一度設定すれば、今までの手作業が嘘のように楽になります。
- AI(Cursor)とSlackを使った次世代Web制作フローの全体像
- 全くの初心者でも迷わない、具体的な環境構築の手順
- 日々の更新作業を劇的に効率化する「黄金パターン」
- 導入に必要なツールと費用
AIにコーディングを頼むって、どういうこと？
まずは、この新しいワークフローが、具体的にどのようなものなのか、全体像を掴んでいきましょう。
一言でいうと、まるでチャットで人にお願いするように、Slackに「ここの文字をこう直して」と書くだけで、AIがあなたの代わりにコーディング作業をやってくれる、という仕組みです。
まるでドラえもんみたいですね！
まさにその通りです。その「ドラえもん」が実際にどのように動くのか、流れを見てみましょう。
AIが動く5つのステップ
一度環境を整えてしまえば、日々の修正作業は以下のステップで自動的に進みます。
あなたがSlackのチャットで「ヘッダーの電話番号を修正して」と日本語でAIにメンションします。
指示を受け取ったAI（Cursorエージェント）が、Webサイトの設計図が保管されている場所（GitHub）へ行き、該当箇所のコードを自動で修正します。
AIが修正を終えると、それを検知した別のサービス（Vercel）が、修正内容を反映させた「お試し確認用サイト」を自動で作成し、そのURLを発行します。
出来上がったプレビューサイトのURLが、Slackに自動で通知されます。あなたはそのURLをクリックして、修正が正しく行われたかを確認します。
プレビューで問題がなければ、「承認」ボタンをクリック。すると、その修正内容が本番のWebサイトにも自動で反映されます。
この流れによって、あなたは「指示」と「確認」をするだけで、面倒なファイル操作やアップロード作業から完全に解放されます。
なぜそんな事が可能なのか？中心にある「Git」という仕組み
便利なのはわかったのですが、静的なHTMLの修正で「Git」とか「GitHub」って、少し大げさな気がします…。
その感覚、とても自然です。ですが、この自動化の仕組みでは、Gitが「AIに安全な作業をしてもらうための最低限必要なレール」の役割を果たすのです。
このワークフローの中心には「Git」というバージョン管理システムと、それを使ったWebサービス「GitHub」が存在します。
AIは、Googleドライブにあるような単体のファイルを直接編集することはできません。AIが動くためには、全てのファイル（HTML、CSS、画像）がGitHubという場所に保管されている必要があるのです。
なぜなら、Git/GitHubには、今までの手作業によるWebサイト管理の課題を解決する、3つの強力なメリットがあるからです。
1. 完璧な「変更履歴」が残る
「いつ、誰が、どこを、どのように変更したか」が全て自動で記録されます。これにより、「この文章、誰がいつ変えたんだっけ？」といった問題がなくなります。
2. 間違いを「1クリック」で元に戻せる
Gitは、まるでゲームのセーブポイントのように、作業の節目を記録できます。もし修正でサイトがおかしくなっても、ボタン一つで問題が起きる前の状態に完全に戻せます。この「保険」がある安心感は絶大です。
3. 「自動化」の出発点になる
今回のCursorやVercelのように、「GitHub上でファイルの変更があったら、自動で〇〇する」という、あらゆる自動化の起点となるのがGitHubなのです。AIに仕事をさせるための大前提とも言えます。
「大げさ」に感じるかもしれませんが、GitはAIに安全かつ確実に作業をしてもらうための土台であり、一度導入すれば、手作業よりもむしろ安全で楽になるのです。
【実践】未来のワークフローを構築する
ここからは、実際にあなたのWebサイトを自動化するための環境を構築していきます。いくつかの設定が必要ですが、基本的に「最初の1回だけ」行う作業です。一度レールを敷いてしまえば、あとは快適な旅が待っています。
Part 1: Vercelで「自動プレビュー環境」を手に入れる
最初に、AIによる修正内容を安全に確認するための「お試し確認用サイト（プレビュー環境）」が、自動で生成される仕組みを作ります。これには「Vercel」というサービスを利用します。
毎回、仮アップ用のフォルダをサーバーに作るのは面倒でした。それも自動になるのですか？
はい。Vercelを使えば、AIが修正するたびに、全く新しいプレビューサイトとURLが自動で発行されます。もうあなたがサーバーを意識する必要はありません。
VercelとGitHubを連携させることで、AIが作成した「変更提案」をVercelが自動で検知し、その変更内容だけを反映させたプレビューサイトを自動で構築してくれます。
Vercelが自動で作ってくれるプレビュー用のURLは、Googleなどの検索結果には表示されないように自動で設定されるため、開発中のページが意図せず公開されてしまう心配はありません。安心してください。
Part 2: GitHub Actionsで「本番サーバーへの自動反映」を組む
プレビューで確認後、今度はその修正内容をあなたの本番サーバーに反映させる必要があります。この「FTPアップロード」作業も、GitHub Actionsという機能を使って完全に自動化します。
これは、GitHubに対して「承認ボタンが押されたら、このファイルを、このFTPサーバーに自動でアップロードしてね」という命令書をあらかじめ書いておくようなものです。
一度設定してしまえば、あなたはGitHub上で「承認」ボタンを押すだけ。あとは一切何もしなくても、数分後にはあなたのサーバーのサイトが自動で更新されています。FTPソフトを開くことは、もうありません。
この自動化設定では、FTPのパスワードなどの秘密情報を、GitHubの「Secrets」という安全な金庫に保管します。コードに直接パスワードを書き込むことはないため、セキュリティ面でも安心です。
WordPressサイトの場合
WordPressサイトを修正する場合、Vercelでのプレビューは使えません。WordPressはファイルとデータベースが連携して動くためです。
その代わり、プロの現場で標準的に行われている「ステージング環境」というアプローチを取ります。
- 本番用とは別に、お試し用のWordPress（ステージング環境）をサーバーに用意する。
- AIによる修正は、まずこのステージング環境に自動反映させる。
- ステージング環境で表示や動作を確認し、問題なければ本番環境に反映させる。
このように、静的サイトとは少しアプローチが異なりますが、「安全な場所で試してから本番に反映する」という自動化の原則は全く同じです。
【実践】AIとの協業ワークフロー
環境構築が完了したら、いよいよAIとの共同作業が始まります。全ての作業をAIに丸投げするのではなく、人間とAIがそれぞれの得意なことを活かして分業するのが、このワークフローを最大限に活用するコツです。
ここでは、日々の業務で最も効率的な「黄金パターン」をご紹介します。
パターンA: Slackからの「ひとこと修正」
これは、「既存のファイル」に対して「明確な指示」を出せる場合に最も効果を発揮する、一番手軽な方法です。
- 文字の修正・差し替え（例：「会社案内」を「会社概要」に直して）
- CSSの微調整（例：ボタンの色を赤に変えて）
- リンクの修正（例：フッターのリンク先を新しいURLに変更して）
指示は日本語で大丈夫なのですか？HTMLコードを貼り付けた方が確実ですか？
はい、自然な日本語で指示できます。ただ、AIが迷わないように、修正したいコードの一部をSlackに貼り付けてあげると、より確実性が増すのでおすすめです。
パターンB: Cursorエディタを使った「ファイル追加・複雑な修正」
一方、PCにインストールしたCursorのデスクトップ版エディタは、より創造的で、ファイル全体に関わる作業で真価を発揮します。
- 新しい画像の追加（PCから画像をドラッグ＆ドロップでプロジェクトに追加）
- 新規ページの作成（新しいHTMLファイルやCSSファイルを追加）
- AIの修正が不十分だった時の手直し
特に重要なのが、AIの修正案がイマイチだった場合の手直しです。AIが作成した修正途中の状態をCursorエディタで直接開き、人間がサッと手直しして完成させることができます。ダウンロードやアップロードは一切不要です。
【重要】画像の扱いはどうする？
新しいロゴ画像などを追加する場合、Slackにファイルを添付してもAIは認識できません。
正解は、画像ファイルもHTMLやCSSと全く同じように、Git（GitHub）で管理することです。
まず人間がCursorエディタを使い、PCから画像ファイルをプロジェクトのimagesフォルダなどに追加し、その変更をGitHubに保存します。
次にSlackでAIに「ヘッダーのロゴを、さっき追加した/images/new-logo.pngに差し替えて」と、ファイル名を具体的に指示します。
この手順を踏むことで、サイトを構成する全ての要素が一元管理され、「ファイルマネージャーでアップした画像が、次の更新で消えてしまった」といった事故を防ぐことができます。
導入前のよくある質問 (FAQ)
新しいワークフローを導入するにあたって、具体的な運用に関する疑問が出てくるかと思います。ここでは、よくある質問とその回答をまとめました。
- 本当に全部無料で始められますか？費用について教えてください。
- はい、大部分は無料で実現できます。 ・GitHub（コード保管）: 無料 ・Vercel（プレビュー自動化）: 無料 ・Slack（チャット）: 無料（※） ただし、このワークフローの心臓部であるAIエージェント機能などを快適に利用するには、**Cursorの有料プラン（Proプラン）への加入が推奨**されます。月額20ドル程度の投資で、作業時間を大幅に短縮できると考えると、コストパフォーマンスは非常に高いです。 ※Slackの無料プランは、閲覧できるメッセージ履歴が直近90日間に制限されます。
- 職場のPCと自宅のPCなど、複数の端末で利用できますか？
- はい、全く問題ありません。むしろ、複数端末でシームレスに作業できるのが、このワークフローの強みです。 全てのデータは「GitHub」という中心に保管されています。そのため、どの端末でも、作業を始める前にGitHubから最新の状態を読み込み（Pull/同期）、作業の終わりには自分の修正内容をGitHubに保存（Push/同期）するという**「挨拶」のようなルール**さえ守れば、いつでもどこでも作業の続きから再開できます。
- 2人以上のチームで利用することも可能ですか？
- はい、可能です。このワークフローは、複数人での共同作業を前提に設計されています。 案件ごとに共有のGitHubリポジトリとSlackチャンネルを用意し、チームメンバー全員がそこを参照して作業します。 ただし、チームで作業する場合、先ほどの**「始めにPull、終わりにPush」というルールが、一人で作業する時よりも10倍重要**になります。この挨拶を徹底することが、チームでのスムーズな共同作業の秘訣です。
- Slackの無料プランだと、90日より前の履歴は見えなくなるのですか？
- はい、その通りです。無料プランでは、閲覧・検索できるのが直近90日間のメッセージとファイルに制限されます。 ただし、データが**「消える」わけではなく、「非表示」になる**だけです。もし将来、有料プランにアップグレードすれば、その時点ですべての過去ログが再び閲覧できるようになります。データが失われる心配はないので、安心して無料プランで始めることができます。
まとめ：AIとの協業で、Web制作は次のステージへ
今回は、AIコーディングエディタ「Cursor」と「Slack」を連携させ、Webサイトの制作・更新作業を劇的に効率化する次世代のワークフローについて解説しました。
1. AIへの指示はSlackから
「この文字を直して」とチャットで指示するだけで、AIがコーディング作業を代行。人間は面倒な手作業から解放されます。
2. すべての自動化はGitHubから始まる
Git/GitHubでコードを一元管理することで、完璧な変更履歴と安全なロールバックを手に入れ、AIとの連携やあらゆる自動化の起点とすることができます。
3. 確認と反映も全自動
Vercelによる「自動プレビュー生成」とGitHub Actionsによる「自動本番反映」を組み合わせることで、あなたは「指示」と「承認」をするだけになります。
すごい…！未来の働き方ですね。何から始めたらいいでしょうか？
ありがとうございます。まずは、一番簡単なHTMLページを1つだけ用意して、GitHubにアップロードし、Vercelと連携させてみるのがおすすめです。ドラえもんが動く様子を、ぜひご自身で体験してみてください。
最初は少し設定に戸惑うかもしれませんが、一度この環境を構築してしまえば、その後のWebサイト管理は驚くほど安全で、効率的で、そして何より創造的になります。
手作業による単純作業はAIに任せ、あなたはより本質的なクリエイティブワークに集中する。そんな新しい時代のWeb制作を、この記事をきっかけに始めてみませんか。