07 | Showing the order before adding text. 4-step workflow diagram prompt design | Airi-chan

Introduction

You've created a procedure diagram, but readers get lost following the arrows. This isn't necessarily due to a lack of explanation.

Rather, it's often because numbers, headings, icons, and arrows are all presented with the same visual weight, creating too many entry points for the eyes. Let's tidy this up a bit.

This time, using the four steps of 'Collect → Organize → Verify → Share' as a subject, we will design a prompt that conveys the order without increasing the amount of text.

Design Intent

1. Make the numbers the first thing read

In a process diagram, make the numbers the largest, the verbs the second, and the icons the third in terms of visual weight. By separating their roles, even first-time viewers can process the 'order' and 'content' separately.

2. Keep headings as short verbs

Instead of 'Collect information,' use short verbs like 'Collect' for process names. When the style and length are consistent, it becomes easier to compare the cards.

3. Use a single route line

Adding arrows to every card can make it look like there are branches or backflows. This time, I connected 01 through 04 with a single route.

4. Do not use icons as a substitute for explanation

Icons support the content, but they shouldn't carry the weight of the process name itself. Even if the meaning is ambiguous, the standard should be that it can be read using only the numbers and verbs.

Example Commentary

The example is a vertical 4:5, 2x2 rounded card layout. I placed 01→02 on the top row and 03→04 on the bottom row, connecting them in an S-shape with a coral-colored line. The Japanese consists only of four short verbs. Prioritizing readability on smartphones, no explanatory text was included.

I did not include Airi-chan in the example, making the procedure itself the star. The decision not to use a character is also a design choice to protect the content you want to convey.

Complete Natural Language Prompt

縦型4:5の、4工程を一目で理解できる日本語の業務手順インフォグラフィック。背景は温かいオフホワイト。大きな角丸カードを2×2で配置し、左上から右上、左下、右下へ読む。各カードには、大きな番号、短い日本語見出し、単純なフラットアイコンを1つだけ置く。

表示する文字は「01 集める」「02 整える」「03 確認」「04 共有」の4つだけ。番号を最も大きく、日本語見出しを次に大きく、アイコンは補助として扱う。コーラルピンクの1本のルート線と小さな矢印で、01→02→03→04の順番を明確にする。

日本のモダンなエディトリアル図解。余白を広く、角は丸く、スマートフォンで読める太い文字。背景は#FFF9F2、主色は#FF8FB1、文字は#3E2E46、補助色は#BDEFE4、#BDEBFF、#FFE59B。

人物、キャラクター、ロゴ、ブランド、透かし、追加の文章、英語、細かい注釈、5つ目の工程、写真表現、3D表現は入れない。日本語の誤字、番号の重複、矢印の逆流、カードからはみ出す文字を避ける。

JSON Variables and Jinja2

The JSON variable examples and Jinja2 templates are included in the daily prompt file. The process is divided into three items: `number`, `label`, and `icon`, with color scheme, ratio, layout, and route set as independent variables.

Before generation, check the number of steps, empty headings, duplicate numbers, and unreplaced variables. In this example, all 4 steps have values, and there are no unreplaced variables, nulls, or empty strings.

Derivation methods

• Usage: SNS, presentations, A4 manuals, training checklists

• Composition: Horizontal row, vertical row, 2x2, circular

• Size: 4:5, 16:9, 1:1, A4 portrait

• Color scheme: Replace with brand colors. However, ensure contrast with the body text color.

• Steps: 3 to 6 steps. For 7 or more, do not cram them into one sheet; divide them by chapter.

Common failures and corrections

Japanese text breaks

Do not have it draw long sentences at once; limit the displayed text to short headings. When correcting, do not change the composition, just replace the text with 4 accurate items.

Arrows intersect

Instead of "add arrows," specify "a single continuous route from 01 to 04." Limit the arrows in each section to just one.

Everything stands out, making it hard to read

Clearly specify the size in the order of numbers, headings, and icons. Trim decorations and explanatory text, and increase the whitespace between cards.

Summary

The key to making a workflow diagram easy to understand is not adding information, but fixing the reading order.

Maximize the numbers. Shorten the verbs. Use a single route line. Relegate icons to a supporting role.

First, try dividing your daily work into four verbs. Once you can see the flow, you are ready to turn it into a diagram.

\ Read from the beginning of this series /

\ See the next work here /