Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
デザイン研修 / Design_Training
Search
Cybozu
PRO
August 19, 2020
Technology
1
60k
デザイン研修 / Design_Training
Cybozu
PRO
August 19, 2020
Tweet
Share
More Decks by Cybozu
See All by Cybozu
AIツール開発ワークショップ(Dify)【サイボウズ新人研修2025】
cybozuinsideout
PRO
9
11k
モバイル【サイボウズ新人研修2025】
cybozuinsideout
PRO
3
3k
Git/GitHub を使う上で知っておくと嬉しいかも Tips【サイボウズ新人研修2025】
cybozuinsideout
PRO
8
7.6k
GitHub Copilot活用【サイボウズ新人研修2025】
cybozuinsideout
PRO
14
12k
ソフトウェアライセンス【サイボウズ新人研修2025】
cybozuinsideout
PRO
10
7.1k
エンジニアのためのアウトプット講座 〜知識をシェアするはじめの一歩〜【サイボウズ新人研修2025】
cybozuinsideout
PRO
6
3.8k
Docker入門【サイボウズ新人研修2025】
cybozuinsideout
PRO
12
9.1k
セキュリティ【サイボウズ新人研修2025】
cybozuinsideout
PRO
2
2.6k
TLS 1.3をざっと理解する【サイボウズ新人研修2025】
cybozuinsideout
PRO
2
1.6k
Other Decks in Technology
See All in Technology
セキュアな社内Dify運用と外部連携の両立 ~AIによるAPIリスク評価~
zozotech
PRO
0
120
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
4
1k
安定した基盤システムのためのライブラリ選定
kakehashi
PRO
3
130
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
5
3k
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.9k
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
1
310
毎晩の 負荷試験自動実行による効果
recruitengineers
PRO
5
180
セキュアなAI活用のためのLiteLLMの可能性
tk3fftk
1
330
ClaudeCode_vs_GeminiCLI_Terraformで比較してみた
tkikuchi
1
1k
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
6
1.9k
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
120
スタックチャン家庭用アシスタントへの道
kanekoh
0
120
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
How to train your dragon (web standard)
notwaldorf
96
6.1k
How STYLIGHT went responsive
nonsquared
100
5.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
A Tale of Four Properties
chriscoyier
160
23k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
We Have a Design System, Now What?
morganepeng
53
7.7k
Automating Front-end Workflow
addyosmani
1370
200k
It's Worth the Effort
3n
185
28k
Docker and Python
trallard
45
3.5k
Transcript
2020/04/30 1 Design & Research デザインの役割と関わり⽅ 開運研修 2020
2020/04/30 2 Design & Research 2020/04/30 2 Design & Research
⾃⼰紹介 樋⽥ 勇也 kintone開発チーム デザイナー 制作会社でWebデザイナー/コーダー/ディレクターを経験後、 2016年にサイボウズ⼊社。現在はクラウドサービスkintoneのデザイナー。 kintoneデザインチームを最⾼のチームにすべく奮闘中
2020/04/30 3 Design & Research デザインって何?
2020/04/30 4 Design & Research 2020/04/30 4 Design & Research
あらゆるものにデザインがある
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 ユニクロ
2020/04/30 6 Design & Research 2020/04/30 6 Design & Research
2. ユニクロの折り込みチラシ • 情報量が多い • 派⼿ • 庶⺠的 • 安そう https://www.uniqlo.com/jp/ja/contents/chirashi_flyer/flyer/ 折込チラシ | 今週のデジタルチラシ | UNIQLO
2020/04/30 7 Design & Research 2020/04/30 7 Design & Research
どれが良いデザイン / 悪いデザイン?
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/
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
2020/04/30 10 Design & Research 2020/04/30 10 Design & Research
• ⼀⽬でバリューが⽬に⼊る • 売りである価格を前⾯に • 特別、注⽬、引っかかるワードを ⽬にして欲しい • ⼤量に印刷できるようコストを抑える 今⽇ユニクロで買い物して欲しい https://www.uniqlo.com/jp/ja/contents/chirashi_flyer/flyer/
2020/04/30 11 Design & Research 2020/04/30 11 Design & Research
デザインの語源 • デザインの語源はデッサン(dessin)と同じく、“計画を記号に 表す”という意味のラテン語designareである。
2020/04/30 12 Design & Research 2020/04/30 12 Design & Research
デザインは機能することが重要 • どのデザインにも計画(意図)がある。 • その意図がちゃんと機能するかどうか、が デザインの良し悪しを決める
2020/04/30 13 Design & Research UXデザインって?
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
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
2020/04/30 16 Design & Research 2020/04/30 16 Design & Research
kintoneのユーザーの体験って?
2020/04/30 17 Design & Research 2020/04/30 17 Design & Research
UXは顧客の体験すべて • kintoneが毎⽇安定して使える • サポートの⼈が親切 • すぐに理解できるヘルプ • その他ユーザーが体験するすべて
2020/04/30 18 Design & Research 2020/04/30 18 Design & Research
× UXはUXデザイナーに関係がある ◦ UXはプロダクトに関わるすべての⼈に関係がある
2020/04/30 19 Design & Research サイボウズのプロダクトにおけるデザイン
2020/04/30 20 Design & Research 2020/04/30 20 Design & Research
kintoneのステークホルダー • エンドユーザー • 管理者 • 決裁者 • 開発パートナー • 販売パートナー • エヴァンジェリスト etc…
2020/04/30 21 Design & Research 2020/04/30 21 Design & Research
様々な要望 標準でもっと機能が欲しい! カスタマイズの余地を残して 競合に勝てる⾒栄えを もっとUIが⼤きい⽅が⾒やすい もっとUIが⼩さい⽅がたくさんの 情報を⼀覧できる 今のままで良い、変えないで
2020/04/30 22 Design & Research 2020/04/30 22 Design & Research
例:プロセス管理(モバイル版)の場合 プロセスを進めるボタン • 社⻑とか⼀ヶ⽉に1回しかアクセスしないかも。 • ⼀⽬でわかるコントラストが必要 • ⾊と明度で差をつけよう • ⼤事な機能だけど、レコードが⾒えなくなっては困る • 適切な⾼さに抑えたい • スクロールすべきだとすぐわかる配置にしよう (ボタンが半分だけ⾒える)
2020/04/30 23 Design & Research 2020/04/30 23 Design & Research
コストが許容できる ユーザーへの 価値が⾼い マイナスの 影響が少ない 考え⽅
2020/04/30 24 Design & Research 2020/04/30 24 Design & Research
プロトタイピング
2020/04/30 25 Design & Research 2020/04/30 25 Design & Research
ユーザビリティテスト/リサーチ
2020/04/30 26 Design & Research デザインとの関わり⽅
2020/04/30 27 Design & Research 2020/04/30 27 Design & Research
1. フィードバックを送る 普段製品を使っていて、何か気づ いたことがあればぜひフィード バックを送ってください。
2020/04/30 28 Design & Research 2020/04/30 28 Design & Research
保存ボタンの⾊が⾒づらいので変えて欲しいです。 緑とかにすると良いと思います。 NG例
2020/04/30 29 Design & Research 2020/04/30 29 Design & Research
• 例えば「⾒づらい」にも… • 他のボタンと混同してしまって⾒⾟かったです • ⽬に⼊りづらい位置にあるので⾒つかりませんでした • コントラストが薄く⽬に⼊りませんでした 背景を併せて教えて欲しい
2020/04/30 30 Design & Research 2020/04/30 30 Design & Research
状況を書いてみてください “レコードを書き終わってから保存しようとした時”に ボタンがすぐに⾒つからず困ってしまいました。 “しばらく画⾯下を探した後”、上にボタンがあることに気づきま したが、もう少し⾒つけやすくして欲しいです。
2020/04/30 31 Design & Research 2020/04/30 31 Design & Research
2. ユーザービリティテスト/リサーチに協⼒する • 被験者として協⼒をお願いするかもしれません
2020/04/30 32 Design & Research 2020/04/30 32 Design & Research
3. デザイナー/リサーチャーと働く 要件検討から実装までの流れ • デザイナーはこの全てに 関わっている • 最近はデザイナーと エンジニアの境界が曖昧に
2020/04/30 33 Design & Research 2020/04/30 33 Design & Research
モブが当たり前に PM、PG、QA、デザイナー、 ライター、モブで集まって作るの が当たり前になってきています。
2020/04/30 34 Design & Research 2020/04/30 34 Design & Research
デザインの⼒を ⽣かした活動
2020/04/30 35 Design & Research 2020/04/30 35 Design & Research
ぜひデザインの⼒を活⽤してください • いろんなスキルを持ったメンバーがいます。 ぜひ我々の⼒を利⽤してください。 • UI、グラフィック、CSS、アクセシビリティ、リサーチetc • 詳しくはチーム紹介で
2020/04/30 36 Design & Research 2020/04/30 36 Design & Research
まとめ • デザインの良し悪しは、意図が機能するかどうかです。 • UXはデザイナーだけでなく全ての⼈に関わることです。 • フィードバックやリサーチなどを通じてデザインとも関わって ください。また、デザインの⼒を活⽤してください。