webデザインの現場でこう使ってます。グラフィックレコーディング・リアルタイムドキュメンテーション・ファシリテーショングラフィック

ただいま有志で、グラフィックレコーディングのワークショップを企画しています。
過去3回のワークショップを経て、近々オープンな場でのワークショップ開催のお知らせをだせそうな状況なのですが。

ワークショップ内容を省察するたびに、自分にとっての「グラフィックレコーディング」「リアルタイムドキュメンテーション」「ファシリテーショングラフィック」ってなんなんだろうなって考えているので、いったんアウトプットしてみようと思いブログを書くことにしました。

「ビジュアルによる可視化」をやってるわけ

短期記憶が弱い自分が理解をするため

グラフィックレコーディング・リアルタイムドキュメンテーション・ファシリテーショングラフィックにせよ。
私は常に「短期記憶が弱い自分でも何かを理解するために、まずは自分が把握できるようビジュアルによる可視化をする→それを何度も見直していって体にたたきこむ」漫画書くになったので自然と絵を書く頻度が減っていき、美大にいくような画力は身につけることなく、高校時代を迎えました。

予備校の世界史の先生が教えてくれた、構造化と反復学習の大事さ

グラフィックレコーディングぽいことをしはじめたのは、高校3年生、まさに受験生の頃です。
高校2年生の冬、サミュエル・ハンティントンの『文明の衝突』を読んで、政治にがぜん興味がわいた結果。私は理系志望（作業療法士等考えてた）→文系志望に転向してしまいました。
文明を生み出した歴史、その文明の境界で衝突が起きている、という論にとても影響をうけたので、世界のことを知りたい→当然受験社会系科目は世界史に。

で、まっていたのは怒涛の暗記です。
志望校は超オタク・重箱の隅をつつくような世界史出題で有名な難関校。
理系から転向して2年生終わりから受験勉強をはじめた身に、大量の世界史暗記が重くのしかかりました。
短期記憶が人より脆弱な私にとってその暗記量は辛く、案の定予備校授業で赤点連発。チューターさんのすすめもあり、クラスを落とすことになりました。

そこで出会った先生が、こういったのです。
「僕は1日の授業でプリント4枚分（ノート見開き2つ分）進める。翌週テストするから、毎日このプリントをはったノートをながめなさい。」
「問題を解いたら、間違えたとこや追加のポイントをどんどんこのノートに書き込んでいきなさい。絶対に覚えられるから。」と。。

先生のプリントは、とても見やすいものでした。

世界史のストーリーが矢印で明確に示されている
中の文章も簡潔で、長文ではないリスト形式や表が中心
何と何がつながっている、という情報が伝えてくれる
その出来事の背景にある意味を伝えて、出来事と出来事をつなげてくれる
重要度（世界史受験で「日東駒専レベル」＝ピンク線（事象）・オレンジ線（人名）まで覚える　「MARCHレベル」＝青線まで覚える　「国立早慶上智レベル」＝緑まで覚える　）も分けており、志望校別に何を覚えるべきか、が明示されている

構造がはっきり見えて、毎日しかもそれを眺めるので、自ずとまず要素の『位置』が頭に入ってくるのです。
国民公会の次は、ヴァルミーの戦いか、とか。
次に、ノートの上部には国民公会、真ん中くらいに対仏大同盟、ページ下部にジャコパン派の恐怖政治がある、と思いだせるようになります。
そして、ある日ふと、全てが繋がってストーリーが頭のなかにわきでるようになるのです。

フランス史上初の男子普通選挙がおこなわれ、国民公会が成立した。共和政が開始したことで、他国は警戒。まずプロイセンと戦うこととなるが、ヴァルミーの戦いで勝利する。このときプロイセン軍にいたゲーテが『ここから、そしてこの日から、世界史の新しい時代が始まる』と言う。
↓
次にルイ16世が処刑されることで、他国の警戒はますますつのり、イギリス小ビットにより対仏大同盟が組まれる。内には王党派の反乱、外には対仏大同盟、フランス大ピンチ！
↓
このピンチから国を救うよう、ロペスピエールを中心にジャコパン派独裁が生まれる。1793年憲法を皮切りに、封建的特権の無償廃止、キリスト教の廃止を行い、政教一致の旧体制を壊そうとしていく。

この自分のノートとストーリーが頭の中に入ると、世界史の問題が一気に解けるようになりました。
偏差値も上がり、数値的成果もでたことで。
「自分にはこのやり方があっていたんだ！」という確信を得ました。
その後（悪名高い）AO入試で運よく第一志望入学が決まったため、結局受験に世界史は使わなかったのですが・・・親に頼みこんで、予備校のこの先生の世界史授業は最後まで受け続けました。

この先生の『全ての情報がまとまって構造化されたノートを、必要なときに常に反復して見返す』という姿勢が、私のその後の仕事・学習態度に大きく影響しています。

webデザインの現場でこうつかってます例

ビジュアルによる可視化の分類と、仕事での実務

ビジュアルによる可視化の分類は、グラグリッド三澤さんのスライドがとてもわかりやすいなーと思うので引用します。

