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
理想のデザインプロセスについて考える〜EC-CUBE 4の管理画面デザインで学んだデザインプロ...
Search
Fukazawa Kojiro
November 24, 2018
Design
0
3.3k
理想のデザインプロセスについて考える〜EC-CUBE 4の管理画面デザインで学んだデザインプロセスの面白さ・難しさ
2018年11月24日のFRONTEND CONFERENCE 2018で発表したセミナーのスライドです。EC-CUBE 4の管理画面をデザインした経験を振り返り、そのプロセスについてお話しました。
Fukazawa Kojiro
November 24, 2018
Tweet
Share
More Decks by Fukazawa Kojiro
See All by Fukazawa Kojiro
見積変われば仕事が変わる? 関西在住ウェブ系フリーランス・お見積の理想と現実
witch_doktor
2
1.7k
「ワクワク」をデザインすること 〜 EC-CUBE 4 管理画面から学んだオープンソースソフトウェア体験のデザイン 〜
witch_doktor
4
400
「みんなのデザイン」のために 〜 EC-CUBE 4 の管理画面をデザインするにあたって考えたこと
witch_doktor
2
2.6k
コミュニティがJUSO Coworkingを育ててくれた
witch_doktor
0
130
どれだけかかるの? WordPressでウェブサイト制作、お見積の実際
witch_doktor
16
9.4k
フリーランスウェブデザイナーのホントのトコロ vol.1 お仕事探しとスキルアップ編
witch_doktor
3
1.1k
はじめてサービスデザインを任されたデザイナーがいかにRODEMの開発についていくようになったか
witch_doktor
2
290
新ツールやサービスから考える、明日からのデザインフロー
witch_doktor
5
1.7k
フリーランスWebデザイナーのホントのトコロ
witch_doktor
15
3.7k
Other Decks in Design
See All in Design
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
210
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
290
線で考える画面構成
natsuume
1
810
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
150
Echoes Boomerang
artcloudyu
PRO
0
100
Social Anxiety
ksmith2024
0
160
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜
tak073
0
300
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
980
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
130
Cards | Storyboards
giofortuna_story
0
130
#yumemi_grow 読書シェア会 vol.1 - スコット・バークン著『デザインはどのように世界をつくるのか』
kaitou
1
130
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
230
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
51
2.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.6k
Site-Speed That Sticks
csswizardry
4
450
BBQ
matthewcrist
88
9.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
177
52k
Typedesign – Prime Four
hannesfritz
41
2.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.7k
Fireside Chat
paigeccino
37
3.3k
The Language of Interfaces
destraynor
157
24k
Become a Pro
speakerdeck
PRO
27
5.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Transcript
ཧͷσβΠϯϓϩηεΛߟ͑Δ &$☕$6#& ͷཧը໘σβΠϯͰֶΜͩ σβΠϯϓϩηεͷ໘ന͞ɾ͠͞ '30/5&/%$0/'&3&/$&ɹɹ,PKJSP'VLB[BXBɹɹ
ਂ࣏ େࡕࡏॅɺ ϑϦʔϥϯε ΣϒσβΠφʔ اը ɾ ϥΠςΟϯά ɾ σΟϨΫγϣϯ σβΠϯ
ɾ )5.-$44ίʔσΟϯά $.4ͷઃܭ࣮ͳͲ ϑΧβϫ ɾ ίδϩ !LPKJSPGVLB[BXB !XJUDI@EPLUPS
None
ʮ&$ ʖ $6#&ʯ ཧը໘σβΠϯ
͝ଘͰ͔͢ ʁ ʮ&$ ʖ $6#&ʯ ɾ ެ։ ɾΦʔϓϯιʔεɾιϑ τΣΞʢ(1-
ͱ༻ϥΠηϯεͷ σϡΞϧϥΠηϯεʣͱͯ͠ެ։͞Εͨ &$ αΠ τ͚ $.4 ɾࠃ࢈ &$ αΠ τ͚ $.4 ͷදతϒϥϯυ ɾ։ൃΛओಋ͢Δͷେࡕͷιϑ τΣΞϝʔΧʔͰ͋Δ גࣜձࣾϩοΫΦϯ
ࠓ͓͍ͨ͜͠ͱ ɾ ؒɺ&$$6#& ཧը໘ͷ 6* σβΠφʔͱͯؔ͠Θͬͨ ɾཧͱ͍ͯ͠Δϓϩηεʹ·ͩ·ͩԕ͍ ɾσβΠφʔͷࢹͰৼΓฦΓͳ͕Βɺͱ͘ʹσβΠϯϓϩηεʹ ͍ͭͯল
ΞδΣϯμ ɾ&$$6#& ཧը໘ͷಛ ɾࢲ͕࣮ફ͍ͨ͠ཧͷσβΠϯϓϩηε ɾ͜ͷϓϩδΣΫ τͰ͔͛ͨͬͨ͜͠ͱ ɾσβΠφʔࢹ͔Βݟ͓͓ͨ·͔ͳϓϩδΣΫ τͷྲྀΕ ɾͰ͖ͨ͜ͱɺͰ͖ͳ͔ͬͨ͜ͱ ɾ͜Ε͔Βͷ͜ͱ
&$$6#&ཧը໘ͷಛ
&$$6#&ܥϕʔεʹੵۃతվળ &$$6#& &$$6#&
Ұը໘ʹ͓͞ΊΔใྔ૿ˢ
&$$6#&ܥ
&$$6#&
Ұཡϖʔδ͔Βͷૢ࡞ΛΑΓ؆୯ʹ
ओཁ6*ͷίϯϙʔωϯ τԽɺ ମݧͷ౷Ұ
ख़࿅ͷ͍Ϣʔβʔͷྀ
ࢲ͕ߟ͑Δ ཧͷσβΠϯϓϩηεͷࠜຊ
લఏͱͯ͠ ͲͷҊ݅ʹ͑Δ ʮཧͷϓϩηεʯଘࡏ͠ͳ͍
σβΠ ϯ Λ ʮΈΜ ͳʯ Ͱͭ ͘ Δ
ʮΈΜͳʯ ͬͯ୭ ʁ 1. ΫϥΠΞϯτ σβΠφʔ γεςϜཧऀ ϓϥάΠϯ։ൃऀ γϣ οϓϚελʔ
ϑϩϯτΤϯυΤϯδχΞ όοΫΤϯυΤϯδχΞ νʔϜ Ϣʔβʔ
ΈΜͳͰσβΠϯɺ Մೳͳͷ ʁ ҙݟΛݴ͏ਓ͕૿͑Δ΄Ͳ ϓϩδΣΫ τͷෆ࣮֬ੑ͕૿͢
ݶΒΕͨϦιʔεͰ Ͳ͏ෆ࣮֬ੑͱઓ͏͔
Ϧʔϯ ɾ ελʔτΞοϓ ɾىۀΛ҆શʹ͓͜ͳ͏ͨΊͷ ϑϨʔϜϫʔΫ ɾ ʹىۀՈͷΤϦ οΫɾ Ϧʔε͕ߟҊɾൃද ɾෆ࣮֬ੑ͕ߴ͍ϓϩμΫ
τͷ σβΠϯʹԠ༻Ͱ͖Δ Photo by JD Lasica (CC BY 2.0)
ɾΞΠσΞΛͰ͖Δ͚ͩ͘ Χλνʹ͢Δ ɾ.71ʢ.JOJNVN7JBCMF 1SPEVDUʜ࣮༻࠷খݶͷʣ Λͭ͘Δ ɾϓϩτλΠϓʹݴ͍͑ΒΕΔ ΞΠσΞ σʔλ ߏங
ֶश ଌఆ Ϧʔϯ ɾ ελʔτΞοϓͷαΠΫϧ
ɾ.71 ΛΞʔϦʔΞμϓλʔʹ ݟͤɺσʔλΛಘΔ ɾσʔλʹֶͼɺվળͷͨΊͷ ΞΠσΞΛੜΉ ɾվળ͞ΕͨͷΛ·ͨͭ͘Δ ΞΠσΞ σʔλ ߏங
ֶश ଌఆ Ϧʔϯ ɾ ελʔτΞοϓͷαΠΫϧ
ɾֶͼͳ͕ΒਐΉɾਐΉ͜ͱͰ ͞ΒʹֶͿ ɾमਖ਼ͷ࿈ଓ͕લఏ ɾະͰ͋Δ͜ͱΛલఏʹ ͯ͠ʮΈΜͳʯͰϨϏϡʔ ɾͰ͖Δ͚ͩ͘ճ͢ ΞΠσΞ ϓϩτλΠϓ σʔλ ߏங
ֶश ଌఆ ϓϩμΫ τͷσβΠϯʹ༗ޮ
ɾϞμϯͳσβΠϯπʔϧͷొ ɾ4LFUDIɺ9%ɺ'JHNB ͳͲ ɾΤϯδχΞ͕͍ͳͯ͘؆қͳ ϓϩτλΠϐϯά͕Ͱ͖Δ ɾγϯϘϧʹΑΔσβΠϯσʔλ ͷߏԽˠมߋʹڧ͍ ϦʔϯͳσβΠϯ͕Մೳʹͳͬͨഎܠ
&$$6#&σβΠϯͷྲྀΕ
ɾ ݄ΩοΫΦϑʢެ։ य़༧ఆͩͬͨʣ ɾʙ िʹҰɺσβΠϯϨϏϡʔΛϦΞϧʹू·ͬͯ܁Γฦ͢ ɾࢀՃऀגࣜձࣾϩοΫΦϯͷϓϩμΫ τϚωʔδϟʔɾ։ൃਞɾ
σβΠφʔਞɾͦͯ͠ࢲ ɾಉ࣌ʹσβΠϯΨΠυ੍࡞։࢝ ΩοΫΦϑʙϑΝʔε τ ɾ σβΠϯ੍࡞ ݄ʙ݄
ը໘ͷσβΠϯΛ ϨϏϡʔΛ܁Γฦ͠ͳ͕Β੍࡞
ϓϩτλΠϐϯά*O7JTJPOΛར༻
ɾ͜͜ͰఆظϛʔςΟϯάҰ୴ऴྃ ɾ֤ίϯϙʔωϯ τͷσβΠϯεϖοΫͷཧͱڞ༗ ɾσβΠϯʹ͓͚Δݒ೦ͷަͱରԠ ɾϞοΫͷνΣ οΫͱϑΟʔυόοΫ ϑϩϯ τΤϯυνʔϜʹΑΔϞοΫ੍࡞ ݄ʙ
ɾ ݄&$$6#&OЋ൛ެ։ ɾϢʔβʔϑΟʔυόοΫʹΑΔػೳมߋ ɹจपΓͷػೳɾը໘ઃܭͷେ෯มߋ ɹϒϨΠΫϙΠϯ τͷมߋͱϨεϙϯγϒͳσβΠϯͷඍௐ ɾϲ݄΄ͲνʔϜϛʔςΟϯά෮׆ Ћ൛ެ։
ɾ ։ൃ͕ຊ֨Խ ݄ʙ
ɾۄػೳͷͻͱͭɺΦʔφʔζε τΞͷཧը໘ΈࠐΈ σβΠϯʜϓϥάΠϯ͕ཧը໘͔ΒΠϯε τʔϧՄೳʹ ɾҰํͦͷଞͷը໘ػೳΛ 'JY ɾϲ݄΄ͲνʔϜϛʔςΟϯά෮׆ Ќ൛ެ։ɻ ։ൃόʔδϣϯO͔Β ݄ʙ
ਖ਼ࣜϦϦʔεʹΉ͚ͯυΩϡϝϯ τ੍࡞ ݄ʙ
༻σβΠϯσʔλ ʢ4LFUDIʣ
σβΠϯΨΠυ ʢ1%'ʣ
&$$6#&ਖ਼ࣜϦϦʔε ݄
Ͱ͖ͨ͜ͱɺ Ͱ͖ͳ͔ͬͨ͜ͱ
มߋʹڧ͍σβΠϯσʔλͷ࣮ݱ ɾγϯϘϧʹΑΔߏԽʹΑͬͯมߋʹڧ͍σβΠϯΛ࣮ݱ ɾجຊϑΥϯ ταΠζͷมߋʹ࠷ݶͷͰରԠ ɾͲ͔͜ͰγϯϘϧͷσʔλΛյ͢ͱશମʹѱӨڹ͕ग़Δ
None
Ϣʔβʔମݧͷੵۃతؔ༩ ɾϥϕϦϯάΛඇΤϯδχΞ͚ʹೈԽ ɾΠϯλϥΫςΟϒͳςΩε τʹରͯ͠ੵۃతʹಇ͖͔͚Δ ɾπʔϧνοϓͷඞཁͳՕॴͷચ͍ग़͠ͱจݴͷϥΠςΟϯά
None
ϦʔϯͳσβΠϯݶఆత࣮ફʹ
ɾ1.ɾΤϯδχΞɾσβΠφʔ͕ සൟʹձͬͯσβΠϯϨϏϡʔ ɾϛʔςΟϯάͰ্͕ͬͨ ϛʔςΟϯάͷ͏ͪʹݕূ ɾϛʔςΟϯά͕ऴΘͬͨΒ ׂͷ मਖ਼͕͍ྃͯ͠Δ ఆྫϛʔςΟϯά͕༗ޮʹ࡞༻ σβΠϯϑΣʔζ
ҙਤΛ͑Δʹग़ͤͨ ͷ͕Γͳ͍ʜʢͰ ͍͠ʜʣ ͳʹΛ͍ͭ·Ͱʹ ࢧڅͯ͠Β͑Δ͔ͳ ʁ ൺֱͯ͠ϑϩϯ τΤϯυ։ൃνʔϜͱͷ ίϛϡχέʔγϣϯີΛͱΕͳ͔ͬͨ ϑϩϯτΤϯυ։ൃϑΣʔζ
ͪΐ ͬͱσβΠϯ ͍ͨ͠ͳʔ όά͕͋ͬͨΑʔ ͤ͜͜ͳ͍ ʁ ɾνέο τͷࢁͱ֨ಆ͢Δຖ ɾϢʔβʔௐࠪͰ·ͨ૿͑Δνέο τ
͍͠ ʂ ϓϩμΫ τͷΞΫηε͕ࠔʹ ։ൃ͕ຊ֨Խ
ϓϩδΣΫ τશମͰճ͢ͷ͍͠
ϑΣΠζ͝ͱʹճͤͳ͍͔ ˠ ˠ ˠ σβΠϯ ϑϩϯ τΤϯυ ։ൃ ։ൃ࣮
͍ɺ Γ͍͠ ˠ ˠ ˠ σβΠϯ ϑϩϯ τΤϯυ ։ൃ ։ൃ࣮
ɾεϓϦϯ τʢҰఆͷ͍։ൃظؒʣ͝ͱʹσβΠφʔϨϏϡʔΛ ೖΕΔͳΒɺ࠷ॳ͔Βҙࣝ߹ΘͤΛ ɾͲ͏͍͏σβΠϯͷΓํΛ͍͔ͨ͠ɺेʹνʔϜͱ ͋͠Θͳ͚Εɺͦͷͱ͓Γʹಈ͔ͳ͍ʢͨΓલʣ ল
͜Ε͔Βͷ͜ͱ
ɾΉ͠ΖվળͷαΠΫϧ͕ඞཁʹͳΔͷ͜Ε͔Β ɾ֤ͰߦΘΕΔϢʔβʔϛʔτΞοϓΠϕϯ τ ɾܶతʹ૿͑ΔϢʔβʔϑΟʔυόοΫͷରԠ ɾϦϦʔεόʔδϣϯͰ࣮ݱͰ͖ͳ͔ͬͨσβΠϯ্ͷ ࡉ͔͍վળʹ౿ΈࠐΈ͍ͨ &$$6#&ͷ։ൃͭͮ͘
ɾ͓ʹϓϥάΠϯ։ൃऀͷҙݟΛฉ͖ΑΓ࣮༻తͳΨΠυʹ ɾ&$$6#& ཧը໘ͷσβΠϯ͔ΒଐਓੑΛͰ͖Δ͔͗Γ গͳ͍ͨ͘͠ ɾΨΠυͷվగɺ͢ΔσβΠϯσʔλͷϒϥογϡΞοϓ ଐਓੑͷগͳ͍σβΠϯʹ
ɾ4LFUDI ൛ʹՃ͑ɺ9% ൛ͷཧ ը໘σβΠϯσʔλΛ੍࡞ ɾγϯϘϧͷॊೈੑʹ͔͚Δ͕ɺΑ Γଟ͘ͷਓʹ͞ΘͬͯΒ͑Δϓ ϥο τϑΥʔϜ ɾࢦͤɺࠓதͷެ։ 9%൛ཧը໘σβΠϯσʔλ
·ͱΊ
ɾ ʮࢲʯϦʔϯͳσβΠϯϓϩηεʹڵຯΛ͍ͬͯΔ ɾૣ͘ΧλνʹͰ͖ΔͷΓ͍͍͜ͱ ɾνʔϜ͕ूͬͯίϛϡχέʔγϣϯΛऔΕΔ͜ͱ͍ͥΜେ ɾ1. ͱσβΠφʔͱ։ൃਞ͕ҰମʹͳͬͯαΠΫϧΛճ͢͜ͱ ͍͠ ɾࠓޙͷϓϩμΫ τվળϑΣΠζʹ૬Ԡ͍͠ϓϩηεΛνʔϜͷ օ͞·ͱߟ͍͑ͨ
ʮΈΜ ͳͰσβΠ ϯʯ ͢ Δ ͨΊʹ σβΠ φʔ͕ߩݙͰ ͖ Δ
࣮֬ʹ͕ͬ ͍ͯ Δ
͋ͳͨͷσβΠ ϯ ϓϩ η εɺ ͥͻڭ͑ ͯ ͘ ͩ͞ ͍
͏ͻͱͭ
None
͓ΊͰͱ͏͍͟͝·͢ ʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠ !LPKJSPGVLB[BXB !XJUDI@EPLUPS