社員紹介ページはテンプレ1枚で量産できる｜Vibe Coding活用法
この記事の要点
- 見た目の型とデータを分離し、型はVibe Codingで1回だけ作成
- 2人目以降はデータを1件足すだけでページ増設、デザインも不変
- 量産の核は型作成・データ分離・運用標準化で属人化防止
社員が入社するたびに、社員紹介ページを一から作り直していませんか。デザインがバラバラ、更新は外注、そのたびに見積もりと納期待ち。これは多くの広報・総務担当者が抱える地味だけど消耗する仕事です。
この記事では、Vibe Coding（バイブコーディング）を使って「一度テンプレートを作れば、あとは社員情報を足すだけでページが増えていく仕組み」をゼロから作る方法を解説します。コードが書けなくても大丈夫です。AIに何を渡し、出てきたものをどう確認すればいいのか、コピーして使える実物のコード付きで、現場目線でお伝えします。
Contents / 目次
結論。社員紹介ページは「テンプレ1枚＋データ追加」で量産できる
先に答えをお伝えします。社員紹介ページの作成が毎回大変なのは、「ページそのもの」を毎回作っているからです。やるべきことは、「見た目の型（テンプレート）」と「中身のデータ（社員情報）」を分けて作ること。この1点に尽きます。
型を1回だけVibe Codingで作っておけば、次からは社員の名前・部署・写真・コメントといったデータを足すだけでページが増えます。デザインは型側で固定されるので、誰がやっても見た目が崩れません。これが「テンプレ追加の仕組み」の正体です。
ここでVibe Codingという言葉を整理しておきます。Vibe Codingとは、人が手作業でコードを書く代わりに、AIに「こういうものが作りたい」と自然な言葉で伝えて、AIにコードを生成させる開発のやり方です。2025年にAI研究者のアンドレイ・カーパシー氏が提唱した比較的新しい概念で、Google Cloudのバイブコーディング解説ページでも、自然言語のプロンプトでアプリを構築する手法として紹介されています。かんたんに言うと、「プログラミングをAIに任せて、人は監督役に回る」やり方です。
では、何にどう取り組めばいいのか。全体像を先に表で示します。従来のやり方とVibe Codingでのやり方を並べると、どこが楽になるのかが一目で分かります。
| 項目 | 従来のやり方 | Vibe Codingでの仕組み化 |
|---|---|---|
| 1人追加するときの作業 | デザイン調整・コーディング・確認 | データを1件足すだけ |
| デザインの統一感 | 担当者ごとにブレやすい | 型で固定されるので崩れない |
| 必要なスキル | HTML・CSSの知識 | AIへの指示出しと確認 |
| 外注コスト | 追加のたびに発生しがち | 内製化で都度コストを抑えられる |
| 更新スピード | 見積もり・納期待ちが入る | その場で反映できる |
この記事で押さえてほしいアクションは3つです。順番に見ていきましょう。
- ①型を作る：社員1人分のカードのデザインを、Vibe CodingでHTMLとCSSとして1回だけ作る
- ②データと分ける：社員情報を「型に流し込むデータ」として独立させ、追加しやすい形にする
- ③運用ルールを決める：誰が・いつ・どの項目を更新するかを標準化して、属人化を防ぐ
ここがポイント。「ページを作る」発想から「データを足すと自動でページになる」発想へ切り替えるのが、量産化の本質です。最初の型作りだけ少し手間をかければ、2人目以降は驚くほど楽になります。
具体的なやり方。AIに型を作らせ、データを足す仕組みにする手順
ここからは実際の手順です。読みながら手を動かせるように、4つのステップに分けて解説します。使うのはVibe Codingに対応したAIツール（CursorやClaude Code、各社のAI開発環境など）と、できあがったファイルを置く自社のサーバーやサイトです。
ステップ1。AIに「理想の社員紹介カード」を言葉で説明する
最初にやるのは、欲しいものを言葉でAIに伝えることです。ここで大事なのは、完璧なプロンプトを作り込もうとしないこと。いまのAIは、ざっくり伝えれば自分で良い形に整えてくれます。まずは出発点となる短い「たたき台」を渡し、あとは対話で詰めていくのが正解です。
たとえば、次のくらいの粒度で十分です。
あなたはフロントエンドの実装担当です。
社員紹介ページの「社員1人分のカード」のテンプレートを作ってください。
・表示項目：顔写真、名前、部署、入社年、ひとことコメント、趣味
・トーン：［自社の業種を入力。例：BtoBで親しみやすさと信頼感を両立］
・コーポレートカラー：［例：青系］
・スマホでも見やすいレスポンシブ対応
・社員情報はデータ部分を分けて、後から人を追加しやすい作りに
まずHTMLとCSSで1枚作って。気になる点はこちらから伝えるので、対話で詰めましょう。このseed（たね）を渡せば、AIが初期デザインを出してきます。あとは「写真をもう少し大きく」「角を丸く」「部署名を目立たせて」と、見た目の感想をそのまま言葉で伝えれば直してくれます。デザインの専門用語は不要です。「なんとなく硬いから、もっと柔らかく」でもAIは汲み取ってくれます。
ステップ2。データと型を分けた「追加できる」構造にする
ここが仕組みの心臓部です。社員情報を、HTMLの中に直接書き込むのではなく、データとして独立させます。こうすると、新しい社員を足すときは「データを1件追加する」だけで済みます。下は、コピーすればそのまま動く実物の例です。社員を足したいときは、`staffList`の中に同じ形のデータを1つ増やすだけです。
<!-- staff.html として保存すればブラウザで開いて動きます。
社員を足すときは staffList に { } のかたまりを1つ増やすだけ。 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>社員紹介</title>
<style>
body { font-family: sans-serif; background:#f5f6f8; margin:0; padding:24px; }
.grid { display:grid; gap:20px;
grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); max-width:1000px; margin:auto; }
.card { background:#fff; border-radius:16px; padding:20px; text-align:center;
box-shadow:0 2px 8px rgba(0,0,0,.06); }
.card img { width:96px; height:96px; border-radius:50%; object-fit:cover; }
.card .name { font-size:18px; font-weight:bold; margin:12px 0 4px; }
.card .dept { color:#2a6fb0; font-size:14px; } /* ［ここを自社のコーポレートカラーに変更］ */
.card .meta { color:#888; font-size:13px; margin:6px 0; }
.card .comment { font-size:14px; margin-top:10px; line-height:1.6; }
</style>
</head>
<body>
<div class="grid" id="grid"></div>
<script>
// ▼▼▼ ここに社員を足していくだけ（型は触らない）▼▼▼
const staffList = [
{ name:"山田 太郎", dept:"営業部", year:"2020年入社",
photo:"yamada.jpg", comment:"お客様の現場に足を運ぶのが好きです。", hobby:"登山" },
{ name:"佐藤 花子", dept:"広報部", year:"2023年入社",
photo:"sato.jpg", comment:"会社の魅力を言葉にして届けます。", hobby:"カフェ巡り" }
// ［新入社員はこの下にカンマ区切りで追加］
];
// ▲▲▲ 追加はここまで。下のコードは触らなくてOK ▲▲▲
const grid = document.getElementById("grid");
staffList.forEach(s => {
grid.innerHTML += `
<div class="card">
<img src="${s.photo}" alt="${s.name}">
<div class="name">${s.name}</div>
<div class="dept">${s.dept}</div>
<div class="meta">${s.year} ／ 趣味：${s.hobby}</div>
<div class="comment">${s.comment}</div>
</div>`;
});
</script>
</body>
</html>このコードのうち、社員を追加する人が触るのは`staffList`の中だけです。型（デザイン）の部分は触りません。だから誰がやってもデザインが崩れない。これが「テンプレ追加の仕組み」の具体的な姿です。写真は同じフォルダに画像ファイルを置き、ファイル名を`photo`に書くだけで表示されます。
ステップ3。AIの出力をどう確認し、仕上げるか
ここが一番価値のある工程です。AIはコードを生成できますが、良し悪しの最終判断は人がやる必要があります。出てきたものを、次の観点でチェックしてください。これはツールに関係なく使えるチェックリストです。
- スマホで崩れないか：スマホの画面幅で見て、文字がはみ出したり写真が潰れたりしないか
- 名前や部署が長くても大丈夫か：長い部署名・役職名を入れても、レイアウトが破綻しないか
- 写真がないときどうなるか：写真ファイルが無い社員がいたとき、表示が壊れないか（仮の画像が出るか）
- 文字色と背景のコントラスト：薄い色同士で読みにくくなっていないか
- 追加方法が誰にでも分かるか：コードを知らない人が見ても「ここを足せばいい」と分かるコメントが付いているか
気になる点が見つかったら、そのままAIに伝えます。「部署名が長いとカードからはみ出すので、折り返すようにして」と言えば直してくれます。この往復こそがVibe Codingの本体です。AIへの指示の出し方そのものは、「指示出し」だけでサイトが直る快感：VibeCodingでWeb担当者の脱ストレスでも具体的に紹介しています。
ステップ4。誰でも迷わない運用ルールを決める
仕組みは作って終わりではありません。運用ルールを決めて初めて「量産」が回り出します。最低限、次の3つを決めておきましょう。入力項目の標準化、更新の担当と頻度、そして写真の扱いです。
| 決めること | 具体例（雛形） |
|---|---|
| 入力項目 | 名前・部署・入社年・コメント（40字以内）・趣味の5項目に固定 |
| 追加の担当 | 各部署の総務担当が、入社日の翌週までにデータを追記 |
| 更新の頻度 | 異動は随時、新入社員の追加は半年に一度まとめて、写真は一年に一度 |
| 写真のルール | 正方形・96px以上・本人同意を得たものだけ使用 |
この雛形をそのまま社内の手順書にコピーして使ってください。ルールを文章で固めておくと、担当が変わっても仕組みが生き続けます。
この仕組みで何が変わるか。成果のイメージ
結論から言うと、変わるのは「1人追加するときの体感の重さ」です。型さえできていれば、2人目以降の追加はデータを数行足すだけ。デザイン調整も、外注のやり取りも、納期待ちも要りません。社員紹介ページをテンプレート化しておけば、新入社員の追加はデータを足すだけで済み、統一感のあるデザインも保ちやすくなります。
成果は「時間」だけではありません。むしろ大きいのは次の3つです。
- 見た目の品質が安定する：誰が追加してもデザインが崩れないので、サイト全体の印象が締まる
- 更新が止まらなくなる：「外注しないと直せない」状態が解消され、情報が古いまま放置されにくくなる
- 採用・広報の武器になる：社員の人柄が伝わるページは、求職者が応募前にチェックすることも多い場所。すぐ更新できることが信頼につながる
もう少し具体的にイメージしてみましょう。たとえば年に6人採用する会社で、1人分のページ作成と確認に従来は半日かかっていたとします。型を作ってデータ追加方式にすれば、1人あたりの作業は数分に縮みます。年間で見れば、まとまった時間が他の仕事に回せる計算です。これは特別なツールを買わなくても、手元のAIと無料のテキストエディタだけで実現できる範囲です。
ノーコード・ローコードの考え方は、コードを書かずにアプリやページを作る手段として広く使われるようになってきました。Vibe Codingはその流れをさらに進める手法で、社員紹介ページのような「型が決まっていて、中身だけ増えていく」コンテンツは、まさに内製化に最も向いた領域です。同じ考え方で社内向けの小さなアプリを作る方法はVibe Codingで社内限定アプリを自作：プログラミング不要で業務自動化でも解説しているので、合わせて読むと応用が利きます。
よくある失敗と回避法
便利な仕組みですが、現場では決まったところでつまずきます。実際によく見かける失敗を3つ挙げ、それぞれ「どんな状況で起きて、何が困って、どう防ぐか」で整理します。
失敗1。AIの出力を確認せずそのまま公開してしまう
AIが出したコードを十分に吟味せず、見た目が良さそうだからと公開してしまうケースです。これをやると、スマホで崩れていた、特定の社員だけ写真がずれていた、といった問題に後から気づきます。場当たり的な修正が増え、結局コードがぐちゃぐちゃになります。
防ぎ方はシンプルで、公開前に必ず「実際のデータを2〜3人分入れて、PCとスマホの両方で表示する」こと。AIは生成は得意ですが、自社の実データで起きる崩れまでは保証しません。最終確認は人の仕事だと割り切りましょう。
失敗2。社員ごとに型を作り変えてしまう
「この人だけ役職を大きく見せたい」「この部署は色を変えたい」と、社員ごとにデザインをいじってしまうパターンです。最初は良くても、人数が増えるとバラバラになり、せっかくの統一感が失われます。そして「テンプレ追加の仕組み」だったはずが、また1人ずつ手作業に逆戻りします。
防ぎ方は、型は全員共通、変えるのはデータだけというルールを死守すること。どうしても役職別に見せ方を変えたいなら、それも「役職」というデータ項目として型側に一度だけ組み込み、個別にいじらない設計にします。例外を作らないことが、量産を維持するコツです。
失敗3。本人の同意を取らずに写真やプロフィールを載せる
社員紹介ページで見落とされがちなのが、個人情報とプライバシーの扱いです。本人に確認せず写真やコメントを公開すると、退職時の削除依頼や、掲載への不満といったトラブルにつながります。社外に公開するページである以上、ここは慎重になるべきところです。
防ぎ方は、掲載前に必ず本人の同意を取り、何を載せるか（写真・氏名・コメントの範囲）を本人に確認すること。退職した社員のデータをすぐ消せるよう、データ部分を分けておく今回の構造はこの点でも有利です。`staffList`から1件削除するだけで、その社員の表示が消えます。同意の取り方や運用は、自社の個人情報の取り扱いルールに沿って整えておきましょう。
写真・氏名・プロフィールは個人情報です。掲載は本人同意を前提にし、退職・異動があったらすぐ反映できる運用にしておくことが、長く安心して使う条件になります。
使う前に知っておきたい、現場の落とし穴と妥協点
ここまで「自分でできる」前提で書いてきましたが、率直に、向き不向きと限界もお伝えします。これを知らずに始めると、途中で止まってしまう会社をよく見かけるからです。
まず、Vibe Codingは「最初の型作り」が一番の山場です。2人目以降は楽ですが、1枚目のテンプレートをAIと対話しながら納得いくまで仕上げる工程は、ある程度の試行錯誤が要ります。ここを「カンタンにできる」と期待しすぎると、思ったより手こずって挫折します。難しいのは最初の型だけ、そこを越えれば一気に楽になると理解して臨むのが、現実的な心構えです。
次に、内製と外注の切り分けです。社員紹介ページのように「型が決まっていて中身が増えるだけ」のものは内製にとても向いています。一方で、サイト全体のリニューアル、複雑なアニメーション、既存システムとの連携が絡むものは、AIだけで仕上げようとすると逆に時間を食います。シンプルで繰り返しの多いものは内製、複雑で一点ものはプロに任せる。この線引きを最初に決めておくと、無理なく続けられます。
コストの見落としも一つあります。「AIで作れば無料」と思われがちですが、実際には作る人の学習時間、テンプレートを保守する人、公開後の表示確認といった人の手間はかかります。これはゼロにはなりません。ただ、外注を毎回繰り返すより、社内に「直せる人」が一人いる状態を作るほうが、長い目では確実に安く、早くなります。仕組みは作って終わりではなく、社内に定着させて初めて効く、ということです。この定着の進め方はAIシステム化の成功ロードマップ｜ツール導入で終わらせず社内に定着させるでも詳しく扱っています。
最後に正直な本音を一つ。「コードが一切分からなくても完全にゼロから一人でできるか」と言われると、最初の一歩だけは、伴走者がいたほうが圧倒的に早いのも事実です。型の設計だけプロに整えてもらい、運用は社内で回す、という折衷案が、多くの中小企業にとって一番現実的な落としどころになります。
よくある質問
本当にコードが書けなくても作れますか
作れます。コードを書くのはAIで、人は「こういうものが欲しい」「ここを直して」と言葉で伝える役です。ただし出てきたものを確認する目は必要なので、スマホ表示の崩れや文字の読みやすさを自分でチェックする習慣はつけてください。
作ったページはWordPressのサイトに載せられますか
載せられます。固定ページにHTMLとして埋め込む方法や、独立したファイルとしてサーバーに置く方法があります。既存サイトのデザインと馴染ませたい場合は、AIに「このサイトの見た目に合わせて」と画面の雰囲気を伝えると整えてくれます。
社員が増えるたびに毎回AIに頼む必要がありますか
必要ありません。最初に型を作っておけば、2人目以降はデータを1件足すだけです。AIに頼むのは、デザインそのものを変えたいときや、新しい項目を増やしたいときだけで十分です。
退職した社員の情報はすぐ消せますか
すぐ消せます。今回の作り方は社員情報をデータとして分けているので、該当する1件を削除するだけで表示が消えます。デザイン部分を触る必要はないため、誰でも安全に更新できます。
ここまで読んで、仕組みの考え方は分かったけれど最初の型作りでつまずきそう、自社のサイトにうまく組み込めるか不安、と感じた方もいると思います。コレットラボのAIで作るLP・サイト制作の伴走支援では、現状を整理するだけのご相談からお受けしています。まずは話を聞かせてください。AI業務システム化の詳細はこちらからどうぞ。
30分の無料相談
現状をお聞きし、優先順位を一緒に整理します。
予約する →