Visualization for Creative project from Naoka Misawa

このうち、私が実務で使っているのはこんなかんじ。

私はファシリテーションにがっつり入りこむことも多いのが特徴。
ファシリテーションに入った時は絵をかくより合意形成に意識がむくので、リッチなグラフィックを書くことはほとんどなく、構造化メイン・テキスト中心となります。

1:ユーザーインタビュー用記録用カスタマージャーニーマップ

利用用途: ユーザーインタビュー用記録用としての、カスタマージャーニーマップ(As Is)
利用するもの: 紙：A3用紙　ペン：ジェットストリームプロ0.7mm黒
分類: スケッチノート　表現力×記録重視

ユーザーインタビューの記録に、私は記録担当として入ってグラフィックレコーディングを用いています。
テープおこしをすると、インタビュー時間の2倍は時間が必要です。
1時間のインタビュー→2時間の書き起こしをしてると実務がまわらないので、グラフィックレコーディングで対処しているという状況です。実業務における時間圧縮まじ大事。

インタビュー開始中はがりがり書いて、エピソード同士をつなげます。
インタビュー中も記録してるので、ユーザーの旅のうちどこのエピソードが薄いのかがわかるので、最後にいくつか自分でも質問し、空白を埋めています。
このとき、聴き逃して書ききれなかった項目も質問。
おまけの5分くらいで俯瞰し「このユーザーは通しで何が言いたかったのだろう？」を構造化していきます。
ここでかいたグラフィックレコーディングをスキャンし、AS ISのカスタマージャーニーマップ完成。

その後1枚のグラレコカスタマージャーニーマップ紙を原文とし、分析を行います。
絵が中心なので直感的にユーザーの体験を理解できるし、みやすくて振り返りがすぐにできるので、重要事項の抜き出しがとっても楽になります。

ただ、書くときは相当の集中力が必要なので、一日ぶっ通しでやるとへろへろになります。
あと、ペンのインクのへりもはんぱない。
途中で愛用ペンのジェットストリームが切れると絶望的な気持ちになります。
ジェットストリームのなめらかさは、スケッチノートにかかせません。

※なお、このパターンのグラフィックレコーディングは社外秘のためだせませんでしたが。
写真のもののように、グラフィックレコーディングして模造紙にはっていく、というカスタマージャーニーマップも産技大でつくったのであげています。

※カスタマージャーニーマップ(tobe)、構造化シナリオ法のうちのアクティビティシナリオ（価値を達成するための『体験』のシナリオ、UIとかの言及はなし。）を伝えるのにも同じようなものをかいていますが。
個人的に、漫画を書くと特にストーリーをうみだしやすいなーと思っています。
マンガ（つながる絵）をかくことで、主人公がどんな利用状況にいて、どんなことを見て判断して、どんな感情となるのか…を統合して考え、チームメンバーに伝えるきっかけとなるので。

2:業務用記録ノート

利用用途: 業務用記録ノート
利用するもの: 紙：スイングロジカルノート(A4大)　ペン：ジェットストリームプロ0.7mm黒
分類: スケッチノート、リアルタイムドキュメンテーション　文脈×記録重視

世界史ノートの思想が直接受け継がれたのがこのノート。
『全ての情報がまとまって構造化されたノートを、必要なときに常に反復して見返す』、そして業務を深く理解するために使います。

このスケッチノートに使うのは必ずスイングロジカルノート。
私のスイングロジカルノート愛は「お仕事での情報整理の救世主様、スイングロジカルノートを崇め奉る」という記事で語っています。

スケッチノートの便利なとこは、ノートをコピーすれば社内教育や引き継ぎに用いれる点。
グラフィックの量は多くはないですが、ある程度構造化してあるので、それみながらしゃべると伝わりやすいなーと思います。

※ちなみに、この写真のノートは産技大人間中心デザインの授業のノートです。
業務ノートはここまで情報つめきってはいない・・かな。

3:プロトタイプ+要件定義

利用用途: プロトタイプを用いた要件定義
利用するもの: 紙：模造紙+プロトタイプを書いたもの　ペン：プロッキー黒・赤　他：付箋
分類: ファシリテーショングラフィック、リアルタイムドキュメンテーション　文脈・表現×伝達重視

プロトタイプをたたき台に、皆の要件に対する発想を広げたり、収束させたり、合意形成していく場において使います。
以前はプロトタイプを人数分コピーして、会議でしゃべって伝達してたのですが。
「あそこの価格をここの価格表にもいれてほしい」とか、thatとかthisが多すぎになるのです。
しかも空中戦。みんな考えるのがめんどくさくなってきがちです。

最近関わった案件では、要件定義に関する合意形成を超短期で実施せねばならず。
印刷して会議で空中戦やって…てのがめんどくさかったので、プロトタイプを模造紙にはりだし、皆の意見を付箋に書きこんでプロトタイプの横にはって意見をだしあいました。
リアルタイムドキュメンテーションやってファシリテーションもしたところ。
一気に合意形成が進みました。

