24｜候補を増やす前に、軸を決める。AI施策2×2優先度マップのプロンプト設計｜あいりちゃん
対象読者
AI活用、業務改善、販促施策の候補はあるものの、会議で優先順位を決めきれない担当者・マネジャー・資料作成者。
この記事で得られること
AI施策を2軸で比較できる図解の作り方
そのまま使える完成プロンプト
JSONとJinja2による軸・象限・施策の置換
4:5、16:9、1:1、A4への展開
軸の反転、日本語崩れ、情報過多を直す修正方法
設計意図
情報階層は、タイトル、軸、象限見出し、施策カードの4段階です。カードは短い名称だけにし、説
明文やアイコンを増やしません。縦軸は期待効果、横軸は導入難易度とし、左上を「効果が高く、
始めやすい」領域にします。
コピーして使える自然言語の完成版プロンプト
日本語で読みやすい、AI施策の2×2優先度マップを作成する。アスペクト比16:9、明るいオフホワ
イト背景、中央に大きな2×2マトリクス。縦軸は「期待効果」で、下を低、上を高とし、上向き矢印を
付ける。横軸は「導入難易度」で、左を低、右を高とし、右向き矢印を付ける。左上の象限見出し
は「今すぐ着手」、背景は淡いミント。右上は「計画して着手」、淡い水色。左下は「小さく試す」、
淡い黄色。右下は「いったん見送り」、淡いピンク。各象限の見出しは上部に太字で配置する。施
策カードは白い角丸長方形、濃いグレー文字、影はごく薄くする。左上に「議事録」「要約」、右上
に「FAQ」「需要予測」、左下に「画像制作」、右下に「自動配信」を配置する。タイトルは上部に「AI
施策 優先度マップ」。日本語は指定した文字だけを正確に表示し、説明文、追加アイコン、装飾
イラスト、ロゴ、透かし、実在企業名、余分なカードを入れない。カードを重複させず、軸の高低を
反転させず、余白を十分に取り、会議資料として一目で比較できる整ったインフォグラフィックに
する。
HTML・CSSで正確に作る場合の完成コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
*{box-sizing:border-box}body{margin:0;background:#eceae6;font-family:"Noto Sans
JP",sans-serif}.canvas{width:1200px;height:675px;margin:auto;background:#fffdf8;padding:4
2px 54px 46px;position:relative}.title{font-size:42px;font-weight:800;color:#2f3336;margin:0 0
26px}.chart{position:absolute;left:132px;top:130px;width:980px;height:470px;display:grid;grid
-template-columns:1fr 1fr;grid-template-rows:1fr
1fr;gap:12px}.q{border-radius:22px;padding:24px
28px}.q1{background:#e2f4e9}.q2{background:#e2eef8}.q3{background:#fff1c9}.q4{backgro
und:#f8e1e8}.q h2{margin:0 0
20px;font-size:27px;color:#323638}.cards{display:flex;gap:14px;flex-wrap:wrap}.card{backgr
ound:#fff;border-radius:15px;padding:13px
20px;font-size:21px;font-weight:700;color:#333;box-shadow:0 4px 12px
rgba(0,0,0,.07)}.yaxis{position:absolute;left:42px;top:185px;height:350px;writing-mode:vertic
al-rl;transform:rotate(180deg);font-size:22px;font-weight:700;color:#555}.xaxis{position:absol
ute;left:540px;bottom:14px;font-size:22px;font-weight:700;color:#555}.highY{position:absolut
e;left:88px;top:145px;font-size:16px}.lowY{position:absolute;left:88px;bottom:78px;font-size:
16px}.lowX{position:absolute;left:140px;bottom:20px;font-size:16px}.highX{position:absolute;
right:80px;bottom:20px;font-size:16px}</style>
</head>
<body>
<main class="canvas">
<h1 class="title">AI施策 優先度マップ</h1>
<div class="yaxis">期待効果 ↑</div><div class="xaxis">導入難易度 →</div>
<div class="highY">高</div><div class="lowY">低</div><div class="lowX">低</div><div
class="highX">高</div>
<section class="chart">
<div class="q q1"><h2>今すぐ着手</h2><div class="cards"><div class="card">議事録
</div><div class="card">要約</div></div></div>
<div class="q q2"><h2>計画して着手</h2><div class="cards"><div
class="card">FAQ</div><div class="card">需要予測</div></div></div>
<div class="q q3"><h2>小さく試す</h2><div class="cards"><div class="card">画像制作
</div></div></div>
<div class="q q4"><h2>いったん見送り</h2><div class="cards"><div class="card">自動配信
</div></div></div>
</section>
</main>
</body>
</html>
JSON形式の変数例
{
"title": "AI施策 優先度マップ",
"y_axis": "期待効果",
"y_low": "低",
"y_high": "高",
"x_axis": "導入難易度",
"x_low": "低",
"x_high": "高",
"quadrants": [
{"position": "left_top", "label": "今すぐ着手", "color": "#e2f4e9", "items": ["議事録", "要約"]},
{"position": "right_top", "label": "計画して着手", "color": "#e2eef8", "items": ["FAQ", "需要予
測"]},
{"position": "left_bottom", "label": "小さく試す", "color": "#fff1c9", "items": ["画像制作"]},
{"position": "right_bottom", "label": "いったん見送り", "color": "#f8e1e8", "items": ["自動配信
"]}
],
"aspect_ratio": "16:9",
"negative_prompt": "説明文、追加アイコン、装飾イラスト、ロゴ、透かし、実在企業名、重複
カード、余分なカード、軸の反転"
}
Jinja2画像プロンプト
日本語で読みやすい{{ title }}を作成する。アスペクト比{{ aspect_ratio }}、明るいオフホワイト背
景、中央に大きな2×2マトリクス。縦軸は「{{ y_axis }}」で、下を{{ y_low }}、上を{{ y_high }}とし、
上向き矢印を付ける。横軸は「{{ x_axis }}」で、左を{{ x_low }}、右を{{ x_high }}とし、右向き矢印
を付ける。{% for q in quadrants %}{{ q.position }}の象限見出しは「{{ q.label }}」、背景色は{{
q.color }}。施策カードは{{ q.items | join('、') }}。{% endfor %}カードは白い角丸長方形、濃いグ
レー文字、影はごく薄くする。指定した日本語だけを正確に表示する。禁止事項:{{
negative_prompt }}。
Jinja2 HTMLテンプレート
<section class="chart">
{% for q in quadrants %}
<div class="q" style="background:{{ q.color }}">
<h2>{{ q.label }}</h2>
<div class="cards">
{% for item in q.items %}<div class="card">{{ item }}</div>{% endfor %}
</div>
</div>
{% endfor %}
</section>
置換可能な変数
y_axis:期待効果/顧客価値/緊急度/影響度
x_axis:導入難易度/工数/費用/発生確率
quadrants:見出し、配色、施策カード
aspect_ratio:4:5/16:9/1:1/A4縦
用途別の派生
業務改善:効果×工数
新サービス:顧客価値×実現性
リスク管理:影響度×発生確率
販促施策:売上インパクト×準備負荷
人材育成:重要度×習得難易度
よくある失敗と修正プロンプト
軸が反転する
縦軸は下が低、上が高、上向き矢印。横軸は左が低、右が高、右向き矢印に固定してください。
左上を「高効果・低難易度」とし、象限とカードの位置を入れ替えないでください。
日本語が崩れる
画像内の文字を、タイトル、軸名、高低、4象限見出し、6つのカード名だけに限定してください。そ
れ以外の説明文や装飾文字を削除してください。正確な文字が必要な場合は、背景だけを画像
生成し、HTMLまたはデザインツールで文字を後から配置してください。
カードが重複する
各施策カードを1回だけ表示し、同じ名称の複製を削除してください。左上2枚、右上2枚、左下1
枚、右下1枚の合計6枚に固定してください。
情報が多すぎる
カード内の説明文、数値、アイコンを削除し、短い施策名だけを残してください。詳細は別表へ分
け、2×2マップは比較の入口に限定してください。
配色が順位に見える
赤・緑の強い評価色を避け、4象限は同程度の明度と彩度の淡色で区別してください。優劣は位
置と見出しで伝えてください。
\ このシリーズの最初から読む /
\ 次回の作品はこちら /