Vibe Codingで広報がツールを自作する手順と注意点|非エンジニア

Vibe Codingで広報がツールを自作する手順と注意点|非エンジニア

この記事の要点

  • Vibe Codingは自然言語の指示でAIにコードを書かせる新しい作り方
  • 広報の小さな「あったら便利」は外注せず自分で試作できる
  • 公開前の品質とセキュリティの確認は必ず人が担う

「こんなフォームがあれば便利なのに」「この集計、毎回手作業でつらい」。そう思っても、社内にエンジニアがいない広報や情シスの方は、外注の見積もりとスケジュールを前に諦めてきたのではないでしょうか。

その状況を変えるのがVibe Codingです。この記事では、非エンジニアの広報担当者が自分の「作りたい」を形にするための、準備から公開前チェックまでの具体的な手順を解説します。AIに任せていい範囲と、人がやるべき範囲の線引きまで率直にお伝えします。

Contents / 目次
  1. Vibe Codingで広報がまず押さえるべき3つのこと
  2. Vibe Codingの始め方。広報が最初にやる5ステップ
  3. Vibe Codingで広報の仕事はどう変わるか
  4. Vibe Codingでよくある失敗と回避法
  5. Vibe Codingを使う前に知っておきたい現場の本音
  6. Vibe Codingについてよくある質問

Vibe Codingで広報がまず押さえるべき3つのこと

Vibe Coding入門|広報の

結論から言うと、広報がVibe Codingで成果を出すために押さえるべきことは次の3つです。

  • 小さく作る
  • AIに任せる範囲を決める
  • 公開前は人が確認する

この順番を守れば、専門知識がなくても実用的なツールを自分で作れます。

そもそもVibe Codingとは、自然言語でAIに「こんな感じにしたい」という意図を伝え、AIが主体になってコードを生成・実装していく開発手法のことです。かんたんに言うと、設計図を自分で書く代わりに、やりたいことを言葉で伝えて、あとはAIと相談しながら形にしていく作り方です。

従来のノーコードツールが「決められた部品を組み合わせる」やり方だったのに対し、Vibe Codingは標準的なプログラミングコードそのものをAIが書いてくれます。だから自由度が高く、自社の細かい要望にも合わせやすいのが特徴です。

ポイント。広報のVibe Codingは「業務システムを作る」のではなく「自分の困りごとを1つ解決する小さな試作」から始めるのが成功の近道です。いきなり大きなものを狙わないことが大事です。

では、広報がよく使う「作り方の選択肢」を整理してみましょう。下の表で、それぞれの向き不向きを比べてみてください。

作り方向いている場面必要なスキル注意点
外注(制作会社)本番運用する重要システム発注・要件整理費用と納期がかかる
ノーコードツール定型的なフォームや簡易アプリツールの操作習得ツールの枠を超えにくい
Vibe Coding自社特有の小さな試作・改善言葉で意図を伝える力品質確認は自分の責任
手作業のまま頻度が低く工数も小さい作業不要属人化・時間のムダが残る

この表で伝えたいのは、Vibe Codingは万能ではないということです。本番で多くの人が使う基幹システムは、いまも外注やしっかりした開発が向いています。一方で、「自分の手元で試したい」「まず動くものを見たい」という広報の小さなニーズには、Vibe Codingがぴったりはまります。

Vibe Codingの始め方。広報が最初にやる5ステップ

Vibe Coding入門|広報の

Vibe Codingの始め方は、次の5ステップで進めるのが確実です。

  1. 作りたいものを1つに絞る
  2. AIに渡す材料を準備する
  3. seedとなる短い指示を出す
  4. 出てきたものを確認して直す
  5. 公開前チェックをする

順番に見ていきましょう。

ステップ1。作りたいものを「1画面」に絞る

最初にやることは、作りたいものを思い切り小さくすることです。たとえば「広報の業務を全部効率化するシステム」ではなく、「展示会の申込を受け付けるフォーム1枚」まで絞ります。

絞り込みの基準はかんたんです。「誰が」「何を入力して」「どうなれば完成か」を1文で言えるかどうか。これが言えないものは、まだ大きすぎます。次のチェックリストで確認してみてください。

  • 使う人は決まっているか:例「各支店の総務担当が使う」
  • 入力する内容は決まっているか:例「氏名・所属・参加日の3項目」
  • 完成の状態は描けるか:例「入力内容を一覧で見られる」
  • 今は手作業でやっているか:例「メールを目視で転記している」

