デザイン研修 2021 / Design training 2021

by Cybozu

Slide 1

Slide 1 text

2020/04/20 1 Design & Research デザインの役割と関わり⽅開運研修 2021

Slide 2

Slide 2 text

2020/04/20 2 Design & Research 2020/04/20 2 Design & Research ⾃⼰紹介樋⽥勇也（といだゆうや） kintone開発チームデザイナー制作会社でWebデザイナー/コーダー/ディレクターを経験後、 2016年にサイボウズ⼊社。現在はkintoneのデザイナー。 kintoneデザインチームを最⾼のチームにすべく奮闘中

Slide 3

Slide 3 text

2020/04/20 3 Design & Research デザインって何ですか？

Slide 4

Slide 4 text

2020/04/20 4 Design & Research 2020/04/20 4 Design & Research 良いデザイン / 悪いデザイン

Slide 5

Slide 5 text

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 ユニクロ

Slide 6

Slide 6 text

2020/04/20 6 Design & Research 2020/04/20 6 Design & Research 2. ユニクロの折り込みチラシ https://www.uniqlo.com/jp/ja/contents/chirashi_flyer/flyer/ 折込チラシ | 今週のデジタルチラシ | UNIQLO

Slide 7

Slide 7 text

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/

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

2020/04/20 9 Design & Research 2020/04/20 9 Design & Research • ⼀⽬でバリューが⽬に⼊る • 売りである価格を前⾯に • 特別、注⽬、引っかかるワードを⽬にして欲しい • ⼤量に印刷できるコスト今⽇ユニクロで買い物して欲しい https://www.uniqlo.com/jp/ja/contents/chirashi_flyer/flyer/

Slide 10

Slide 10 text

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/

Slide 11

Slide 11 text

2020/04/20 11 Design & Research 2020/04/20 11 Design & Research デザインの語源 • デザインの語源はデッサン(dessin)と同じく、“計画を記号に表す”という意味のラテン語designareである。

Slide 12

Slide 12 text

2020/04/20 12 Design & Research 2020/04/20 12 Design & Research デザインは意図が機能することが重要 • どのデザインにも意図がある。 • その意図がちゃんと機能するかどうか、がデザインの良し悪しを決める

Slide 13

Slide 13 text

2020/04/20 13 Design & Research UXとUI

Slide 14

Slide 14 text

2020/04/20 14 Design & Research 2020/04/20 14 Design & Research UX = User Experience UI = User Interface

Slide 15

Slide 15 text

2020/04/20 15 Design & Research 2020/04/20 15 Design & Research UI (User Interface) コンピュータとその機械の利⽤者の間での情報をやりとりするためのインタフェース

Slide 16

Slide 16 text

2020/04/20 16 Design & Research 2020/04/20 16 Design & Research UX UI

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

2020/04/20 18 Design & Research 2020/04/20 18 Design & Research 真にユーザーの課題を解決するUX • 今⽇は傘を持って⾏った⽅が良いよ、と push通知を出す • UXは必ずしも作り込まれたUIやグラフィックと関係があるわけではない。

Slide 19

Slide 19 text

2020/04/20 19 Design & Research 2020/04/20 19 Design & Research kintoneのユーザー体験って？

Slide 20

Slide 20 text

2020/04/20 20 Design & Research 2020/04/20 20 Design & Research UXは顧客の体験すべて • 障害起きることなくkintoneを安定して使える • サポートの⼈の対応が素晴らしかった • ヘルプを読んで、疑問が解消された • etc

Slide 21

Slide 21 text

2020/04/20 21 Design & Research 2020/04/20 21 Design & Research × UXはUXデザイナーに関係ある ○ UXはプロダクトに関わるすべての⼈に関係ある

Slide 22

Slide 22 text

2020/04/20 22 Design & Research 2020/04/20 22 Design & Research ダークパターンの話ダークパターンと⾔われる、ユーザーを騙すようなUIについて世界で規制が強化されてきています。 https://www.nikkei.com/article/DGKKZO70413070X20C21A3MM8000/ ダークパターン、世界で規制強化: ⽇本経済新聞

Slide 23

Slide 23 text

2020/04/20 23 Design & Research 2020/04/20 23 Design & Research ダークパターンとは • 意図的にユーザーを操ったり、騙したりするUIのこと。例えば… • 解約するための導線を隠す / ステップを異常に増やす • 閉じるボタンを⾮表⽰にする

Slide 24

Slide 24 text

2020/04/20 24 Design & Research 2020/04/20 24 Design & Research こんなのもダークパターン「結構です、私は無制限の即⽇配送はいりません。」ユーザーが選びにくい何か恥ずかしさや気まずさを感じる選択肢の⾔葉もダークパターンの⼀つ。 https://www.darkpatterns.org/types-of-dark-pattern/confirmshaming

Slide 25

Slide 25 text

