AIに「価値観ポーカー」というミニアプリを作らせてみた～AIを活用した業務改善②（全5回）｜あるく戦記

管理人あるく

2026年8月6日 08:55

AIに価値観ポーカーを作らせてみた

前回の記事では、僕がAIを業務改善に使うなら「ミニアプリを作る」という選択肢になる理由を紹介しました。

今回はその続きとして、 実際にAIに価値観ポーカーのミニアプリを作ってもらった様子を“実況中継”します。

「AIにコードを書いてもらうってどんな感じなの？」「どんなプロンプトを投げれば動くアプリが返ってくるの？」

そんな疑問に答える回です。

「価値観ポーカー」というワークをアプリ化

価値観ポーカーは、60枚の価値観カードを交換しながら 自分が本当に大事にしている価値観を浮き彫りにする自己理解を深めるためのワークです。

私はこの「交換しながら優先順位を決めていく」というワークをミニアプリとして作ってみたら面白いのでは？と思っていました。

しかも、 HTML＋CSS＋JavaScriptだけでローカルで動く という条件であれば、デスクトップ上で手軽にすぐに試すことができます。

ということで今回は、AIにこのミニアプリを作ってもらった様子をお伝えしようと思います。

今回AIに渡した仕様（これだけで作れる）

仕様はとてもシンプルです。

価値観カードは60枚
手札は常に5枚
交換候補は毎ターン11枚
捨てるカード1枚＋交換候補1枚を選んで交換
交換したくないときはパス
これを5ターン繰り返す
最後に残った5枚が「あなたの価値観トップ5」

この仕様をそのままAIに渡しました。

実際に投げたプロンプト

HTML+CSS+JavaScriptでWEBアプリを作りたいので手伝って。

WEBアプリ名：価値観ポーカー
ジャンル：自己理解系
使う場面：自分の価値観を知るワーク
1.「やりがい」「協調性」「クリエイティブ」など価値観のワードが書かれたカードが60枚ある。
2.その中からランダムにカードが5枚配られる（ユーザーの手持ちカード）、残りの55枚のカードのうち、ランダムに11枚が交換候補カードとして表示される。
3.ユーザーは手持ちカードの中から捨てカードとして1枚を任意に選択し交換候補カード11枚の中から1枚を任意で選択し、手持ちカードに加える（つまり、ユーザーの手持ちカードは常に5枚の状態）。
4.2から3の一連の流れを5ターン繰り返し、最後に手元に残った5枚のカードがユーザーにとって大事にしている価値観となる。なお、１ターンごとに交換候補カードは１１枚がランダムに表示される。ちなみに手持ちカードと交換候補カードで交換したいものがないときは1ターン消費してパスができる。

こんな感じでつくりたいです。HTMLファイルにひとつでまとめてくれると助かる。

AIが返してきたコード

AIは数秒でコードを返してきました。

しかも、

HTML
CSS
JavaScript
すべて1ファイルにまとまったSPA構成

という、完全に「ミニアプリの初稿」と呼べるレベルのもの。

正直、初稿としては十分すぎる内容でした。

実際に動かしてみた感想

動かしてみると──

手札5枚がランダムに配られる
交換候補11枚もランダムに表示される
捨てるカードと交換候補を選ぶと交換できる
パスもできる
5ターン後に最終結果が表示される

つまり、 価値観ポーカーの最低限のロジックがすべて動いている。

AIの初稿生成能力は本当にすごい。

改良ポイントをAIに相談してみた

初稿ができたら、次は改善です。

僕がAIに相談したのはこんなポイントでした。

UIをもう少し整えたい
カードの色分けをしたい
ロジックを少し調整したい
結果画面を見やすくしたい

するとAIは、 改善案＋修正コード をセットで返してきます。

このやり取りを数回繰り返すだけで、ミニアプリがどんどん洗練させていくことができます！