ステップ2。AIに渡す材料をそろえる

AIに良い仕事をしてもらうコツは、判断に必要な材料を先に渡すことです。料理人に「おいしいもの作って」とだけ言うより、「この食材で、辛くない、4人前」と伝えた方が狙った料理が出てくるのと同じです。

広報の試作なら、渡す材料は次の4つで十分です。完璧な仕様書を作る必要はありません。手元のメモ書きレベルで構いません。

  • 目的:何のために作るのか(手作業をなくす、など)
  • 使う人:社内の誰が、どんな場面で使うか
  • 入力と出力:何を入れて、何が出てくれば成功か
  • 制約:社外には公開しない、個人情報は扱わない、など

ステップ3。出発点になる短い指示(seed)を出す

いまのAIは、ざっくり頼めば自分で良い段取りを整えてくれます。だから作り込んだ長い指示文を用意する必要はありません。出発点となる短い指示(seed)を渡して、あとは対話で詰めていくのが効率的です。

たとえば、こんな出発点で十分です。[ ]の部分を自社の状況に置き換えて使ってください。

あなたはWeb制作の相棒です。
社内広報用に、簡単な[作りたいもの=例:イベント申込フォーム]を作ります。
・使う人:[例:各支店の総務担当]
・入力してほしい項目:[例:氏名・所属・参加日]
・できてほしいこと:[例:入力内容を一覧で確認できる/CSVで書き出せる]
・制約:[例:社内だけで使う。個人情報は最小限にする]

まずは全体の構成案と、最初に作るべき画面を提案してください。
わからない前提があれば、作り始める前に質問してください。

最後の一文「わからない前提があれば質問してください」が地味に効きます。これを入れると、AIが勝手に思い込みで進むのを防ぎ、足りない情報を聞き返してくれます。対話のキャッチボールが始まれば、あとは答えていくだけで形になっていきます。

なお、対話で作り進められるツールはいくつもあります。たとえば次のようなツールが広く使われています。

  • Claude(Anthropic)
  • Cursor
  • リプリット
  • GitHub Copilot

各ツールの対応環境(ブラウザ版や各OS向けアプリなど)は変わることがあるため、最新の情報は各ツールの公式サイトで確認してください。自分が触りやすいものから1つ選べば十分です。

ステップ4。出てきたものを確認して直す

ここがVibe Codingで一番大事なところです。AIは生成は得意ですが、「これで本当に良いか」の最終判断はできません。その判断こそ、人がやるべき仕事です。

確認のポイントは難しく考えなくて大丈夫です。実際に動かしてみて、自分が使う人の立場で次を見てください。

  • 意図どおり動くか:入力してみて、想定した結果が出るか
  • 変な動きはないか:空欄のまま送ったらどうなるか、など
  • 分かりにくくないか:初めて使う人が迷わないか

直してほしいところがあれば、また言葉で伝えればOKです。「送信ボタンを押したあとに『受け付けました』と表示して」のように、具体的に伝えるほど狙いどおりに直ります。この往復が、Vibe Codingの本体です。

ステップ5。公開前のチェックをする

社内だけで使うものでも、公開・配布する前のチェックは必ず行ってください。AIが書いたコードには、まれにセキュリティ上の弱点や、他人の権利に触れる部分が混ざることがあるためです。具体的なチェック項目は、後半の失敗パターンで詳しくお伝えします。

もっと踏み込んだ作り方を知りたい方は、Vibe Codingで社内限定アプリを自作する手順もあわせて読むと、社内向けツールの作り方がイメージしやすくなります。

Vibe Codingで広報の仕事はどう変わるか

Vibe Coding入門|広報の

取り組んだ結果どうなるか、先にお伝えします。これまで「外注するほどでもないけど自分では作れない」と諦めていた小さな改善が、自分の手で次々と形になっていきます。広報の動きが速くなるのが一番の変化です。

たとえば、展示会の受付管理。これまで紙のアンケートを後から手入力していたとします。仮に1回の展示会で来場者100名分、1件あたり1分の転記だとすると、それだけで約100分かかります。

これを申込フォームと一覧化の仕組みに置き換えれば、転記そのものがなくなります。月に数回イベントがある会社なら、それだけで数時間の手作業が消える計算です。

