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
サービス作りのためにチームで取り組んだ5つの事
Search
Ohashi
August 10, 2016
Design
1
5.4k
サービス作りのためにチームで取り組んだ5つの事
Ohashi
August 10, 2016
Tweet
Share
More Decks by Ohashi
See All by Ohashi
デザイナーが知っておくべき iOS開発のあれこれ
ohanamizuki
2
7.6k
"お金"のデザインの壁と打ち手
ohanamizuki
4
6.1k
メディアリニューアルまでのあしあと
ohanamizuki
2
110
Other Decks in Design
See All in Design
デザイナーがAIを使い倒して爆速プロダクト開発!社内ハッカソンでの取り組み紹介
abokadotyann
9
2.9k
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
6.8k
【Designship 2025|10.11】デザイン組織と事業貢献、その挑戦と結果。
payatsusan213
1
900
プロダクトリニューアルと同時に進める初めてのデザインシステム
techtekt
PRO
0
410
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
400
BXデザイン組織が挑んだスクラム 〜ブランドを育み、デザイナーを解放する変革の物語〜(Scrum Fest Mikawa 2025)
tadashiinoue
0
1.1k
DMMデザイナーの “AI活用の現在と未来”
takumasaito
1
390
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
root_recruit
0
270
OSO2025-マサカリと太陽:伝え方の情報デザイン
majimasachi
0
660
Shaolin_Showdown
solmetts
0
240
Correspondence:共に生成していく過程
akiramotomura
0
180
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
2.5k
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
21k
Site-Speed That Sticks
csswizardry
13
1k
30 Presentation Tips
portentint
PRO
1
190
How to make the Groovebox
asonas
2
1.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
34k
Bash Introduction
62gerente
615
210k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Collaborative Software Design: How to facilitate domain modelling decisions
baasie
0
120
Thoughts on Productivity
jonyablonski
74
5k
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
190
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
Producing Creativity
orderedlist
PRO
348
40k
Transcript
αʔϏε࡞ΓͷͨΊʹ νʔϜͰऔΓΜͩ5ͭͷࣄ 2016/07/28 גࣜձࣾϚωʔϑΥϫʔυ େڮ ਸ਼ੜ
201410݄͔ΒϚωʔϑΥϫʔυʹδϣΠϯ ࣗಈՈܭαʔϏεʰϚωʔϑΥϫʔυʱͷσβΠϯΛ୲͍ͯ͠·͢ େڮ ਸ਼ੜ(͓͓͠ Έ͖ͣ) Designer ࣗݾհ
ձࣾհ
͓ۚΛલɻਓੜΛͬͱલɻ ݸਓاۀɺ͓ۚʹؔ͢Δ՝Έࢁੵ͍ͯ͠Δɻ αʔϏεΛ௨ͯ͠ɺ͓ۚͷ՝Λղܾ͠ ϢʔβʔͷਓੜΛϙδςΟϒͳͷɺલ͖ͳͷʹ͍ͯ͘͠ɻ ϛογϣϯ
Ոܭࢿ࢈ͳͲͷ ݸਓͷ͓ۚʹؔ͢Δݱঢ়՝Λ ϦΞϧλΠϜʹՄࢹԽ͢Δɻ ࣗಈՈܭɾࢿ࢈ཧαʔϏε
ձࣾͷձܭͳͲʹؔ͢Δݱঢ়՝Λ ϦΞϧλΠϜʹՄࢹԽ͢Δɻ
νʔϜͰऔΓΜͩ5ͭͷࣄ
՝ 1 ίϛϡχέʔγϣϯ͕ԁʹਐ·ͳ͍ 2 νʔϜϝϯόʔͷೝ͕ࣝͦΖΘͳ͍ νʔϜͰͷ։ൃޮ্͕͕Βͳ͍
1. ϧʔϧ࡞Γ
6*Λ࣮͢Δ࣌ʹΉ Before σβΠϯσʔλͱ ࣮ζϨͯΔɻɻɻ ϧʔϧ͕໌֬Ͱͳ͍͔Β໎͏ ίϛϡχέʔγϣϯίετ͕͔͔Δ ΤϯδχΞ σβΠφʔ
Style Guide࡞ͬͨΑ ͏৭ϑΥϯταΠζ͕໌֬ʹͳͬͨ͜ͱͰ໎Θͳ͍
͍ͬͯΔπʔϧɹͦͷ̍ Zeplin SketchͷศརϏϡʔΞʔ݉ΤΫεϙʔτϔϧύʔ
͍ͬͯΔπʔϧɹͦͷ̍ Zeplin SketchͷศརϏϡʔΞʔ݉ΤΫεϙʔτϔϧύʔ for ΤϯδχΞ
͍ͬͯΔπʔϧɹͦͷ̎ CRAFT LIBRARY Sketch symbol ΨΠυϥΠϯڞ௨ύʔπΛνʔϜͰڞ༗
͍ͬͯΔπʔϧɹͦͷ̎ CRAFT LIBRARY Sketch symbol ΨΠυϥΠϯڞ௨ύʔπΛνʔϜͰڞ༗ for σβΠφʔ
͞ΒͳΔࢼΈ Style GuideΛ֬ೝͰ͖ΔΞϓϦΛ࡞Ζ͏ʂ Style Guide App্ͰUIͱ͔τϥϯδγϣϯ͕֬ೝͰ͖Δͷ ςϯϓϨΛमਖ਼͢Εɺͯ͢Δ
͞ΒͳΔࢼΈ Style GuideΛ֬ೝͰ͖ΔΞϓϦΛ࡞Ζ͏ʂ Style Guide App্ͰUIͱ͔τϥϯδγϣϯ͕֬ೝͰ͖Δͷ ςϯϓϨΛमਖ਼͢Εɺͯ͢Δ ৄ͘͠ ͜ͷ͋ͱʂ
2. ։ൃϑϩʔͷݟ͠
Before اը༷ݕ౼࣌ʹΤϯδχΞࢹ͕ൈ͚͕ͪͩͬͨ ΤϯδχΞ σβΠφʔ σΟϨΫλʔ ༷ܾΊ ΤϯδχΞࢹ͕ೖΒͳ͍ ×
ϑϩʔͷݟ͠ ΞϓϦΤϯδχΞ σβΠφʔ σΟϨΫλʔ ΈΜͳͰ༷ܾΊ ༷ʑͳ৬छͷࢹΛೖΕͯ ૣ͍ஈ֊Ͱݒ೦ͷચ͍ग़͕͠Ͱ͖ΔΑ͏ʹ όοΫΤϯυΤϯδχΞ
3. ΤϯδχΞͱσβΠφʔ ͬͱ͔Γ߹͓͏ͥͷձ
ͲΜͳऔΓΈΛ͍ͯ͠Δ͔ • ΤϯδχΞ͚SketchϫʔΫγϣοϓ • σβΠφʔ͚Androidษڧձ • ΈΜͳͰϏσΦΛݟΔձ • νϟοτͰͷใަͳͲ ͓ޓ͍ΛΔ͜ͱɾϦεϖΫτ͢Δ͜ͱͰ
αʔϏε։ൃ͕ԁʹͳΔ
ͲΜͳऔΓΈΛ͍ͯ͠Δ͔ • ΤϯδχΞ͚SketchϫʔΫγϣοϓ • σβΠφʔ͚Androidษڧձ • ΈΜͳͰϏσΦΛݟΔձ • νϟοτͰͷใަͳͲ ͓ޓ͍ΛΔ͜ͱɾϦεϖΫτ͢Δ͜ͱͰ
αʔϏε։ൃ͕ԁʹͳΔ
ΤϯδχΞ͚SketchϫʔΫγϣοϓ ࣮ࡍʹ࡞ͬͯΈΔͰ ͲͷΑ͏ʹ࡞ΒΕ͍ͯΔ͔Δ͜ͱ͕Ͱ͖Δ ͡ΊͯͰେৎʂΈΜͳͰSketchͰԿ͔࡞ͬͯΈΑ͏
4. ؾܰʹ૬ஊ͕Ͱ͖Δ ϑϦʔΞυϨε੮
ϑϦʔΞυϨε੮ ۙ͘Ͱ࡞ۀ͢ΔࣄͰࠔͬͨ࣌ʹ͙͢ฉ͚Δ ͔ͩΒɺ͙͢ʹରԠͰ͖ͯ࡞ۀޮ্
5. αʔϏείϯηϓτ ͷՄࢹԽ
Before ͕࣠ͳ͍͔ΒνʔϜͷํੑ֤ਓͷࢥ͍ඳ͍ͯΔ αʔϏε૾͕όϥόϥ αʔϏεͷະདྷ૾͕ෆ໌֬ αʔϏεͷڧΈ࣠Կ͔ ?
ՄࢹԽͱڞ༗ ՄࢹԽ͠ڞ༗ͨ͠ࣄʹΑΓ அ࣠ͷϒϨ͕ɺͳ͘ͳͬͨ
·ͱΊ
՝ 1 ίϛϡχέʔγϣϯ͕ԁʹਐ·ͳ͍ 2 νʔϜϝϯόʔͷೝ͕ࣝͦΖΘͳ͍ νʔϜͰͷ։ൃޮ্͕͕Βͳ͍
·ͱΊ %FTJHOFS &OHJOFFS ͓ޓ͍ͷࣄΛཧղ͠ɺ࠷࠷ߴͷ։ൃΛ͍͖ͯ͠·͠ΐ͏ αʔϏεͷՁϢʔβʔମݧͷ্ σβΠφʔ͚ͩͷͷͰͳ͘ɺνʔϜશମͷͷɻ
5IBOLZPV