そのサービス、ユーザーを見て作ってる？ JaSST'23 Hokkaido講演資料

JaSST'23 Hokkaido 2023/9/8 そのサービス、 ユーザーを見て作ってる？ クライアントも開発メンバーも巻き込んで作るUIデザイン 合同会社CGFM UIデザイナー 金内 和子 カネウチ カズコ そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

自己紹介 合同会社CGFM 福岡から来ました UIデザイナー 金内 和子 印刷物のデザイナーから 独学でWebデザイナーになり 今は主に業務システムのUIデザインしてます システム会社さんとのお仕事が多いです そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

登壇のきっかけ SaCSS vol.106 2019年9月28日 ＠札幌市民ホールで登壇 JaSST Hokkaido実行委員の なかくきさん(くっきぃさん) が 聴いてくださっていたご縁で 今回、お招きいただきました。 レポート記事：http://blog.cgfm.jp/mutsuki/archives/3728 SaCSS 『SaCSS（サックス）』は札幌で主にコーダー（マークアップエンジニア）や Webデザイナー向けに、HTMLやCSS、JavaScriptなどフロントエンドの内容を 中心に、ほぼ毎月セミナー・勉強会を開催しているコミュニティーです。 そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

• http://blog.cgfm.jp/mutsuki/archives/3728

UIデザイン実績 sigfy © Fusic Co., Ltd. 学校と保護者間の連絡にまつわる モヤモヤを解決する 安心安全な一斉連絡サービス sigfy.jp https:// ・2020年のUIリニューアル ・サービス紹介Webサイトデザイン を手がけました（2020年） そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

UIデザイン実績 現場ポケット © ASTEC PAINTS INC. 現場作業に関わる人の円滑な コミュニケーションをサポートする 施工管理者の生産性向上アプリ gempo.info https:// 2022年度グッドデザイン賞（システム・サービス部門） ・UIデザイン を手がけました （2018年12月〜2023年5月） そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

他、UIデザイン実績 ◽業界特化型ECサイト ◽医療系業務支援システム ◽電気料金シミュレーション ◽BtoBマッチングサイト ◽勤怠管理システム など そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

今日お話しすること ◻ワークショップ形式の打ち合わせに至った理由 ◻従来の打ち合わせにある課題と、私たちの解決方法 ◻ワークショップを取り入れたプロジェクトの流れ ◻ユーザーとサービスを理解するためのワークショップ紹介 トーク後、休憩をはさんでワークショップやります そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

CGFMの働き方 ◽システム会社からのUI案件が多め ◽ワークショップ形式の打ち合わせ多め ◽デザインアドバイザーとして準委任契約 miroで画面共有 ◽基本はオンライン Slackのハドルで会話 そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

今の働き方に至った理由 WebデザインとHTMLコーディングは後ろの工程なので ちゃぶ台返しやプロジェクト炎上の影響を避けられない プロジェクト初期の打ち合わせのツケが 最後にまとまって来ると経験により確信 プロジェクト初期の共通認識のすり合わせに 重きを置くようになる ワークショップ形式の打ち合わせが多くなる そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

ワークショップ絶対必要なの？と思った方への補足説明 ワークショップ形式の打ち合わせをする前提条件 明確なタスクとゴールが決まっていれば ワークショップ形式の打ち合わせは必要ありません。でも 「やることが決まらないが納期が決まってる」 「クライアントとの話がまとまらない」 「この設計のままでは使い勝手が悪いのは分かっている。 だが、UIを大幅に変更すると予算も納期も圧迫するからどうしよう…」 と悩んでいる方のヒントになれば…と思い私たちの体験談を共有します。 そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

でも、ワークショップって時間かかるんでしょ？ クライアント システム会社 そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

そんなことやってる時間がない?! 先を急いでプロジェクトを進めた結果… 開発がある程度進んでしまった段階で クライアントは気づく 「欲しかったものと何か違う」 やがて来る修正の嵐の気配に 開発者は思った 「それ早く言ってよ…」 要件定義 開発 もしかして…納期 間に合わないんじゃ？ あれ？ 終わりが見えない？ テスト やり直し そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

時間がない時こそ「急がば回れ」 プロジェクト初期の打ち合わせを大事にすれば 結果的に時間のロスが少なくなる クライアント・システム会社ともに 意見を出し擦り合わせることでの納得感 簡易テストして、低コスト・短時間で イメージし、失敗し、検討できる 開発の優先度を協議し フェーズに分けたリリースなど、双方にとって 現実的なスケジュールを話し合える ▲ プロジェクト初期の 打ち合わせ そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

ワークショップ形式の打ち合わせで ユーザーになりきったメンバーの言葉 簡易ユーザーテストしたセールスNo1の営業マン 「…このサービス、使わないっすね」 簡易ユーザーテストした経営者 「…この機能、要らないね」 そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

従来の打ち合わせにある課題 クライアント側の打ち合わせ時の課題 ユーザーは使ってくれるものだ、と思いこむ 実際に使う人の操作の流れをイメージしないまま依頼してしまい、 いざリリースしても上手く使ってもらえない 要望が機能に落とし込まれても、良し悪しの判断ができない 「本当の課題」を深掘りできないまま、 「機能」を付ける・付けないに会議が終始してしまう 動くもの・見えるものが無いと、成果物のイメージができない システム作って動くものを触って、 ようやく問題に気づいてダメ出しするが時すでに遅し そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

従来の打ち合わせにある課題 システム会社側の打ち合わせ時の課題 機能ベースで話を進めてしまう 工数を見積しやすいのもあって、機能に落とし込んで提案。 使う人の操作の流れ、という視点は疎かになりがち クライアントの要望が膨らんで開発を圧迫するのが恐い 要望を全部聞いていたら膨れ上がって予算内ではできないから、 つい自分たち都合で仕様をまとめてしまう 開発終盤での仕様変更や機能追加は大変辛い 動くものを触って初めてクライアントから「これは違う」と指摘される。 要件定義の段階で納得してもらったつもりが、実は理解されていなかった。 そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

こんな打ち合わせしていませんか？ 向かい合って議論 対立関係になる 各々が手元の資料にメモ 認識のズレが生じる そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

私たちは打ち合わせ時の目線を変えます 同じ方向を見て議論 共通の領域にみんなでメモ 対立関係にならず 議題に対して話し合える そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

私たちの役割 言葉を視覚化 議論中の課題・関係を目にみえる形にする 議論 フロー情報に なりがち 書き留めて 関係性でつないで ストック 構造化 活発な議論にするため、メンバーの意見を出しやすく するファシリテーションも行う そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

私たちの役割 ユーザーとの橋渡し役 機能中心の打ち合わせで 取りこぼされがちなユーザーを取り戻す UIの使い勝手の判断軸として ユーザーを据え置く ユーザーの業務フローに即した 画面遷移・画面設計をする そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

ワークショップの基本メンバー構成 クライアント 担当者（≒経営者） エンドユーザーについて 熟知した社員 システム会社 CGFM PM デザイナー プログラマ ファシリテーター (カスタマーサポートなど) そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

ワークショップを取り入れた プロジェクトの流れ プロジェクトメンバーの関係構築 メインユーザーと業務フローの把握 キックオフ ビジネスモデルキャンバス 簡易ペルソナ ユーザー相関図 即興演劇 この後のワークショップ で体験します 導線設計 機能の洗い出しと開発優先度決め 開発 簡易プロトタイプ 優先度付け システム開発 簡易テスト 開発コスト検証 要件定義 UIデザイン テスト・修正 リリース(フェーズ1) そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

プロジェクト初期の打ち合わせ クライアントのビジネスを 理解するためのワークショップ 前提知識・ゴールをプロジェクトメンバーで共有 ビジネスモデルキャンバス ユーザー相関図 そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

プロジェクト初期の打ち合わせ ユーザーとサービスを 理解するためのワークショップ ユーザー像と利用イメージをプロジェクトメンバーで共有 簡易ペルソナ 業務フロー 簡易プロトタイプ 簡易テスト （ペルソナのシナリオ） そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

ユーザーとサービスを理解するためのワークショップ 簡易ペルソナ アクセス解析や、エンドユーザーと接点のある社員から聞くなど 手持ちの情報を元に簡易的に作る 仮想のメインユーザー像 作る理由・メリット サービスを使う人の状況やタスクを想像しながら 使う人目線で導線設計ができる サービス設計する上での共通の判断軸になる ユーザーが難なくタスクを完了できるUIは ヒューマンエラーを減らし業務を助ける そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

簡易ペルソナのテンプレート 画像検索して ここに貼る みんなで アイデア出し 多数決して1枚 テンプレートに移す 被ったアイデアは 近くにまとめる そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

ユーザーとサービスを理解するためのワークショップ 業務フロー（ペルソナのシナリオ） 業務のスタートからゴールまでの流れを ユーザーになりきって演じる。 観察者は業務の流れを書き留めて視覚化する。 作る理由・メリット ユーザーの心情・行動に沿って シナリオを書き出すことで自然な動線が描ける ユーザーが本当に困っている箇所に気づきやすくなる 機能単位での議論に陥らなくなる そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

セリフの記録 観察 ペルソナ役 画面・コンテンツ の記録 記録係 そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

スタート ゴール ペルソナのセリフ ペルソナが見ているコンテンツ そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

ユーザーとサービスを理解するためのワークショップ 簡易プロトタイプ 手書き（もしくはドローソフト）で 必要最低限の情報のある画面を ラフに描いたワイヤーフレーム 作る理由・メリット 短時間・低予算で仮説検証できる 粗くても画面があると サービス像を想像しやすくなる 作っては試し、を短時間で行えるので リスクを小さくできる そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

ユーザーとサービスを理解するためのワークショップ 簡易テスト 簡易プロトタイプを手元に プロジェクトメンバーが ユーザーになりきって使ってみる 観察・記録 ユーザー役 作る理由・メリット ユーザーがヒントなしで目的を達成できるか検証できる ユーザーが操作でつまづくポイントに 早い段階で気づける つまづいたポイントは、すぐに簡易プロトタイプを改良し 短時間で繰り返しテストできる 案内・画面遷移 そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

ワークショップ形式の打ち合わせをした お客様の声 シミュレーションしたので開発に入る前に「やらない」判断ができた （将来発生する時間と労力のムダをカットできた） ペルソナの名前が会話に出るぐらいユーザー像がはっきりした 会議中の議論を書き留めて可視化することで議論の堂々巡りが減った 議論が可視化され客観的な目線になると見落としていた課題が見えてきた 同じ単語でも人によって解釈が異なる。 その差分に早く気づき擦り合わせたので開発の修正リスクが減らせた そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

終わりに クライアントと向かい合って意見すると、対立構造になりがちですが 模造紙やホワイトボードを向いて議論すると 課題に対して向き合えます。 クライアントも開発側も「使われるものを世に出したい」から チームは共通のゴールに向かっていける、と私は信じています。 小規模でいいから、ワークショップ形式の打ち合わせを試してみませんか？ いきなりクライアントとワークショップやるのが怖いなら 社内の少人数で試してみましょう。 そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8

ご清聴ありがとうございました 休憩後のワークショップをお楽しみに！ そのサービス、ユーザーを見て作ってる？｜JaSST'23 Hokkaido 2023/9/8