Geminiに生成してもらったコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>価値観ポーカー</title>
<style>
body {
font-family: sans-serif; text-align:
center; background: #f4f7f6;
}
.container {
max-width: 800px;
margin: auto;
}
.card-container {
display: flex; justify-content: center;
gap: 10px; margin: 20px 0;
}
/* カードのデザイン */
.card {
width: 100px;
height: 140px;
border: 2px solid #333;
border-radius: 10px; display: flex;
align-items: center;
justify-content: center;
background: white; cursor: pointer;
transition: transform 0.2s;
font-weight: bold; padding: 5px;
}
.card:hover {
transform: translateY(-5px);
background: #e0f7fa;
}
    .selected { border-color: #ff5722; background: #fff3e0; }
    
    .status { margin: 20px; font-size: 1.2rem; }
    button { padding: 10px 20px; font-size: 1rem; cursor: pointer; }
</style>
</head>
<body>

<div class="container">
<h1>価値観ポーカー</h1>
<p>残りのターン: <span id="turn-count">N</span></p>
<h3>【場にある選択肢】 (1枚選んでください)</h3>
<div id="selection-area" class="card-container"></div>

<h3>【あなたの手札】 (捨てる1枚を選んでください)</h3>
<div id="hand-area" class="card-container"></div>

<div class="controls">
    <button onclick="passTurn()">パスして次へ</button>
    <button onclick="executeSwap()" id="swap-btn" disabled>交換する</button>
</div>
</div>

<script>
// 1. データ準備
const words = ["やりがい", "創造", "自由", "誠実", "挑戦", "安定", "貢献", "情熱", "調和", "成長", "自律", "家族", "友情", "健康", "富", "名声", "変化", "伝統", "論理", "直感", "平和", "冒険", "責任", "ユーモア", "美", "知恵", "勇気", "忍耐", "効率", "多様性", "信頼", "感謝", "謙虚", "影響力", "共感", "公正", "独創性", "スピード", "質", "規律", "安全", "愛情", "遊び", "休息", "学び", "専門性", "リーダーシップ", "社交", "静寂", "敬意"];
let deck = [];
let hand = [];
let selection = [];
let turns = 10; // Nターンの設定
let selectedHandIdx = null;
let selectedPoolIdx = null;

// 初期化
function init() {
    deck = [...words].sort(() => Math.random() - 0.5);
    hand = deck.splice(0, 5);
    selection = deck.splice(0, 5);
    render();
}

// 描画処理
function render() {
    document.getElementById('turn-count').innerText = turns;
    renderCards('hand-area', hand, (i) => { selectedHandIdx = i; render(); }, selectedHandIdx);
    renderCards('selection-area', selection, (i) => { selectedPoolIdx = i; render(); }, selectedPoolIdx);
    
    document.getElementById('swap-btn').disabled = (selectedHandIdx === null || selectedPoolIdx === null);
    
    if (turns <= 0) {
        alert("終了です！あなたの最終的な価値観は: " + hand.join(", "));
        location.reload();
    }
}

function renderCards(elementId, cardList, onClick, selectedIdx) {
    const area = document.getElementById(elementId);
    area.innerHTML = '';
    cardList.forEach((word, i) => {
        const div = document.createElement('div');
        div.className = `card ${selectedIdx === i ? 'selected' : ''}`;
        div.innerText = word;
        div.onclick = () => onClick(i);
        area.appendChild(div);
    });
}

// 交換実行
function executeSwap() {
    const temp = hand[selectedHandIdx];
    hand[selectedHandIdx] = selection[selectedPoolIdx];
    // 選択肢を山札から補充
    if (deck.length > 0) {
        selection[selectedPoolIdx] = deck.shift();
    }
    nextTurn();
}

// パス
function passTurn() {
    if (deck.length >= 5) {
        selection = deck.splice(0, 5);
    }
    nextTurn();
}

function nextTurn() {
    turns--;
    selectedHandIdx = null;
    selectedPoolIdx = null;
    render();
}

init();
</script>
</body>
</html>

AIと一緒にミニアプリを作るときのコツ

今回の実況を通して感じたのは、 AIにコードを書かせるときは次の3つが重要だということ。

仕様は分かりやすく渡す（箇条書きがいいかも）
初稿はそのまま受け入れる（最初から完璧を求め過ぎない）
改善は小さく依頼する（少しずつブラッシュアップ）

AIは「ゼロから作る」より「改善する」ほうが得意なのだと思います。

次回は「価値観ポーカーを業務改善に応用できるか？」を考える

価値観ポーカーは自己理解ツールですが、僕はこれを 業務改善ツールに応用できるのでは？ と考えています。

次回は、このミニアプリを作る手法を業務改善にどう転用できるかを考えていきます。