Upgrade to Pro — share decks privately, control downloads, hide ads and more …

デザイン研修 2021 / Design training 2021

デザイン研修 2021 / Design training 2021

Cybozu
PRO

May 21, 2021
Tweet

More Decks by Cybozu

Other Decks in Design

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  7. 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/

    View Slide

  8. 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

    View Slide

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

    View Slide

  10. 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/

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  17. 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide