13 ・ ビジュアルと映像
図解・グラレコ
要素どうしの関係、順序、比較、変化を形と配置で示し、長い説明がなくても読み取れる図をつくるガイドです。伝えたいことを一文に決めるところから、説明なしで意味が伝わるかを確かめるまでを扱います。会議や講演をその場で描き留めるグラフィックレコーディングで進め方が変わる点も、各工程に書いています。
図解・グラレコの工程と判断
概要
図解は、文章で順に読むと分かりにくい関係を、一度に見渡せる形にする制作物です。このガイドで決めるのは、図で伝える一つの内容、その内容を表す関係の形、要素の配置、線と色の意味です。成果は、説明文を添えなくても主旨が読み取れる図です。
グラフィックレコーディング（グラレコ）は、会議や講演で話された内容を、その場で図と短い言葉に描き留める記録です。図解では伝えたいことを事前に決めますが、グラレコでは話の流れから描く内容を選びます。そのため、グラレコでは工程01と工程02をその場で行い、描き終えた後に話した人と内容を確かめます。グラレコで進め方が変わる点は、各工程に書いています。
図が伝わらないとき、説明の文字を足して補うと、図は文章の要約に近づき、一度に見渡せる利点が失われます。このガイドでは、伝わらない原因を構図から探し、構図を直す順に進めます。
着手時の材料
- 図で一番伝えたいこと
- 元資料（説明文、データ、議事の記録など）
- 要素と、要素どうしの関係、変化、比較の内容
- 見る人と、見る場面（掲示、配布、投影、画面）
- 使用サイズと、色の条件（白黒コピーなど）
向いている場面
- 文章で順に読むと分かりにくい関係を、一度に見渡せるようにしたいとき
- 手順の変更や比較を、短い時間で見る人に伝えたいとき
- 会議や講演の内容を、その場で図にして参加者と共有したいとき（グラレコ）
このガイドで扱わないこと
- 利用者の行動と分岐の設計。UXフローのガイドで扱います。
- 関係を示さない挿絵や装飾的な画像。イラスト・画像素材のガイドで扱います。
- 図に載せる数値の調査と、比較条件の確認。調査レポートのガイドで扱います。
近いガイドとの違い
- UXフローのガイドは、利用者の行動と分岐を設計して決める制作物を扱います。このガイドは、すでに決まった関係を見る人に伝えるための図を扱います。
- スライド・発表原稿のガイドは、話の順序とページごとの主張を決めます。このガイドは、そのページの主張を図にします。
- 調査レポートのガイドは、資料を比較して結論と条件を確かめます。このガイドは、確かめた内容を図で伝えます。
- イラスト・画像素材のガイドは、関係を示さない挿絵や装飾的な画像を作ります。
- 絵コンテ・動画・モーションのガイドは、関係の変化を時間の順序で見せます。
全体の流れと分担
工程は01から05へ進みます。工程03で人が構図を選び、工程05で説明なしで意味が伝わるかを人が確かめます。構図が決まったあとは、図から何が読み取れるかの確認を、制作に関わっていない確認担当に頼めます。工程05で読み違えが見つかったら、工程03へ戻って構図を直します。
工程ごとの分担
| 担い手 | 01伝えたい一文 | 02関係の整理 | 03構図のラフ | 04図を仕上げる | 05図だけで確認 |
|---|---|---|---|---|---|
| 人 | 判断：伝えたい一文を決める | 判断：入れる要素と主軸の関係を選ぶ | 判断：構図を選ぶ | 判断：仕上げの方法を選び、仕上がりを確かめる | 判断：伝わったかを判断し、直す箇所を決める |
| AI | 要素を抜き出し、候補文を出す | 要素を関係の種類ごとに分類する | 線画や手描き風のラフを作る（環境があれば） | 図解ツールで清書する（環境があれば） | 発言を記録し、一文と照らす |
| 担当デザイナー | なし | なし | 担当がいる場合、ラフの描き起こしと構図の提案 | 担当がいる場合、清書 | なし |
| 確認担当 | なし | なし | なし | なし | 説明なしで図を見て、分かったことを言う（構図が決まったあとに頼める） |
迷ったときの参照先
手元の状況に近いものから、該当する節を開いてください。
015工程のうち1
一番伝えたいことを決める
図を見た人に何を分かってほしいかを、一文で決めます。
考え方
元資料の情報をすべて図に入れようとすると、要素が増え、どの関係が主旨なのか分からなくなります。最初に、見る人が図から何を分かればよいかを一文で決め、それに必要な要素だけを工程02で選びます。
一文には、見る人、見る場面、分かってほしいことを含めます。同じ内容でも、掲示を通りがかりに見る人と、手元の配布物を読む人では、図に入れられる要素の量が違うためです。
グラレコでは、会議の目的や講演のテーマから、記録に残したい論点を事前に決めておきます。話の途中で論点が変わった場合は、変わったこと自体を図に残します。
推奨と理由
一文に、見る人と見る場面を含める
理由見る場面によって、図を見る時間と距離が変わります。この二つが、要素の量と文字の大きさを決める基準になります。
元資料で重要でも、一文に関係しない要素は図の外に置く
理由細かな決まりや例外は、元の文書や問い合わせ先で扱えば、図の主旨が保たれます。
次へ進む目安
- 伝えたいことが一文で書けている
- 一文に、見る人と見る場面が含まれている
- 図の外に残す情報と、その情報を載せる先が決まっている
具体例
ごみ収集ルールの変更を知らせる図
説明のための架空の例です。ある地域の自治会が、ごみ収集のルール変更を住民に知らせる図をつくります。これまで燃えるごみに出していたプラスチック製の容器包装を、分けて水曜日に出すように変わります。図は回覧板と集会所の掲示に使い、回覧板は白黒コピーで配ります。見る人には高齢の住民も多く含まれます。以降の工程でも同じ例を使います。
- 元資料
- 品目の一覧、収集曜日の表、細かな分け方の注意を含む4ページの通知
- AIの整理
- 元資料から要素を抜き出し、伝えたいことの候補文を3つ出した。
- 伝えたい一文
- 回覧板を見た住民が、プラスチック製の容器包装は燃えるごみから分けて水曜日に出すと分かる。（自治会の担当者が選択）
- 図の外に置く情報
- 洗い方などの細かな注意。通知の本文に残す。
025工程のうち2
要素の関係を整理する
図に入れる要素を選び、要素どうしの関係の種類と、主軸にする関係を決めます。
考え方
関係の種類によって、それを表すのに適した形が違います。順序は左から右や上から下への流れ、比較は並べた列、包含は入れ子、変化は前と後の対で表すと、見る人は形から関係を読み取れます。一つの図で複数の関係を同じ強さで表すと、どれが主旨か分からなくなるため、主軸にする関係を一つ決めます。
要素は、工程01の一文を説明するのに必要なものに絞ります。AIが分類した一覧から一文と関係しない要素を外し、残った要素の数が、見る場面で読み切れる量かを確かめます。要素を代表例に絞るときは、例が一文の対象の範囲を超えないものを選びます。
グラレコでは、話を聞きながら、出てきた要素がどの関係に当たるかを判断し、描く位置を決めます。主軸の関係は、事前に決めた論点から仮に置いておきます。
推奨と理由
主軸にする関係を一つ決める
理由主軸が決まると、工程03で構図の案を比べる基準になります。
関係の種類と、それを表す形を対応させる
理由形と関係が対応していれば、見る人は文字を読む前に関係の種類をつかめます。
代表例は、一文の対象の範囲に収まるものを選ぶ
理由対象の外にある例が一つ混ざると、見る人は対象が広がったと受け取ります。図では例が少ないぶん、一つの例が範囲の理解を左右します。
次へ進む目安
- 図に入れる要素が、一文を説明するのに必要なものに絞られている
- 主軸の関係が一つ決まっている
- 代表例が、一文の対象の範囲を超えていない
具体例
ごみ収集ルールの変更を知らせる図
- 残った要素
- 品目（プラスチック製の容器包装、それ以外の燃えるごみ）、曜日（月曜・木曜、水曜）、変更の前と後
- 主軸の関係
- 変化。変更前と変更後の対で表すことにした。
- 品目の例
- 代表的な3つ（食品のトレー、お菓子の袋、洗剤の容器）に絞った。いずれもプラスチック製の容器包装で、対象の範囲を超えない例を選んだ。
035工程のうち3
構図のラフを作る
主軸の関係を表す構図の案を比べ、仕上げる構図を一つ選びます。
考え方
ラフの段階では、色や絵柄を決めず、形と配置だけで比べます。仕上がりの印象で選ぶと、関係の読み取りやすさを比べられなくなります。
比べるときは、ラフの文字を伏せた状態でも、主軸の関係が形から分かるかを見ます。文字を伏せると分からない構図は、仕上げても、文字を読まなければ理解できない図になります。
推奨と理由
ラフは色を使わずに比べる
理由色の印象で選ぶと、白黒や縮小したときに伝わるかを判断できません。
文字を伏せた状態で比べる
理由文字を伏せても分かる構図は、文字を読む時間が短い人にも関係が伝わります。
判断の材料
- 形と配置だけで描いた2〜3案のラフ
- 文字を伏せた状態のラフ
- 使用サイズで表示したラフ
- 工程01の一文
次へ進む目安
仕上げる構図を一つ選びます。次の条件を満たす構図を選びます。
- 文字を伏せても、主軸の関係が形から分かる
- 視線の入口が一つで、読む順序が配置から分かる
- 使用サイズで、要素と線を見分けられる
どの案も文字を伏せると分からない場合は、工程02の主軸の関係や要素の数を見直します。
具体例
ごみ収集ルールの変更を知らせる図
- 比べた案
- 曜日の表に変更点を書き込む案、変更前と変更後を左右に並べる案、品目が燃えるごみの枠から水曜日の枠へ移る矢印を描く案の3つ
- 文字を伏せた結果
- 表の案では、何が変わったか分からなかった。移る矢印の案は、文字を伏せても品目が移動したことが分かった。
- 人の判断
- 移る矢印の案を選んだ。
045工程のうち4
図を仕上げる
選んだ構図を、使用サイズと色の条件で読める図に仕上げます。
考え方
仕上げる方法は、図の性格で選びます。フローや技術的な図のように正確さと直しやすさが必要なものは、図解ツールで編集できる形で作ります。手描きの温かさが必要な説明図には、手描きや画像生成を使います。画像生成で作ると、図中の文字が崩れたり誤字が入ったりすることがあるため、ラベルは編集できるテキストとして後から載せます。
線と色の意味は、図全体で一つずつに決めます。実線は流れ、破線は必要に応じて行う流れのように決めたら、同じ図の中で別の意味に使いません。色に意味を持たせる場合は、形や線の種類でも同じ区別をつけ、白黒でも区別が残るようにします。
推奨と理由
ラベルは編集できるテキストで載せる
理由画像の中に生成された文字は、誤字があっても直しにくく、内容の変更にも対応しにくいためです。
線と色の意味を、図の中で一つに決める
理由同じ線が場所によって別の意味を持つと、見る人が関係を読み違えます。
次へ進む目安
- 線と色の意味が図全体で一貫している
- 白黒にしても区別が残る
- ラベルに誤字がなく、編集できる
- ラベルと品目の名前が、工程01の一文と同じ対象の範囲を示している
具体例
ごみ収集ルールの変更を知らせる図
- 仕上げの方法
- やわらかい印象にするため、品目の絵と、燃えるごみ・水曜日それぞれの枠に置くごみ袋の絵は、手描き風の画像生成で作った。矢印、枠、ラベルは図解ツールで描いた。
- 白黒への対応
- 水曜日の枠は、色を変えたうえで太い線でも囲み、白黒コピーでも目立つようにした。
- ラベル
- 見出しのラベルは「これまで」「これから」「水曜日」「プラスチック製の容器包装」の4つに絞った。品目の絵には「トレー」「お菓子の袋」「洗剤の容器」の短い名前を添え、対象がプラスチック製の容器包装に限られることが分かるようにした。
055工程のうち5
図だけで伝わるか確認する
説明を添えずに図を見せ、工程01の一文と同じ内容が読み取れるかを確かめます。
考え方
確認は、制作に関わっていない人に頼みます。制作した人は内容を知っているため、図に描かれていないことまで読み取れてしまいます。確認する人には事前に説明をせず、図から何が分かるかを自分の言葉で言ってもらいます。
確認した人の言葉は、一文と対象の範囲まで照らします。「プラスチック製の容器包装」を「プラスチック全般」と受け取るように、省略によって範囲が広がっていないかも、食い違いとして扱います。
伝わらなかった場合は、説明の文字を足す前に構図を見直します。文字を足すと、その場では伝わるようになっても、見る人は文字を読まなければ理解できなくなり、図にした意味が薄れます。
グラレコでは、描き終えた記録を話した人に見せ、発言の意図と図の表し方が合っているかを確かめます。異なる場合は記録を直し、直したことが分かるように残します。
推奨と理由
確認する人には、図を見せる前に説明をしない
理由事前の説明があると、図そのものが伝えているかを確かめられません。
確認した人の言葉を、一文と対象の範囲まで照らす
理由主旨が合っていても対象が広がって伝わると、見る人は対象外のものまで同じように扱います。
判断の材料
- 使用サイズと色の条件で出力した図
- 工程01の一文
- 確認した人の発言の記録
次へ進む目安
説明なしで意味が伝わるかを確かめます。次の条件を満たしていれば、図を渡せます。
- 確認した人が、一文と同じ内容を、同じ対象の範囲で自分の言葉で言える
- 関係を読み違えた箇所がない
- 直した場合は、直した図をもう一度、制作に関わっていない人に見せて確かめている
読み違えがあれば工程03の構図へ、要素が多くて読み切れない場合は工程02の要素の選び方へ戻ります。
具体例
ごみ収集ルールの変更を知らせる図
- 確認した人
- 自治会の役員でない住民2人。白黒コピーした図を、説明をせずに見せた。
- 発言
- 2人とも「トレーや袋のようなプラスチックの容器包装は、燃えるごみから分けて水曜日に出す」と答えた。ただし1人は、水曜日の枠に描いたごみ袋の絵を見て「専用の袋を買う必要がある」と受け取った。
- AIの整理
- 品目の範囲と曜日は、2人とも一文と一致していた。食い違いは、ごみ袋の絵の受け取り方の1点だった。
- 直したこと
- 水曜日の枠のごみ袋の絵を外し、品目の絵が水曜日の枠へ移る形に直した。直した図を別の住民に見せ、対象の品目と曜日が同じように読み取れ、専用の袋の誤解が出ないことを確かめた。
成果を渡す先
仕上げた図は、発表や動画など他の制作物の材料になります。図とあわせて、図が示す一文を渡すと、受け取った側が図の主旨を変えずに使えます。
| 渡す先 | 渡すもの | 渡す時点 |
|---|---|---|
| 15 スライド・発表原稿 | 仕上げた図と、図が示す一文 | 発表のページに図を置くとき。図とレイアウトを作る工程で配置する |
| 14 絵コンテ・動画・モーション | 仕上げた図と、伝えたい一文 | 関係の変化を時間の中で見せたいとき。伝える順序を考える工程の材料にする |
| 11 イラスト・画像素材 | 使う場所とサイズ、図全体の絵柄 | 図の中の挿絵だけを作るとき、または関係を示す必要のない画像を作るとき |
先に開くガイド
- 利用者の流れがまだ決まっていない場合は、UXフローのガイドで、利用場面を調べる工程から流れを決めます。決まった流れを説明資料に載せる段階で、このガイドの工程01へ戻ります。
- 図に載せる数値や比較の根拠が確かめられていない場合は、調査レポートのガイドで比較条件と時点をそろえてから図にします。
このガイドへ来るとき
スライド・発表原稿のガイドでページの主張を図にするときは、そのページの主張を、このガイドの工程01の一文として受け取ります。見る場面は投影サイズとして扱います。