Vibe Codingで作る新入社員クイズアプリ｜内製の手順とプロンプト

新入社員に自社のビジョンや歴史を伝えたいのに、分厚い資料を渡しても読まれない。研修の座学は眠そう。そんなお悩みはありませんか。

この記事では、プログラミングの知識がなくても「Vibe Coding（バイブコーディング）」を使って、新入社員向けのクイズアプリを自社でつくる方法を、手順・使えるプロンプト・失敗の防ぎ方までまとめて解説します。外注すると費用がかさみがちな小さなアプリを、現場の担当者が数時間で形にする。その具体的な進め方が分かります。

Contents / 目次

1. 結論。ビジョン浸透クイズはVibe Codingで内製するのが2026年の最適解
2. Vibe Codingでクイズアプリを作る具体的な手順
3. クイズアプリ内製でどんな効果が得られるか
4. よくある失敗と回避法
5. 内製ならではの落とし穴と、現場での妥協点
6. よくある質問
7. まとめ。まずは小さな1本から内製を始めよう

結論。ビジョン浸透クイズはVibe Codingで内製するのが2026年の最適解

新入社員向けのビジョン浸透クイズアプリは、外注やSaaS契約ではなく、Vibe Codingで自社内製するのが今いちばん現実的な選択です。理由はシンプルで、安く・早く・自社らしく作れるからです。

Vibe Codingとは、人間が自然な言葉で「こんなアプリが欲しい」と伝え、AIにコードを書かせる開発手法のことです。2025年初頭にAndrej Karpathy氏によって提唱され、2026年にかけて一気に広がりました。 担当者はコードを1行も書きません。やることは「指示を出す人」「できたものを確認する人」「直してほしい所を伝える人」です。家を建てるときに、自分で釘を打つのではなく、設計の方向性を決める建築家のような立ち位置になる、とイメージすると分かりやすいです。

なぜ新入社員のクイズアプリと相性がいいのか。それは、このアプリが「複雑なお金の計算もいらない」「個人情報を大量に扱うわけでもない」「社内の限られた人数で使う」という、Vibe Codingが最も得意とする小規模アプリだからです。失敗してもダメージが小さく、何度でも作り直せる。最初の一歩として、これ以上ない題材なのです。

まず、作り方の選択肢を整理しておきましょう。下の表で、自社に合うやり方を見つけてください。

作り方	費用感の目安	必要なスキル	自社らしさ	向いている会社
制作会社に外注	数十万円〜	不要（丸投げ）	△ 要望を伝える手間	大人数・継続運用が前提
既存のクイズSaaSを契約	月額制が多い	低い	△ テンプレの範囲内	とにかく早く始めたい
Vibe Codingで内製	ほぼ無料〜AI利用料のみ	言葉で指示できればOK	◎ 自由に作り込める	自社の色を出したい中小企業

押さえるべき結論。完璧なアプリを一発で目指さず、「動く小さなクイズ」をまず1本作る。それを新入社員に使ってもらいながら、反応を見て育てていく。この進め方が、内製成功の最短ルートです。

Vibe Codingでクイズアプリを作る具体的な手順

クイズアプリ作りは、大きく分けて「中身を決める→AIに作らせる→直す→社内に置く」の4ステップで進みます。プログラミングではなく、企画と確認の作業がほとんどです。順番に見ていきましょう。

ステップ1。クイズの中身（コンテンツ）を先に決める

最初にやるのは、コードのことではなく「何を問題にするか」です。ここが一番大事で、ここをAIに丸投げすると的外れな問題になります。Vibe Codingで失敗する人の多くは、中身が決まらないままAIに作らせ始めています。

新入社員に覚えてほしいことを、次のような切り口で10〜15問ほど書き出してみましょう。

• 経営理念・ビジョン：自社のミッションは何か、何を大切にしているか
• 会社の歴史：創業年、社名の由来、転機になった出来事
• 事業内容：主力商品、どんなお客様に何を提供しているか
• 社内ルール：困ったときの相談先、よく使う社内用語
• カルチャー：大事にしている行動指針、社内の合言葉

問題と正解、そして「なぜそれが正解なのか」という一言解説をセットで用意します。解説があると、間違えた新入社員もその場で学べます。下のような表形式でまとめておくと、次の手順でそのままAIに渡せます。

【クイズ内容テンプレート（このまま埋めて使えます）】

Q1. 当社が創業されたのは何年でしょうか？
　選択肢: A.2008年 / B.2014年 / C.2016年 / D.2020年
　正解: C
　解説: 当社は2016年に創業しました。前身の事業は2014年から始まっています。

Q2. 当社のビジョン「○○○○」が表す意味として正しいものは？
　選択肢: A.〜 / B.〜 / C.〜 / D.〜
　正解: B
　解説: このビジョンには「△△△△」という想いが込められています。

…（同じ形式で10〜15問つくる）

ステップ2。Vibe Codingツールを開いて、AIに作ってもらう

