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
デザイン研修 2021 / Design training 2021
Search
Cybozu
PRO
May 21, 2021
Design
13
20k
デザイン研修 2021 / Design training 2021
Cybozu
PRO
May 21, 2021
Tweet
Share
More Decks by Cybozu
See All by Cybozu
生産性向上チームの紹介
cybozuinsideout
PRO
1
970
サイボウズQAの紹介
cybozuinsideout
PRO
1
320
試験仕様書の英語化をやってみたら試験仕様書の本質が見えてきた
cybozuinsideout
PRO
0
330
販売管理オペレーターが開発チームの一員となった話
cybozuinsideout
PRO
0
320
主体的な活動で巨大な影響範囲のテストを乗りこなしていく話
cybozuinsideout
PRO
1
320
Garoon 開発チーム / Garoon development team
cybozuinsideout
PRO
2
2.9k
OSSの脆弱性との向き合い⽅
cybozuinsideout
PRO
2
85
既存プロセスからの脱却と変化に適応するために必要なこと
cybozuinsideout
PRO
2
660
スプリント内で試験を完了させるには?アジャイル・スクラム開発に参加したQAエンジニアの悩みと対策
cybozuinsideout
PRO
1
610
Other Decks in Design
See All in Design
IPの世界観に寄り添う、マルチブランドなカラーシステム設計
jirosh1998
0
5.6k
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
fkady
1
450
もち的デザイナーのキャリアデザイン新提言:副業起業家のすゝめ
mochitaro
0
1.4k
成果が出ないユーザーインタビューは何がダメだったのか? ~「誰に聞くか」の探り方 ~
jouykw
10
13k
デザイン組織の一人目マネージャーが啜る泥水と美味しいビールに向けてTRYすること
ryoya_frst
0
200
Apple HIGのススメ
temoki
0
100
20231122_Design Leader Impact Award_Presentation_FAKE Okazaki
okazakityo
1
260
Fooocus(Stable DiffusionXL)で アニメ画像生成の仕方
otanet
0
1.1k
社内のコミュニケーション課題に対して個人的に行っているデザイン以外の草の根活動
sugiyama_sukedachi
0
150
UIをもたらすコンテクストの考察
securecat
9
2.6k
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
1
180
「これをゲームにしたい!」と言われた時ゲームデザイナーが考えること
kinakobooster
5
5.3k
Featured
See All Featured
Code Review Best Practice
trishagee
56
15k
Building a Modern Day E-commerce SEO Strategy
aleyda
22
6.4k
GraphQLとの向き合い方2022年版
quramy
33
12k
Web development in the modern age
philhawksworth
203
10k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
1.9k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Building Your Own Lightsaber
phodgson
100
5.7k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
Docker and Python
trallard
35
2.7k
Ruby is Unlike a Banana
tanoku
96
10k
Designing for Performance
lara
601
67k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
Transcript
2020/04/20 1 Design & Research デザインの役割と関わり⽅ 開運研修 2021
2020/04/20 2 Design & Research 2020/04/20 2 Design & Research
⾃⼰紹介 樋⽥ 勇也(といだ ゆうや) kintone開発チーム デザイナー 制作会社でWebデザイナー/コーダー/ディレクターを経験後、 2016年にサイボウズ⼊社。現在はkintoneのデザイナー。 kintoneデザインチームを最⾼のチームにすべく奮闘中
2020/04/20 3 Design & Research デザインって何ですか?
2020/04/20 4 Design & Research 2020/04/20 4 Design & Research
良いデザイン / 悪いデザイン
2020/04/20 5 Design & Research 2020/04/20 5 Design & Research
1. ユニクロのファッションマガジン https://www.uniqlo.com/jp/ja/contents/corp/pre ss-release/2019/08/19082114_19fwlwm.html 出典: 雑誌『LifeWear magazine』を創刊 グローバル のユニクロ店舗にて8⽉23⽇(⾦)より配布開始 - UNIQLO ユニクロ
2020/04/20 6 Design & Research 2020/04/20 6 Design & Research
2. ユニクロの折り込みチラシ https://www.uniqlo.com/jp/ja/contents/chirashi_flyer/flyer/ 折込チラシ | 今週のデジタルチラシ | UNIQLO
2020/04/20 7 Design & Research 2020/04/20 7 Design & Research
どっちが良い?悪い? https://www.uniqlo.com/jp/ja/contents/corp/press-release/2019/08/19082114_19fwlwm.html https://www.uniqlo.com/jp/ja/contents/chirashi_flyer/flyer/
2020/04/20 8 Design & Research 2020/04/20 8 Design & Research
• 海外の雑誌みたいな おしゃれなグラフィック • コストをかけて⾼級感を出す 「ユニクロは安くてダサい」 というイメージを変えたい https://www.uniqlo.com/jp/ja/contents/corp/press-release/2019/08/19082114_19fwlwm.html
2020/04/20 9 Design & Research 2020/04/20 9 Design & Research
• ⼀⽬でバリューが⽬に⼊る • 売りである価格を前⾯に • 特別、注⽬、引っかかるワードを ⽬にして欲しい • ⼤量に印刷できるコスト 今⽇ユニクロで買い物して欲しい https://www.uniqlo.com/jp/ja/contents/chirashi_flyer/flyer/
2020/04/20 10 Design & Research 2020/04/20 10 Design & Research
それぞれに、⽬的・意図がある。 ⽬的を達成のための最適なデザインになっている。 https://www.uniqlo.com/jp/ja/contents/corp/press-release/2019/08/19082114_19fwlwm.html https://www.uniqlo.com/jp/ja/contents/chirashi_flyer/flyer/
2020/04/20 11 Design & Research 2020/04/20 11 Design & Research
デザインの語源 • デザインの語源はデッサン(dessin)と同じく、“計画を記号に 表す”という意味のラテン語designareである。
2020/04/20 12 Design & Research 2020/04/20 12 Design & Research
デザインは意図が機能することが重要 • どのデザインにも意図がある。 • その意図がちゃんと機能するかどうか、が デザインの良し悪しを決める
2020/04/20 13 Design & Research UXとUI
2020/04/20 14 Design & Research 2020/04/20 14 Design & Research
UX = User Experience UI = User Interface
2020/04/20 15 Design & Research 2020/04/20 15 Design & Research
UI (User Interface) コンピュータとその機械の利⽤者 の間での情報をやりとりするため のインタフェース
2020/04/20 16 Design & Research 2020/04/20 16 Design & Research
UX UI
2020/04/20 17 Design & Research 2020/04/20 17 Design & Research
例えば天気アプリ https://www.behance.net/gallery/59183073/UX-Case-studyWeather-notification-application UX Case study̶Weather notification application on Behance
2020/04/20 18 Design & Research 2020/04/20 18 Design & Research
真にユーザーの課題を解決するUX • 今⽇は傘を持って⾏った⽅が良いよ、と push通知を出す • UXは必ずしも作り込まれたUIやグラフィッ クと関係があるわけではない。
2020/04/20 19 Design & Research 2020/04/20 19 Design & Research
kintoneのユーザー体験って?
2020/04/20 20 Design & Research 2020/04/20 20 Design & Research
UXは顧客の体験すべて • 障害起きることなくkintoneを安定して使える • サポートの⼈の対応が素晴らしかった • ヘルプを読んで、疑問が解消された • etc
2020/04/20 21 Design & Research 2020/04/20 21 Design & Research
× UXはUXデザイナーに関係ある ◦ UXはプロダクトに関わるすべての⼈に関係ある
2020/04/20 22 Design & Research 2020/04/20 22 Design & Research
ダークパターンの話 ダークパターンと⾔われる、 ユーザーを騙すようなUIについて 世界で規制が強化されてきています。 https://www.nikkei.com/article/DGKKZO70413070X20C21A3MM8000/ ダークパターン、世界で規制強化: ⽇本経済新聞
2020/04/20 23 Design & Research 2020/04/20 23 Design & Research
ダークパターンとは • 意図的にユーザーを操ったり、騙したりするUIのこと。 例えば… • 解約するための導線を隠す / ステップを異常に増やす • 閉じるボタンを⾮表⽰にする
2020/04/20 24 Design & Research 2020/04/20 24 Design & Research
こんなのもダークパターン 「結構です、私は無制限の即⽇配送はいりません。」 ユーザーが選びにくい何か恥ずかしさや気まずさ を感じる選択肢の⾔葉もダークパターンの⼀つ。 https://www.darkpatterns.org/types-of-dark-pattern/confirmshaming
2020/04/20 25 Design & Research 2020/04/20 25 Design & Research
もし、これダークパターンじゃない?と思ったら • もし、同僚、先輩などがやろうとしてることで、 「ダークパターン」では?と思うものを⾒かけたら ⽌めてあげてください。 • よくわからないな、不安だな、という場合は 気軽に相談してください。
2020/04/20 26 Design & Research サイボウズのプロダクトにおけるデザイン
2020/04/20 27 Design & Research 2020/04/20 27 Design & Research
kintoneのステークホルダー • エンドユーザー • 管理者 • 決裁者 • 開発パートナー • 販売パートナー • エヴァンジェリスト etc…
2020/04/20 28 Design & Research 2020/04/20 28 Design & Research
様々な要望 標準でもっと機能が欲しい! カスタマイズの余地を残して 競合に勝てる⾒栄えを もっとUIが⼤きい⽅が⾒やすい もっとUIが⼩さい⽅がたくさんの 情報を⼀覧できる 今のままで良い、変えないで
2020/04/20 29 Design & Research 2020/04/20 29 Design & Research
例:プロセス管理(モバイル版)の場合 プロセスを進めるボタン • 社⻑とか⼀ヶ⽉に1回しかアクセスしないかも。 • ⼀⽬でわかるコントラストが必要 • ⾊と明度でコントラストをつけよう • ⼤事な機能だけど、レコードが⾒えなくなっては困る • 適切な⾼さに抑えたい • スクロールすべきだとすぐわかる配置にしよう (ボタンが半分だけ⾒える)
2020/04/20 30 Design & Research 2020/04/20 30 Design & Research
コストが許容できる メリットがある マイナスの 影響が少ない 考え⽅
2020/04/20 31 Design & Research 2020/04/20 31 Design & Research
プロトタイピング
2020/04/20 32 Design & Research 2020/04/20 32 Design & Research
ユーザビリティテスト/リサーチ
2020/04/20 33 Design & Research デザインとの関わり⽅
2020/04/20 34 Design & Research 2020/04/20 34 Design & Research
1. フィードバックを送る 普段製品を使っていて、何か気づ いたことがあればぜひフィード バックを送ってください。
2020/04/20 35 Design & Research 2020/04/20 35 Design & Research
保存ボタンの⾊が⾒づらいので変えて欲しいです。 緑とかにすると良いと思います。 NG例
2020/04/20 36 Design & Research 2020/04/20 36 Design & Research
• 例えば「⾒づらい」にも… • 他のボタンと混同してしまって⾒⾟かったです • ⽬に⼊りづらい位置にあるので⾒つかりませんでした • コントラストが薄く⽬に⼊りませんでした 背景を併せて教えて欲しい
2020/04/20 37 Design & Research 2020/04/20 37 Design & Research
状況を書いてみてください “レコードを書き終わってから保存しようとした時”に ボタンがすぐに⾒つからず困ってしまいました。 “しばらく画⾯下を探した後”、上にボタンがあることに気づきま したが、もう少し⾒つけやすくして欲しいです。
2020/04/20 38 Design & Research 2020/04/20 38 Design & Research
2. ユーザービリティテスト/リサーチに協⼒する • 被験者として協⼒をお願いするかもしれません
2020/04/20 39 Design & Research 2020/04/20 39 Design & Research
3. デザイナー/リサーチャーと働く 要件検討から実装までの流れ • デザイナーはこの全てに 関わっている • 最近はデザイナーと エンジニアの境界が曖昧に
2020/04/20 40 Design & Research 2020/04/20 40 Design & Research
モブが当たり前に PM、PG、QA、デザイナー、 ライター、モブで集まって作るの が当たり前になってきています。
2020/04/20 41 Design & Research 2020/04/20 41 Design & Research
デザインの⼒を ⽣かした活動
2020/04/20 42 Design & Research 2020/04/20 42 Design & Research
ぜひデザインの⼒を活⽤してください • いろんなスキルを持ったメンバーがいます。 ぜひ我々の⼒を利⽤してください。 • UI、グラフィック、CSS、アクセシビリティ、リサーチetc • 詳しくはチーム紹介で
2020/04/20 43 Design & Research 2020/04/20 43 Design & Research
まとめ • デザインの良し悪しは、意図が機能するかどうかです。 • UXはデザイナーだけでなく全ての⼈に関わることです。 あなたもUXを作る機会があります。ダークパターンには気をつけて。 • フィードバックやリサーチなどを通じてデザインと関わってく ださい。また、デザインの⼒を活⽤してください。