2020/04/20 25 Design & Research 2020/04/20 25 Design & Research もし、これダークパターンじゃない？と思ったら • もし、同僚、先輩などがやろうとしてることで、「ダークパターン」では？と思うものを⾒かけたら⽌めてあげてください。 • よくわからないな、不安だな、という場合は気軽に相談してください。

Slide 26

Slide 26 text

2020/04/20 26 Design & Research サイボウズのプロダクトにおけるデザイン

Slide 27

Slide 27 text

2020/04/20 27 Design & Research 2020/04/20 27 Design & Research kintoneのステークホルダー • エンドユーザー • 管理者 • 決裁者 • 開発パートナー • 販売パートナー • エヴァンジェリスト etc…

Slide 28

Slide 28 text

2020/04/20 28 Design & Research 2020/04/20 28 Design & Research 様々な要望標準でもっと機能が欲しい！カスタマイズの余地を残して競合に勝てる⾒栄えをもっとUIが⼤きい⽅が⾒やすいもっとUIが⼩さい⽅がたくさんの情報を⼀覧できる今のままで良い、変えないで

Slide 29

Slide 29 text

2020/04/20 29 Design & Research 2020/04/20 29 Design & Research 例：プロセス管理（モバイル版）の場合プロセスを進めるボタン • 社⻑とか⼀ヶ⽉に1回しかアクセスしないかも。 • ⼀⽬でわかるコントラストが必要 • ⾊と明度でコントラストをつけよう • ⼤事な機能だけど、レコードが⾒えなくなっては困る • 適切な⾼さに抑えたい • スクロールすべきだとすぐわかる配置にしよう（ボタンが半分だけ⾒える）

Slide 30

Slide 30 text

2020/04/20 30 Design & Research 2020/04/20 30 Design & Research コストが許容できるメリットがあるマイナスの影響が少ない考え⽅

Slide 31

Slide 31 text

2020/04/20 31 Design & Research 2020/04/20 31 Design & Research プロトタイピング

Slide 32

Slide 32 text

2020/04/20 32 Design & Research 2020/04/20 32 Design & Research ユーザビリティテスト/リサーチ

Slide 33

Slide 33 text

2020/04/20 33 Design & Research デザインとの関わり⽅

Slide 34

Slide 34 text

2020/04/20 34 Design & Research 2020/04/20 34 Design & Research 1. フィードバックを送る普段製品を使っていて、何か気づいたことがあればぜひフィードバックを送ってください。

Slide 35

Slide 35 text

2020/04/20 35 Design & Research 2020/04/20 35 Design & Research 保存ボタンの⾊が⾒づらいので変えて欲しいです。緑とかにすると良いと思います。 NG例

Slide 36

Slide 36 text

2020/04/20 36 Design & Research 2020/04/20 36 Design & Research • 例えば「⾒づらい」にも… • 他のボタンと混同してしまって⾒⾟かったです • ⽬に⼊りづらい位置にあるので⾒つかりませんでした • コントラストが薄く⽬に⼊りませんでした背景を併せて教えて欲しい

Slide 37

Slide 37 text

2020/04/20 37 Design & Research 2020/04/20 37 Design & Research 状況を書いてみてください “レコードを書き終わってから保存しようとした時”にボタンがすぐに⾒つからず困ってしまいました。 “しばらく画⾯下を探した後”、上にボタンがあることに気づきましたが、もう少し⾒つけやすくして欲しいです。

Slide 38

Slide 38 text

2020/04/20 38 Design & Research 2020/04/20 38 Design & Research 2. ユーザービリティテスト/リサーチに協⼒する • 被験者として協⼒をお願いするかもしれません

Slide 39

Slide 39 text

2020/04/20 39 Design & Research 2020/04/20 39 Design & Research 3. デザイナー/リサーチャーと働く要件検討から実装までの流れ • デザイナーはこの全てに関わっている • 最近はデザイナーとエンジニアの境界が曖昧に

Slide 40

Slide 40 text

2020/04/20 40 Design & Research 2020/04/20 40 Design & Research モブが当たり前に PM、PG、QA、デザイナー、ライター、モブで集まって作るのが当たり前になってきています。

Slide 41

Slide 41 text

2020/04/20 41 Design & Research 2020/04/20 41 Design & Research デザインの⼒を⽣かした活動

Slide 42

Slide 42 text

2020/04/20 42 Design & Research 2020/04/20 42 Design & Research ぜひデザインの⼒を活⽤してください • いろんなスキルを持ったメンバーがいます。ぜひ我々の⼒を利⽤してください。 • UI、グラフィック、CSS、アクセシビリティ、リサーチetc • 詳しくはチーム紹介で

Slide 43

Slide 43 text

2020/04/20 43 Design & Research 2020/04/20 43 Design & Research まとめ • デザインの良し悪しは、意図が機能するかどうかです。 • UXはデザイナーだけでなく全ての⼈に関わることです。あなたもUXを作る機会があります。ダークパターンには気をつけて。 • フィードバックやリサーチなどを通じてデザインと関わってください。また、デザインの⼒を活⽤してください。