成功している会社の共通点。最初から大きなシステムを狙わず、「手作業で困っている1つ」を試作で潰すことを繰り返している点です。小さな成功体験が積み重なり、社内の「これもできるかも」が増えていきます。

もう一つの変化は、コンテンツの幅が広がることです。たとえば「3つの質問に答えると自社に合うプランが分かる診断」のように、読者が自分で操作できる双方向のコンテンツです。

BtoBでは、ただ情報を載せるだけのページより、こうした双方向のコンテンツの方が興味を持って使ってもらいやすい場合があります。見込み客の興味を引くこうしたコンテンツも、Vibe Codingなら試作してみることができます。

BtoBでは、新規顧客の獲得にかかる手間やコストは、業種や商材によって大きく異なります。いずれにせよ、いまある接点を活かして関係を深める仕組みづくりは、取り組む価値があります。Vibe Codingは、その小さな仕組みを安く速く試せる手段になります。

広報の予算管理を自分で見える化したい方は、Vibe Codingで広報予算ダッシュボードを自作する方法も参考になります。数字を一覧で把握できるだけで、社内説明がぐっと楽になります。

Vibe Codingでよくある失敗と回避法

Vibe Coding入門|広報の

ここからは、現場で実際にやりがちな失敗を率直にお伝えします。先に知っておけば、ほとんどは避けられます。代表的な3つを見ていきましょう。

失敗1。最初から大きく作ろうとして挫折する

一番多い失敗が、いきなり「広報業務まるごとのシステム」を作ろうとするケースです。やることが多すぎてAIへの指示も曖昧になり、出てくるものも中途半端になります。結果、完成しないまま放置されます。

防ぎ方はシンプルです。最初の1つは「半日で動くものが見える」サイズまで絞ること。フォーム1枚、集計1機能で十分です。小さく完成させて、必要なら後から足していく。この順番を守るだけで、挫折はほぼなくなります。

失敗2。生成されたコードを確認せず公開してしまう

AIが書いたコードは、見た目は動いていても、内部に弱点が残っていることがあります。よくあるのが、誰でも見られる場所に個人情報を保存してしまう、外部から不正なデータを送られても素通ししてしまう、といった状況です。これに気づかず公開すると、情報漏えいなどの事故につながります。

防ぎ方は、公開前に必ず次を確認することです。チェックリストとして使ってください。

  • 個人情報の扱い:名前やメールを、誰でも見られる形で保存していないか
  • 入力のチェック:空欄や変なデータを送られても壊れないか
  • 公開範囲:社内限定のはずが、URLを知れば誰でも入れる状態になっていないか
  • 権利関係:使っている画像や部品が、勝手に使えないものでないか

AI自身に「このコードにセキュリティ上の問題がないか、初心者にも分かるように説明して」と聞くのも有効です。気になる点は、その場でAIと一緒に直していきましょう。判断に迷う重要なものは、無理をせず専門家に見てもらうのが安全です。

失敗3。作って終わりで、更新が止まる

双方向の診断コンテンツや社内ツールは、作ったあとも内容の更新が必要です。中身が古いまま放置されると、かえって信頼を損ねます。「作る」より「育てる」前提が抜けていると、ここでつまずきます。

防ぎ方は、作る前に「誰が・いつ・どう更新するか」を決めておくことです。更新が前提のものは、最初から「ここを変えれば内容が直る」というシンプルな構造で作っておくと、後がぐっと楽になります。AIに「あとで自分で文言を変えやすい作りにして」と頼んでおくのも一手です。

Vibe Codingを使う前に知っておきたい現場の本音

ここまで前向きにお伝えしてきましたが、現場で見えてきた限界と妥協点も率直に共有します。これを知っておくと、判断を誤りません。

まず大前提として、Vibe Codingは「試作と社内ツール」には強いですが、「会社の根幹を支える本番システム」には、まだ慎重になるべきです。具体的には、次のような重要なものが当てはまります。

  • 顧客データを大量に扱う
  • お金のやり取りが絡む
  • 止まると業務が止まる

こうしたものは、品質保証や障害対応まで含めて考える必要があり、外注やしっかりした開発体制の出番です。AIで動くものができても、それを「任せきれるか」は別の話だと割り切ってください。

