2020/04/20 1Design & Researchデザインの役割と関わり⽅開運研修 2021
View Slide
2020/04/20 2Design & Research2020/04/20 2Design & Research⾃⼰紹介樋⽥ 勇也（といだ ゆうや）kintone開発チーム デザイナー制作会社でWebデザイナー/コーダー/ディレクターを経験後、2016年にサイボウズ⼊社。現在はkintoneのデザイナー。kintoneデザインチームを最⾼のチームにすべく奮闘中
2020/04/20 3Design & Researchデザインって何ですか？
2020/04/20 4Design & Research2020/04/20 4Design & Research良いデザイン / 悪いデザイン
2020/04/20 5Design & Research2020/04/20 5Design & Research1. ユニクロのファッションマガジンhttps://www.uniqlo.com/jp/ja/contents/corp/press-release/2019/08/19082114_19fwlwm.html出典: 雑誌『LifeWear magazine』を創刊 グローバルのユニクロ店舗にて8⽉23⽇（⾦）より配布開始 -UNIQLO ユニクロ
2020/04/20 6Design & Research2020/04/20 6Design & Research2. ユニクロの折り込みチラシhttps://www.uniqlo.com/jp/ja/contents/chirashi_flyer/flyer/折込チラシ | 今週のデジタルチラシ | UNIQLO
2020/04/20 7Design & Research2020/04/20 7Design & 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 8Design & Research2020/04/20 8Design & Research• 海外の雑誌みたいなおしゃれなグラフィック• コストをかけて⾼級感を出す「ユニクロは安くてダサい」というイメージを変えたいhttps://www.uniqlo.com/jp/ja/contents/corp/press-release/2019/08/19082114_19fwlwm.html
2020/04/20 9Design & Research2020/04/20 9Design & Research• ⼀⽬でバリューが⽬に⼊る• 売りである価格を前⾯に• 特別、注⽬、引っかかるワードを⽬にして欲しい• ⼤量に印刷できるコスト今⽇ユニクロで買い物して欲しいhttps://www.uniqlo.com/jp/ja/contents/chirashi_flyer/flyer/
2020/04/20 10Design & Research2020/04/20 10Design & 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 11Design & Research2020/04/20 11Design & Researchデザインの語源• デザインの語源はデッサン(dessin)と同じく、“計画を記号に表す”という意味のラテン語designareである。
2020/04/20 12Design & Research2020/04/20 12Design & Researchデザインは意図が機能することが重要• どのデザインにも意図がある。• その意図がちゃんと機能するかどうか、がデザインの良し悪しを決める
2020/04/20 13Design & ResearchUXとUI
2020/04/20 14Design & Research2020/04/20 14Design & ResearchUX = User ExperienceUI = User Interface
2020/04/20 15Design & Research2020/04/20 15Design & ResearchUI (User Interface)コンピュータとその機械の利⽤者の間での情報をやりとりするためのインタフェース
2020/04/20 16Design & Research2020/04/20 16Design & ResearchUXUI
2020/04/20 17Design & Research2020/04/20 17Design & Research例えば天気アプリhttps://www.behance.net/gallery/59183073/UX-Case-studyWeather-notification-applicationUX Case study̶Weather notification application on Behance
2020/04/20 18Design & Research2020/04/20 18Design & Research真にユーザーの課題を解決するUX• 今⽇は傘を持って⾏った⽅が良いよ、とpush通知を出す• UXは必ずしも作り込まれたUIやグラフィックと関係があるわけではない。
2020/04/20 19Design & Research2020/04/20 19Design & Researchkintoneのユーザー体験って？
2020/04/20 20Design & Research2020/04/20 20Design & ResearchUXは顧客の体験すべて• 障害起きることなくkintoneを安定して使える• サポートの⼈の対応が素晴らしかった• ヘルプを読んで、疑問が解消された• etc
2020/04/20 21Design & Research2020/04/20 21Design & Research× UXはUXデザイナーに関係ある○ UXはプロダクトに関わるすべての⼈に関係ある
2020/04/20 22Design & Research2020/04/20 22Design & Researchダークパターンの話ダークパターンと⾔われる、ユーザーを騙すようなUIについて世界で規制が強化されてきています。https://www.nikkei.com/article/DGKKZO70413070X20C21A3MM8000/ダークパターン、世界で規制強化: ⽇本経済新聞
2020/04/20 23Design & Research2020/04/20 23Design & Researchダークパターンとは• 意図的にユーザーを操ったり、騙したりするUIのこと。例えば…• 解約するための導線を隠す / ステップを異常に増やす• 閉じるボタンを⾮表⽰にする
2020/04/20 24Design & Research2020/04/20 24Design & Researchこんなのもダークパターン「結構です、私は無制限の即⽇配送はいりません。」ユーザーが選びにくい何か恥ずかしさや気まずさを感じる選択肢の⾔葉もダークパターンの⼀つ。https://www.darkpatterns.org/types-of-dark-pattern/confirmshaming
2020/04/20 25Design & Research2020/04/20 25Design & Researchもし、これダークパターンじゃない？と思ったら• もし、同僚、先輩などがやろうとしてることで、「ダークパターン」では？と思うものを⾒かけたら⽌めてあげてください。• よくわからないな、不安だな、という場合は気軽に相談してください。
2020/04/20 26Design & Researchサイボウズのプロダクトにおけるデザイン
2020/04/20 27Design & Research2020/04/20 27Design & Researchkintoneのステークホルダー• エンドユーザー• 管理者• 決裁者• 開発パートナー• 販売パートナー• エヴァンジェリスト etc…
2020/04/20 28Design & Research2020/04/20 28Design & Research様々な要望標準でもっと機能が欲しい！カスタマイズの余地を残して競合に勝てる⾒栄えをもっとUIが⼤きい⽅が⾒やすい もっとUIが⼩さい⽅がたくさんの情報を⼀覧できる今のままで良い、変えないで
2020/04/20 29Design & Research2020/04/20 29Design & Research例：プロセス管理（モバイル版）の場合プロセスを進めるボタン• 社⻑とか⼀ヶ⽉に1回しかアクセスしないかも。• ⼀⽬でわかるコントラストが必要• ⾊と明度でコントラストをつけよう• ⼤事な機能だけど、レコードが⾒えなくなっては困る• 適切な⾼さに抑えたい• スクロールすべきだとすぐわかる配置にしよう（ボタンが半分だけ⾒える）
2020/04/20 30Design & Research2020/04/20 30Design & Researchコストが許容できるメリットがあるマイナスの影響が少ない考え⽅
2020/04/20 31Design & Research2020/04/20 31Design & Researchプロトタイピング
2020/04/20 32Design & Research2020/04/20 32Design & Researchユーザビリティテスト/リサーチ
2020/04/20 33Design & Researchデザインとの関わり⽅
2020/04/20 34Design & Research2020/04/20 34Design & Research1. フィードバックを送る普段製品を使っていて、何か気づいたことがあればぜひフィードバックを送ってください。
2020/04/20 35Design & Research2020/04/20 35Design & Research保存ボタンの⾊が⾒づらいので変えて欲しいです。緑とかにすると良いと思います。NG例
2020/04/20 36Design & Research2020/04/20 36Design & Research• 例えば「⾒づらい」にも…• 他のボタンと混同してしまって⾒⾟かったです• ⽬に⼊りづらい位置にあるので⾒つかりませんでした• コントラストが薄く⽬に⼊りませんでした背景を併せて教えて欲しい
2020/04/20 37Design & Research2020/04/20 37Design & Research状況を書いてみてください“レコードを書き終わってから保存しようとした時”にボタンがすぐに⾒つからず困ってしまいました。“しばらく画⾯下を探した後”、上にボタンがあることに気づきましたが、もう少し⾒つけやすくして欲しいです。
2020/04/20 38Design & Research2020/04/20 38Design & Research2. ユーザービリティテスト/リサーチに協⼒する• 被験者として協⼒をお願いするかもしれません
2020/04/20 39Design & Research2020/04/20 39Design & Research3. デザイナー/リサーチャーと働く要件検討から実装までの流れ• デザイナーはこの全てに関わっている• 最近はデザイナーとエンジニアの境界が曖昧に
2020/04/20 40Design & Research2020/04/20 40Design & Researchモブが当たり前にPM、PG、QA、デザイナー、ライター、モブで集まって作るのが当たり前になってきています。
2020/04/20 41Design & Research2020/04/20 41Design & Researchデザインの⼒を⽣かした活動
2020/04/20 42Design & Research2020/04/20 42Design & Researchぜひデザインの⼒を活⽤してください• いろんなスキルを持ったメンバーがいます。ぜひ我々の⼒を利⽤してください。• UI、グラフィック、CSS、アクセシビリティ、リサーチetc• 詳しくはチーム紹介で
2020/04/20 43Design & Research2020/04/20 43Design & Researchまとめ• デザインの良し悪しは、意図が機能するかどうかです。• UXはデザイナーだけでなく全ての⼈に関わることです。あなたもUXを作る機会があります。ダークパターンには気をつけて。• フィードバックやリサーチなどを通じてデザインと関わってください。また、デザインの⼒を活⽤してください。
cybozuinsideout
keroyama
uxaustralia
ikuhotamura
takejune
joelgoodman
shunmacher
koel
cyberagentdevelopers
thebloggart
spindle
akwkm
ajstarks
sferik
kneath
davidbonilla
zakiyama
roundedbygravity
palkan
jeffersonlam
schacon
michaelherold
ammeep
colly
samanthasiow