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
20191218 Beginnerコース@オンライン (1/2)
Search
pentake
December 18, 2019
Design
3
240
20191218 Beginnerコース@オンライン (1/2)
YouTubeでライブ配信されたNoodl Beginnerコースの資料です。
pentake
December 18, 2019
Tweet
Share
More Decks by pentake
See All by pentake
20201111_Noodl_ver2.1_hands-on
pentake_de
0
230
20201104_OpenWeatherMap_API
pentake_de
0
120
20201028_VIoTLT_vol.5_今、リモート会議中かどうかを家族に伝えてみた
pentake_de
0
310
20201027_FGDC_LowCodeプラットフォームNoodlでブラウザゲーム開発!
pentake_de
0
160
20200708_おやこテックLT_MakeCodeで神隠し
pentake_de
1
150
20200325_Noodl_v2_hands-on_スライド資料
pentake_de
1
300
20200323_OpenWeatherMap_API
pentake_de
1
340
Noodlもくもく会#4
pentake_de
0
180
Other Decks in Design
See All in Design
An Early Spring | Storyboard | Scenes 1-18
giofortuna_story
0
370
Crisp Code inc. ブランドガイドライン
so_kotani
1
190
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
2.9k
harutaka Vision Deck
zenkigenforrecruit
0
150
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
420
PF_濵村ひろみ_202503
maru_design78
0
180
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
1
1.9k
NAHO SHIMONO_Portfolio2025
nahohphp
0
870
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
210
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.6k
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
1.2k
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
980
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
GraphQLとの向き合い方2022年版
quramy
49
14k
Visualization
eitanlees
146
16k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Designing for humans not robots
tammielis
253
25k
Statistics for Hackers
jakevdp
799
220k
RailsConf 2023
tenderlove
30
1.1k
Into the Great Unknown - MozCon
thekraken
39
1.9k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Writing Fast Ruby
sferik
628
62k
We Have a Design System, Now What?
morganepeng
53
7.7k
Transcript
։࢝·ͰʹɺԼهΛ͓ࡁ·͍ͤͩ͘͞ʢಈըͷ֓ཁཝʹॻ͍ͯ͋Γ·͢ʣ 2. ΞΧϯτΛ࡞/ϩάΠϯ ݸਓͷΞΧϯτΛ࡞͠ɺϩάΠϯ͍ͯͩ͘͠͞ɻ 1 3. ࢿྉʹΞΫηε connpassͷΠϕϯτϖʔδʹ͋Δʮࢿྉʯ͔ΒɺϓϩδΣΫ τϑΝΠϧΛμϯϩʔυ͍ͯͩ͘͠͞ɻ https://noodl-tokyo.connpass.com/event/156814/
1. Noodl 1.3ΛΠϯετʔϧ https://classic.getnoodl.com/download ⚠ ҟͳΔόʔδϣϯΛμϯϩʔυ͍ͯ͠ͳ͍͔֬ೝΛ͓ئ͍͍ͨ͠·͢ʂ ɹɹ֬ೝํ๏ɿNoodlΛىಈ͠ɺϝχϡʔόʔͷ Noodl ʼ About Application
NoodlͰUIσβΠϯΛ͠Α͏ʂ XD࿈ܞ / ϨΠΞτฤ NOODL BEGINNER COURSE 2
X Μ͚ͨ Noodl SlackίϛϡχςΟӡӦ୲ 3 ̍ਓલͷNoodlerʹͳΔͨΊमߦதɻ ࠷ۙɺIoTʹઓதɻ Twitter @penpenchapen
X πΠʔτେܴͰ͢ʂ 4 #Noodl
X 5 ͓ࢼ͠πΠʔτλΠϜʂ
X 6 ࣭νϟοτཝͰʂ ʁ ʁ ʁ
X 7 ͖ͳ໙ྨʁ YouTubeͷνϟοτʹॻ͖ࠐΜͰΈΑ͏ʂ
X 8 ࠓճͷηϛφʔ BeginnerίʔεͲͪΒ͔Β࢝Ίͯେৎʂ
X 9 ॳΊͯͷਓ͜ͷಈըͷ֓ཁཝ͔ΒΞΫηεʂ
X XDͷσβΠϯσʔλ͔Β NoodlͰ͏ը૾Λॻ͖ग़࣌͢ͷίπ 10
X ̍ɽॻ͖ग़͢ը૾ΛܾΊΑ͏ʂ ̎ɽΞΠίϯനʹ͠Α͏ʂ ̏ɽ·ͱΊͯॻ͖ग़ͦ͏ʂ ̐ɽࣸਅҰ൪େ͖͍αΠζͰॻ͖ग़ͦ͏ʂ NoodlͰ͏ը૾ΛXDͰॻ͖ग़࣌͢ͷ̐ϲʂ
X ̍ɽॻ͖ग़͢ը૾ΛܾΊΑ͏ʂ
X നͰॻ͖ग़͢ͱNOODL্Ͱ৭ΛઃఆͰ͖Δʂ ̎ɽΞΠίϯനʹ͠Α͏ʂ
X ̏ɽ·ͱΊͯॻ͖ग़ͦ͏ʂ ϑΝΠϧ → ॻ͖ग़͠ → બࡁΈ
X ̏ɽ·ͱΊͯॻ͖ग़ͦ͏ʂ Androidͷ߹6छྨॻ͖ग़͞ΕΔɻ 1080x1920ͷ߹xxhdpiͰαΠζͽͬͨΓʂ
X Ұ൪େ͖͍αΠζͷը૾Ͱॻ͖ग़ͤɺ ̍ຕͷը૾ΛNoodlͰ͍ճ͢͜ͱ͕Ͱ͖Δʂ ̐ɽࣸਅҰ൪େ͖͍αΠζͰॻ͖ग़ͦ͏ʂ
X NoodlͰϨΠΞτ͢Δ࣌ʹ ॏཁͳࣝ 17
X 18 UIσβΠϯɺϨΠΞτ͕ॏཁʂ ϨΠΞτ ใͷஔ
X ϨΠΞτɺ 19 ϊʔυͷ ࢠؔ ͺͨͦ͘ʢpakutaso.comʣ Ͱܾ·Δʂʂ
X 20 ࢠʹґଘ ʹґଘ ͜Ε͕ɺࢠؔͷΩϗϯɻ ґଘ͢Δใ ԣ෯ʢWidthʣ ߴ͞ʢHeightʣ X ࣠ͷҐஔʢAlign
Xʣ Y ࣠ͷҐஔʢAlign Yʣ etc…
X 21 ̍൪্ͷϊʔυ ( Root ) ʹ͢Δͱ… ͕͍ͳ͍…ʁ ࢠΛࢀর ̍൪্ͷϊʔυ
( Root ) ͷɺ Project settingsͰઃఆ͞Ε͍ͯΔը໘ͷେ͖͞ɻ
X NOODLͷجຊૢ࡞ - ϊʔυΛҠಈ͢Δ: υϥοά - ϊʔυΛ࡞Δ: ӈΫϦοΫɺϊʔυ໊ͷ಄จࣈΛΩʔϘʔυͰೖྗ - ϊʔυΛআ͢Δ:
ϊʔυΛબɾDeleteΩʔΛԡ͢ - ϊʔυΛίϐʔ: ϊʔυΛબɾ㵰+CʢWindows: Ctrl+Cʣ - ϊʔυΛϖʔετ: ⌘+VʢWindows: Ctrl+Vʣ - ϊʔυΛܨ͙: ϊʔυͷͰΫϦοΫ͠ɺͦͷ··ܨ͍͗ͨϊʔυ·Ͱυϥοά͢Δ 22
X ίϯϙʔωϯτҰཡ ϓϩύςΟ ϓϩδΣΫτઃఆ ϊʔυҰཡ දࣔ༰ΛΓସ͑ΔϘλϯ ߏங͢Δॴ ϓϨϏϡʔը໘ ϝχϡʔ ϘοΫε=
ϊʔυ 23
X L001-01 ϨετϥϯΞϓϦ 24
X + Component͔Β৽نComponentͱͯ͠IndexɺMenuΛ࡞ 25 Componentͷ࡞
X GroupͷઃఆͰMenuόʔͷҐஔͱαΠζΛઃఆ͠ɺGroupͱಉ͡αΠζ(100%)ͷRectangleͰྖҬͷ৭Λࢦఆ͢Δ 26 Menu Componentͷதͷ࡞
X ઌ΄ͲͷRectangleͷഎ໘ʢϊʔυͰ্ʣʹOpacityΛബͨ͘͠ࠇ͍RectangleΛૠೖ͢Δ ͞ΒʹBlur LengthͷઃఆͰྠֲΛ΅͔͢͜ͱͰɺന͍Rectangleͷ্෦ʹബ͍ӨΛ࡞Ͱ͖Δ 27 MenuόʔͷӨΛ࡞
X Stack LayoutΛͬͯΞΠίϯΛฒΔɻΞΠίϯ͕എܠͱಉ͡നͩͱݟ͑ͳ͍͜ͱ͕͋ΔͷͰɺഎܠʹ৭Λ͚ͭΔͱ࡞ۀ͍͢͠ ΞΠίϯImageΛ͍ɺ৭ஔΛௐ͢ΔɻΞΠίϯؒStack LayoutͷItem SpacingͰௐ͢Δͱྑ͍ 28 ΞΠίϯͷஔ
X ComponentsͷPagesϑΥϧμʹTopͱ͍͏ComponentΛ࡞͢ΔɻϑΥϧμʹ࡞ΔࡍϑΥϧμӈͷ̏ΞΠίϯ͔Β࡞͢Δ 29 Top Componentͷ࡞
X ࠷ॳͷϊʔυΛPageͰ࡞͢ΔʢGroupͰͳ͍ʣɻͦ͜ʹBackgroundͱͯ͠Rectangleʢബ͍άϨʔʣɺHeaderͱͯ͠Groupɺ ຊจͱͯ͠Scroll ViewΛ࡞͢ΔɻHeader·ͣHeaderΛ࡞Γ͍ͨྖҬΛߟྀͯ͠GroupͷαΠζΛܾΊΔɻ 30 Top Componentͷதͷ࡞
X RectangleͰഎܠ৭Λࢦఆ͢ΔɻImageͰMenuΞΠίϯʢຢͷ໊ΛϋϯόʔΨʔϝχϡʔʣΛஔ͢Δɻ 31 Headerͷഎܠͷ࡞ MenuΞΠίϯͷઃஔ
X Groupͷԣ෯Λ900pxʹઃఆ͠ɺݕࡧ૭ͷྖҬΛ֬อɻ 32 Headerͷݕࡧ૭ͷྖҬΛ࡞
X Search GroupʹRectangleͰݕࡧ૭Λ࡞͢ΔɻSearch GroupͷPaddingΛࢦఆ͢Δ͜ͱͰɺRectangleͷपΓʹ༨നΛ࡞Δ͜ͱ͕Ͱ͖Δ จࣈೖྗՄೳͳςΩετϘοΫεʹText InputΛ͏ɻΞΠίϯςΩετͷҐஔదٓௐ͢Δ 33 ݕࡧ૭(ന෦)ɺςΩετೖྗɺݕࡧΞΠίϯͷઃஔ
X Scroll ViewͷItem SpacingΛ40ʹઃఆ͢ΔɻScroll Direction͕Verticalʹͳ͍ͬͯΔ͜ͱΛ֬ೝ͢ΔɻScroll Viewʹରͯ͠Ϋʔϙϯը૾(Image)ɺ ͱSection1(Group, Height = 1290)ͱSection2(Group,
Content Height)Λ࡞͠ɺ͞ΒʹRectangleΛͬͯനʹ͢Δ 34 Topͷதͷ࡞
X Section1ͷPad TopΛ-40ʹࢦఆ͢Δ͜ͱͰɺͷScroll ViewͰࢦఆͨ͠Item SpacingΛ૬ࡴ͢Δ͜ͱ͕Ͱ͖Δ 35 Paddingͷখٕ
X ͋Β͔͡Ί༻ҙͯ͋͠ΔH6Λૠೖ͠ɺҙͷλΠτϧΛೖྗ͢Δʢϗοτͳ͓ళͷ෦ʣ Scroll Viewͷߴ͞ɾҐஔɾItem SpacingΛࢦఆͯ͠Scroll DirectionΛHorizontalʹ͢Δ ͋Β͔͡Ί༻ҙͯ͋͠ΔCard ItemΛෳૠೖ͠ɺScroll ViewͷPad Left,
Pad RightΛௐ͢Δ 36 Section1ͷதͷ࡞ ԣεΫϩʔϧίϯςϯπ
X Component InputsΛ࡞͠ɺ+PortͰ3ͭPortΛ࡞͢Δɻ(Title, Img, text) ˎPortΛ࡞͢ΔͱComponent Inputs͔ΒNoodlΛҾͬுΕΔΑ͏ʹͳΔ ্ਤͷΑ͏ʹNoodlΛଓ͢Δ͜ͱͰɺComponentͷ֎෦͔Β֤ϊʔυͷύϥϝʔλΛมߋͰ͖ΔΑ͏ʹͳΔ 37 Card
Itemͷதͷ࡞ ֎෦͔ΒதΛૢ࡞Ͱ͖ΔޱΛ։͚Δ
X Component OutputsΛ࡞͠ɺ+PortͰ1ͭPortΛ࡞͢Δ(tap)ɻComponent ChildrenΛStack LayoutʹͿΒ͛͞Δɻ ͜ΕʹΑΓɺCard Item Componentͷ֎ʹͿΒ͛ͨ͞ϊʔυ͕͜͜ʹͿΒ͕ͬͨ࣌͞ͱಉ͡ڍಈʹͳΔ 38 Card
Itemͷதͷ࡞ ֎෦͔ΒதΛૢ࡞Ͱ͖ΔޱΛ։͚Δ
X TopʹΓɺCard ItemʹඞཁͳTagΛૠೖ͢ΔɻCard ItemͱTagͷ༰Λฤूͯ͠ҰͭҰͭͷ͓ళʹ߹Θͤͨใʹॻ͖͑Δ ˎ͜͜ͰલϖʔδͷComponent Children͕ͳ͍ͱTagΛૠೖ͢Δ͜ͱ͕Ͱ͖ͳ͍ 39 Card Itemͷը૾આ໌ͷมߋɺTag͚
X Scroll ViewͷScroll To IndexͷIndexΛ2ʹ͢Δ BooleanͷValueʹνΣοΫΛೖΕͯSaved Value→Scroll To IndexͷDoʹܨ͙ ˎIndex͔Β0,
1, 2ɾɾͳͷͰ2ʹͨ͠߹3ຕʹͳΔ 40 Scroll ViewͷॳظҐஔͷઃఆ
X Section2ʹStack LayoutΛͬͯH6, Card Item2Λૠೖ͢Δɻ͜ͷ࣌Item SpacingΛۭ͚Δͱݟӫ͕͑ྑ͍ Card Item2͕ܨ͕͍ͬͯͬͨߴ͕͞ಡΊͳ͍ͷͰɺStack LayoutͷSize ModeΛContent
Heightʹͯ͠ॊೈʹ͓ͯ͘͠ 41 Section2ͷ࡞
X HeaderͷHeightΛScroll ViewͷPad Topʹܨ͙ͱ HeaderͰઃఆ͕ͨ͠Scroll Viewͷʹө͞ΕΔΑ͏ʹͳΔ 42 Headerͷߴ͞Λࢀরͯ͠Scroll ViewͷҐஔΛௐ͢Δ
X Scroll ViewͱHeaderͷॱ൪ΛೖΕସ͑Δ ˎԼʹ͋Δϊʔυͷํ͕ϓϨϏϡʔͰखલʹ͘ΔɻHeaderΛखલʹ͢Δ 43 HeaderͱScroll ViewͷલޙؔΛमਖ਼͢Δ
X IndexͷதʹRoot(Group), Pages, MenuΛ্ਤͷΑ͏ʹ࡞͢Δ PagesͷStart Pageͱͯ͠TopΛબͿ 44 IndexΛ࡞͢Δ
X ComponentͷPagesϑΥϧμͷதʹTopͱಉ͡Α͏ʹRestaurant ComponentΛ࡞͢Δ(P.10) ্ਤͷΑ͏ʹϊʔυΛஔͯ͠ɺഎܠͷRectangleɺScroll ViewɺImageɺTextΛ࡞͢Δ TextΛGroupʹೖΕͯPaddingΛ͢ΔͱTextʹ༨നΛ࡞ΕΔ 45 Restaurantϖʔδͷ࡞
X ΔϘλϯ120 x 120ͷྖҬΛGroupͰ࡞͔ͬͯΒImageΛૠೖͯ͠࡞͢Δ 46 ΔϘλϯͷ࡞
X Card Item3ΛScroll Viewʹૠೖ͠ɺTagΛ͚ͭΔ ˎCard Item3͕ࣸਅʹඃ͍ͬͯΔͷCard Item3ͷҰ൪্ͷGroup͕Pad Top -300ͱࢦఆ͍ͯ͠ΔͨΊͰ͢ 47
Card ItemͱTagͷ࡞
X Flow LayoutΛ༻͍ͯImageΛฒΔɻHeight 800 px 48 ը૾ΛྻͰฒΔ
X ը૾SizeΛ360 x 360 pxɺFill ModeΛAspect Fillʹ͢Δ ˎFill Mode৭ʑࢼͯ͠Έ͍ͯͩ͘͞ɻFill ModeΛมߋͨ͠ࡍߋ৽͕ඞཁͰ͢
49 ը૾Λมߋͯ͑͠Δ
X TopʹΓPage NavigationΛ࡞͠ɺDestinationʹRestaurantΛઃఆ͢Δ Index 2ͷCard Itemͷtap͔ΒPage NavigationͷNavigate To Pageʹଓ͢Δ 50
Top͔ΒRestaurantʹϖʔδભҠΛઃఆ͢Δ
X RestaurantʹΓPage Navigation BackΛ࡞͢Δ ΔϘλϯͷGroupͷTap͔ΒPage Navigation BackͷBackʹଓ͢Δ ˎˎϓϨϏϡʔΛIndexͷRoot Groupʹ͢ΕͰ͢ˎˎ 51
RestaurantϖʔδͷΔϘλϯΛઃఆ͢Δ
X Ͱ͢ʂ ͓ർΕ༷Ͱͨ͠ʂ 52
X ͓Βͤ 53
X 54 1/17 ʢۚʣ19:00 - 21:00 2020ͷӡΛNoodlͰ͓͏ɻ
X ʲίϛϡχςΟࢀՃͷྲྀΕʳ ɹ̍ɽQRίʔυεΩϟϯ ɹɹɹɹɹɹor ɹɹɹhttps://bit.ly/2kSq3xw ΞΫηε ɹ̎ɽϝʔϧΞυϨεͷೖྗ ɹ̏ɽೝূ༻ϝʔϧʹهࡌͷURLΞΫηε ɹ̐ɽύεϫʔυͱϢʔβʔωʔϜΛઃఆ ʲSlackʳNoodlίϛϡχςΟͷ͝ট
SlackʹNoodlͷίϛϡχςΟ͕͍͟͝·͢ɻ ຊ͝ग़੮ͷօ༷ͱڞʹίϛϡχςΟΛΓ্͛ͯ ͍͚Εͱߟ͓͑ͯΓ·͢ɻੋඇɺ͝ࢀՃ͍ͩ͘͞ʂ 55 # ͭͬͯ͘Έͨ # Πϕϯτใ # noodlܙା
X 56 Twitter
X 57 Qiita Noodl Advent Calendar 2019 https://qiita.com/advent-calendar/2019/noodl ཁνΣοΫʂʂʂ
X ͜ͷಈը ޙͰΞʔΧΠϒͱ ͯ͠ݟΒΕ·͢ʂ 58
X THANK YOU! 59