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
わかりやすいグラフを作ろう
Search
Yoshihide Jimbo
October 06, 2018
Design
3
1.4k
わかりやすいグラフを作ろう
ng-kyoto Angular Meetup #8 での LT発表資料です。
https://ng-kyoto.connpass.com/event/100685/
Yoshihide Jimbo
October 06, 2018
Tweet
Share
More Decks by Yoshihide Jimbo
See All by Yoshihide Jimbo
高齢者でも使えるプロダクトUIの挑戦 / Designing User Interfaces for the Elderly
jmblog
32
28k
unstated-next による Redux に頼らない状態管理の考察
jmblog
9
5.3k
雰囲気でやってる人向けの Redux 再入門
jmblog
21
6.5k
Web Components で 社内 UI ライブラリを作っている話
jmblog
11
4.3k
gulp: The Good Parts
jmblog
29
5.9k
CSS in JS と CSS Modules
jmblog
25
4.7k
PostCSS とは何か
jmblog
38
9.9k
Kaizen Platform における UI ライブラリのワークフロー
jmblog
30
6.1k
フロントエンドエンジニアのための Dotfiles
jmblog
53
8.5k
Other Decks in Design
See All in Design
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
690
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
150
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
180
Yumika Yamada Portfolio
yumii
0
1.7k
Illustrator×Firefly 生成したイラストをベースにドット絵を作ってみよう!
connecre
1
130
mento Design Team Portfolio
mento0fficial
1
850
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
300
7 Core Values of Round-L
wired888
0
2.1k
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
550
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
techtekt
PRO
7
880
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.1k
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
Featured
See All Featured
Balancing Empowerment & Direction
lara
4
680
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
The Pragmatic Product Professional
lauravandoore
36
6.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Faster Mobile Websites
deanohume
310
31k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Embracing the Ebb and Flow
colly
88
4.8k
YesSQL, Process and Tooling at Scale
rocio
173
14k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Code Reviewing Like a Champion
maltzj
525
40k
Transcript
Θ͔Γ͍͢άϥϑΛ࡞Ζ͏ OHLZPUP"OHVMBS.FFUVQc0DU
ҙɿ"OHVMBSͷҰग़͖ͯ·ͤΜ
ਆอՅल !KNCMPH ͡Μ΅ɹΑ͠ͻͰ
None
None
Θ͔Γ͍͢άϥϑΛ࡞Δͷɺҙ֎ͱ͍͠
σʔλ άϥϑ Τϯίʔυ ޮՌతͳΤϯίʔσΟϯάͷςΫχοΫΛ ͓ͬͯ͘͜ͱ͕େ
Θ͔Γ͍͢άϥϑΛ࡞͢ΔͨΊͷखॱ ԿΛ͍͑ͨͷ͔໌֬ʹ͢Δ ΘΓ͍͢දݱΛબͿ ݟӫ͑ΛσβΠϯ͢Δ
Θ͔Γ͍͢άϥϑΛ࡞͢ΔͨΊͷखॱ ԿΛ͍͑ͨͷ͔໌֬ʹ͢Δ ΘΓ͍͢දݱΛબͿ ݟӫ͑ΛσβΠϯ͢Δ
Α͋͘Δέʔε ۤ࿑ͯ͠ใΛಡΈऔΒͳ͚ΕͳΒͳ͍άϥϑ ͍͑ͨ͜ͱʹϑΥʔΧεͰ͖͍ͯͳ͍ɻ ݴ͍͍ͨ͜ͱ͕Θ͍ͬͯͳ͍ɻ
͍͑ͨʮϝοηʔδʯΛ͔ͭͭʹߜΓࠐΉɻ ͜ΕΛΘ͔Γ͑͘͢Δ͜ͱʹϑΥʔΧε͢Δ 1PXFS1PJOUΛ։͘લʹ
Θ͔Γ͍͢άϥϑΛ࡞͢ΔͨΊͷखॱ ԿΛ͍͑ͨͷ͔໌֬ʹ͢Δ ΘΓ͍͢දݱΛબͿ ݟӫ͑ΛσβΠϯ͢Δ
None
͏ͷආ͚͍ͨάϥϑ ԁάϥϑ %άϥϑ ࣠άϥϑ ಡΈʹ͍͘ ͕ࠩݟ͚ͮΒ͍ ಡΈʹ͍͘ ͕ࠩݟ͚ͮΒ͍ ࠨӈʹॎ͕࣠͋Δͱ ಡΈʹ͘͘
͕͔͔࣌ؒΔ
ͬͯ҆৺ͳجຊͷάϥϑ άϥϑ άϥϑ ઢάϥϑ ࢄਤ ॎάϥϑ ԣάϥϑ ੵΈ্͛άϥϑ ંΕઢάϥϑ εϩʔϓάϥϑ
Θ͔Γ͍͢άϥϑΛ࡞͢ΔͨΊͷखॱ ԿΛ͍͑ͨͷ͔໌֬ʹ͢Δ ΘΓ͍͢දݱΛબͿ ݟӫ͑ΛσβΠϯ͢Δ
ෆඞཁͳཁૉΛऔΓͷͧ͘ ૬खͷҙΛແҙࣝతʹͻ͖͚ͭΔ ৺͕͚Δ͖ͭͷϙΠϯτ
ਅͬനͳը໘ʹཁૉΛͭՃ͢Δ͝ͱʹɺ ೝతෛՙ૿͍͑ͯ͘ɻ ඞཁ࠷খݶ·ͰɺཁૉΛऔΓͷ͍͍ͧͯ͘ɻ ෆඞཁͳཁૉΛऔΓͷͧ͘
None
None
૬ख͕ʮೝࣝ͢Δલʯʹݟ͍ͤͨͷΛݟͤΔ ࢹઢͷಈ͖Λҙࣝͯ͠ཁૉΛஔ͢Δ ૬खͷҙΛແҙࣝతʹͻ͖͚ͭΔ
ʮʯͷΛ͍͑ͯͩ͘͞
ҙࣝతʹݟΑ͏ͱ͠ͳͯ͘ɺ ʮʯ͕ࣗવͱʹඈͼࠐΜͰ͖·ͤΜͰ͔ͨ͠ʁ
ແҙࣝతࢹ֮ใ QSFBUUFOUJWFBUUSJCVUFT c ͖ ܗ ઢͷ͞ ઢͷ෯ αΠζ ۂ Ճ
ғΈ ৭ ೱ͞ Ґஔ ಈ͖
ਓ ʮ;ܕʯʹ ࢹઢΛ ಈ͔͢
5IFUJUMFJTJNQPSUBOU 5IFOPUFUFYUJTOPUTPJNQPSUBOU
࣮ફྫ
ԿΛ͍͑ͨͷ͔໌֬ʹ͢Δ
ԿΛ͑Δ͔ աڈؒͷେࡕࢢͷؾσʔλΛੳͨ݁͠Ռɺ ͕࠷ଳͷଟ͍ͩͬͨ͜ͱ͕Θ͔ͬͨɻ ಛʹͱൺֱ͢Δͱഒͷ͕ࠩ͋ͬͨɻ ͜ͷΛ͑Δɻ
ଳͷ
ΘΓ͍͢දݱΛબͿ
දΛ͏ͷ͋Γ ଳͷ
͜ͷఔͷσʔλͰ͋Εѱ͘ͳ͍ɻ ʮແҙࣝతࢹ֮ใʯΛར༻͢Εɺ Θ͔Γ͑͘͢ΒΕΔɻ ͨͩ͠ɺ΄͔ͷͱͲΕ͙Β͍ͷ͕ࠩ ͋ͬͨͷ͔ɺදΛʮಡΉʯඞཁ͕͋Γ ͕͔͔࣌ؒΔɻ
ંΕઢάϥϑʹͯ͠ΈΔ ؒͷมԽͷΛ͍͑ͨͷͰ͋Ε ͪΐ͏Ͳ͍͍ɻ ͨͩ͠ɺͲΕ͕࠷େ͖͘ɺ ͲΕ͕࠷খ͍͞ͷ͔ͱ͍͏͜ͱʹ ϑΥʔΧε͍ͤͨ͞߹ʹ ͋·Γ͍͍ͯͳ͍ɻ
ॎάϥϑʹͯ͠ΈΔ
ͲΕ͕࠷େ͖͘ɺͲΕ͕࠷খ͍͔͞ɺ ೝ͍ࣝ͢͠͠ɺ͝ͱͷࠩ ͻͱͰ͔Δɻ
ԣάϥϑʹͯ͠ΈΔ ॎάϥϑͱಉ༷ɺͪ͜ΒΘ͔Γ͍͢ɻ ͞Βʹʮ;ܕʯͷࢹઢͷಈ͖Λߟ͑Δͱɺ ·ͣϥϕϧʢʣΛݟͯɺͦΕ͔ΒσʔλΛ ݟΔͷͰɺॎάϥϑΑΓಡΈ͍͢ɻ ʢॎάϥϑͷ߹ɺ্ԼʹΛಈ͔ͯ͠ σʔλͱϥϕϧΛݟൺΔඞཁ͕͋Δɻʣ ࠓճ͜ΕΛ࠾༻ɻ
ݟӫ͑ΛσβΠϯ͢Δ
ෆඞཁͳཁૉΛऔΓͷ͍͍ͧͯ͘
աڈؒͷେࡕࢢͷଳͷ
աڈؒͷେࡕࢢͷଳͷ
৭Λͳ͘͢ʢάϨʔεέʔϧʹ͢Δʣ
աڈؒͷେࡕࢢͷଳͷ
ғΈઢͱܩઢΛফ͢
աڈؒͷେࡕࢢͷଳͷ
9࣠ͷϥϕϧΛফ͢
૬खͷҙΛແҙࣝతʹͻ͖͚ͭΔ
λΠτϧΛࠨ্ʹஔ͍ͯڧௐ͢Δ աڈؒͷେࡕࢢͷଳͷ
ʮ৭ʯͰҙΛҾ͖͚ͭΔ աڈؒͷେࡕࢢͷଳͷ
ݟͯ΄͍͠ʹ͚ͩΛදࣔ͢Δ աڈؒͷେࡕࢢͷଳͷ
աڈؒͷେࡕࢢͷଳͷ
मਖ਼લ
मਖ਼ޙ
աڈؒͷେࡕࢢͷଳͷ
·ͱΊ
ʮσʔλΛͨͩݟͤΔ͚ͩʯͰऴΘΒͳ͍άϥϑΛ࡞Ζ͏