yuheijotaki.com

【イベント】UX MILK All Night

9/12-13に行われた UX MILK All Night を視聴したので、見たセッションの気になったことなどをメモします。
アーカイブもあるのであまり詳しくしない程度にとどめたいと思います。

f:id:jotaki:20200921181854p:plain

目次

A1-2 : UXデザイナーが作るサービスの業務フロー設計

受託型の業務フロー設計、PoC時のUXデザイン手法について
スピーカー：高橋一成さん（株式会社オロ）
まとめnote：UXデザイナーが作るサービスの業務フロー設計 @ UX MILK All Night

前提

UXデザインはユーザーを理解するところから始まる

チャートでの設計手法

システム中心の書き方の3つの手法

  • アクティビティ図 => ユーザーのシステム上での行動を把握しやすい
  • ユースケース図 => システムでできることが把握しやすい
  • シーケンス図 => データの流れが把握しやすい

今回のフローチャートはユーザーの行動が中心の書き方。

UXフロー図

  1. ステークホルダーを書く
  2. それぞれの行動を書く
  3. ステークホルダーが表示する画面を書く
  4. 機能やシステムの振る舞いを書く
  5. パーツとしてならべる
  6. 矢印を使ってフローをつくる

アクティビティ図はシステムの分岐視点になるが、UXフロー図はユーザー体験中心の視点の図ができる。
ステークホルダーや関係ツール全体の行動や振る舞いを一覧化することで

  • 予算感が見える
  • フェーズが立てられる

こともメリット。PoCなど全体が見えづらいプロジェクトに適している。

  • ユーザーの行動を追いながら
  • ユーザーのタッチポイントを考えながら
  • 必要な機能を確認しながら

などリアルな行動を意識しながら書くと良い。

プロジェクトの進め方

サービス全体からアプローチ版（PoCの場合はこちらが多い）

  1. ［UXフロー図］サービス全体をイメージする
  2. ［UXフロー図］必要なフローや機能を見つける
  3. ［UXフロー図］機能・画面・フローを考える
  4. ［ワイヤーフレーム・実装］ワイヤーフレーム・モックを作る
  5. ［ワイヤーフレーム・実装］機能・画面フローを調整する

ユーザーの理解からアプローチ版

  1. ［インタビュー・ペルソナ・エクスペリエンスマップ］ユーザーの行動を観察する
  2. ［インタビュー・ペルソナ・エクスペリエンスマップ］ユーザーのインサイトを見つける
  3. ［インタビュー・ペルソナ・エクスペリエンスマップ］ユーザーの課題を見つける
  4. ［ワイヤーフレーム・機能実装］サービスのアイデアを考える
  5. ［ワイヤーフレーム・機能実装］機能・画面・フローを考える

感想

受託でPoC案件が前提の話だったのでいまいる会社に近い感じもあり熱心に聞けました。
UX設計やります、っていっても1つではないアプローチの方法があってそれを実践できるようにしたいなと思いました。

A1-3.5 : 受託制作におけるデザインシステム

受託制作における汎用的なデザインシステムについての知見
スピーカー：石原隆志さん（GrowGroup株式会社）
スライド：Design system for Client Work - Speaker Deck

デザインシステムを作った経緯

事業規模拡大、理念体系の変更により時間をつくったり、共通認識となる旗が必要と感じたため。

デザインシステムの導入

デジタルプロダクトの目的を達成するために首尾一貫したルールで編成された、お互いに関連付けられたパターンとその実践方法。
吉幾三。こういうのオンラインだと難しそうですね・・・
今回は受託制作の会社の場合のため、汎用性を持たせること、どこまでの自由度があるのかなどの共有が難しかった。

これらの課題に対して

  • デザインシステムに関する勉強会、ミーティングの実施
  • デザイナーのコーディングスキルの習得（Udemyなど中心に）
  • クロージングミーティングの開催
  • 社内で運用システム、フロー（委員会）を構築
  • ツールの拡充
  • ドキュメントの充実化

などできるだけスキルレベルに依らず使うようにするためハードルを下げる施策を行った。

感想

自分も2人や20人の受託Web制作会社で今まで社内ツール作るのに頓挫した光景を見る経験を何度もしているので、めちゃくちゃしっかりやっててすごいなと思いました。

A1-4 : UXデザインにおける眼と手と動きの解像度を上げる技

眼と手と動きの解像度を上げる方法
スピーカー：安藤幸央さん（株式会社エクサ）
スライド：UX MILK All Night 2020 (Yukio Andoh)

眼

  • 中心視野はかなり狭い
    • 視野の移動をなるべくさせない
  • 白黒・色反転・左右反転・補助線・比較でゲシュタルト崩壊を防ぐ

手（指）

  • 体験の解像度を下げる（おじさんでも爪を伸ばしてみる）
  • 人間は35,000/1日、選択している（2秒に1回）
    • 選択を分解して人の体験を分析する（コーヒーと角砂糖）
    • Netflix は登録なしで見れるように

