デザイン研修2024

Slide 1

Slide 1 text

2024/04/25 1 開発運⽤研修2024 サイボウズのプロダクトデザイン開発運⽤研修 2024

Slide 2

Slide 2 text

2024/04/25 2 開発運⽤研修2024 2024/04/25 2 開発運⽤研修2024 ⾃⼰紹介樋⽥勇也（といだゆうや） kintoneプラットフォームデザインリード 2016年に中途で⼊社してkintoneのデザイナーをやってました。 2021年の夏に⼀回やめて、2023年の8⽉にまた戻ってきて、今はkintoneデザインのデザイナーのマネージャーをやっています。もうすぐ2歳の息⼦がいて、仕事と家事と育児がんばってます。

Slide 3

Slide 3 text

2024/04/25 3 開発運⽤研修2024 良いデザイン / 悪いデザイン

Slide 4

Slide 4 text

2024/04/25 4 開発運⽤研修2024 2024/04/25 4 開発運⽤研修2024 1. ユニクロのファッションマガジン https://www.uniqlo.com/jp/ja/contents/corp/pre ss-release/2019/08/19082114_19fwlwm.html 出典: 雑誌『LifeWear magazine』を創刊グローバルのユニクロ店舗にて8⽉23⽇（⾦）より配布開始 - UNIQLO ユニクロ

Slide 5

Slide 5 text

2024/04/25 5 開発運⽤研修2024 2024/04/25 5 開発運⽤研修2024 2. ユニクロの折り込みチラシ https://www.uniqlo.com/jp/ja/contents/chirashi_flyer/flyer/ 折込チラシ | 今週のデジタルチラシ | UNIQLO

Slide 6

Slide 6 text

2024/04/25 6 開発運⽤研修2024 2024/04/25 6 開発運⽤研修2024 どちらが良いデザイン？ 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 7

Slide 7 text

2024/04/25 7 開発運⽤研修2024 2024/04/25 7 開発運⽤研修2024 • 海外の雑誌みたいなおしゃれなグラフィック • コストをかけて⾼級感を出す「ユニクロは安くてダサい」というイメージを変えたい https://www.uniqlo.com/jp/ja/contents/corp/press-release/2019/08/19082114_19fwlwm.html

Slide 8

Slide 8 text

2024/04/25 8 開発運⽤研修2024 2024/04/25 8 開発運⽤研修2024 • ⼀⽬でバリューが⽬に⼊る • 売りである価格を前⾯に • 特別、注⽬、引っかかるワードを⽬にして欲しい • コストを抑えて⼤量に印刷今⽇ユニクロで買い物して欲しい https://www.uniqlo.com/jp/ja/contents/chirashi_flyer/flyer/

Slide 9

Slide 9 text

2024/04/25 9 開発運⽤研修2024 2024/04/25 9 開発運⽤研修2024 それぞれに、⽬的・意図がある。⽬的を達成するための最適なデザインになっている。 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 10

Slide 10 text

2024/04/25 10 開発運⽤研修2024 2024/04/25 10 開発運⽤研修2024 デザインの語源 • デザインの語源はデッサン(dessin)と同じく、“計画を記号に表す”という意味のラテン語designareである。

Slide 11

Slide 11 text

2024/04/25 11 開発運⽤研修2024 2024/04/25 11 開発運⽤研修2024 デザインは意図が機能することが重要 • どんなデザインにも意図がある。 • その意図がちゃんと機能するかどうか、がデザインの良し悪しを決める

Slide 12

Slide 12 text

2024/04/25 12 開発運⽤研修2024 UXとUI

Slide 13

Slide 13 text

2024/04/25 13 開発運⽤研修2024 2024/04/25 13 開発運⽤研修2024 UX = User Experience UI = User Interface

Slide 14

Slide 14 text

2024/04/25 14 開発運⽤研修2024 2024/04/25 14 開発運⽤研修2024 UI (User Interface) コンピュータとその機械の利⽤者の間での情報をやりとりするためのインタフェース

Slide 15

Slide 15 text

2024/04/25 15 開発運⽤研修2024 2024/04/25 15 開発運⽤研修2024 UX UI UXはUIを包含する概念

Slide 16

Slide 16 text

2024/04/25 16 開発運⽤研修2024 2024/04/25 16 開発運⽤研修2024 美しいUI = 良いUX？ https://www.behance.net/gallery/59183073/UX-Case-studyWeather-notification-application UX Case study̶Weather notification application on Behance

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

2024/04/25 18 開発運⽤研修2024 2024/04/25 18 開発運⽤研修2024 kintoneのユーザー体験って？

Slide 19

Slide 19 text

