Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UXを視野に入れたUIリニューアルのプロセス
Search
Keisuke Miyajima
July 18, 2019
Design
1
760
UXを視野に入れたUIリニューアルのプロセス
2019/07/18(木)に京都で開催された「業務システムデザイン勉強会 #2」で発表した資料です。
Keisuke Miyajima
July 18, 2019
Tweet
Share
More Decks by Keisuke Miyajima
See All by Keisuke Miyajima
UIデザイナーが500ページ超のヘルプを書いて得られたもの
myzksk
0
310
Other Decks in Design
See All in Design
NAHO SHIMONO_Portfolio2025
nahohphp
0
200
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
kaminashi
1
560
横断組織デザイナーの働き方
mixi_design
PRO
0
340
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
5
4.1k
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
130
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
140
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
69k
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.8k
How to go from research data to insights?
mastervicedesign
0
230
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
190
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
330
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1.6k
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
It's Worth the Effort
3n
184
28k
Building Adaptive Systems
keathley
40
2.4k
Building Your Own Lightsaber
phodgson
104
6.2k
Docker and Python
trallard
44
3.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
How to Ace a Technical Interview
jacobian
276
23k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Statistics for Hackers
jakevdp
797
220k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Transcript
UXを視野に⼊れた UIリニューアルのプロセス 【業務システムデザイン勉強会 #2】 2019/07/18 株式会社グラッドキューブ 宮島 敬右
⾃⼰紹介 宮島 敬右 Keisuke Miyajima HCD-Net認定 ⼈間中⼼設計スペシャリスト ⼀般社団法⼈エクスペリエンスデザインユニット 監事 過去にパソコンのアプリケーション、スマートフォンのアプリ、家電の組み込
みまで幅広いUIデザインを⼿がける。 現在はインハウスのUIデザイナーとしてベンチャー企業に勤務し、⾃社製品の Webアプリケーションの全⾯的なUIデザインのリニューアルを担当。 2014年、2015年グッドデザイン賞を受賞。
「SiTest(サイテスト)」は、ウェブサイトの解析・改善によく⽤いられる 「ヒートマップ」や「A/Bテスト」などのツールを『オールインワン』で提供する、 SaaSビジネスモデルのウェブアプリケーションです。
リニューアルの背景 UIの⾒た⽬の陳腐化、ユーザーからのクレームの改善や要望の反 映、市場での競争⼒の低下 リニューアルの⽬的 ユーザビリティの向上、ブランドイメージの向上、市場と既存顧客 へのアピール、競合との差別化、⼤⼿クライアントへの提案の強化 チーム構成 デザイナー:1名(私) エンジニア:6名(内4名は派遣でフロントエンド専任は2名) セールス兼コンサルタント:3名(要件の検討とレビューのみ参加)
スケジュール 当初の予定は6ヶ⽉、実際には10ヶ⽉ ⾃分の役割 リニューアル要件の検討、画⾯遷移・画⾯構成の検討、プロトタイ プの作成、すべてのデザインリソースの作成、すべてのボタンラベ ル・メッセージの作成
やること やらないこと 制約 •UIを「全⾯的」にリニューアルする。 •現状のビジネスモデル(ツールの⽉額利⽤+オプションで コンサルティング・クリエイティブの制作)は変えない。 •移⾏はリニューアル前と後のUIを「切り替えられる期間」 を設けて、段階的に⾏う。 •スケジュールを優先するため機能追加は優先度を下げる。 •リニューアル後にユーザーのデータに不整合を起こさな
い。 •スケジュール的に新しい価値の探索はしない。 •スケジュール的にバックエンドの仕様は⼤幅に変更しな い。 •派遣のエンジニアに来てもらうので、実装後の⼿戻りには 余計なコスト(社員より⾼い残業代)がかかる。
UXの5段階モデル:社内向けのコミット •⾒た⽬の古臭さを解消する •UIに⼀貫性を持たせて学習コストを削減する 表層 ⾻格 構造 要件 戦略 具象 抽象
ビジュアルデザイン レイアウト・ナビゲーション モデリング 要件定義 ⽬的・⽬標設定 •現状のUIに慣れているユーザーのメンタルモデルか ら逸脱しない画⾯設計・画⾯遷移にする •過去の機能追加時の不可解な画⾯設計・画⾯遷移の 不整合を改善する •アプリ内の検索機能の強化 •UIをフルリニューアルする •⼤機能は維持する •競合が提供している機能に並ぶ •市場での競争⼒の向上させる Jesse James Garrett ⽒「Elements of User Experience」をもとに再構成
UXの5段階モデル:⾃分の⽬標 •Atomic Designでデザインシステムを構築する •よく併⽤される「Google Analytics」との親和 具象 抽象 •フィードフォワード・フィードバックを徹底する •画⾯の動線のショートカットを設ける •OOUI(名詞→動詞、コレクション→シングル)
•モードレスなUIを⽬指す •あたりまえ品質までユーザビリティを改善する •価値の低い機能を廃⽌する •サポートコストを削減する •レポートを改善してコンサルティングの質を上げる ➡社内の顕在的・潜在的な課題を解決する Jesse James Garrett ⽒「Elements of User Experience」をもとに再構成 表層 ⾻格 構造 要件 戦略 ビジュアルデザイン レイアウト・ナビゲーション モデリング 要件定義 ⽬的・⽬標設定
⾃分の⽬標 +α • プロトタイプに重点を置いて、関係者の合意を得な がら進める。 • できる範囲でHCD(⼈間中⼼設計)やUXのプロセ スを取り⼊れる。 • 社内の
SiTest ユーザーをペルソナに設定してリ サーチする。 • 社内のサポートコストを削減して、継続的な改善や 新機能の開発業務の⽣産性を向上させる。 • 利⽤中のユーザーが「SiTestを使っている⾃分がイ ケてる」と思ってもらえる体験を提供する。 • UIのリニューアルだけでも、ユーザーに新しい価値 を何か提供する。 • 残業しない。
λΠτϧςΩετ
「ペーパープロトタイプ」に 重点を置いたら UIリニューアルのプロセスが うまくいった
デザイナー「1⼈」の状況でも 上流からデザインドリブンで進めたい。 しかし、オープンな場で情報共有と 議論を進めることで「UIデザイン」を 関係者全員の「⾃分ゴト」にしたい。 【なぜ】
デザイナー(私) コンサルタント セールス エンジニア 【誰と】
デザイナー(私) コンサルタント セールス エンジニア 【誰と】 SiTestを業務で⽇常的に 使っているヘビーユー ザーでもある
私以外の参加者を 「ユーザー」としても扱い、 彼らを「リサーチ」しながら その場で「リアルタイム」に ペーパープロトタイプを作った。 【どうやって】
! ✓ そのタスクで「本当に達 成したいこと」はなんで すか? ✓ そのデータから「本当に 知りたいこと」はなんで すか? ✓
達成したり知りたいこと がわかると、「どんな気 持ち」になりますか? ユーザーの求めるゴール を深掘りして、ユーザー の「本質的要求」と最終 的な「ありたい姿・気持 ち」を理解する
! ✓ いつもやっているタス クの⼿順を実際に⾒せ てください。 ✓ くりかえしやっている タスクはありますか? ✓ 頻
繁 に 往 復 す る 動 線 や、探したりする画⾯ はありますか? ⽇常的な利⽤状況を把握 して「作業の⾃動化・省 略化」や「動線のショー トカット」を発⾒する
! ✓ どの情報を⾒て「意思 決定∕正誤の判断」を していますか? ✓ その情報はデータベー スにありますか? ✓ そのデータを表⽰する
のにどのくらい時間が かかりますか? 実際の利⽤状況とバック エンドの仕様から、画⾯ の表⽰内容や表⽰速度に 対する「効果・効率・満 ⾜度」を確認する
! ✓ 普段、その項⽬をなん て呼んでいますか? ユーザーの「話す⾔葉」 をボタンラベルやメッ セージの⽂⾔に適⽤する
デザインの制作環境とプロセス ペーパー プロトタイプ Sketch Adobe XD Zeplin Storybook Bitbacket (事前に現状のUIをエキス
パートレビュー済み) ⾃分・セールス責任者(事実 上のPO)・Web解析コンサ ルタント(本製品を活⽤して コンサルティング、カスタ マーサポートも担当)・エン ジニア(開発と技術サポート を担当)の責任者で、隔⽇2 時間程度、要件と技術的な課 題の確認、ユーザーからの要 望・クレーム、前述のリサー チをインプットしながら、⾃ 分がリアルタイムでペーパー プロトタイプを作成。 ペーパープロトタイ プからAdobe XDで 動作するワイヤーフ レームレベルのプロ トタイプを作成して 関 係 者 に 展 開 、 レ ビューを⾏い合意を 形成。 平⾏してSketchでUI をコンポーネント単 位 で 作 成 し て 、 Symbolのライブラ リを構築。 ラ イ ブ ラ リ か ら Symbolを呼び出し てプロトタイプの画 ⾯を精緻化。 Sketchで作成した画 ⾯とライブラリから 作成したデザインガ イドをZeplinに書き 出して、フロントエ ンドエンジニアに共 有。 画⾯イメージとデザ インガイドからフロ ントエンドエンジニ ア が V u e . j s の Storybookを構築。 画⾯の実装に⼊る前 にコンポーネント単 位で実装後の表⽰と 動作をチェック。 UIが実装された画⾯ をステージングで確 認して、発⾒した課 題をBitBacket上で 管理。
After Before
After Before 表⽰を⾼速化 意思決定に重要な情 報を表⽰ 主要機能へのショー トカット
After Before
After Before トーン&マナーの整 理 データ表⽰の優先順 位を⾒直し 重 要 な 画
⾯ へ の ショートカット
After Before
After Before 条件を「⾃由」に組み 合わせたヒートマップ を、並べて分析できると いう「新しい価値」を 提供
After Before
After Before エディタらしい操作 性 ステータスを視覚的 に明⽰ 横幅サイズの変更を 可能にしてレスポン シブデザインに対応
After Before
After Before テストの勝敗・成果 がひと⽬で判定でき る プリントアウトして もレポートとして成 ⽴するレイアウト
After Before
After Before 横に並べて結果をひ と⽬で⽐較 縦 ⽅ 向 の み の
ス ク ロールを死守
まとめ • 社内のヘビーユーザーをリサーチ対象にし てユーザビリティやUXを検討した結果、 素早く確実に成果が上がった。 • プロトタイプに重点を置いたプロセスは、 合意の形成と⼿戻りの削減に有効だった。 • Sketchのライブラリ機能で構築したデザ
インシステムは、変更に強く効率的に作業 できた。 • 事前にいろんなツールを試⽤したことで、 組織やプロジェクトにフィットするソ リューションを選択できた。