AIが生成したコードを管理せず増やし続けると、誰も全体を把握できない「技術的負債」がたまります。後から直せない・引き継げない状態になると、結局お金と時間がかかります。社内に残すものは「数を増やす」より「ちゃんと残せる形にする」を優先してください。

内製と外注の切り分けは、次のように考えると分かりやすいです。「壊れても自分たちで困るだけ」のものは内製で試作、「壊れると顧客や取引先に迷惑がかかる」ものは外注、という線引きです。広報の小さな改善はほとんど前者なので、自分で作る価値が大きい領域だと言えます。

見落としがちなコストもあります。Vibe Codingは作る費用は安く済みますが、「動かし続ける場所(サーバーなど)」「更新する人の時間」は別途かかります。試作で終わらせず社内で運用するなら、ここまで含めて考えておくと、あとで「思ったより手間がかかる」と感じずに済みます。

向き不向きの本音も言えば、Vibe Codingが合うのは「分からないことをAIに聞きながら、試行錯誤を楽しめる人」です。逆に「最初から完璧な手順書がほしい」「触って壊すのが怖い」という方は、最初だけ伴走者がいた方が圧倒的に早く進みます。指示出しだけでサイトが直るVibe Codingの実践例を見て、自分に合いそうか感触をつかんでみるのもおすすめです。

Vibe Codingについてよくある質問

プログラミングが全くできなくても本当に作れますか

小さな試作なら作れます。Vibe Codingは言葉で意図を伝え、AIと相談しながら形にする作り方だからです。ただし公開前の品質やセキュリティの確認は人の役割なので、不安な重要案件は専門家に見てもらうと安全です。

ノーコードツールとは何が違うのですか

ノーコードは決められた部品を組み合わせる作り方で、Vibe CodingはAIが標準的なコードそのものを書く作り方です。後者の方が自由度が高く、自社特有の細かい要望に合わせやすい一方、品質確認は自分の責任になります。

作ったものを社外に公開しても大丈夫ですか

公開前のチェックを必ず行ってください。個人情報の扱い、入力データの検証、公開範囲、画像や部品の権利関係の4点が最低限です。顧客データやお金が絡む重要なものは、社外公開の前に専門家の確認をおすすめします。

どのツールから始めるのがよいですか

対話で作り進められるツールなら、まず1つ触ってみるのが近道です。ツール選びより「小さな1つを作り切る」経験の方が大事なので、まずは身近な困りごとで試してみてください。各ツールの対応環境は変わることがあるため、最新の情報は各ツールの公式サイトで確認してください。

ここまで読んで、「自分でも小さく試せそうだ」と感じていただけたら嬉しいです。一方で、「公開前のチェックや、内製と外注の線引きを社内だけで判断するのは不安」と感じた方もいるはずです。そんなときは、コレットラボのAI業務システム化支援にお声がけください。いきなりの契約ではなく、いまの困りごとを一緒に整理するところからで大丈夫です。AI業務システム化の詳細はこちらから、お気軽にご相談ください。

30分の無料相談

現状をお聞きし、優先順位を一緒に整理します。

予約する →

Read Next / 次に読む

Claude Codeでサイトマップ自動生成|大規模サイトの分割と検証手順
AX

Claude Codeでサイトマップ自動生成|大規模サイトの分割と検証手順

2026.03.15 / 約 12 分

関連記事

AX

Replit Agentで毎朝のデータ集計を自動化|非エンジニアの手順

更新
AX

AI画像生成の著作権トラブルを防ぐ社内ガイドライン5ステップ

更新
AX

打刻漏れをAIで検知しTeamsに自動通知する作り方|非エンジニア向け

更新
AX

広報予算をAIで最適化する手順|配分のたたき台を作る

更新
AX

Vibe CodingでSNSバナーを量産|文字が崩れない自作ツールの作り方

更新
AX

AIでPDFをホワイトペーパーに変換する手順|営業資料を集客資産に

更新
AX

プレスリリース効果測定をAIで自動化|収集から分析まで手順解説

更新
AX

AI履歴書スクリーニングの進め方|工数を半減し公平性を保つ運用

更新
AX

AIクリエイティブの作り方|人が決める共創の手順と失敗回避

更新
AX

Claude Codeでアクセシビリティを自動修正|3ステップ手順

更新
AX

領収書入力をAIで自動化|撮影からfreee取込までの手順と型

更新
AX

イベント集客をAIで自動化|絞る当てる追うで申込率を上げる方法

更新