2024/04/25 19 開発運⽤研修2024 2024/04/25 19 開発運⽤研修2024 こんなこともUXの⼀部 • 障害が起きることなくサイボウズ製品を毎⽇安⼼して使える • サポートの⼈の対応が素晴らしかった • ヘルプを読んで、疑問が解消された etc…

Slide 20

Slide 20 text

2024/04/25 20 開発運⽤研修2024 2024/04/25 20 開発運⽤研修2024 × UXはUXデザイナーがつくるもの ○ UXはプロダクトに関わるすべての⼈がつくるもの UXは顧客のサービスの体験すべて

Slide 21

Slide 21 text

2024/04/25 21 開発運⽤研修2024 サイボウズのプロダクトにおけるデザイン

Slide 22

Slide 22 text

2024/04/25 22 開発運⽤研修2024 2024/04/25 22 開発運⽤研修2024 リファインメント例えばkintoneの場合

Slide 23

Slide 23 text

2024/04/25 23 開発運⽤研修2024 2024/04/25 23 開発運⽤研修2024 例えばkintoneのステークホルダー • エンドユーザー • アプリ管理者 • システム管理者 • 決裁者 • 開発パートナー • 販売パートナー etc….

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

2024/04/25 25 開発運⽤研修2024 2024/04/25 25 開発運⽤研修2024 様々な観点から検討する検討・実装コストはどうか？ユーザーの価値は何か？ユーザーにどんな影響があるか？どんなトレードオフがあるかリリース時の⾒え⽅はどうかどんなリスクがあるか

Slide 26

Slide 26 text

2024/04/25 26 開発運⽤研修2024 2024/04/25 26 開発運⽤研修2024 プロトタイピング抽象と具体を⾏ったり来たり

Slide 27

Slide 27 text

2024/04/25 27 開発運⽤研修2024 2024/04/25 27 開発運⽤研修2024 ユーザビリティテスト/リサーチ

Slide 28

Slide 28 text

2024/04/25 28 開発運⽤研修2024 2024/04/25 28 開発運⽤研修2024 デザインに関わる職能プロダクトデザイナー情報設計 / UIデザインテクニカルライター UI上の⽂⾔ / ヘルプの作成ローカライズ他⾔語版での表現 / ヘルプの作成デザインテクノロジストデザインシステムの構築 / 実装との橋渡し UXリサーチャー検討時やリリース後のリサーチ

Slide 29

Slide 29 text

2024/04/25 29 開発運⽤研修2024 2024/04/25 29 開発運⽤研修2024 デザインシステムについてデザインシステムとは製品やサービスの開発においてデザインの⼀貫性、効率性、およびスケーラビリティを⾼めるために作られたツールやガイドラインのセットのこと

Slide 30

Slide 30 text

2024/04/25 30 開発運⽤研修2024 2024/04/25 30 開発運⽤研修2024 https://kintone-design-system.cybozu-internal.dev/

Slide 31

Slide 31 text

2024/04/25 31 開発運⽤研修2024 デザインとの関わり⽅

Slide 32

Slide 32 text

2024/04/25 32 開発運⽤研修2024 2024/04/25 32 開発運⽤研修2024 フロントエンドの領域では • 情報構造のマークアップ • スタイルシートによるスタイリング • インタラクションの実装 • などなど

Slide 33

Slide 33 text

2024/04/25 33 開発運⽤研修2024 2024/04/25 33 開発運⽤研修2024 バックエンドの領域でも • 性能に対して適切なデザイン • データ構造が反映されたUI設計 • パフォーマンスを考慮したUI • などなど

Slide 34

Slide 34 text

2024/04/25 34 開発運⽤研修2024 2024/04/25 34 開発運⽤研修2024 フィードバックを送る普段製品を使っていて、何か気づいたことがあればぜひフィードバックを送ってください。

Slide 35

Slide 35 text

2024/04/25 35 開発運⽤研修2024 2024/04/25 35 開発運⽤研修2024 保存ボタンの⾊が⾒づらいので変えて欲しいです。緑とかにすると良いと思います。 NG例

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

2024/04/25 38 開発運⽤研修2024 2024/04/25 38 開発運⽤研修2024 ユーザービリティテスト/リサーチに協⼒する • 被験者として協⼒をお願いするかもしれません

Slide 39

Slide 39 text

2024/04/25 39 開発運⽤研修2024 2024/04/25 39 開発運⽤研修2024 まとめ • デザインの良し悪しは、⾒た⽬のことだけでなく、意図が機能するかどうかです。 • UXはデザイナーだけでなく全ての⼈に関わることです。あなたもサイボウズの製品のUXを形作る⼀⼈です。 • ⽇々の仕事でぜひデザインに関わる職能の⼈たちと関わってください。また、デザインの⼒を活⽤してください。