カジュアルレビューのススメ

こんにちは、ユーザーファースト推進室 デザイナーの吉井です。 現在は毎日の買い物を便利にする、クックパッド特売情報に関わるデザイン業務全般を担当しています。

さて、デザイナーの方なら誰しも経験があることだと思いますが、デスクに向かって黙々と仕事をしているとき、ある瞬間で行き詰まったり、深く考えこんでしまうことってありますよね。むしろその繰り返しが日常茶飯事だ、という方も多いのではないでしょうか。

何を隠そう私自身もその一人なのですが、そういったときの突破口というものは、自分のデザインから少し距離を置いてみることで意外なほど早く見つかるものです。

他の人の客観的な意見を取り入れてみたり、時には一晩二晩寝かせてみたり... 解決に繋がる糸口はシーンによって様々ですが、今日はそんな悩みをベースにした最近の取り組みについてご紹介したいと思います。

クックパッドにおけるデザインレビューの仕組み

クックパッドのデザイナーは、基本的にユーザーファースト推進室というひとつの部署に集められています。そのためそれぞれの席も近く、普段から気軽に意見を求めやすく、困ったときにいつでも相談し合える環境が作られています。 加えて、そのような普段のコミュニケーションを記録する/体系化する仕組みとして、GitHubのIssue機能を使ったデザインレビュー(下図)が導入されています。

f:id:hrtk441:20151102181845p:plain

このデザインレビューは過去のエントリでも触れらているように、それぞれの担当する施策において、デザイナー同士で(時にはエンジニア、ディレクターも交えて)仮説設計から視覚的なデザイン、プロトタイピングの使用感などについて意見を交わし合うのが目的です。

小さな施策をひとつ考えるにしても、果たしてそれがクックパッドとしてユーザーに届ける価値あるものになっているのか、品質として問題ない水準に達しているのかなど、日々多くの議論が重ねられています。 事実、このレビューを通すことで自分ひとりではなかなか気づけなかった(後々見返してみれば、なんで気づかなかったのか不思議なほど当然のことだったりする)見落としにも気づくことができるので、私自身この仕組みに助けられることもしばしばです。

しかしながら、これはあくまでオンラインでのコミュニケーションです。 当然全員が常にすべてのIssueをウォッチできる状況にあるとは限りませんし、それだけに頼ってしまうあまり予想外のコミュニケーションコストを費やしてしまうことも少なくありません。

特に私は少し前から、特売情報事業を執り行う部署に席を寄せて業務を行っています。 開発効率の向上や事業体制の強化など、事業部隊に入り込むことに多くのメリットもありますが、周囲に自分以外のデザイナーがいない環境になり、デザイナーどうしのコミュニケーションという観点では少し障壁が出来てしまったように感じていました。

カジュアルに始めよう

そこで私は、タイトルにもある「カジュアルレビュー」と称するものを普段の業務サイクルに取り入れてみることにしました。 とは言っても何も特別なことではなく、デザイナーが集まる定例MTGや夕会などの時間の枠を少しだけ使わせてもらい、自分が担当している施策についてその名の通りカジュアルに共有するものです。

f:id:hrtk441:20151102181846p:plain

こういったことをやろうとしている、という初期段階から、まだラフであるがこのようなデザインを考えているなど、どんな段階でも構いません。ただ肩肘張らず、画面を見せながら簡潔に内容説明をするだけです。時間にして本当に数分程度でしょうか。しかしこのわずか数分を介することで、

「あ、その問題ならこの前も自分が担当している施策でもあった」

「こういうことができるとより良さそうだよね」

「◯◯あたりの他社事例が参考になりそうなので研究してみては?」

「向いている方向としては良い(または少し違う)」

「この観点が不足しているように見えるがどの程度考えられているのか」

...などなど、取り入れるべき意見の判断は適宜必要になりますが、オンラインのコミュニケーションより圧倒的な情報量を持つレビューを、初期に、効率的に、且つ即座に集約できます。 更に各施策についてまとめて周知が図れるこのカジュアルレビューを通すことによって、その後のデザイン制作の速度、効率性を飛躍的に上げることが可能になるのです。

より質の高いデザインへ

デザインの精度をより高めていくためには、それだけでは終わりません。上記カジュアルレビューでもらった意見を元に、プロトタイピングを繰り返し、ある程度デザインが固まってきた段階で再度GitHubでのデザインレビューを依頼します。

