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
Tries for creating a UXD culture
Search
Satoru Kawahara
September 27, 2014
Technology
1
1.7k
Tries for creating a UXD culture
インフラ企業で働くフロントエンドエンジニアの挑戦 よりよいUXのために (編集版)
@ UX-Sapporo × CSS Nite in Sapporo
Satoru Kawahara
September 27, 2014
Tweet
Share
More Decks by Satoru Kawahara
See All by Satoru Kawahara
本当に必要ですか?そのステージング環境〜Web制作を Docker でちょっと便利にしよう〜
esukei
1
270
How to publish Sakura icons-set on Cacoo
esukei
1
1.9k
Creating a UI Design culture
esukei
2
2.4k
Learning Ember CLI
esukei
4
840
Other Decks in Technology
See All in Technology
マルチモーダル理解と生成の統合 DeepSeek Janus, etc... / Multimodal Understanding and Generation Integration
hiroga
0
360
君も受託系GISエンジニアにならないか
sudataka
2
370
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
6
1.4k
Classmethod AI Talks(CATs) #15 司会進行スライド(2025.02.06) / classmethod-ai-talks-aka-cats_moderator-slides_vol15_2025-02-06
shinyaa31
0
170
WAF に頼りすぎない AWS WAF 運用術 meguro sec #1
izzii
0
460
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
410
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
320
依存関係があるコンポーネントは Barrel ファイルでまとめよう
azukiazusa1
3
530
リーダブルテストコード 〜メンテナンスしやすい テストコードを作成する方法を考える〜 #DevSumi #DevSumiB / Readable test code
nihonbuson
11
5.8k
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
360
アジャイル開発とスクラム
araihara
0
160
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Docker and Python
trallard
44
3.3k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
What's in a price? How to price your products and services
michaelherold
244
12k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
BBQ
matthewcrist
86
9.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Embracing the Ebb and Flow
colly
84
4.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Transcript
インフラ企業で働く フロントエンドエンジニアの挑戦 河原 覚 2014-09-27 @ UX-Sapporo × CSS Nite
in SAPPORO よりよい UX のために(編集版)
河原 覚 @esukei か わ は ら さ と る
プラットフォーム事業部 サービス開発チーム
さ く らの VPS コントロールパネル フロントエンドエンジニア UI デザイナー
・UX を考えるにあたって直面した問題 ・問題を解決するための挑戦 はじめに ・さく らインターネットは全体で 200 人規模 ・プロジェクトには複数の部署が参加
2013 年 7 月 開発部 インターフェイス設計担当として入社
1ヶ月後 さく らの VPS コントロールパネル リニューアルプロジェクト参加
せっかく リニュー アルするんだから、 コントロールパネルにとどまらないで、 サービスの UX も考えたい !
領域が分断し ている
紹 介 サ イ ト 部署 A 会 員 登
録 部署 B コ ン ト ロ ー ル パ ネ ル 部署 C ヘ ル プ ペ ー ジ 部署 D VPS 関連コンテンツと分担
UI デザインに十分な時間が取られていない UI デザインの修正が行いにくい
それまでの UI 開発フロー ビジュアルデザイン HTML+CSS サーバサイドテンプレート化 必要に応じて修正・追加 仕様検討・環境構築 開発内容の決定 デザイン
開発
UI デザインの認知度が低い UI をデザインする文化がない
こういうレイアウトでどうでしょう ? あ、ここちょっとまずそうだね。 どう直したらいいか意見ありますか? うーん���� ◦◦したらいいかも� ? じゃあ、それで次回までにお願いします。 ! ?
とある会議 メンバー わたし 進行役
UI デザイン品質責任者の不在
? 会議では承認取ったけど、 良し悪しは誰が判断するんだろう� だいたい決まったあと
あれ? UX デザインとか言ってる場合じゃないんじゃ�?
それでも、やっぱり�
サービスとし て、 ブランドとし て、 よりよい UX を考えていきたい。
UX デザインのために必要なこと ・横断的に行える環境 ・持続的に行うための文化
UX と UI の関係 誰にどう使って欲しいのか 適切な UI ・UXD を実現するための UI
・持続的な UXD に 対応できる柔軟な UI 開発環境
UI デザイナーとし て、 フロントエンドエンジニアとし て、 できることから挑戦
UI デザイナーとし て
・デザイン文化の醸成 ・UI デザイン手法の導入
デザイン文化の醸成
・UX は横断的に取り組まないといけない ・UI デザインは開発の一部 ・よりよいサービスのために UX を考えたい 地道に啓蒙
「デザイン 上の理由」で発言する ここは使いやすさを考えて、このようにし てみました。 こういう提案がありましたが、 使いやすさを損なうと思うのでこのままで行きたいと思います。
UI デザイン手法の導入
・ペーパー プロトタイピング ・PC 上で操作できるモック ・ユーザテスト
ペーパー プロトタイピング ・実際の開発やビジュアルデザイン制作の前に 紙の上で画面を検討する手法 ・ワイヤーフレームよりもより具体的な画面を起こす ・ユーザビリティ上の問題を早い段階で検討し、 クオリティアップや開発中の手戻りを少なくできる
操作できるモック ・ペーパープロトタイピングの結果を清書し、 リンクを貼るなどして操作できるようにしたもの ・より実際の操作環境に近づけて検討ができる ・ユーザテストを行いやすくする
ユーザテス ト ・社内の人間を捕まえて実施 ・テスターのバランスをとるため、 社内であっても詳しくない人に頼んだり ・操作可能なモックを利用 ・大きく変わる箇所について仮説を検証
・よりよい UI デザインのため ・メンバーへの共有のしやすさ ・意見の裏打ちとなる客観データ UI デザイン手法導入の意味
よりよい UI デザイン環境へ 文化の醸成 手法の導入 +
フロントエンドエンジニアとして
・フロントとバックを疎な構成に ・フロントエンド開発環境の改善
関係を疎にする RESTful API を中心とした 構成への変更
これまでのフロー デザイン フロント テンプレート 機能開発
API 中心のフロー デザイン フロント API 仕様決定
・API を利用した UI 開発に集中 ・API を提供することに集中 フロントエンド バックエンド
・フロントエンド開発環境上に サーバを用意する さらに開発しやす く
タスクマネージャでサーバ構築 grunt-contrib-connect サーバを立てる grunt-connect-proxy リバー スプロキシ node-easymock お手軽 JSON 配信サーバ
connect proxy / /api /api/feature app index.html assets プロジェクトフォルダ ローカルサーバ構成
servers.json switches.json accounts.json API モックフォルダ node-easymock http://0.0.0.0:3000 にアクセス テストサーバなど
・テストサーバの用意も待たなくて良い ・フロントエンドだけでも 実践的な開発を進められる ・依存関係をより少なく出来る ローカルサーバの利点
UI デザインの改善も進めやすく 開発環境改善 構成変更 +
UI デザイナーとし て ・文化 ・手法導入 フロントエンドエンジニアとし て ・環境改善
UXD のための柔軟な UI 開発環境 挑戦結果
適切な UI デザイン 開発効率化 使いやすさをデザインした コントロールパネルへ + 開発中のコントロールパネル
まとめ
なぜ UX を考えるのか
UXD は何のために ・戦略にもとづいた開発 / 改善 ・サービスの品質を向上させる
ユーザのための よりよいサービスを提供したい!
UXD の取り組み方 ・サービスに関わるすべての人と共有 ・持続的に改善していく
・周りを巻き込むための工夫が必要
・納得してもらう必要がある ・開発フローの改善等で可能な限り吸収する コス ト/ 時間の増加 ・現状の改善のため ・更なるクオリティアップのため ・長期的な最適化のため、など 説得材料
一人 で全部は難しいし、 時間がかかるかもしれないけれど�
自分の手の届く領域から挑戦を
よりよい UX を目指して さらに挑戦していきます。
None