デザインレビュー 初めの一歩

デザインレビューの準備について、自分が大事だと思うポイントについてまとめました。

Transcript

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

   View Slide

2. 2010〜2016 ： Web制作会社
   
   2016〜現在 ： 合同会社DMM.com
   DMMでプロダクトのUIデザインや、

   サービス全体のデザインシステム構築等を
   担当。
   
   
   デザイン以外でもマークアップや、

   PO・運営リーダーなども担当したことがあ
   り、
   雑食気味。
   中川 陽介
   Webデザイナー
   趣 味 の 制 作
   オンラインイベント事業部所属
   合同会社DMM.com
   

   View Slide

3. メインコンテンツは
   
   極端に短いピッチ動画
   イベント時間の約10分で業界の

   トレンドや取り組みがわかる
   出展社も来場者も
   
   最小時間で効果を最大化
   DMMピッチ
   担当プロダクト
   

   View Slide

4. 担当プロダクト『DMMピッチ』の実例
   を交えて、より良いデザインレビュー
   をするための準備として、私が大事だ
   と考えているポイントをご紹介しま
   す。
   デザインレビューが上手くできなくて

   困っていたり、苦手意識を持っている人。
   デザインレビューの準備
   対象
   Photo by Leon on Unsplash
   本日のテーマ
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. （なんとなく）
   いいですね！

   これでいきましょう！
   工数がかかりそうなので、

   その要素は削除してください。
   レビュアーの好き嫌いや、

   ノリで決定し、実装開始やリリースしてから

   見落としていた点が見つかる。
   比較対象がないと、工数で判断されがち
   判断軸なし、複数案なしでレビュー依頼すると...
   

   View Slide

9. 要件・判断軸の整理
   要件を整理することで目的を明確にし、レビュアーの人が

   良し悪しを判断するためのポイントを洗い出します。
   

   View Slide

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

    View Slide

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

    イメージ
    

    View Slide

12. アーカイブの公開がNGな企業があり、
    動画上で音声と映像を

    カットするマスク処理がされるため、
    見れないシーンがある。
    アーカイブ動画の中に、
    非公開の企業があることを、

    視聴者に理解してもらう。
    アーカイブ非公開の動画を再生中の時、

    非公開の理由をUI上のテキストで伝える。
    デザイン：0.1人日、
    　実装：0.5人日
    平均視聴時間
    （離脱時間）
    、
    　お問い合わせ数
    要件・判断軸を整理する
    背　景
    目　的
    手　段
    効果・影響
    工　数
    要件を背景・目的に整理し、目的を達成するための手段を考え、その工数と効果・影響をまとめます。
    要件・判断軸の整理
    要
    件
    判
    断
    軸
    

    View Slide

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

    伝えられなかった結果...
    効果・影響
    

    View Slide

14. 複数案の用意
    手段を複数案を用意することで、多角的な視点を持ちやすくなり、

    議論を促します。また比較対象があることで判断もしやすくなります。
    

    View Slide

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

    View Slide

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

    View Slide

17. 複数案の用意
    最低限スキップボタンだけあれば離脱防止に繋がりそう

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

    View Slide

18. 複数案の用意
    複数案のポイント
    松(竹)梅で出す 松 竹 梅
    工数がかかる理想的な方法を
    「松」、

    工数がかからず必要最低限の案を

    「梅」
    として出すと、
    比較しやすく落とし
    所の判断がしやすくなります。
    ※要素が多ければ良い訳じゃないので、

    要素を削ぎ落とした案をイチ推しにするのもありです
    

    View Slide

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

    View Slide

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

    View Slide

21. まとめ
    

    View Slide

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

    View Slide

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

    View Slide