24 | Define the axes before increasing candidates. Prompt design for AI initiative 2x2 priority maps | Airi-chan
Target Audience
Staff, managers, and document creators who have candidates for AI utilization, business improvement, or promotional measures but cannot decide on priorities in meetings.
What you will gain from this article
How to create diagrams that compare AI initiatives on two axes
Ready-to-use completed prompts
Substitution of axes, quadrants, and initiatives using JSON and Jinja2
Deployment to 4:5, 16:9, 1:1, and A4 formats
Methods for fixing axis inversion, Japanese text corruption, and information overload
Design Intent
The information hierarchy consists of four levels: title, axes, quadrant headings, and initiative cards. Cards should only contain short names, without adding explanatory text or icons. The vertical axis represents expected effect, and the horizontal axis represents implementation difficulty, with the top-left area being 'high effect, easy to start'.
Completed natural language prompt ready to copy and use
Create a 2x2 priority map for AI initiatives that is easy to read in Japanese. Aspect ratio 16:9, bright off-white background, large 2x2 matrix in the center. The vertical axis is 'Expected Effect', with low at the bottom and high at the top, including an upward arrow. The horizontal axis is 'Implementation Difficulty', with low on the left and high on the right, including a rightward arrow. The top-left quadrant heading is 'Start Immediately' with a pale mint background. Top-right is 'Plan and Start' with pale light blue. Bottom-left is 'Try Small' with pale yellow. Bottom-right is 'Postpone for Now' with pale pink. Place each quadrant heading in bold at the top. Initiative cards are white rounded rectangles with dark gray text and very light shadows. Place 'Meeting Minutes' and 'Summarization' in the top-left, 'FAQ' and 'Demand Forecasting' in the top-right, 'Image Creation' in the bottom-left, and 'Automated Distribution' in the bottom-right. The title at the top is 'AI Initiative Priority Map'. Display only the specified Japanese text accurately, and do not include explanatory text, additional icons, decorative illustrations, logos, watermarks, real company names, or extra cards. Do not duplicate cards, do not invert the high/low of the axes, ensure sufficient margins, and create a neat infographic that can be compared at a glance for meeting materials.
Completed code for accurate creation using 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 Initiative Priority Map</h1>
<div class="yaxis">Expected Effect ↑</div><div class="xaxis">Implementation Difficulty →</div>
<div class="highY">High</div><div class="lowY">Low</div><div class="lowX">Low</div><div
class="highX">High</div>
<section class="chart">
<div class="q q1"><h2>Start Immediately</h2><div class="cards"><div class="card">Meeting Minutes
</div><div class="card">Summarization</div></div></div>
<div class="q q2"><h2>Plan and Start</h2><div class="cards"><div
class="card">FAQ</div><div class="card">Demand Forecasting</div></div></div>
<div class="q q3"><h2>Try Small</h2><div class="cards"><div class="card">Image Creation
</div></div></div>
<div class="q q4"><h2>Postpone for Now</h2><div class="cards"><div class="card">Automated Distribution
</div></div></div>
</section>
</main>
</body>
</html>
JSON format variable example
{
"title": "AI Initiative Priority Map",
"y_axis": "Expected Effect",
"y_low": "Low",
"y_high": "High",
"x_axis": "Implementation Difficulty",
"x_low": "Low",
"x_high": "High",
"quadrants": [
{"position": "left_top", "label": "Start Immediately", "color": "#e2f4e9", "items": ["Meeting Minutes", "Summarization"]},
{"position": "right_top", "label": "Plan and Start", "color": "#e2eef8", "items": ["FAQ", "Demand Forecas
ting"]},
{"position": "left_bottom", "label": "Try Small", "color": "#fff1c9", "items": ["Image Creation"]},
{"position": "right_bottom", "label": "Postpone for Now", "color": "#f8e1e8", "items": ["Automated Distribution
"]}
],
"aspect_ratio": "16:9",
"negative_prompt": "Explanatory text, additional icons, decorative illustrations, logos, watermarks, real company names, duplicate
cards, extra cards, axis inversion"
}
Jinja2 image prompt
Create a {{ title }} that is easy to read in Japanese. Aspect ratio {{ aspect_ratio }}, bright off-white background, large 2x2 matrix in the center. The vertical axis is '{{ y_axis }}', with {{ y_low }} at the bottom and {{ y_high }} at the top, including an upward arrow. The horizontal axis is '{{ x_axis }}', with {{ x_low }} on the left and {{ x_high }} on the right, including a rightward arrow. {% for q in quadrants %}{{ q.position }} quadrant heading is '{{ q.label }}', background color is {{ q.color }}. Initiative cards are {{ q.items | join('、') }}. {% endfor %} Cards are white rounded rectangles with dark gray text and very light shadows. Display only the specified Japanese text accurately. Prohibited items: {{ negative_prompt }}.
Jinja2 HTML template
<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>
Replaceable variables
y_axis: Expected effect / Customer value / Urgency / Impact
x_axis: Implementation difficulty / Man-hours / Cost / Probability of occurrence
quadrants: Headings, color schemes, initiative cards
aspect_ratio: 4:5 / 16:9 / 1:1 / A4 portrait
Derivations by use case
Business improvement: Effect x Man-hours
New service: Customer value x Feasibility
Risk management: Impact x Probability of occurrence
Sales promotion: Sales impact x Preparation load
Human resource development: Importance x Learning difficulty
Common failures and correction prompts
Axes are inverted
Please fix the vertical axis so that bottom is low, top is high, with an upward arrow. Fix the horizontal axis so that left is low, right is high, with a rightward arrow.
Set the top-left as 'High effect/Low difficulty' and do not swap the positions of the quadrants or cards.
Japanese text is garbled
Please limit the text in the image to only the title, axis names, high/low labels, 4-quadrant headings, and 6 card names.
Delete any other explanatory text or decorative characters. If accurate text is required, generate only the background as an image and place the text later using HTML or a design tool.
Cards are duplicated
Display each initiative card only once and delete any duplicates with the same name.
Fix the total to 6 cards: 2 in the top-left, 2 in the top-right, 1 in the bottom-left, and 1 in the bottom-right.
Too much information
Remove descriptions, numerical values, and icons from the cards, leaving only short initiative names. Move details to a separate table and limit the 2x2 map to serving as an entry point for comparison.
Color scheme implies ranking
Avoid strong evaluative colors like red and green; distinguish the four quadrants using pale colors of similar brightness and saturation. Convey priority through positioning and headings.
\ Read from the beginning of this series /
\ See the next installment here /