動き

なぜUIアニメーションさせるのか

  • 画面や要素が切り替わったことを知らせる
  • 変化をより把握しやすいものにする
  • 小さなものにも注意を促す注目をしてもらう
  • 動きによって楽しみを感じてもらう
  • 正しい情報構造の理解を手助けする

人間は情報を順繰りに渡される方が理解しやすい

オブジェクトを触わってから

  • 50~100msあとにアニメーション開始
  • 300~400msでUIアニメーション
  • 50~100msあとにアニメーション停止

すると動きを知覚しやすい

感想

話慣れてるなー感がすごかったです。
なぜUIアニメーション必要なのか、自分は極力必要ないならしない方向に持っていってしまいますが、理論化、言語化して提示くださったので、その方法で考えていきたいと思いました。

A1-5 : しなくていいUX

スマートロックのUXについて
スピーカー：神谷郁さん（Qrio株式会社）
スライド：しなくていいUX - Speaker Deck

しなくていいUXとは？

  • ユーザーが抱えている負の体験を「しなくていい」
  • ユーザーが製品を使う上で余計な体験を「しなくていい」

「ユーザーが抱えている負の体験を」「これまでよりもスマートな体験で」解決するアプローチ => 課題解決のアプローチと近い
Amazon、Uber、サマリーポケットの例

Qrio LockのUXデザイン

ユーザーが抱えている負の体験を「しなくていい」
=> 本来したいことに時間を使える
=> 家を出たらカギが閉まって家に帰ってきたらカギが開いてほしい

出かける前 / 出かける時 / 外出中 / 帰宅した時 / 在宅中 のステージごとに課題・不便を抽出

ユーザーが製品を使う上で余計な体験を「しなくていい」
=> 余計な階層を辿らなくていい
=> 新しい技術を覚えなくていい
=> セットアップに時間をかけなくていい

セットアップに対して「自分でもできる」感を訴求
・貼り付けるだけで使える訴求
・既存設備に取り付けられる訴求

感想

先ほどの解像度のセッションもですが、不自由・負の部分の洗い出しを行ってから設計するということで、ハードウェア・ソフトウェア関係ないのかなと感じました。
カギをかけない人はいない、って言っていてビクッとしました。

A1-8 : インクルーシブデザインとUX

インクルーシブデザインでできることについて
スピーカー：佐野実生さん（株式会社コンセント）

インクルーシブデザインとは

  • インクルーシブデザイン => デザインプロセスに多様な人を巻き込む 手法
  • ユニバーサルデザイン => すべての人が利用できるデザインである 状態
  • アクセシビリティ => すべての人がアクセスできる 状態

多様な人 は特定の誰かではなく、みんなのことを指す。
極端ユーザーからの顕在ニーズを抽出すして未来の当たり前をつくること。

例）未来の当たり前

  • メール
  • iPhone
  • Kindle
  • スマートスピーカー

特定の環境や制限のある状態は誰にでも当たり前にあり得る。

インクルーシブデザインチームの取り組み&実体験

どうすれば伝わるだろう？という問いかけを意識する

  • 画面に頼らない説明をする
  • コピペ最高
  • 字幕はあるに越したことはない

感想

画面共有のココ問題、自分もリモートになって感じました。
UDトーク、噛んじゃいけないプレッシャーもありそうですがめっちゃよかったです。
本当に言っている通りで倍速で追いやすいですし、自分にとっては一番良いインクルーシブデザインの例でした。

A2-4 : システム開発でデザイナーは何をすればいい？

システム開発の要件定義・設計フェーズにおいてデザイン思考をどのように取り入れてるか
スピーカー：高見祐介さん（株式会社電通国際情報サービス）
スライド：UXMILKallnight_システム開発でデザイナーは何をすればいい？

不確実性を下げる

要求定義・要件定義・基本設計・詳細設計で2つの思考

  • システム思考（全体・抽象化志向） => 物事を全体的&体系的にとらえ、多くの視点から構造化し可視化する
  • デザイン思考（部分・具体化志向） => 完成的なアプローチで観察、発想、試作を何度も繰り返し共創する

フェーズ別のアプローチ

  • 要求定義 => ペルソナ・カスタマージャーニーマップマップなど仮説
  • 要件定義 => UI設計書をつくる（デザイナーが）
  • 設計 => 対象ユーザの決定とユーザビリティテスト

実施したアクションの合意形成（クライアントと伴走することが大事）

  1. 画面イメージを検討し、該当業務プロセスで必要とされる機能を洗い出す
  2. 早い段階からUI画面のレイアウトと仕様項目のイメージをつかむ
  3. 画面遷移と発生イベントを優先的に確認する

デザイナーががんばること

  • 言語化
  • 共創
  • 合意形成

要求・要件定義フェーズから参画しましょう

感想

開発会社の方なので他の方とはちょっと毛並みが違って面白かったです。
「正しいものを正しく作る」まわりの話をデザイナーさんが意識しているとこのような解釈方法になるんだという新しい発見がありました。

