2026年5月12日
文化祭の出し物、プログラミングで差をつけよう
文化祭の出し物、何にするか決まりましたか？「他のクラスと被りたくない」「インパクトのある企画にしたい」——そんなときは、プログラミングを活用してみましょう。
プログラミングを使った出し物の魅力：
- 目立つ：画面を使った演出は人目を引く
- 参加型にできる：来場者が触って楽しめる
- 準備が効率的：一度作れば当日は自動で動く
- スキルが身につく：文化祭が終わった後も使える技術が残る
この記事では、難易度別に8つのアイデアを紹介します。文化祭のWebサイトをゼロから作る方法と組み合わせれば、告知から当日の演出まですべてカバーできます。
難易度の目安
| レベル | 必要なスキル | 制作時間 |
|---|---|---|
| 初級 ★☆☆ | HTML/CSS/JSの基本 | 1〜3日 |
| 中級 ★★☆ | DOM操作、イベント処理 | 1〜2週間 |
| 上級 ★★★ | API連携、センサー活用 | 2〜4週間 |
プログラミング部なら中級〜上級に挑戦できます。クラス企画で初めてプログラミングに触れる人は初級から選びましょう。
初級 ★☆☆（1〜3日で作れる）
アイデア1: デジタル投票システム
来場者がスマホでQRコードを読み取り、「一番面白かった出し物」に投票できるシステムです。
使う技術：HTML / CSS / JavaScript / Google Forms
盛り上がりポイント：リアルタイムで投票結果が見える。閉会式で結果発表ができる。来場者全員が参加できる。
作り方のヒント：Google Formsで投票フォームを作り、そのURLをQRコードにするだけでも十分です。もっと凝りたい場合は、HTMLで独自の投票ページを作りましょう。
アイデア2: デジタルスタンプラリー
校内の各ポイントにQRコードを設置。来場者がスマホで読み取ると、スタンプが集まるWebアプリです。
使う技術：HTML / CSS / JavaScript / localStorage
盛り上がりポイント：校内を回遊してもらえる（各クラスの集客に貢献）。コンプリートした人に景品を渡せる。ゲーム感覚で楽しめる。
作り方のヒント：各QRコードに異なるURLパラメータをつけます。読み取ると、JavaScriptでlocalStorageにスタンプを保存します。
アイデア3: カウントダウン＆タイムテーブル表示
大型モニターに、次のイベントまでのカウントダウンとタイムテーブルを表示するシステムです。
使う技術：HTML / CSS / JavaScript / setInterval()
盛り上がりポイント：「あと5分で○○が始まる！」と来場者に伝わる。受付や廊下に設置すると案内板代わりになる。自動で切り替わるので人手がいらない。
作り方のヒント：イベントの時刻を配列で管理し、現在時刻と比較して「次のイベント」を自動で表示します。
夏休みWebアプリ：タイマーを作ろうの技術をそのまま応用できます。
中級 ★★☆（1〜2週間で作れる）
アイデア4: インタラクティブクイズ大会
大画面にクイズを表示し、来場者がスマホで回答するリアルタイムクイズシステムです。正解数でランキングを表示します。
使う技術：HTML / CSS / JavaScript / WebSocket
盛り上がりポイント：大人数で同時に参加できる。ランキング表示で競争心が生まれる。クイズの内容を学校ネタにすると盛り上がる。
作り方のヒント：シンプルに作るなら、出題画面と回答画面を別々のHTMLファイルにします。回答はGoogle Formsで集めて、結果をスプレッドシートで集計する方法もあります。
JavaScriptのDOM操作で、画面の動的な書き換え方法を学べます。
アイデア5: フォトブース（写真加工アプリ）
Webカメラで撮影した写真に、文化祭オリジナルのフレームやスタンプを合成するアプリです。
使う技術：HTML / CSS / JavaScript / Canvas API / getUserMedia()
盛り上がりポイント：来場者が思い出の写真を持ち帰れる。SNSでシェアしてもらえる（宣伝効果）。オリジナルフレームで文化祭感が出る。
作り方のヒント：Canvas APIを使えば、撮影した写真の上にフレーム画像を重ねて合成できます。完成した画像はダウンロードボタンで保存できるようにしましょう。
アイデア6: デジタル抽選会
ルーレット風のアニメーションで当選者を決めるアプリです。閉会式や模擬店の景品抽選に使えます。
使う技術：HTML / CSS / JavaScript / CSSアニメーション / Math.random()
盛り上がりポイント：ルーレットのアニメーションで会場が盛り上がる。大画面に映すと全員が注目する。効果音をつけるとさらに臨場感アップ。
作り方のヒント：CSSの transform: rotate() とアニメーションを組み合わせると、ルーレットの回転を表現できます。
上級 ★★★（2〜4週間で作れる）
アイデア7: ARスタンプラリー
スマホのカメラをかざすと、校内の特定の場所にAR（拡張現実）のキャラクターが表示されるアプリです。
使う技術：HTML / CSS / JavaScript / AR.js
盛り上がりポイント：「すごい！」と驚かれる（技術的インパクト大）。SNS映えする。他校との差別化ができる。
作り方のヒント：AR.jsを使えば、特別なアプリをインストールしなくてもブラウザだけでARが動きます。マーカー（目印の画像）を校内に貼り、カメラで読み取ると3Dオブジェクトが表示される仕組みです。
実装のヒント：AR.jsの公式サイトにあるサンプルコードをベースに、マーカー画像を自分たちのオリジナルデザインに差し替えるだけで動きます。3Dモデルは無料素材サイト（Sketchfab等）からダウンロードできます。まずは1つのマーカーで動作確認してから、校内の複数箇所に展開しましょう。スマホのカメラ許可が必要なので、HTTPSでの公開が必須です。
アイデア8: ミニゲームコーナー（ブラウザゲーム）
オリジナルのブラウザゲームを複数用意して、来場者に遊んでもらうゲームコーナーです。スコアランキングも表示します。
使う技術：HTML / CSS / JavaScript / Canvas API / localStorage
盛り上がりポイント：何度も遊びに来てくれる（リピーター獲得）。ランキング争いで盛り上がる。「自分たちで作った」と言えるのがかっこいい。
おすすめゲーム：タイピングゲーム（制限時間内に何文字打てるか）、反射神経テスト（画面が変わったらクリック）、記憶力ゲーム（神経衰弱）。1本あたり3〜5日で作れるものを選びましょう。
企画書の書き方（先生への提案）
プログラミングを使った企画は、先生に「何をするのか」を伝えるのが大切です。以下のポイントを押さえて企画書を書きましょう。
- 企画名：わかりやすい名前をつける
- 企画内容：何をするか、来場者にどう楽しんでもらうかを書く
- 必要な機材：パソコン台数、モニター、Wi-Fiの要否
- 制作スケジュール：設計→プログラミング→テスト→リハーサルの日程
- 担当者：プログラミング、デザイン、当日運営の役割分担
- 安全面の配慮：個人情報を収集しない、オフラインでも動作する等
記入例（デジタル投票システムの場合）
- 企画名：文化祭ベスト出し物グランプリ デジタル投票
- 企画内容：来場者がスマホでQRコードを読み取り、一番面白かった出し物に投票。結果は閉会式でリアルタイム発表
- 必要な機材：ノートPC 1台（結果表示用）、プロジェクター 1台、Wi-Fi（来場者のスマホ用）
- 制作スケジュール：8/1〜8/7 設計、8/8〜8/20 プログラミング、8/21〜8/28 テスト、9/1 リハーサル
- 担当者：プログラミング: 田中、デザイン: 鈴木、当日運営: 佐藤
- 安全面：個人情報は一切収集しない。投票データはlocalStorageに保存しサーバーに送信しない。オフラインでも動作する
「安全面の配慮」を書いておくと、先生の許可が得やすくなります。
準備スケジュール
文化祭の2ヶ月前から準備を始めるのが理想です。
| 時期 | やること |
|---|---|
| 2ヶ月前 | アイデア決定、企画書提出 |
| 6週間前 | 設計（画面構成、必要な機能の洗い出し） |
| 1ヶ月前 | プログラミング開始 |
| 2週間前 | デザイン調整、テスト |
| 1週間前 | リハーサル、バグ修正 |
| 前日 | 機材設置、最終確認 |
大切なポイント
- 早めに「動くもの」を作る：完璧を目指さず、まず最低限の機能を動かす。見た目は後から整えればいい
- テストは他の人にやってもらう：自分では気づかないバグが見つかる。友達に「壊してみて」と頼む
- オフラインでも動くようにする：当日Wi-Fiが不安定な場合に備える。localStorageを使えばネット不要
- 当日のトラブル対応要員を1人確保する：PCがフリーズしたとき、すぐ再起動できる人が必要
公開・共有の方法
作った作品は、文化祭が終わった後もインターネットに公開しておきましょう。
- ポートフォリオとして使える（AO入試や就活でアピールできる）
- 来年の後輩が参考にできる（引き継ぎ資料になる）
- 「自分が作った」という証拠になる（GitHubに履歴が残る）
GitHub Pagesでサイトを公開する方法で、無料で公開する手順を解説しています。
部活動のWebサイトを作るガイドも参考にすると、文化祭後の活動記録としても活用できます。
当日の運営で気をつけること
- 電源の確保：ノートPCのバッテリーは半日持たないことが多い。延長コードを用意する
- 画面の明るさ：教室が明るいとモニターが見えにくい。カーテンを閉めるか、明るさを最大にする
- 操作説明の掲示：来場者が迷わないよう「使い方」を紙に書いて貼っておく
- トラブル対応要員：PCがフリーズしたとき、すぐ再起動できる人を1人確保する
- バックアップ：USBメモリにファイルのコピーを入れておく。PCが壊れても別のPCで動かせる
まとめ
- ✅ 初級（1〜3日）: 投票システム、スタンプラリー、カウントダウン
- ✅ 中級（1〜2週間）: クイズ大会、フォトブース、抽選会
- ✅ 上級（2〜4週間）: ARスタンプラリー、ミニゲームコーナー
- ✅ 企画書を書いて先生に提案する
- ✅ 2ヶ月前から準備を始める
- ✅ 文化祭後は公開してポートフォリオにする
プログラミングを使えば、他のクラスとは一味違う文化祭になります。ぜひ挑戦してみてください！
次のステップ
まずは文化祭の告知サイトを作るところから始めましょう。テンプレートを使えば1日で完成します。