デザインレビュー 初めの一歩 中川陽介 合同会社DMM.com DMM meetup #32

2010〜2016 ： Web制作会社 2016〜現在 ： 合同会社DMM.com DMMでプロダクトのUIデザインや、
 サービス全体のデザインシステム構築等を 担当。 デザイン以外でもマークアップや、
 PO・運営リーダーなども担当したことがあ り、 雑食気味。 中川 陽介 Webデザイナー 趣 味 の 制 作 オンラインイベント事業部所属 合同会社DMM.com

メインコンテンツは 極端に短いピッチ動画 イベント時間の約10分で業界の
 トレンドや取り組みがわかる 出展社も来場者も 最小時間で効果を最大化 DMMピッチ 担当プロダクト

担当プロダクト『DMMピッチ』の実例 を交えて、より良いデザインレビュー をするための準備として、私が大事だ と考えているポイントをご紹介しま す。 デザインレビューが上手くできなくて
 困っていたり、苦手意識を持っている人。 デザインレビューの準備 対象 Photo by Leon on Unsplash 本日のテーマ

担当プロダクトの開発体制 X レビュー依頼は要件ごとに都度実施（テキストベースが多い' X 定例は週1。そこでデザイン案について全体共有&承認。 PM X 要件を満たしているかw X 工数的に問題ないか？ X 実装可能かw X 工数的に問題ないか？ X ユーザー体験に問題ないかw X プロダクトのUIデザインのルール・ トーン的に問題ないか？ X ユーザー体験に問題ないかw X プロダクトのコンセプトからブレて いないか？ プロデューサー エンジニア デザイナー PM 企画 デザイナー 案件の依頼 レビュー依頼

デザインレビューで大事なポイント 要件・判断軸の整理 複数案の用意 A 判断ポイントを明確にする A 議論を促しやすくする A 比較検討して、 判断しやすくする

判 断 軸 なし、 複 数 案 なしでレビュー 依 頼すると. . . デザイン作りました。 レビュー、オナシャス！ いいですね！ これでいきましょう！ デザイナー PM

（なんとなく） いいですね！
 これでいきましょう！ 工数がかかりそうなので、
 その要素は削除してください。 レビュアーの好き嫌いや、
 ノリで決定し、実装開始やリリースしてから
 見落としていた点が見つかる。 比較対象がないと、工数で判断されがち 判断軸なし、複数案なしでレビュー依頼すると...

要件・判断軸の整理 要件を整理することで目的を明確にし、レビュアーの人が
 良し悪しを判断するためのポイントを洗い出します。

なぜやるのか？ 誰をどういう状況にしたいのか？ どうやってやるのか？なぜその手段なのか？ 工数に問題がないか？ どの数値に、どれぐらい影響がありそうか？ 要 件 判 断 軸 背　景 目　的 手　段 工　数 効果・影響 要件・判断軸の整理 要件・判断軸の要素

：要件の対象 アーカイブ公開がNGな企業の動画を Youtube上でマスク処理するため、 UI上のロゴ、３ポイント、CTAを全部 を外して「権利の都合上、映像をお見 せすることができません。」という注 記に差し替えてください。 ロゴ、３ポイント、CTA 要件の実例 PM 要件・判断軸の整理 マクス処理後の
 イメージ

アーカイブの公開がNGな企業があり、 動画上で音声と映像を
 カットするマスク処理がされるため、 見れないシーンがある。 アーカイブ動画の中に、 非公開の企業があることを、
 視聴者に理解してもらう。 アーカイブ非公開の動画を再生中の時、
 非公開の理由をUI上のテキストで伝える。 デザイン：0.1人日、 　実装：0.5人日 平均視聴時間 （離脱時間） 、 　お問い合わせ数 要件・判断軸を整理する 背　景 目　的 手　段 効果・影響 工　数 要件を背景・目的に整理し、目的を達成するための手段を考え、その工数と効果・影響をまとめます。 要件・判断軸の整理 要 件 判 断 軸

要件・手段から施策の効果・影響を解釈する 実は先ほどの要件には、「視聴時間」や「お問い合わせ数」の影響について明記がなかったのですが、 依頼内容を噛み砕いて、施策内容による効果・影響についても考えます。 私の場合は、考えをテキストにまとめてからデザインするのではなく、デザイン中に気づいたり、デザイン後に整理することがほとんどです。 要件・判断軸の整理 動画が一部見れないことで、 こんな影響ありそうだな〜 （デザインしながら） → 平均視聴時間・平均視聴者維持率の低下 → お問い合わせ件数の増加 一部の動画が見れない時間があることにより.. 一部、 動画が見れない理由がうまく
 伝えられなかった結果... 効果・影響

複数案の用意 手段を複数案を用意することで、多角的な視点を持ちやすくなり、
 議論を促します。また比較対象があることで判断もしやすくなります。

複数案作り、 比較検討しやすくする。 A案：説明テキストのみ表示 B案：イラスト・スキップボタンを表示 ※提案時は参考になるイラストを代用していました 複数案の用意 各案ごとの長所・短所を記載することで、比較検討しやすくします。

A案 B案 複数案の用意 長所：悪い印象を和らげる D 待ち時間をスキップでき' D イラストで雰囲気を和らげる D デザイン：0.2営業R D イラスト：1〜2営業R D 実装工数：1営業日 長所：工数が低い 短所：印象が悪い D デザイン：0.1営業R D 実装工数：0.5営業日 D 非公開動画で1分待たされ' D 説明的で硬い印象がある → 結果として離脱されそう → 結果として離脱防止できそう 短所：工数がかかる 長所・短所の書き方 「工数」「効果・影響」の判断軸を記載すると、レビュアーが判断しやすくなります。

複数案の用意 最低限スキップボタンだけあれば離脱防止に繋がりそう
 なので、1〜2営業日かかるイラストは不要です。 PM ※ 実際にはイラスト込みの案が採用されました。二口さん、素敵なイラストありがとうー！ 複数案を比較検討することで、対応する内容の取捨選択がしやすくなったり、別の手段を 見つけられるキッカケを作りやすくなります。

複数案の用意 複数案のポイント 松(竹)梅で出す 松 竹 梅 工数がかかる理想的な方法を 「松」、
 工数がかからず必要最低限の案を
 「梅」 として出すと、 比較しやすく落とし 所の判断がしやすくなります。 ※要素が多ければ良い訳じゃないので、
 要素を削ぎ落とした案をイチ推しにするのもありです

複数案の用意 複数案のポイント 案ごとにギャップを出す （ちょっとした違いの案で出さない） 複数案が色やフォントサイズ・形状など の細かい違いだと、 レビューが細かい話 に終始してしまい、本質的な問題につい ての議論や、新たな視点の発見に繋が りにくいです。 A B A B

複数案の用意 複数案を出すときの注意 推しの案は決めておこう!! 「で、どっちが良いと思う？」と聞かれる率が高いので もちろん理由も添えて。

まとめ

要 件 判 断 軸 背　景 目　的 手　段 工　数 効果・影響 要件・判断軸の整理 複数案の用意 A B ① ② ③

ありがとうございました！ Twitter@BEMU