Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

C31f714e8a8984e1bc3c1e402af1d7c1?s=47 BEMU
August 11, 2021

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

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

C31f714e8a8984e1bc3c1e402af1d7c1?s=128

BEMU

August 11, 2021
Tweet

Transcript

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

  2. 2010〜2016 : Web制作会社 2016〜現在 : 合同会社DMM.com DMMでプロダクトのUIデザインや、
 サービス全体のデザインシステム構築等を 担当。 デザイン以外でもマークアップや、


    PO・運営リーダーなども担当したことがあ り、 雑食気味。 中川 陽介 Webデザイナー 趣 味 の 制 作 オンラインイベント事業部所属 合同会社DMM.com
  3. メインコンテンツは 極端に短いピッチ動画 イベント時間の約10分で業界の
 トレンドや取り組みがわかる 出展社も来場者も 最小時間で効果を最大化 DMMピッチ 担当プロダクト

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

    by Leon on Unsplash 本日のテーマ
  5. 担当プロダクトの開発体制 X レビュー依頼は要件ごとに都度実施(テキストベースが多い' X 定例は週1。そこでデザイン案について全体共有&承認。 PM X 要件を満たしているかw X 工数的に問題ないか?

    X 実装可能かw X 工数的に問題ないか? X ユーザー体験に問題ないかw X プロダクトのUIデザインのルール・ トーン的に問題ないか? X ユーザー体験に問題ないかw X プロダクトのコンセプトからブレて いないか? プロデューサー エンジニア デザイナー PM 企画 デザイナー 案件の依頼 レビュー依頼
  6. デザインレビューで大事なポイント 要件・判断軸の整理 複数案の用意 A 判断ポイントを明確にする A 議論を促しやすくする A 比較検討して、 判断しやすくする

  7. 判 断 軸 なし、 複 数 案 なしでレビュー 依 頼すると.

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

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

  10. なぜやるのか? 誰をどういう状況にしたいのか? どうやってやるのか?なぜその手段なのか? 工数に問題がないか? どの数値に、どれぐらい影響がありそうか? 要 件 判 断 軸

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

    要件・判断軸の整理 マクス処理後の
 イメージ
  12. アーカイブの公開がNGな企業があり、 動画上で音声と映像を
 カットするマスク処理がされるため、 見れないシーンがある。 アーカイブ動画の中に、 非公開の企業があることを、
 視聴者に理解してもらう。 アーカイブ非公開の動画を再生中の時、
 非公開の理由をUI上のテキストで伝える。 デザイン:0.1人日、

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

    → お問い合わせ件数の増加 一部の動画が見れない時間があることにより.. 一部、 動画が見れない理由がうまく
 伝えられなかった結果... 効果・影響
  14. 複数案の用意 手段を複数案を用意することで、多角的な視点を持ちやすくなり、
 議論を促します。また比較対象があることで判断もしやすくなります。

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

  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 説明的で硬い印象がある → 結果として離脱されそう → 結果として離脱防止できそう 短所:工数がかかる 長所・短所の書き方 「工数」「効果・影響」の判断軸を記載すると、レビュアーが判断しやすくなります。
  17. 複数案の用意 最低限スキップボタンだけあれば離脱防止に繋がりそう
 なので、1〜2営業日かかるイラストは不要です。 PM ※ 実際にはイラスト込みの案が採用されました。二口さん、素敵なイラストありがとうー! 複数案を比較検討することで、対応する内容の取捨選択がしやすくなったり、別の手段を 見つけられるキッカケを作りやすくなります。

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

    として出すと、 比較しやすく落とし 所の判断がしやすくなります。 ※要素が多ければ良い訳じゃないので、
 要素を削ぎ落とした案をイチ推しにするのもありです
  19. 複数案の用意 複数案のポイント 案ごとにギャップを出す (ちょっとした違いの案で出さない) 複数案が色やフォントサイズ・形状など の細かい違いだと、 レビューが細かい話 に終始してしまい、本質的な問題につい ての議論や、新たな視点の発見に繋が りにくいです。

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

  21. まとめ

  22. 要 件 判 断 軸 背 景 目 的 手 段 工 数 効果・影響

    要件・判断軸の整理 複数案の用意 A B ① ② ③
  23. ありがとうございました! Twitter@BEMU