yuheijotaki.com

【イベント】うちのデザインレビューは“ここ”を見る

「うちのデザインレビューは“ここ”を見る【デザナレVol.11】」 を視聴したのでメモと感想を残しておきます。

目次・概要

ポートフォリオを介したマッチングプラットフォーム ViViViT を提供している 株式会社ビビビット さん主催の勉強会。
今回は3名の方が各社どのような目的や手法でデザインレビューを行っているかの発表。
個人の発表というよりは、ViViViT のサービスの宣伝感が強いイベントでしたが、特に興味のあった SmartHR 小木曽さんの登壇 についてまとめます。

  • 前段
  • 「デザイン」とは本来何を指す？
  • デザインレビューとは？
  • 品質とは何か？
  • SmartHRのデザイン組織紹介
  • 開発組織での事例

ポイント

前段

ソフトウェアの「デザイン」の重要性と期待値はますます高くなっている。

  • 不確実性が増した世界で、優れたアウトプットは1人の知見だけで生み出せるものではない
  • UIデザインだけに限らず、すべての「デザイン」という行為に当てはまる

「デザインレビュー」とは、設計品質を高め、理想を現実に近づける手段のひとつ

「デザイン」とは本来何を指す？

Wikipedia より

審美性を根源にもつ計画的行為の全般を指すものである。

つまりデザインの本来的な意味は、「UIやモックデザイン」ではなく 「設計や計画全般」 を指している解釈

デザインレビューとは？

このふたつの難解そうだが、今回は 「成果物の『品質』について精査・検証する儀式」 と解釈

品質とは何か？

  • 「品質」という言葉は本来主観的なもの
  • 評価するステークホルダーによって、品質の定義はさまざま
  • 1人のデザイナーの「主観」で出した答えが、客観としての「品質」の良さを証明することは難しい

よって、

  • プロダクトは誰のために作っているのか？
  • ユーザーにとっての価値とは何か？

これらの疑問を開発者（プロダクトデザイナー含め）は常に持つべき、とのこと。

ユーザーの目線にたち、常に主観を疑い、検証していくため にデザインレビューが必要となる。

SmartHRのデザイン組織紹介

  • コミュニケーションデザイングループ
    • マーケティング・ブランディングなどコミュニケーションのデザイン
  • プロダクトデザイングループ
    • プロダクトに関わるデザイン
      • 発表者の小木曽さんはここに所属
  • プログレッシブデザイングループ

開発組織での事例

主なレビューイベントとしては、

  1. スプリントレビュー
    • 一般的なスクラムイベントのスプリントレビューと同じ（開発PBI含む全てが対象）
  2. プロデザレビュー会
    • プロダクトデザイングループが中心になって行う
    • 対象はSmartHRのプロダクトデザインに関わる成果物全て

の2つがあり、今回はプロデザレビュー会にフォーカスする。

プロデザレビュー会とは

目的

  • プロダクトを中心とした成果物の精度・品質の向上
  • 各プロダクトの状況把握と情報共有
  • ナレッジや判断材料のシェアと標準化

レビュー対象

  • UIデザイン
  • オブジェクト、UML図
  • ユビキタス言語
  • 組織の方針・体制

実施内容

  • 完全オンライン
  • 週1回1時間
  • デザイナーが多めだが、他職能の人も参加やレビュー依頼あり

レビューのやり方

  • レビューのお題を決めるのは、原則レビュー依頼者（レビューイ）
  • レビューイが用意したアジェンダに沿って進行
    • 特に手順に決まりなし
  • ツールはFigmaが多めでMiroやGoogle Docs、スプレッドシート、実装画面等

実際の事例

  • UIのバリデーション設計
  • アクセシビリティ改善
    • 発表ではひとつのコンポーネントのデザインに対してのカラーコントラスト改善について
    • スコア基準の共有やモブデザインの実施
  • スペシャルサイトの設計
    • RubyKaigi Takeout 2021 のUIデザインの設計
    • エンジニアと協力してサイトの設計、意匠を決めた事例
  • 非同期の改善案募集
    • レビュー枠を待たずに非同期で改善提案が走ることもある
    • 今回の例はページのレイアウトへの改善提起をSlackで実施

RubyKaigi Takeout 2021 のWebサイト

レビューで生まれる効果

  • 第三者視点の気づきと多様なフィードバック
  • 創発的なアイデアとディスカッション

デザインレビューの場作り

  • デザインを見るってどんな観点でみればいいの？
  • レビューはどんな粒度で持っていけばいい？
  • レビューを受け取ったら必ず反映しないといけない？
  • レビューでは何を言ってもいいの？

これらの疑問があると思うが、

レビューは「チームの知見や気づきを勝てに品質を向上し、よりよいインターフェースにたどり着くための儀式」という前提があり、

  • レビューはレビューイの気づかないところに気づきを与えるもの
  • レビューは押し付けではなく、ディスカッション
  • レビューは考えを否定するものではない

という共通認識があるためうまく行えているとのこと。

SmartHR Design System

詳細： デザインレビューの手引 | デザインプロセス | SmartHR Design System
関連： デザインシステムはピクセルグリッドと開発をすすめている

感想

もともとこのイベントを視聴した理由は、最近SmartHRへデザイン〜フロントエンド界隈で強い人が移っているため、その人たちがどのようなことをしたり、どのような組織構造で働いているのかに興味があったため。
またデザインレビューについて深堀りして他社の話を知ることのできる機会もあまりないと思ったため。

結果的に上記の目的はおおむね把握できてよかったです。
特にレビューの粒度など、受託と事業会社で大きく異なることはあるなとは思いましたが、場作り的なことは取り入れれる部分も多いと思うので今後の参考にしたいと思いました。