Share
Embed
Slide 1
Slide 1 text
2020/04/30 1
Design & Research
デザインの役割と関わり⽅
開運研修 2020
Slide 2
Slide 2 text
2020/04/30 2
Design & Research
2020/04/30 2
Design & Research
⾃⼰紹介
樋⽥ 勇也
kintone開発チーム デザイナー
制作会社でWebデザイナー/コーダー/ディレクターを経験後、
2016年にサイボウズ⼊社。現在はクラウドサービスkintoneのデザイナー。
kintoneデザインチームを最⾼のチームにすべく奮闘中
Slide 3
Slide 3 text
2020/04/30 3
Design & Research
デザインって何？
Slide 4
Slide 4 text
2020/04/30 4
Design & Research
2020/04/30 4
Design & Research
あらゆるものにデザインがある
Slide 5
Slide 5 text
2020/04/30 5
Design & Research
2020/04/30 5
Design & Research
1. ユニクロのファッションマガジン
• シンプル
• お洒落
• スマート
• ⾼級
https://www.uniqlo.com/jp/ja/contents/corp/press-release/2019/08/19082114_19fwlwm.html
出典: 雑誌『LifeWear magazine』を創刊 グローバルのユニクロ店舗にて8⽉23⽇（⾦）より配布開始 - UNIQLO ユニクロ
Slide 6
Slide 6 text
2020/04/30 6
Design & Research
2020/04/30 6
Design & Research
2. ユニクロの折り込みチラシ
• 情報量が多い
• 派⼿
• 庶⺠的
• 安そう
https://www.uniqlo.com/jp/ja/contents/chirashi_flyer/flyer/
折込チラシ | 今週のデジタルチラシ | UNIQLO
Slide 7
Slide 7 text
2020/04/30 7
Design & Research
2020/04/30 7
Design & Research
どれが良いデザイン / 悪いデザイン？
Slide 8
Slide 8 text
2020/04/30 8
Design & Research
2020/04/30 8
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 9
Slide 9 text
2020/04/30 9
Design & Research
2020/04/30 9
Design & Research
• 海外の雑誌みたいな
おしゃれなグラフィック
• コストをかけても⾼級感を出す
「ユニクロは安くてダサい」
というイメージを変えたい
https://www.uniqlo.com/jp/ja/contents/corp/press-release/2019/08/19082114_19fwlwm.html
Slide 10
Slide 10 text
2020/04/30 10
Design & Research
2020/04/30 10
Design & Research
• ⼀⽬でバリューが⽬に⼊る
• 売りである価格を前⾯に
• 特別、注⽬、引っかかるワードを
⽬にして欲しい
• ⼤量に印刷できるようコストを抑える
今⽇ユニクロで買い物して欲しい
https://www.uniqlo.com/jp/ja/contents/chirashi_flyer/flyer/
Slide 11
Slide 11 text
2020/04/30 11
Design & Research
2020/04/30 11
Design & Research
デザインの語源
• デザインの語源はデッサン(dessin)と同じく、“計画を記号に
表す”という意味のラテン語designareである。
Slide 12
Slide 12 text
2020/04/30 12
Design & Research
2020/04/30 12
Design & Research
デザインは機能することが重要
• どのデザインにも計画（意図）がある。
• その意図がちゃんと機能するかどうか、が
デザインの良し悪しを決める
Slide 13
Slide 13 text
2020/04/30 13
Design & Research
UXデザインって？
Slide 14
Slide 14 text
2020/04/30 14
Design & Research
2020/04/30 14
Design & Research
どれも美しい天気アプリだけど…
https://www.behance.net/gallery/59183073/UX-Case-studyWeather-notification-application
UX Case study̶Weather notification application on Behance
Slide 15
Slide 15 text
2020/04/30 15
Design & Research
2020/04/30 15
Design & Research
ユーザーの課題を解決するUX
• 今⽇は傘を持って⾏った⽅が良いよ、とpush
通知を出すアプリ
• 必ずしもUXにビジュアルが伴うわけではない
https://www.behance.net/gallery/59183073/UX-
Case-studyWeather-notification-application
UX Case study̶Weather notification application on Behance
Slide 16
Slide 16 text
2020/04/30 16
Design & Research
2020/04/30 16
Design & Research
kintoneのユーザーの体験って？
Slide 17
Slide 17 text
2020/04/30 17
Design & Research
2020/04/30 17
Design & Research
UXは顧客の体験すべて
• kintoneが毎⽇安定して使える
• サポートの⼈が親切
• すぐに理解できるヘルプ
• その他ユーザーが体験するすべて
Slide 18
Slide 18 text
2020/04/30 18
Design & Research
2020/04/30 18
Design & Research
× UXはUXデザイナーに関係がある
○ UXはプロダクトに関わるすべての⼈に関係がある
Slide 19
Slide 19 text
2020/04/30 19
Design & Research
サイボウズのプロダクトにおけるデザイン
Slide 20
Slide 20 text
2020/04/30 20
Design & Research
2020/04/30 20
Design & Research
kintoneのステークホルダー
• エンドユーザー
• 管理者
• 決裁者
• 開発パートナー
• 販売パートナー
• エヴァンジェリスト etc…
Slide 21
Slide 21 text
2020/04/30 21
Design & Research
2020/04/30 21
Design & Research
様々な要望
標準でもっと機能が欲しい！
カスタマイズの余地を残して
競合に勝てる⾒栄えを
もっとUIが⼤きい⽅が⾒やすい もっとUIが⼩さい⽅がたくさんの
情報を⼀覧できる
今のままで良い、変えないで
Slide 22
Slide 22 text
2020/04/30 22
Design & Research
2020/04/30 22
Design & Research
例：プロセス管理（モバイル版）の場合
プロセスを進めるボタン
• 社⻑とか⼀ヶ⽉に1回しかアクセスしないかも。
• ⼀⽬でわかるコントラストが必要
• ⾊と明度で差をつけよう
• ⼤事な機能だけど、レコードが⾒えなくなっては困る
• 適切な⾼さに抑えたい
• スクロールすべきだとすぐわかる配置にしよう
（ボタンが半分だけ⾒える）
Slide 23
Slide 23 text
2020/04/30 23
Design & Research
2020/04/30 23
Design & Research
コストが許容できる
ユーザーへの
価値が⾼い
マイナスの
影響が少ない
考え⽅
Slide 24
Slide 24 text
2020/04/30 24
Design & Research
2020/04/30 24
Design & Research
プロトタイピング
Slide 25
Slide 25 text
2020/04/30 25
Design & Research
2020/04/30 25
Design & Research
ユーザビリティテスト/リサーチ
Slide 26
Slide 26 text
2020/04/30 26
Design & Research
デザインとの関わり⽅
Slide 27
Slide 27 text
2020/04/30 27
Design & Research
2020/04/30 27
Design & Research
1. フィードバックを送る
普段製品を使っていて、何か気づ
いたことがあればぜひフィード
バックを送ってください。
Slide 28
Slide 28 text
2020/04/30 28
Design & Research
2020/04/30 28
Design & Research
保存ボタンの⾊が⾒づらいので変えて欲しいです。
緑とかにすると良いと思います。
NG例
Slide 29
Slide 29 text
2020/04/30 29
Design & Research
2020/04/30 29
Design & Research
• 例えば「⾒づらい」にも…
• 他のボタンと混同してしまって⾒⾟かったです
• ⽬に⼊りづらい位置にあるので⾒つかりませんでした
• コントラストが薄く⽬に⼊りませんでした
背景を併せて教えて欲しい
Slide 30
Slide 30 text
2020/04/30 30
Design & Research
2020/04/30 30
Design & Research
状況を書いてみてください
“レコードを書き終わってから保存しようとした時”に
ボタンがすぐに⾒つからず困ってしまいました。
“しばらく画⾯下を探した後”、上にボタンがあることに気づきま
したが、もう少し⾒つけやすくして欲しいです。
Slide 31
Slide 31 text
2020/04/30 31
Design & Research
2020/04/30 31
Design & Research
2. ユーザービリティテスト/リサーチに協⼒する
• 被験者として協⼒をお願いするかもしれません
Slide 32
Slide 32 text
2020/04/30 32
Design & Research
2020/04/30 32
Design & Research
3. デザイナー/リサーチャーと働く
要件検討から実装までの流れ
• デザイナーはこの全てに
関わっている
• 最近はデザイナーと
エンジニアの境界が曖昧に
Slide 33
Slide 33 text
2020/04/30 33
Design & Research
2020/04/30 33
Design & Research
モブが当たり前に
PM、PG、QA、デザイナー、
ライター、モブで集まって作るの
が当たり前になってきています。
Slide 34
Slide 34 text
2020/04/30 34
Design & Research
2020/04/30 34
Design & Research
デザインの⼒を
⽣かした活動
Slide 35
Slide 35 text
2020/04/30 35
Design & Research
2020/04/30 35
Design & Research
ぜひデザインの⼒を活⽤してください
• いろんなスキルを持ったメンバーがいます。
ぜひ我々の⼒を利⽤してください。
• UI、グラフィック、CSS、アクセシビリティ、リサーチetc
• 詳しくはチーム紹介で
Slide 36
Slide 36 text
2020/04/30 36
Design & Research
2020/04/30 36
Design & Research
まとめ
• デザインの良し悪しは、意図が機能するかどうかです。
• UXはデザイナーだけでなく全ての⼈に関わることです。
• フィードバックやリサーチなどを通じてデザインとも関わって
ください。また、デザインの⼒を活⽤してください。