情報の構造化と視覚化「誰のためのドキュメンテーション？」in常葉大学
常葉大学の安武先生にお声掛けいただき、6/21(日)に静岡で開催された常葉大学未来デザイン研究会主催ワークショップに、成安造形大学からも4名参加させていただきました。
今回は新入部員の3年生がさっそく一緒に参加してくれることになったので、いつもよりテンション上がりぎみでした。
ワークショップは午後からだったので、午前中はハンバーグレストラン「さわやか」へ。前から常葉の皆さんにオススメしてもらっていたので期待マックスです。
看板がイカす。
開店時間の11時に少し遅れて到着すると、もうすでに40分待ち！さわやかの人気恐るべし・・・
そして窓の隙間から店内を覗くと、恐らく一番乗りの浅野先生が一番さわやかをされていました。(11時10分前に来るのが大事だそうです！)
もちろん私達も40分待ってさわやかしました。
・・・さわやかは最高！！
ここからは、ワークショップの振り返り。
情報の構造化と視覚化「誰のためのドキュメンテーション？」
講師は、はこだて未来大学の原田 泰先生です。
まず最初にリアルタイムドキュメンテーションの構想と可能性について講義をしていただきました。
「リアルタイムドキュメンテーション」って常葉の皆さんがやっていた付箋に書いて貼っていくあの手法の名称なんだと思っていたけれど、本当はもっと大きな概念としての名称だと分かりました。
ドキュメンテーション (documentation) は、何かを実証するために、あるいはコミュニケーションのために、ある情報を文書（ドキュメント）で表すことである
情報共有や全体の流れを掴むためにそれをリアルタイムで行うのが、リアルタイムドキュメンテーション。
そして、メディアの数だけ色んな手法がある。ビデオの記録をその場で編集したり写真を印刷してイベントの最後に本にしちゃう手法とか・・・紙でのRTDしか知らなかったからとても新鮮に感じました。実際に体験したらすごく面白そうです。
RTDの位置づけについて理解したら、ワークに入っていきます。
W1:グラフィックレコーディングとグラフィックデザインの違いの発見
A、B 2つの枠を作り、まずAの方に先生が順番におっしゃっていく図形を書いていきます。そして出来上がったAの画面の中にある図形を素材として、今度はBの画面に自由にレイアウトしていきます。
こうして出来上がった2つの画面には、同じ図形を使っているにも関わらず、大きな違いが発見できます。
Aの方はどんな図形がいくつ指示されるのか、何を目的としているのかが分からないまま書き進めていくので、自然とグリッドを作り出しそこに図形を当てはめるようなレイアウトになっています。
一方Bの方は自分が使っていい図形が全て分かっていて、レイアウトに「こんな雰囲気に仕上げたいな」という意図が生まれます。これにより自由で大胆な粗密を意識したレイアウトになります。
この違いこそがグラフィックレコーディングとグラフィックデザインの違いだそうです。
予測できない状態をまとめる力がグラフィックレコーディング。
あらかじめ用意されたもので意図を伝える力がグラフィックデザイン。
「表現」って一括りだと気が付きにくいですが、この2つは目的が全然違いますね。
W2:ことばと絵を両方使うことの必要性/絵だけの時のデメリットの発見
「わたし」「友達」「入る」「楽しい」などのことばを表す絵を、ポストイットにたくさん書き出します。
そしてたくさん生まれた絵を壁に貼り出し、「わたし」などのことばを取っ払ってみます。
するとことばが添えられていた時は「わたし」に見えていた絵が「人間」にも「服」にも見えてきます。
さらにさっき取り払ったことばを、今度はごちゃ混ぜにして貼添えていきます。
例えば「友達」を表現していたつもりのメガネの絵に「楽しい」のことばを添えると、だんだん「楽しい」の絵に見えてきたり・・・
これは(メガネが好きだから楽しいのかな・・・？メガネに楽しい思い出があるのかな・・・？)など、見る側がことばから想像を膨らませていくからです。
このように、情報の視覚化だからといって絵ばかりに頼ってしまうと、正確に伝わらないということが分かります。
ことばと絵を組み合わせた「図」で表現することが大切。
W3:文という表現が持っている構造の図式化
関係性を描く。
例文をどんどん図にしていきます。
文章は情報と情報が繋がり合って成り立ち、その関係性には色々な種類がある。
関係性色々
・因果
・位置
・時
・並列
・縦列
・空間
・上下
・包含
・レイヤー
・次元
・主従…etc
とにかく手を動かして、いろんな人の図を見て関係性の種類・表現方法を発見していきます。
そこで疑問に感じたのが、原田先生がおっしゃっていたイラストでもなく漫画でもない「図」としてのバランスってどんな感じ？ということ。
私は「隣の犬はうちの犬の2倍は体重がありそうだ」という例文に対しての
こんな表現が図っぽいかなあと思いました。
比較という関係性を犬の数とシーソーで表現していて、犬の「体重」を比較していることがよく分かる。
漫画っぽく表現するのも豊かで分かりやすいけど、逆にいろんな意味で捉えられ過ぎちゃう。だからピクトグラムのような記号に近い表現をすることでシンプルに伝えることが大切なのかなあと思いました。
W4:論を図にする
最後は新聞の記事をグループ毎に1枚の図にしてみます。
「文」から発展して「論」になるので、一番重要なポイントはどこか、どんな構造を持っているのか探っていきます。
部活で少し新聞のビジュアライズをやってきたからか、ポイントを絞って要らない情報を省く作業は割と出来るようになってました。
うまい〜！
結局何が伝えたいの？というところに絞って各情報をレイアウトしていきます。
私たちのチームはこんな感じ。記事の中の文章を細かく区切ってカード化した時に、その細切れのグルーピングにちょっと手間取った気がします。結局大分絞って、大筋を大切にまとめました。
芹沢さんという人物の存在と、戦争の経験〜本を通して伝わる彼の思いまでの流れをシンプルに構成。
他に面白かったのが年表のようなタイムラインで表現しているところ。時間の流れが分かりやすい！
他にも私達はあまり深めなかった芹沢さんの思いの部分を細かく分析しているチームがあったり、正解がない感じが面白かったです。
最後に「表現には2種類ある」というお話を図で紹介していただきました。
思考操作のための表現は、それを通して自分が体験して理解を得るもの。
伝達のための表現は、理解している事を意図を持って伝えるためのもの。
これって
これに似ています。
自分が理解するためのノートテイク的な記録を、グラフィックデザインの伝える力が支えて、みんなが使えるグラフィックレコーディングになっていくんですね。多分。
この2つの違いを理解しないままに、目的に合っていない表現方法でなんとかしようとしてきたこと、すごいあるなぁ・・・。
それがこの図やワークショップで理解できたということは、もうモヤモヤしないで済むし、やっぱり図解って素晴らしいなあと思います。
原田先生に教わることができたのも嬉しいし、常葉の皆さんと一緒に参加できたのがすごい嬉しかったです。ありがとうございました。
いい機会をいただけて、すごく恵まれているなー。
情報デザイン研究会の最近
4月から新聞ビジュアライズをしてきた私達成安造形大学情報デザイン研究会ですが、最近は振り返りのブログが久しぶりになってしまってました。
というのも、ここ1ヶ月ほどは新入生勧誘に力を注いていたからなのです。
実は情報デザイン研究会のメンバーは全員4年生で、深刻な後輩不足という問題を抱えていました。せっかく始めたのにこのままだと活動が1年で終わってしまうことに・・・！という危機感から、広報ポスターを作ったり、学内で勧誘イベントを行いました。
ポスターを作ってくれたのは4年の大川さん。
イベント当日は学生ホールでTED in Japanの動画をグラフィックレコーディングしました。
ド初心者な私達がもっともらしくグラフィックレコーディングとかやっちゃっていいのかな！？とも思いつつ、最近は動画をビジュアライズする練習もしていたので、腕試しも兼ねて挑戦してみました。
これは佐藤卓さんのグラレコ。
最近動画のグラレコ練習を始めて感じたのが、今まで1人でやっていた新聞ビジュアライズよりもなんだか納得度が高いということ。
動画だから情報は流れていくので1人じゃとても追いつかない。ので必然的にチームでやることになったのですが、最初はメンバーであーだこーだ揉めてうまくまとまらないんじゃないかなーなんて思っていました。
だけどポストイットに情報をカード化してしまえば、それをグルーピングしたり移動させてそれが目に見える形でメンバー同士共有されているから、逆にお互い納得しながら進められていく感じ。
目に見える形で共有されていればすれ違いが起きない、合意形成ができるっていうのを身をもって感じられた出来事でした。
新聞の時は1人でA4くらいの小さい画面に仕上げていたから結構自分の思い込みのままに描いてて、みんなに見せて初めてそのことに気づいていた。
けど大きな画面にチームで描こうとすると、描くと同時に考えて共有して落とし所を見つけて、っていういろんな作業が同時に進められていて面白かった。
今回のイベントでのグラレコで、チームで進めることの有用性をすごく感じたので、これからの活動には「チームでやる」っていうのを盛り込んでいきたいなと思いました。
そして現在、新入部員が3名入部してくれました〜！
これからもうちょっと増えそうな感じもあるし、後輩に迷惑かけないように組織としてのまとまりを作っていかねば。
新聞ビジュアライゼーション 3回目
4月15日に行った3回目の新聞ビジュアライゼーションを振り返ります。
今回の記事は「大学教員 減る教員時間」という記事です。
音読しメモを取る時間を7分程取ってから、15分でビジュアライズします。
1回目はこのようになりました。
各話題のまとまりを意識しつつ、始めに導入、最後にオチがくるような構成で書いてみました。
いつも最後に振り返っている記事の要点を、描き始める前に意識する事で流れが生まれ構成しやすくなったと思います。
今回の要点は4つです。
新聞では
・背景（大学教員の研究時間減）
・原因（初年次教育やアクティブラーニングなど学生対応の時間増）
・影響（作業の効率化を求める大学教員の声）
・現状（日本の論文シェア減）
という順で書かれていました。
それを私は話の流れを分かりやすくするために
・現状（日本の論文シェア減）
・背景（大学教員の研究時間減）
・原因（初年次教育やアクティブラーニングなど学生対応の時間増）
・影響（作業の効率化を求める大学教員の声）
の順に並べ替えて書きました。
でもメンバーがこれと同じ構成にしているわけではありませんでした。
ところが、それぞれ構成は違うけどそれぞれの見やすさがあるよね、という発見がありました。（それはイラストの入れ方とか構図のバランスによって。）
抽出した要点を自然な流れに組み直すと分かりやすくなるかなと思い試していましたが、どうも絶対的なこれ！といったものが必ずあるというわけではなさそうです。時と場合によって・・・
じゃあ描く順番にこだわるんじゃなくって、それぞれが影響しあっている関係性が分かるように描くといいかもしれないね。
ということで、相関図のような表現が出来ないか試してみました。
バランスの悪さに苦しみが現れています。
それぞれが繋がっているのは分かるけど、なんだかループしているようで関係性までは分かりません。無限スパイラルみたい・・・
ループしているから、どこから見たら良いのかが分からないし、何が１番言いたいのかが分からない。スペースの取り方が全部均等なのがまずい！
3回目もしっくりきませんでした。一応大学教員達を強調してメイン感出してみたけれど・・・ごちゃごちゃしています。情報のブロックをただ矢印で繋ぐだけだとやっぱり無限ループになるんだってば〜！
なんか1番最初に描いたのが1番見やすい。行き詰まって今回はここまででお手上げです。
1つのまとまりで表現できるので相関図にするの良いと思ったのですが、情報の関係の表現方法は引き続き研究していかねばと思います。ドラマの相関図とか見てみよう。
それと描き直しの時は時間を全然意識していなかったので、もっとタイトに描く意識をします。
先週UX KYOTO LTで浅野先生が
「グラフィッックレコーディングって今は過渡期で、
・グラフィックの向上 と
・ファシリーテーション力の向上（RTD寄りになる）の2つの方向性がある。」
とお話しされていたのがとても印象に残っています。
私達今は始めたばかりで、ただ何となく勉強になるね〜ってやってるけど、どっちの方向を目指していくんだろう。目指す方向性によって日々のトレーニング内容も変わるだろうし、ただやってるだけになりたくないなって思いました。
ただやってるだけにならないためにはどうする事が必要なんだろうな〜〜〜
新聞ビジュアライゼーション2回目
4月8日、2回目の新聞ビジュアライゼーションを行いました。
今回からは使える時間は90分なので、記事は1つしか出来ませんでしたが・・・！
今回はまず記事の整理をするために、ステップ2と3の間で軽く下書きを取る時間を取ってみました。（7分）
下書きと言ってもこんなレベルの汚さです。笑 でもみんな必死。
それを踏まえてビジュアライゼーション。（16分）
3つのまとまりがあるのが分かります。
上2つの関連性はまあ分かる。けど下の話唐突すぎないか！？
ディスカッションでその理由に気がつきました。
ビジュアライズする時は一枚絵のように描くから、起承転結のような、時間軸があった方が分かりやすそう。だけど新聞の構成の通りにまとめてしまうと、新聞は結論から書き始めるのでビジュアライズした時に不自然になってしまうというわけです。
今回の場合の押さえるポイントは
1. 東南アジアのテロ対策の内容
2. 東南アジアの構成
3. イスラム国の情勢
でした。でもこれは新聞に書かれていた順番の通りです。
これを情報の流れが生まれるように並べ替えると、こうなります。
1. イスラム国の情勢
2. 東南アジアの構成
3. 東南アジアのテロ対策の内容
まずイスラム国の事情、東南アジアの事情を順に説明する事で、イスラム国VS東南アジアという最後の構造に落ち着きます。
つまり、新聞の構成とは逆に描いた方が分かりやすいのでは？
前回のLINEの記事にも当てはめてみましょう。
新聞記事の構成では
1. 事業拡大のポイントはプラットフォーム戦略（プライベートからリアルへ）
2. PCからスマホへ
3. LINE世界進出・世界のライバルの話
でしたが逆にしてみると
1. LINE世界進出・世界のライバルの話
2. PCからスマホへ
3. 事業拡大のポイントはプラットフォーム戦略（プライベートからリアルへ）
ん？
最初よりは分かりやすくなったけどめちゃくちゃしっくりくるというわけではなかった。
本当はこの構成がいいかな〜と前回は順序づけたのだけど・・・。↓
1. LINE世界進出・世界のライバルの話
2. 事業拡大のポイントはプラットフォーム戦略（プライベートからリアルへ）
3. PCからスマホへ
「新聞と逆に描くと良いかも」というのは一概には言えませんでしたが、新聞の構成通りに描いても多分分かりにくいぞ、というのが今回の発見でした。
やはりビジュアライズする前にある程度分かりやすい流れにまとめておく作業は必要だったなと思います。下書きの時間は今後も設けた方が良さげですね。
それを踏まえて今回はやり直しを描いてみました！
ミスりました。今回作りたかった流れ
1. イスラム国の情勢
2. 東南アジアの構成
3. 東南アジアのテロ対策の内容
の2と3が逆だ！イスラム国も2回登場してるし混乱しそうです。もうちょっと1つの図に収めたい・・・
3度目の正直。
お！1つに収まった感がありませんか？やり直し、かなり大切ですね・・・3回やってやっとここまで見えてくる・・・険しき道ですね。
下書きの時間をどう使うかが来週の課題です。
最後に・・・描いてて思いましたが、ペン先が丸いペンは、たとえ太くてもあんまりかっこがつかないなぁと感じました。角張ったペン先のペンを買います。メンバーの子が使ってたステッドラーのペンが、太すぎず細すぎず、小さい紙に描くのには良さそうでした！（調べても見つけられなかった幻のペン）
新聞ビジュアライゼーション1回目
4月1日、初回の新聞ビジュアライズを行いました。（毎週火曜日に行っています！）
今回試したやり方はこの６つのステップです。
まず記事をいくつかピックアップしていきます。簡単そうなのと難しそうなのと両方を選んでいきました。
前知識があるものと無いもの、シンプルなものと複雑なものなどなど・・・
次に音読をしたのですが、音読は自分が声に出している文章を考えながら読むので、ただ読むより理解が深まると思いました。（部活としての一体感も出る。笑）
初回はまずウォーミングアップとして簡単なものから初め、次にちょっとチャレンジ記事をしました。
１つ目「LINE、街へ飛び出せ！」（15分）
うーん、それぞれのかたまりの関係性がよく分からない&どういう流れなのかが分からない。
それと、「アメリカVS中国VS日本」と表現したつもりなのに、「アメリカVS中国」にしか見えなかったり、伝えたかった事が絵に出来てない部分もチラホラ。
時間配分が出来なさすぎてそこまで気が配れなかった・・・。
今度は流れを意識して！
２つ目「ギリシャ改革断行を」（17分）
さっきは話が飛んでる感がありましたが、これは一応話の流れを意識しようとした跡がうかがえます。うかがえるのか？
だけど記事の情報に優先順位を付けられていませんね。ディスカッションした時に、情報は全部書こうとしなくても良いんだなって気が付きました。
ギリシャの立ち行かなさとかの背景はあるんだけれど、この記事の１番言いたい事は「ギリシャ改革断行してよ！」というEUのお願いの部分だと思いました。という事は下半分はもっと小さく書いてよかったし、書かなくても良かったかもしれません。そこの取捨選択は、誰に向けてビジュアライゼーションするかによって臨機応変にしなきゃいけないなーと思いました。
あと、顔イラストが多すぎると指摘されてしまいました。笑 簡単なのでつい描いちゃうけど、不必要なところには描かないように気をつけなければ・・・
そして今回１番まずかったのがペンの太さ！
強調できるような太めのペンを持っておくべきでした、準備不足。
ディスカッションでそれぞれアドバイスや良いところを共有したら、最後に記事で押さえるべきだったポイントをまとめました。
「LINE、街へ飛び出せ！」
1. LINE世界進出・世界のライバルの話
2. 事業拡大のポイントはプラットフォーム戦略（プライベートからリアルへ）
3. PCからスマホへ
「ギリシャ改革断行を」
1. EU「改革続行して」という意思↓
3. 年金支払いと借金返済の二重苦↑
4. EU・ギリシャ対話の期限が迫る焦り
最終的には3行4行でまとめられてしまいました。
このポイントを見て描けば、４コマ漫画みたいにまとめられそうです。
これが最初にまとめられたらいいんだよなぁ、どうやったらいいのかなぁ〜と思いつつ初めての新聞ビジュアライゼーションは終わりました。
（全部込み込みで2時間くらい。2時間で2記事しかできなくて、結構時間がかかるものだと分かりました。だからこそ時間制限設けてやるの大事！）
情報デザイン研究会について
私は去年の秋頃から、大学で情報デザインを学びたいメンバーで集まって
として部活動をしています。
と言っても何をしていいのかちんぷんかんぷんのまま始めてしまったので、去年はたいした活動は出来ずにいました。
そして、今年からはきちんと方向性を持って活動をしたいよね〜と思いつつも迷走していた私達ですが、顧問の先生の助け舟をいただいて、活動内容を決める事が出来ました！
それまでの流れを分かりやすい漫画でどうぞ。
というわけで、4月からはみんなで集まり新聞記事をイラストに描き起こしています。
初歩的な活動ですが、これが案外難しいです。文章の情報をイラストに変換して、グループ化して、取捨選択して、構造化して・・・情報を分かりやすく組み立てる練習です。
物事を捉える時の基礎の能力だなぁと思っているので、頑張って成長します。
UX KYOTO#06 ユーザー評価（実査）
先週1/18（日）に、UX KYOTO#06に参加しました。
今回はユーザー評価 3回シリーズの２回目で、ユーザー評価の実査編です 。
私は前回不参加だったのですが、前回は「ECサイトのユーザビリティ」をテーマに、ユーザー評価に向けたタスク設計・ そのタスクのパイロットテスト（タスク設計が妥当かどうかのテスト）を行ったそうです。
前回でタスク設計が完成したので、今回はそのタスクを使ってユーザー評価の実査に入ります。
モデレータと記録者を決めて早速始めていきます。
ステップはこんな感じです。
１被験者に何かを声に出して読んでもらう
２被験者にタスクを声に出しながらその通りにこなしてもらう（記録スタート）
３テスト終了
４これを4名分繰り返す
１被験者に何かを声に出して読んでもらう
来月プロトコルデータを書き出すために録画録音するので、きちんと声が滑舌よく出ている必要があるため。
ここでインタラクションシナリオを読んでしまわないように注意！
先に全部読んでしまうと、観察者が思った道筋で作業をしてもらえなくなるそうです。
私達のチームではECサイトの利用規約を声に出して読んでもらいました。
２記録スタート
被験者は前回作ったペルソナになりきって、「○○のカテゴリはどこだろう」とか「他の色も確認したいんだけどどこから見れば〜・・・」など、思っていることを口に出しながらタスクをこなしています。（思考発話法）それらの発言がキーとなって問題点が発見されます。
ですが人は熱中すると無口になるので、モデレーターは被験者の発言を促します。
ただし、被験者の質問には直接答えないように気をつける。「こうですか？」と聞かれても答えちゃダメ。「自分だったらどうしましたか？」などと返します。
そして観察者は観察シートに被験者の行動・発話とシステムの動きを記入していきます。
↑こんな風に、インタラクションシナリオに直接観察したことを書いていくと分かりやすいそうです。
この時点では来月書き起こすプロトコルデータとの違いがよく分かっておらず何を書けば・・・となりあまりメモする手が動きませんでした〜・・・普通にエラーや戸惑っていたところを書いたらよかったんですよね。
↓ちなみに下がタスクで上がインタラクションシナリオです。
被験者はタスクを読みながら。観察者はインタラクションシナリオに記録していきます。
３「終了しました」と言ってもらいテスト終了
終わったら感想をインタビューすることが大切！ 振り返りながら感想、詳細を聞き出します。
私は被験者としても参加したのですが、ペルソナとしてよりは自分として感想を言ってしまった気がします。難しい。
４これを4名分繰り返す
メンバー（エキスパートユーザー）１名・外部（ノービスユーザー）3名。（理想はメンバー2名・外部5名だそう）
観察が終わったら、模造紙にステップを構造化して問題点を発見するためにブレストしていきます。
ステップを構造化するというのは、
こういう感じにステップを大きくジャンル分けして見出しをつけることです。
こうやって分けておくことで、どのステップにエラーが起こったかが分かるようになります。
そしてグループの観察結果の模造紙が完成です。
私達のチームは、ペルソナ（お財布を握る姐さんワーキングマザー）が自分と夫の両親に、毛布のペアセットをそれぞれ同じセットで送る。というシナリオでした。
たくさんの問題点が発見できました。だけどこの時点では、問題の洗い出ししかできないそうです。たくさん問題点が密集しているからここは重要なはずだ！と思っても、実はそれらの重要度はそんなに高くなかったりとか。
なのでどの問題が重要かを「大」「中」「小」とメモして分けておきます。
次回のNE比分析では問題の重み付け（優先順位）までできるのだそうですが、浅野先生がおっしゃっていた「NE比での問題箇所と今回の観察結果が同期していると説得力がある」というのはここで分けた「大」「中」「小」との同期ということなのでしょうか。
（そしてもし同期していなかった場合は、何がいけないことになるのだろう・・・まずエキスパートとして問題点の優先順位を付けてみて、それをデータと照らし合わせて、自分達の考察は正しかった/間違っていたと確認するため？）
各チームプレゼン・講評もしていきます。
１番着目した問題点（「大」のところ）にぐっと絞って解決策を考えていたので 、Fチームの問題のプレゼンが分かりやすかったです。
やっぱり今回の観察結果の時点だと、全ての問題が同じレベルで、重み付けをしないと「全部直さなきゃ！」と思ってしまうのでなかなかしんどいと思いました。
そしてプレゼンの途中で先生が「△人いた中で○人が□□という行動をとった」という説明をするといいとおっしゃっていました。数字を出すと分かりやすくなる。
なのでそれから各チーム数字を使ってプレゼンをしていったのですが、主観が無くなり結果からの判断になるのでめちゃくちゃ分かりやすかったです。
次回は数値で見るのでまた違った結果が見えてくるのかと思うと楽しみです。
と同時に今回も追いつくので精一杯（「これは何のためにしてるの？」「あの作業とどう繋がるの？」とパニックに。今回はエキスパートとかノービス関係なくとにかく問題点の洗い出しだけをした！というのを終わってから理解しました。）
）だったので、ちょっとだけ心配です。
この3回シリーズの流れを忘れずに次回ものぞみたいです。
