図解の作り方｜文章を分かりやすい説明図に変える手順と具体例

図解で答える問いを決め、元文章を分ける

最初に「この図を見た人に、何を答えてほしいか」を一文にします。「写真を差し替える作業を全部説明したい」では範囲が広すぎます。この例なら、誰が何を渡す予定で、制作担当にどの確認が必要かに絞ります。公開後の成果や具体的なシステム操作まで同じ図へ足しません。

元文章を、先にそのまま残す

編集で意味を変えていないか戻って確かめられるように、図の元となる段落を残します。実資料を使う場合は、どの文書のどの版を使ったかも控えます。

架空の施工会社のWeb担当は、施工事例ページの写真を差し替えたい。対象ページと新しい写真を制作担当へ渡す予定です。制作担当は写真の掲載許可と表示サイズを確認する必要があります。確認用画面、公開承認、公開後の見え方はまだ確認できていません。

ここから、物・人の名前、関係を表す言葉、条件と未確認を分けて印を付けます。全文を同じ大きさで画像へ移すのではなく、問いへ答える単位を見つけるための作業です。

「対象ページ」と「新しい写真」は渡す物、「掲載許可」と「表示サイズ」は確認する条件です。似た四角で描く場合でも、見出しや線のラベルで役割が分かるようにします。写真そのものや実URL、実寸法はこの架空例では用意していません。

最初の下書きには、「Web担当が対象ページと新しい写真を制作担当へ渡す予定」と書きます。その下に「掲載許可・表示サイズの確認が必要」と残せば、図で見せる中心の関係が決まります。

意味に合う配置を選び、二つのラフを比べる

順番を伝えたいなら順序、違いを伝えたいなら比較、全体と部分なら構成、誰と何の対応なら関係の配置を選びます。型の名前に文章を押し込むのではなく、まず元情報が何を説明しているかを見ます。MicrosoftのSmartArt案内も、情報の種類に合わせてレイアウトを選び、方向などを変えると意味が変わり得ることを説明しています。特定の製品やテンプレートを使う必要はありません。出典：SmartArtグラフィックを選ぶ

順序を使うとき

手順や時点の前後を示します。ただし、この元文章には送付・確認・公開をすべて終えた記録がないので、公開成功まで一本道で結びません。

比較を使うとき

同じ問い・項目に対する違いを並べます。今回の比較対象は、同じ段落から作った二つの編集ラフです。実読者の理解が改善した前後比較ではありません。

構成・関係を使うとき

何を含むか、誰と何が対応するかを示します。今回の掲載候補は、渡す資料と必要確認を分ける関係図にします。箱の位置を、実際の部署配置や作業順序の証拠にはしません。

長文箱を、関係が読めるラフへ組み替える

不採用ラフは、元文章を長い文の箱へ分割しただけの案です。「渡す予定」「確認が必要」が別の文に埋もれ、読者が自分で対応を探す必要があります。掲載候補では、同じ事実を人・資料・確認事項に分けます。比べるときは、巨大な二枚を上下に置くより、同じ問いへの違いを近くで読む構成にします。

この並べ替えは、どちらが何秒で読めたかを測定した結果ではありません。読者へ確認するときは、「渡す物はどれですか」「まだ終わったと言えないものはどれですか」と尋ね、答えに迷う箇所を直します。正解を教えてから「分かりましたか」と聞くことだけで、図の読み取りを確かめたことにはしません。

渡す物と確認待ちが分かる関係図にする

図を見る問い：誰が何を渡す予定で、何を確認する必要がある？
Web担当と制作担当の間にある資料を見てから、制作担当に対応する確認事項と、別に残した確認待ちを読みます。

原寸画像を開く

図から読み取るのは、Web担当が対象ページと新しい写真を制作担当へ渡す予定だということです。掲載許可と表示サイズは確認が必要です。確認用画面が作られたか、承認されたか、公開後にどう見えるかは、この関係図では確定しません。

線の意味を短い言葉で書く

人と物を近くに置くだけでは、「保管している」「渡す」「作業が終わった」など、別の意味に読めます。予定の関係なら「渡す予定」、条件なら「確認が必要」と線や対応の近くへ書きます。色、太さ、矢印の向きにも役割をそろえます。大きい箱だから件数が多い、右側だから新しい、と元情報にない意味を持たせないでください。

確認用画面は、元データで作成状態が未確認です。単に「未作成」と断定したり、作成済みの見本画面から承認・公開へ進む線を描いたりしません。空欄や未確認を消して図をすっきりさせると、読者が判断する条件まで変わることがあります。

図に残す情報と、本文へ戻す情報を決める

図には渡す人と相手、資料、予定という関係、必要な確認、確認待ちの区別を残します。会社の前提、元文章、権利や寸法が未確認である条件、作業の未実施、二つのラフの位置付けは近くの本文で読めるようにします。情報を本文へ移すことと、説明から消すことは別です。

関係を抜き出す考え方は、日高由美子さんへのインタビューでも、対象全体の意味を読んで要素を整理する流れとして紹介されています。本稿では、その記事の例や図を写さず、ここに示す架空段落から自分たちの説明を作っています。出典：ソフトバンクニュースの図解インタビュー

実際の案件へ使うときは、写真の掲載可否を確かめる人、表示させる場所と必要寸法、確認用画面を誰が用意するかを、対象ページの担当へ確認します。この架空図を提出したことだけで、実写真の掲載許可や公開承認は得られません。

図の前後の本文と、alt・図注を組み立てる