中身が決まったら、Vibe Codingができるツールを開きます。コードエディタ型なら「Cursor」、「Claude Code」、ブラウザだけで試せるものなら「Google AI Studio」などがあります（2026年06月14日時点）。 GoogleのGoogle AI Studioはブラウザ上でプロンプトからアプリを作れるので、最初の1本を試すのに向いています。

ここで使うのが「プロンプト」、つまりAIへの指示文です。あいまいに「クイズアプリ作って」と頼むと、思った通りになりません。下のプロンプトは、そのままコピーして角括弧の部分を自社の情報に差し替えれば使える完成形です。

あなたは、初心者にも優しいWebアプリ開発の専門家です。
新入社員研修で使う「会社ビジョン浸透クイズアプリ」を、HTML・CSS・JavaScriptの1ファイルだけで作ってください。
サーバーやデータベースは使わず、ブラウザで開くだけで動く形にしてください。

【アプリの仕様】
1. スタート画面に、アプリ名「［自社名］新人クイズ」と「スタート」ボタンを表示する
2. 4択クイズを1問ずつ出題する。問題は全部で［問題数］問
3. 回答を選ぶと、正解か不正解かをすぐ表示し、その下に解説文を出す
4. 「次へ」ボタンで次の問題に進む
5. 最後に得点（例: 10問中8問正解）と、点数に応じた応援メッセージを表示する
6. 「もう一度挑戦」ボタンで最初からやり直せる

【デザインの希望】
・コーポレートカラーは［#色コード］をメインに使う
・スマホでもPCでも見やすいレイアウト（レスポンシブ対応）
・ボタンは大きく、文字は読みやすいサイズにする
・全体的に明るく、親しみやすい雰囲気にする

【クイズの中身】
以下の問題データをそのまま使ってください。
Q1. ［問題文］／選択肢A〜D／正解［記号］／解説［解説文］
Q2. …
（ステップ1で作った問題をすべて貼り付ける）

【お願い】
・コードは1つのHTMLファイルにまとめてください
・どこを自社用に書き換えればいいか、コメントで教えてください
・専門用語は使わず、非エンジニアでも分かるように説明を添えてください

このプロンプトを送ると、AIがアプリのコードを生成します。うまくいかないときは、希望と違う部分だけを「得点画面に正解数だけでなく正解率も%で出して」のように追加で伝えると、その部分だけ直してくれます。一度で完成させようとせず、会話で少しずつ近づけるのがコツです。

ステップ3。実際に動かして確認し、気になる所を直す

生成されたファイルをブラウザで開き、自分で最初から最後までクイズを解いてみます。「指示→生成→確認→修正」を高速で回すのがVibe Codingの基本です。確認するポイントは次の3つです。

• 正解判定は合っているか：わざと間違えた答えを選んで、ちゃんと不正解と出るか
• 解説は正しく表示されるか：問題と解説がズレていないか、誤字はないか
• スマホで崩れないか：文字がはみ出したり、ボタンが押しにくくなっていないか

気になる所があれば、AIに「○○がおかしいので直して」と伝えるだけです。コードの中身を理解する必要はありません。

ステップ4。社内で使える場所に置く

完成したファイルは、社内の誰もが開ける場所に置きます。一番簡単なのは、HTMLファイルを社内の共有フォルダに入れて新入社員に開いてもらう方法です。もっと手軽にしたいなら、自社サーバーやファイル共有サービスにアップして、URLやQRコードを配る形にすると、スマホですぐ参加できます。アプリの「置き場所」を社内サイト化する発想はCursorで自社サイトをスマホアプリ風にPWA化する手順でも触れているので、合わせて読むと運用イメージがわきます。

クイズアプリ内製でどんな効果が得られるか

ビジョン浸透クイズを内製すると、研修の「伝わらなさ」と「コスト」の両方が改善します。座学で一方的に話すより、手を動かして答えるほうが記憶に残りやすいからです。

具体的には、次のような変化が期待できます。数字は会社の規模や運用で変わるため一概には言えませんが、考え方の目安として捉えてください。

項目	Before（従来）	After（クイズ内製後）
制作コスト	外注で数十万円	AI利用料のみ（ほぼ無料）
制作期間	見積もり・修正で数週間	最短で半日〜数日
内容の更新	そのつど外注に依頼	自社でいつでも修正可能
新入社員の反応	資料は読まれにくい	ゲーム感覚で取り組む

クイズは「テスト」ではなく「コミュニケーションのきっかけ」として使うのがおすすめです。チーム対抗にしたり、休憩時間のアイスブレイクに使ったりすることで、点数を競うよりも会話が生まれることに価値が出ます。

もう一つ大きいのは、一度作る経験をすると「これもAIで作れるのでは」という発想が社内に芽生えることです。クイズアプリはあくまで入り口。同じやり方で受付アプリやアンケート集計など、身近な業務ツールを内製できるようになります。実際に展示会の来場者管理アプリをVibe Codingで自作した手順もあるので、次のステップとして参考になります。これはAIリテラシーを全社で底上げする、AX（AIトランスフォーメーション）の第一歩でもあります。