A2-7 : 複雑性と難易度の高いサービスリニューアルにおけるサービスデザイン

CULTIBASE のサービスデザインについて
スピーカー：瀧知惠美さん（株式会社ミミクリデザイン）
スライド：複雑性と難易度の高いサービスリニューアルにおけるサービスデザイン - Speaker Deck

サービスデザインの特徴的なアプローチ

This is Service Design Doing サービスデザインの実践 より

  • 人間中心
    • 関わる人の体験を考慮する
  • 共働的であること
    • 関係者が積極的に関与する
  • 反復的であること
    • プロセスは探索・改善・実験の繰り返し
  • 連続的であること
    • サービスを行動の連続として捉える
  • リアルであること
    • 現実世界でリアルに調査、実験する
  • ホリスティック（全体的）な視点
    • サービスと企業全体まで含めた視野をもつ

利害関係者を巻き込んだ「共創」を大事にしたい
=> 「同感的にかかわり」ではなく「共感的かかわり」（1人称視点+2人称視点）

サービスデザインで大事にしていること

  • 「ユーザーにとっての理想」と「自分たちが目指す理想」を徐々に折り合いをつけていく
  • 1人称視点でと3人称視点でこれまで培われたサービスの特色を大事にする
  • 既存ユーザ・新規会員・社内メンバーとのコミュニケーション

サービスデザイン（リニューアル）の難しさと取り組み方

リニューアルが失敗する要因 => 一新したことで既存の価値が損なわれることが一般的
なぜそうなりやすいかというと、既存・新規の2つのユーザーに考慮し、既存・新規の2つのサービスを動かさないといけないから

  • 2つのユーザーへの対応方法
    • 既存ユーザーと新規ユーザー両者にとって快適なあり方の探求
    • 既存ユーザー＋新規ユーザー2人のペルソナを作成
  • 2つのサービスへの対応方法
    • リニューアル前とリニューアル後のスムーズな接続の設計
    • リニューアル後の世界観へ徐々に移行させていく

一新する（renewal）ではなく、洗練させる（refine）。

感想

サービスという範囲がわりと広いものだと思っているのですが、リニューアルの話は一般的なWebサイトでも通じることがあるかなと思いました。（要求・要件にもよりますが）

A3-2 : 良いUXを実現するために、まずはチーム内にデザインを浸透させている話

Qiitaなどを提供するIncrementsでUXデザインを浸透させている話
スピーカー：綿貫佳祐さん（Increments株式会社）
note：UX MILK ALL Night - 良いUXを実現するために、まずはチーム内にデザインを浸透させている話｜綿貫 佳祐 / Ateam, Increments｜note

なぜ「チーム内」か

  • 優れたUXデザイナーはチームに「UXと向き合う文化」を導入している
  • デザインは「デザイナーだけでやるもの」ではないと思っている
  • 組織にこれまであまりデザイナーがいなかった

取り組み

デザインスクラムというエンジニアがデザインの勉強する取り組みを実施

  • サービスの立ち上げの調査や企画
  • Figmaを使って自分でUI作成

良い変化

  • デザイナーの考えが分かるようになった
  • 一連の流れが理解できるようになった
  • UIにまで踏み込んだので制作する際の勘所が良くなった

苦労したこと

  • 実務ですぐに何か成果が出るかというと、出ない

感想

スライドがめちゃめちゃ見やすかったです。
QiitaのUIも段々良くなってきていますが、もっとよくなればいいなあと思います。

A3-10 : 1人でこっそり始めるUXデザイン

UXデザインを身近な所からはじめてみましょう、というお話
スピーカー：鈴木毅さん（株式会社メンバーズ）

何から始めればいい？

ユーザー調査 => ユーザビリティ調査

  • インパクトが大きい
  • テクニカルスキルがなくてもできる
  • 制作者は始めやすい

具体的な始め方

  • 準備
    • 協力者を探そう
  • 実査
    • イントロ
    • 事前インタビュー
    • タスク実施
    • 事後インタビュー
  • 分析
    • 有効さ・効率・満足度
  • 共有
    • チームメンバー・ステークホルダーに共有

感想

一人ではじめる、なのでスモールスタートで参考書や書籍に書いてあることは全部やろうとしないでいいんじゃないかと言っていてなるほどなと思いました。
確かにUXの書籍に書いてある内容を実践しようとするには、仰々しい部分もあるかなと思うので・・・

全体の感想

自分はエンジニアで登壇されている方はデザイナーの方が多いと思いますが、そういう職種の垣根を超えて仕事をしているのだなという発見と刺激を受けました。
「共創」「伴走」や「負の体験を取り除く」「不自由から学ぶ」のような近しいキーワードもセッション間で見受けられ、デザインする対象がハード/ソフトに関わらず、制作の考え方が勉強になるイベントでした。

ゆっくり見たいもの見たい派なのと、朝型なので今回アーカイブ形式を購入してみましたが、セッション内容的にとても満足でした。