ラフを清書する前に、図を置く章の問いと、その前後に何を書くかを決めます。手元の紙や使い慣れた作図機能で、同じ役割の要素を同じ見た目にし、関連する物を近くへ置き、ラベルが線と重ならない余白を確保します。道具を変えるだけで、関係の説明不足が解消するわけではありません。

図を入れる場所には、見る所と読み取りを書く

図の前

「誰が何を渡す予定か。Web担当と制作担当の間の資料を見ます。」と、読者の問いと見る場所を示します。

図の後

「対象ページと新写真を渡す予定です。掲載許可とサイズは確認が必要です。」と読み取りを言葉にし、未確認の条件から次の確認へつなぎます。

この章の次の行動

元文章と図の予定・条件が同じかを見直し、実案件では資料と確認担当をそろえます。図に表したことを、実送付や承認の実績として扱いません。

短いaltと、詳しい説明の役割を分ける

画像のaltには、何を表す図かを短く書きます。ここなら「Web担当から制作担当へ渡す資料の予定と、必要確認・確認待ちを分けた架空の関係図」のように識別できる説明にします。図注には説明用のラフであることと線の意味を、本文には判断に必要な関係や条件を置きます。図にある全ての文字を、長いalt一つへ詰め込む方法にはしません。

W3C WAIの複雑な画像の解説は、短い識別の説明に加え、画像が伝える重要な情報を文章でも提供し、周囲の本文から意味を説明する方法を示しています。本文に説明があれば、画像を細部まで読みにくい人も同じ条件を確認できます。ただし、altや図注が存在するだけで、実際の使いやすさやアクセシビリティ全体の合格を証明したことにはなりません。出典：W3C WAI Complex Images

写真は作業場面や対象物を想像する助けになるときに使い、予定・関係・違いを説明する図の代わりにはしません。生成画像も説明用と明記します。実会社や顧客の画面、図、資料を使う場合は、掲載できる権利と公開してよい範囲を先に確かめ、参考記事の独自の図や文章を写さないでください。

スマホの実幅と元文章を確かめて仕上げる

清書した画像を原寸だけで確認せず、実際の記事へ組み込み、図の前の問いから図後の説明まで続けて読みます。スマホの320px・390px程度の画面とPCで、本文が使える幅は余白やレイアウトによって変わります。画面幅と図が表示される実際の幅を区別し、細い文字、線の交差、切れたラベル、縦に長すぎる比較を確認します。

小さくする以外の直し方を選ぶ

横長の図を縮めて文字が読めなくなったら、関係のまとまりを保って並べ替える、説明の細部を本文へ戻す、問いごとに分けるなどを試します。比較は項目ごとに候補を隣接させ、二つの大きな画像を何画面も往復して覚え比べる形を避けます。数値や項目の一覧には表が向く場合もありますが、ページ全体のはみ出しと、範囲を明示した表の横スクロールは分けて確認します。

原寸画像へのリンクは細部を確認する補助です。原寸へ開けることだけで、本文内で読めない図を仕上がりにしません。スマホ用とPC用を別に作る場合も、人、資料、条件、未確認が同じかを元文章へ戻って確かめます。画像を無理に引き伸ばしたり、内容が切れるトリミングで関係を隠したりしないようにします。

元文章・図・隣接本文を一緒に読み直す

1. 対象と関係：Web担当、制作担当、対象ページ、新写真の取り違えがないか。「渡す予定」が「渡した」へ変わっていないか。
2. 必要な条件：掲載許可と表示サイズが、確認済みの結果へ変わっていないか。元資料にない寸法や権利の情報を加えていないか。
3. 未確認：確認用画面の作成、承認、公開後表示や理解の結果を、存在しない・終わった・効果があったと補っていないか。
4. 読む順と操作：見出し、図前の問い、ラベル、図後の条件が続けて読めるか。目次、詳しい説明、原寸リンクを使い、本文へ戻っても場所を見失わないか。

記事を公開した後は、実ページと一覧の冒頭画像をスマホとPCで見直します。図の文字だけでなく、図注の重複、画像の読み込み後の大きさ、切れ方、本文の説明との対応を確かめます。問い合わせの増減や検索順位は別の観測であり、図を直した前後の数値だけから因果効果を確定しません。

元の作業条件や資料の版が変わった場合は、関係する図と本文を一緒に更新します。日付だけを新しくして、確認していない条件を確認済みに見せないでください。記事を増やす企画・SEO全体の流れはオウンドメディアSEOのガイドへ、古い社内システム図の接続根拠を確かめる仕事はシステム構成図の確認手順へ分けて進められます。

まとめ：一つの段落から、伝えたい関係を描く

図解を作るときは、最初に読者が答えたい問いを決めます。元文章から人と物、関係、判断条件を取り出し、順序・比較・構成の意味に合う配置へ組み立てます。短いラベルと余白で中心の関係を示し、詳細と未確認は近くの本文にも残します。

この例なら、図で示す中心は「Web担当が対象ページと新しい写真を制作担当へ渡す予定」です。掲載許可と表示サイズは確認が必要で、確認用画面・承認・公開後の結果は未確認です。見やすく整えることと、その作業が終わったことを混同しません。

記事やサービス説明のどこを図にするか、説明の順序に迷う場合は、DREEXYへ相談できます。対象ページと伝えたい内容、今の説明で分かりにくい箇所を、個人情報や機密を含めずにお知らせください。支援範囲や費用は相談時に確認します。Web記事・サービス説明の相談へ