議論や会話をリアルタイムで絵に描き、可視化して共有する手法であるグラフィックレコーディング。その概要やコツを解説する前編に続き、後編ではシステム＆デザイン本部 デザイン戦略部の和波里翠が実際にどんなことを考えながらグラフィックレコーディングしているのかを、彼女が参加したミーティングの模様をレポートする形でご紹介します。
今回参加したのは、小説やコミックなどの投稿コミュニティサイト「エブリスタ」のUI・UX改善ミーティング。参加者は「エブリスタ」のプロダクトオーナー 佐久間亮とデザイナー 玉腰理恵、そして普段はヘルスケア事業のUI・UXデザイナーを務めている和波里翠の3名です。和波はいかにして会話の内容を整理し、グラフィックレコーディングに“フルスイング”しているのか。そのノウハウをぜひご覧あれ！
【前編】会議の「伝わらない！」を可視化で解決。描いて語るグラフィックレコーディング
目次 [非表示]
①徹底的にヒアリングして全体像を把握する
佐久間：UI・UXの改善方法を考えるにあたり、まずは「どういった経路で読者が『エブリスタ』へたどり着いているか」を整理したいと思います。Googleで検索してサイトを訪問するケースもありますし、「エブリスタ」の作家さんがTwitterなどのSNSで「私の書いた小説を読んでください」とシェアするケースもあります。
ゲーム・エンターテインメント事業本部
IPプラットフォーム事業部開発三部サービス開発グループ 佐久間 亮（写真左）
2008年にDeNAに新卒入社、複数の新規事業の立ち上げに携わった後、エブリスタのプロダクトオーナーに就く。現在はマネージャーとしてサービスの企画・開発を担当するメンバーを統括。なお、2016年に他社に転職した後わずか9ヶ月で復帰した経歴が有り、人事に頭が上がらない。
そして、流入経路によっても読者の性質が変わってくるんです。例えば、Twitterから来た方は特定の作品を目当てにサイトに来訪しているので、その作品が面白くない場合はすぐに離脱してしまいます。面白かったら本棚に入れてくれます。
和波：本棚は、お気に入りの作品をブックマークできる機能ですよね？
システム＆デザイン本部デザイン戦略部UI/UXデザイン第二グループ 和波里翠
2015年にDeNA中途入社。UI・UX・グラフィックデザイナー。新規事業中心に現在はDeNAライフサイエンス「歩いておトク」のプロダクトデザインに従事。グラフィックレコーディングは生放送Web授業講師や行政シビックテックの現場やTV番組など全国200箇所以上で行っている。
佐久間：そうです。一方、Googleで検索して流入してくる読者はもう少し複雑な行動パターンになります。サイトに流入した後、TOPページで作品を探したり、「さがす」コーナーに遷移して、より趣向に沿うものを探索します。
作品へたどり着く経路は、他にも「特集」「タグ」「ランキング」「注目キーワード」など、さまざまなケースがあります。また、「恋愛」「ファンタジー」「SF」といったジャンル分けもしていて。こうしたカテゴリーを経由したうえで、何かしらのお気に入り作品にたどり着いてもらえるような工夫をしているんです。
和波：なるほど。一度サイト内を巡回して、お気に入りのジャンルなどを見つけてから作品を読むんですね。
佐久間：はい。TwitterなどのSNSから来た「読みたい作品が決まっている方」と、Google検索から来た「読みたい作品が決まっていない方」の行動は明確に異なっています。
前者の方には「読みたい作品をすぐに見つけられるようにすること」が、後者の方には「読みたいと思えるようなカテゴリーや作品を提示すること」が重要になります。それから「さがす」ページ以外に、サイトのトップページから作品を探してもらえるような設計も考えなければいけません。
和波：なるほど！ 読者がどうやってサイトを訪問するか。そしてどんな行動をとるのかが理解できてきました。
②矢印を使ってフローをわかりやすく示す
佐久間：ここまでが作品を見つけるまでのフローです。普通ならそこで読み終えておしまいだと思うのですが、「エブリスタ」はちょっと違います。連載マンガのように、作家の方が定期的に作品を小出しにしていくんです。そして本棚に入れておいた作品が更新されると、読者に通知されます。
玉腰：更新頻度は作家の方によってバラバラで、どの作品がいつ更新されるかわからないんです。毎日更新している方もいれば、毎週更新している方もいます。それから、最初から完結している作品を出す作家の方もいるんです。
システム＆デザイン本部デザイン戦略部UI/UXデザイン第一グループ 玉腰理恵
上智大学理工学部情報理工学科卒業後、2013年DeNAに新卒入社し、ゲームチームにて数ヶ月ディレクター職に就く。デザイン未経験の中、楽しさ・必要性に気づきチャンスを貰いデザイナー職へ転向。新規事業・ゲームプロモーション案件や、Anycaの立ち上げから運用に携わる。現在は、UI/UXデザインをメインにエブリスタを支えつつ、チーム内のデザイナーを束ねている。
自身のライフスタイルに合わせて更新していらっしゃるので、更新頻度が違うのは当然のことなんです。
和波：まだ続いている作品か、完結した作品かを見分けることはできますか？
玉腰：「完結」と「連載」とで作品のステータスを分けています。
佐久間：「連載」の場合、その作品を本棚に入れている読者が作品を読む起点の多くは更新通知から、もしくはマイページを開いたとき。「完結」の場合、起点の多くはマイページからです。そして作品を読み終わった次のアクションとして、読者に「他の作品も読もうかな」と思ってもらうため、なんらかの導線を設けることが重要になってきます。
和波：確かにそうですね。作品を連載を読み終えて「この後どうしようかな」と迷っている読者に他の作品を紹介できれば、離脱率がだいぶ下がりますね。
玉腰：そうですね。そこで読者がスマホを閉じるか、次の作品を読んでくれるのかでだいぶ変わってくると思います。
和波：作品を読み終えた後は、レコメンドを出すのと、「さがす」に遷移するのとどっちがいいんですかね？
佐久間：今は、読了画面の末尾にレコメンドを出しています。でも、読者によっては「レコメンド作品は読みたくない。自分で探したい」という方もいると思うので、それは読者の方ごとに出し分けていく必要があるのかな、と考えています。
和波：私、その読者の気持ちがすごくわかります。けっこう私もそっちのタイプです（笑）。
例えば、少年向けのアツいバトル作品を読んでいたとしても、次に恋愛モノを読みたいときもあるんですよ。「少年向けの作品はもう読んだから、連続では読みたくない」という感じに。だから、レコメンドで似た系統の作品をだされても、私は「うーん……」となってしまうかもしれません。
それをどう最適化するかが、読者の離脱を防ぐカギになってきそうです。話に登場してきたフローをまとめると、こんな感じですかね。
佐久間：矢印でフローが可視化されると、だいぶわかりやすくなってきましたね。
③質問＆要約して具体的な話を引き出す
和波：玉腰さんは、普段どんな使い方をすることが多いですか？
玉腰：私は自分で詳細検索をして、お気に入りの作品を見つけるより、ある程度レコメンドしてもらった方がいいですね。読みたいもののイメージが明確に決まっているわけではないですし、思わぬ出会いもあったりするので。けれど、「エブリスタ」をよく利用していて、好きなシーンや設定がある方は詳細な作品検索ができる「さがす」機能に誘導する必要があると思います。
和波：なるほど。読者の性質によっても、出し方を分けたほうがいい可能性はありますね。例えば、よく利用してくださっている読者に対しては検索機能を充実させて、ライトな読者に対しては各ジャンルのランキングを表示する、とか。
佐久間：読者1人ひとりに最適な探し方やレコメンドを提供したいんですけど、その中でも検討すべき材料がたくさんあって。読み終えたら「さがす」のページに誘導すべきなのか、それとも他の手段で検索してもらうべきなのか。それから、そもそもGoogleからの検索とか広告で流入してきた方には最初から「さがす」のページに来ていただいた方がいいのかも、とか。
和波：なるほど。流入してきた経路や、読者の性質などによって遷移させるページや表示する項目を調整していかないといけないんですね。
佐久間：そうですね。最低限、ログインしている方としていない方とか、よく使ってくださっている方と新規のお客さまとで、表示項目を出し分けることは必要になってくると思います。
和波：読者の性質ごとに、モチベーションを感じる部分が全然違いますもんね。
佐久間：UI・UXを改善するにあたって、このあたりのフローや表示項目は詳しく議論したうえで仕様を詰めていきたいですね。
④会議を俯瞰してアイデアに集中しやすくする
佐久間：そもそも現在、サイト内にあるメインバナーって作家向けと読者向けが混在しているんです。一応、作品を投稿したことのある方は「作家」という情報をデータベースに格納しておいて、作家向けのバナー表示が多くなるようにはしています。でも、新規のお客さまの場合、作家なのか読者なのかがわからないので、適切にバナーを出し分けることができないんですよね。
和波：その情報は、最初に確認した方がいいかもしれないですね。サイトを訪問したらまずポップアップを出して、作品を書きたいのか読みたいのかを選んでもらうとか。ポップアップが原因で離脱する方もいるかもしれないので、まずはA/Bテストで実験してみたり。
玉腰：ちょっと難しいのが、「最初は読者だったけど、しばらくしてから自分でも書くようになった」とか「もともとは作家だったけど、今は読みたい気分」といったように、後からその属性が変更になる場合ですね。
和波：このあたりのUIは、既存のイラスト投稿コミュニティサイトなどを参考にするといいような気がします。あれも、絵を描く人と見る人が混在していて、その属性が途中から変わるケースがあると思いますので。
⑤情報を線や色で分けて構造化する
▲前半では、線で左右２つに分けたユーザー体験についてヒアリングし、左側の読者向け機能体験についてを追いかけるKPIとして決めました。
▲後半は、読者向けのUI・UX課題の深掘りと改善のためのアイデア出しが進みました。
和波：今回の内容を総括（※）すると、こんな形になりました。グラフィックレコーディングで会議を可視化しながら進めていくのはいかがでしたでしょうか？
※…ミーティングで出た話題は多岐にわたっており、すべてを文章化すると記事ボリュームが膨大になるため、本記事では話の一部をピックアップした形で掲載しています。そのため、完成系の記録と記事の内容には一部不整合があります。
玉腰：認識のすり合わせがしやすくなると思いました。課題やゴール、お客さまの行動フローなどがビジュアルに落としこまれているから、すごくわかりやすかったです。
佐久間：今回のミーティングはけっこう情報量が多かったです。にも関わらず、こんなにスッキリまとまっているのは驚きました。私たちはこの内容をチームの他のメンバーにも共有するんですが、これだけ情報を整理してもらえると、きっとみんなも見てくれると思います。
玉腰：たしかに、長文が書かれている議事録より見てくれる人が増えそうですね（笑）。たぶん、情報が適切な粒度でグルーピングされていたり、色分けされていたりして、パッと見で理解がしやすくなっているからだと思います。
和波：よかったです。今回はどうもありがとうございました！
佐久間＆玉腰：ありがとうございました！
まとめ
グラフィックレコーディングを実践するコツ
①徹底的にヒアリングして全体像を把握する
②矢印を使ってフローをわかりやすく示す
③質問＆要約して具体的な話を引き出す
④会議を俯瞰してアイデアに集中しやすくする
⑤情報を線や色で分けて構造化する
DeNAでは一緒に働く仲間を募集しています
・期待も領域も越えて世の中に価値あるサービスを創り出すクリエイター募集!
執筆：中薗昴 編集：下島夏蓮 撮影：岩切卓士