カジュアルレビューによって各デザイナーもその施策内容に一度は触れているので、

「すみません、文面からは読み取れなかったのですが..」

などのように不要なコミュニケーションコストが発生することはなく、それぞれがある程度の共通理解を持った状態で本格的なレビューに当たることができるのです。

正直なところ私自身、常にユーザーファーストなものづくりを心がけているつもりでも、個人で業務に没頭していると気づかないうちに事業主体の目線になってしまいそうなことがあります。 例えば実際のケースとしても、特売情報にアクセスしてもらうバナーをアプリ内に新しくデザイン・設置する、というような施策があったのですが、ふとした間に「バナーを置く」ということが目的になっていて、「なぜ、誰のために」それをするのかという本質的な視点がつい弱くなってしまっていたこともありました。 しかしチームやメンバーがそれを未然に防いでくれ、一人ではなかなか見えづらくなっていた気づきを多く与えてくれるのが、今回ご紹介したような取り組みであると、私はそう考えています。

おわりに

デザインとは、客観的な評価のもとに成り立つものだと思います。 自分がいくら価値がある、優れたデザインだと信じこんでいても、それを見る人や使う人にその意図が伝わっていなければ、残念ながらそれは何の意味も成しません。 私自身、自分のデザインに対しては「臆病であること」を意識するようにしています。

本当にそれがユーザーにとって分かりやすく、価値があるものになっているのか? そのように良い意味で自信を持つことなく、臆病になって考え続けることが大事だと考えているからです。

本エントリでご紹介した内容はそんな私が独自に始めた試みですが、勿論それ以外にも気軽に意見が言い合える環境はクックパッドに数多く備わっています。 デスクに向かって黙々と仕事をして、どこかで行き詰まったり、深く考えこんでしまっているデザイナーの方は、時に画面から距離を置いてカジュアルに意見をもらうところから始めてみるといいのではないでしょうか。

クックパッドでも引き続き、カジュアルに意見が言い合えるデザイナーを募集中です!

クックパッド株式会社 採用情報

/* */ @import "/css/theme/report/report.css"; /* */ /* */ body{ background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/c/cookpadtech/20140527/20140527163350.png'); background-repeat: repeat-x; background-color:transparent; background-attachment: scroll; background-position: left top;} /* */ body{ border-top: 3px solid orange; color: #3c3c3c; font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, Osaka, 'MS Pゴシック', sans-serif; line-height: 1.8; font-size: 16px; } a { text-decoration: underline; color: #693e1c; } a:hover { color: #80400e; text-decoration: underline; } .entry-title a{ color: rgb(176, 108, 28); cursor: auto; display: inline; font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, Osaka, 'MS Pゴシック', sans-serif; font-size: 30px; font-weight: bold; height: auto; line-height: 40.5px; text-decoration: underline solid rgb(176, 108, 28); width: auto; line-height: 1.35; } .date a { color: #9b8b6c; font-size: 14px; text-decoration: none; font-weight: normal; } .urllist-title-link { font-size: 14px; } /* Recent Entries */ .recent-entries a{ color: #693e1c; } .recent-entries a:visited { color: #4d2200; text-decoration: none; } .hatena-module-recent-entries li { padding-bottom: 8px; border-bottom-width: 0px; } /*Widget*/ .hatena-module-body li { list-style-type: circle; } .hatena-module-body a{ text-decoration: none; } .hatena-module-body a:hover{ text-decoration: underline; } /* Widget name */ .hatena-module-title, .hatena-module-title a{ color: #b06c1c; margin-top: 20px; margin-bottom: 7px; } /* work frame*/ #container { width: 970px; text-align: center; margin: 0 auto; background: transparent; padding: 0 30px; } #wrapper { float: left; overflow: hidden; width: 660px; } #box2 { width: 240px; float: right; font-size: 14px; word-wrap: break-word; } /*#blog-title-inner{*/ /*margin-top: 3px;*/ /*height: 125px;*/ /*background-position: left 0px;*/ /*}*/ /*.header-image-only #blog-title-inner {*/ /*background-repeat: no-repeat;*/ /*position: relative;*/ /*height: 200px;*/ /*display: none;*/ /*}*/ /*#blog-title {*/ /*margin-top: 3px;*/ /*height: 125px;*/ /*background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/c/cookpadtech/20140527/20140527172848.png');*/ /*background-repeat: no-repeat;*/ /*background-position: left 0px;*/ /*}*/