また、その張り出した模造紙を写真にとれば議事録もできるので、とってもらくちん。
反面、海外でのオフショア開発の人とこれをやるのは難しく、半ば納期に間に合わせるために強引にやって写真をおくったりしましたが・・・たぶん相手を困惑させてしまったかなと思っています。反省。

4:会議での合意形成

利用用途: 会議での合意形成
利用するもの: ホワイトボード　ペン：ホワイトボードマーカー
分類: ファシリテーショングラフィック　文脈×伝達重視

合意形成が必要な会議で空中戦になってくると、ホワイトボードにのりだして議論の流れを書きます。
上長がいようがいまいが、自分がわからなくなりそうだったら即書きます。
会議室のホワイトボードで「おばけ退治」をしている話でもふれたのだけど、「板書」の技術は会議の質を上げる上で本当に大事だと思うのです。

日本の会議で意外にないがしろにされているのが、議論のポイントを皆に読めるように大きく書き留めていく「板書」の技術だ。せっかくでてきたアイデアや議論の核を、ただ話っぱなしにしたり、書記や出席者が自分のノートにメモをとるだけでなく、皆野目の前に皆が読める形で大きく書き留めていくことは、議論の無用な繰り返しがへり、きちんと積み重なっていくためにも大切なことだ。
中野民夫ワークショップ―新しい学びと創造の場 (岩波新書)

板書だけ書くということは少ないです。
たいてい自分が進行役をすることが多く、議論を進めることに集中するため、グラフィックへさく時間は自ずと少なくなります。
ファシリテーショングラフィックで、さくっと書けるテキストメイン、議論を構造化していくのが中心。
で、ホワイトボードを写真でとって参加者へ共有すれば、それが議事録になるので超便利です。

大事なこと：ビジュアル化することで、ストーリー（流れ）を、自分の言葉で語れるようになること

どのシーンにおいても大事なのは、「ビジュアル化することで、自分の言葉でストーリーを語れるようになること」だと考えています。
受験のノートなり、仕事のホワイトボードも全て同じで。
それをみながら「このときの合意形成はこういう流れで、こういう理由があって、こう決まった。」と自分が自分の言葉で説明できるようになるのが大事。

ぶっちゃけると、「構造化」はあまり理解してなくてもできてしまうのです。（用語すらわからない、超専門領域の議論はさすがに無理ですが・・・）
山岸ひとみさんがその点を指摘しています。

理解のためのデザインを瞬間的に行っているのが、個人的にいちばん感心する点。IA業務などをしている人は、じっくり時間をかけて同じことをする。それを瞬発力でこなしていく感じ。実は本人が内容について理解していなくても成り立つのが面白いところで、理解はしていなくてもキュレーションはできる。その感覚もすごい。
その仕事、蠍は留守です「グラフィックレコーディングとリアルタイムドキュメンテーション」

私もこの感覚はわかり、実は最初に『聴く』段階では話の半分も理解できていません。
プレゼンや会議なら『論点、論拠（エピソード）、意見』、ブレストなら『アイディア、（直感的な）感想』、自己紹介なら『その人のエピソードA、エピソードB』とか、「今何をいっているんだろう？」でまずは書きわけます。
同じ話がでてくることはよくあるので、同じ話は同じところにどんどんつけ足していきます。

その後、すきまでいったんすべて書いたものをみなおして、一点一点の理解をおこなったうえで、「この人はココまで何がいいたかったんだろう？」と考えます。
矢印書いてつなげたり、反発しあわせたり。
この構造化をすることで、議論や人の全容がだんだん浮かび上がってくるんです。ほんと不思議なんだけど。
この感覚はKJ法のそれに近いです。

KJ法の利点
・俯瞰していくことで、個別の事象への視点だけれは導けないような、包括的な視点で発見ができる（とされる）
・先入観、偏見を排して、新たな視点からの発見や問題解決策を導き出すことができる（とされる）
発想ファシリテーション論(3:KJ法)　-産業技術大学院大学　「人間中心デザイン」

KJ法の「7:図解化、8：叙述化」の過程を、一人でやっていると考えるという状態。
ビジュアル化して「この人はココまで何がいいたかったんだろう？」と考え続け、つなげていくことが、『概念を整理してみた結果のつながりを見つけ、たりない何かを発見する』ことに繋がるのです。

ただ全てを書きだすだけはそう難しいことではありません。
聴いたことを分けて、つなげ、ストーリーを生み出し、「自分はこの議論をこうとらえた」と書ききることが、デザインの現場におけるビジュアル化においては一番大事なんじゃないかな、と思うのです。

だから私は、見えないものをビジュアル化するときは「自分はこうとらえた」って説明できることをひとつの品質としています。
自分が説明できそうにないなと感じた部分は、後からでもスピーカーに聞いて、理解できるまで書ききります。
自分が語れないストーリーを他人に伝えても、「意味がわからない」「ここってどうなの？」といつか言われ、答えに窮してやりなおすのがオチなので。
考え抜いてないことは、必ず人に伝わります。

自分がストーリーを語れるように考え抜いてこそ、プロジェクトでのメンバーの納得度や参加意欲が増し、ビジュアル化は真の力を発揮するのだと思います。