よくある失敗と回避法

Vibe Codingでのクイズアプリ作りは手軽ですが、現場でつまずくパターンは決まっています。先に知っておけば、ほとんど防げます。代表的な3つを紹介します。

失敗1。中身を決めずにAIに丸投げしてしまう

「とりあえずクイズアプリ作って」とだけ頼むと、AIは一般論の問題を勝手に作ります。自社のビジョンとは関係ない、当たり障りのないクイズができあがり、結局使えません。これが一番多い失敗です。

防ぐには、ステップ1で説明したとおり、問題・正解・解説を先に自分たちで書き切ること。アプリの見た目はAIに任せていいですが、中身だけは人間が決める。ここを徹底するだけで、出来上がりの質が大きく変わります。

失敗2。AIが作ったコードを確認せずそのまま使う

AIが生成したコードは、見た目は動いていても、正解の判定がずれていたり、解説が別の問題のものになっていたりすることがあります。AIは「それらしく動くもの」を作るのが得意な一方、内容の正しさまでは保証しません。AIが生成したコードには、思わぬ不具合や脆弱性が紛れ込むことがあります。

防ぐには、公開前に必ず自分で全問解いて確認すること。特に、正解・不正解の判定と、得点計算は念入りにチェックします。社外に公開するアプリでなく社内限定なら大きなリスクは小さいですが、「動く」と「正しい」は別物だと意識しておきましょう。

失敗3。一度で完璧を目指して挫折する

最初から「順位表示も、画像問題も、タイマーも全部入れたい」と欲張ると、指示が複雑になり、AIも混乱して動かないアプリができがちです。そして「やっぱり難しい」と諦めてしまう。これも惜しい失敗です。

防ぐには、影響範囲の小さいシンプルな機能から作り、動いたら少しずつ足していくこと。まず「4択クイズが解けて点数が出る」だけの最小版を完成させる。それから「解説を追加」「デザインを調整」と一つずつ育てます。段階的に進めるほうが、結果的に早く完成します。

社内の人事情報や個人を特定できるデータは、クイズの問題やプロンプトに含めないでください。AIに渡す情報の線引きは内製化の基本ルールです。詳しくは会社の大事な情報をAIに入力しないための社内ルールの作り方を参考にしてください。

内製ならではの落とし穴と、現場での妥協点

ここまで「内製しましょう」とお伝えしてきましたが、Vibe Codingでの内製には正直に言って限界もあります。ここを分かったうえで取り組むと、後悔がありません。

まず、「誰が作ったか分からない」状態になりやすいという問題です。担当者が一人で作り上げると、その人が異動・退職した途端、誰も直せなくなります。これは内製化全般で起きる「属人化」の典型です。防ぐには、作ったプロンプトと問題データを共有フォルダに残し、簡単な作り方メモを添えておくこと。次の人がプロンプトを引き継げば、また作り直せます。

次に、「凝った機能ほど外注やプロの出番」という線引きです。社内数十人で使うクイズなら内製で十分ですが、何百人もの受講履歴を管理したい、点数をデータベースに残して人事評価に使いたい、となると話は別です。データの保存やセキュリティ、ログイン管理といった部分は、AIに任せきりにすると事故のもとになります。複雑なロジックやセキュリティ、安定した動作が求められる領域は、依然として人間の専門知識が必要な部分です。「お試しの社内ツールは内製、業務の根幹に関わるシステムはプロと一緒に」という切り分けが現実的です。

もう一つ、見落とされがちなのが「作って終わりにしない」こと。クイズは一度作ったら、毎年の新入社員に合わせて中身を見直す必要があります。古いビジョンや変わった事業内容のまま放置すると、かえって混乱させます。運用・更新まで含めて誰が担当するかを最初に決めておくのが、地味ですが一番大事なポイントです。内製を会社に定着させる進め方はAIシステム化の成功ロードマップでも詳しく解説しています。

正直なところ、「自分たちでやってみたけど、思ったより運用が続かない」「最初の設計だけプロに見てほしい」という会社は少なくありません。それは決して恥ずかしいことではなく、内製と外注のいいとこ取りを狙う賢い判断です。

よくある質問

まとめ。まずは小さな1本から内製を始めよう

新入社員向けのビジョン浸透クイズは、Vibe Codingで内製するのに最適な題材です。中身を決め、AIに作らせ、確認して、社内に置く。この4ステップで、コードを書かずにオリジナルの研修アプリが手に入ります。完璧を目指さず、小さな1本から始めるのが成功のコツです。

「自社でやってみたいけど最初の設計に自信がない」「内製を続けられる仕組みまで含めて相談したい」という方は、コレットラボのAI業務システム化支援にお声がけください。いきなり契約ではなく、現状の業務を一緒に整理するところからで大丈夫です。まずはお話を聞かせてください。AI業務システム化の詳細はこちらでご確認いただけます。