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
16
21k
デザイン研修 2021 / Design training 2021
Cybozu
PRO
May 21, 2021
Tweet
Share
More Decks by Cybozu
See All by Cybozu
AIツール開発ワークショップ(Dify)【サイボウズ新人研修2025】
cybozuinsideout
PRO
8
10k
モバイル【サイボウズ新人研修2025】
cybozuinsideout
PRO
3
2.7k
Git/GitHub を使う上で知っておくと嬉しいかも Tips【サイボウズ新人研修2025】
cybozuinsideout
PRO
8
6.7k
GitHub Copilot活用【サイボウズ新人研修2025】
cybozuinsideout
PRO
13
10k
ソフトウェアライセンス【サイボウズ新人研修2025】
cybozuinsideout
PRO
8
6.7k
エンジニアのためのアウトプット講座 〜知識をシェアするはじめの一歩〜【サイボウズ新人研修2025】
cybozuinsideout
PRO
6
3.4k
Docker入門【サイボウズ新人研修2025】
cybozuinsideout
PRO
11
8k
セキュリティ【サイボウズ新人研修2025】
cybozuinsideout
PRO
2
2.3k
TLS 1.3をざっと理解する【サイボウズ新人研修2025】
cybozuinsideout
PRO
2
1.4k
Other Decks in Design
See All in Design
Saudade typeface
tiagoporto
0
330
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
660
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.4k
CIRCULAR ECONOMY + SERVICES
jmanooch
0
120
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
300
AI時代に淘汰されないデザインのしごと
akinen
1
140
クライアントワークにおける UXリサーチの実践
kozotaira
0
710
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
4
300
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
7
5.7k
アクセシビリティに取り組むメリット
magi1125
1
190
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.6k
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
690
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Code Review Best Practice
trishagee
69
19k
Designing Experiences People Love
moore
142
24k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Six Lessons from altMBA
skipperchong
28
3.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
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を作る機会があります。ダークパターンには気をつけて。 • フィードバックやリサーチなどを通じてデザインと関わってく ださい。また、デザインの⼒を活⽤してください。