07｜文字を増やす前に、順番を見せる。4工程の業務手順図プロンプト設計｜あいりちゃん

はじめに

手順図を作ったのに、読む人が矢印をたどって迷ってしまう。これ、説明不足とは限りません。

むしろ、番号、見出し、アイコン、矢印が同じ強さで並び、視線の入口が増えすぎていることがあります。ここ、ちょっと整理しよっ。

今回は「集める→整える→確認→共有」という4工程を題材に、文字を増やさず順番を伝えるプロンプトを設計します。

設計意図

1. 番号を最初に読ませる

工程図では、番号を最大、動詞を2番目、アイコンを3番目の強さにします。役割を分けることで、初見でも「順番」と「内容」を別々に処理できます。

2. 見出しを短い動詞にする

「情報を集めます」ではなく「集める」のように、工程名は短い動詞へそろえます。文体と長さがそろうと、カード間の比較もしやすくなります。

3. ルート線を1本にする

矢印をカードごとに追加すると、分岐や逆流に見えることがあります。今回は01から04までを1本のルートでつなぎました。

4. アイコンを説明の代わりにしない

アイコンは内容を補助しますが、工程名そのものを背負わせません。意味が曖昧でも、番号と動詞だけで読める状態を基準にします。

作例解説

作例は縦型4:5、2×2の角丸カードです。01→02を上段、03→04を下段に置き、コーラル色の線でS字につなぎました。日本語は4つの短い動詞だけ。スマートフォンでの可読性を優先し、説明文は入れていません。

あいりちゃんは作例へ入れず、手順そのものを主役にしました。キャラクターを使わない判断も、伝えたい内容を守る設計のひとつです。

自然言語の完全版プロンプト

縦型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変数とJinja2

JSON変数例とJinja2テンプレートは、日次プロンプトファイルへ収録しています。工程は `number`、`label`、`icon` の3項目に分け、配色・比率・レイアウト・ルートを独立変数にしています。

生成前に、工程の数、空の見出し、番号の重複、未置換変数を確認します。今回の作例では4工程すべてに値があり、未置換・null・空文字はありません。

派生方法

• 用途：SNS、プレゼン、A4マニュアル、研修チェックリスト

• 構図：横一列、縦一列、2×2、円環

• サイズ：4:5、16:9、1:1、A4縦

• 配色：ブランドカラーへ置換。ただし本文色とのコントラストを確保

• 工程：3〜6工程。7以上は1枚へ詰めず、章ごとに分ける

よくある失敗と修正

日本語が崩れる

一度に長文を描かせず、表示文字を短い見出しへ限定します。修正時は構図を変えず、文字だけを正確な4項目へ置き換えます。

矢印が交差する

「矢印を追加」ではなく「01から04まで連続する1本のルート」と指定します。各区間の矢印は1つだけに制限します。

すべてが目立って読みにくい

番号、見出し、アイコンの順に大きさを明記します。装飾や説明文を削り、カード間の余白を増やします。

まとめ

手順図を分かりやすくする鍵は、情報を足すことではなく、読む順番を固定することです。

番号を最大にする。動詞を短くする。ルート線を1本にする。アイコンは補助へ戻す。

まずは普段の作業を4つの動詞へ分けてみてください。流れが見えたら、図にする準備はできています。

\ このシリーズの最初から読む /

\ 次回の作品はこちら /