【Felo機能お試し】生成AIとFigmaを活用したモック作成ガイド.pdf

Feloのプレゼンテーション作成機能のお試し（2/3）

Transcript

1. 20XX ੜ੒AIͱFigmaΛ ׆༻ͨ͠ϞοΫ࡞ ੒ΨΠυ Here is where your presentation begins 20XX-XX-XX
2. 01 ChatGPTͰHTMLΛੜ੒͢Δ 02 HTMLΛFigmaʹม׵͢Δ 03 Figma಺Ͱमਖ਼͢Δ 04 Figma͔ΒHTMLʹΤΫεϙʔτ͢Δ CONTENTS
3. ChatGPTͰHTMLΛ ੜ੒͢Δ 01
4. 01 02 ChatGPTͷΞΧ΢ϯτ࡞੒ ChatGPTΛར༻͢ΔલʹɺΞΧ΢ϯτΛ࡞੒͢Δඞཁ͕͋Γ·͢ɻެࣜαΠτʹΞΫηε͠ɺαΠϯΞοϓϓϩηεΛ׬ྃ͠·͢ɻϝʔϧΞυ Ϩεͷ֬ೝ΋ؚ·Ε·͢ͷͰɺΞΫςΟϒͳϝʔϧΞυϨεΛ࢖༻͍ͯͩ͘͠͞ɻ ΞΧ΢ϯτ͕࡞੒͞ΕͨΒɺμογϡϘʔυͰϓϩϯϓτͷ४උ͕Ͱ͖ΔΑ͏ʹͳΓ·͢ɻઃఆϝχϡʔ͔Β࢖༻͢Δݴޠ΍ग़ྗϑΥʔϚοτ Λબ୒͢Δ͜ͱ΋Ͱ͖·͢ɻ Ұ౓ઃఆ͕׬ྃͨ͠Βɺ͍ͭͰ΋ϓϩϯϓτΛೖྗͯ͠HTMLίʔυͷੜ੒Λ։࢝Ͱ͖·͢ɻੜ੒͞Εͨίʔυ͸ɺ͙͢ʹ࢖͑Δঢ়ଶͰఏڙ͞ Ε·͢ɻ ChatGPTͷجຊతͳ࢖͍ํ ChatGPTͷجຊతͳ࢖͍ํ͸ɺೖྗϑΟʔϧυʹϓϩϯϓτΛೖྗ͠ɺੜ੒Λ։࢝͢Δ͜ͱͰ͢ɻ؆୯ͳϝοηʔδ͔ Βෳࡶͳཁٻ·ͰରԠՄೳͰ͢ɻ ϓϩϯϓτͷਫ਼౓Λ্͛ΔͨΊʹɺ۩ମతͳࢦࣔ΍ཁ݅Λৄࡉʹهड़͢Δ͜ͱ͕ॏཁͰ͢ɻྫ͑͹ɺʮBootstrapΛར༻ ͨ͠༧໿֬ೝը໘ͷHTMLίʔυΛੜ੒͍ͯͩ͘͠͞ɻʯͱ͍͏Α͏ʹࢦࣔ͠·͢ɻ ੜ੒͞ΕͨHTMLίʔυ͸ɺͦͷ··࢖͏͜ͱ΋ɺޙͰमਖ਼͢ΔͨΊʹอଘ͢Δ͜ͱ΋ՄೳͰ͢ɻ ChatGPTͷॳظઃఆ
5. ϓϩϯϓτͷ࡞੒ ϓϩϯϓτͷ࡞੒Ͱ͸ɺ࡞੒͍ͨ͠΢ΣϒϖʔδͷৄࡉΛ۩ମతʹهड़͠·͢ɻྫͱͯ͠ɺʮ༧໿֬ೝը໘ɺ༧໿೔࣌ɺ਍ ྍ಺༰ɺ໭ΔϘλϯɺૹ৴ϘλϯΛؚΉɻʯͱ͍͏ϓϩϯϓτΛ࡞੒͠·͢ɻ ϓϩϯϓτͷ಺༰͸ɺ໨తʹԠͯ͡ΧελϚΠζՄೳͰ͢ɻྫ͑͹ɺಛఆͷϑϨʔϜϫʔΫ΍σβΠϯཁૉΛࢦఆ͢Δ͜ͱ ΋Ͱ͖·͢ɻ ৄࡉͳϓϩϯϓτ͸ɺΑΓਖ਼֬ͳ݁ՌΛ΋ͨΒ͠·͢ɻඞཁͳཁૉ͕͢΂ؚͯ·Ε͍ͯΔ͜ͱΛ֬ೝ͠·͠ΐ͏ɻ HTMLίʔυͷग़ྗ ϓϩϯϓτΛૹ৴͢ΔͱɺChatGPT͕ࢦఆ͞Εͨཁ݅ʹج͍ͮͯHTMLίʔυΛੜ੒͠·͢ɻੜ੒͞Εͨίʔυ͸ɺͦͷ ··ϒϥ΢βͰදࣔͰ͖Δঢ়ଶͰ͢ɻ ੜ੒͞ΕͨHTMLίʔυʹ͸ɺجຊతͳϨΠΞ΢τͱελΠϧؚ͕·Ε͓ͯΓɺϓϩϯϓτͰࢦఆͨ͠ཁૉ͕͢΂ؚͯ·Ε ͍ͯ·͢ɻ ੜ੒͞ΕͨίʔυΛ֬ೝ͠ɺඞཁʹԠͯ͡मਖ਼ΛՃ͑Δ͜ͱ͕Ͱ͖·͢ɻಛʹελΠϧ΍ίϯςϯπͷඍௐ੔͕ඞཁͳ৔ ߹͕͋Γ·͢ɻ ۩ମతͳHTMLίʔυͷੜ੒
6. ੜ੒͞ΕͨHTMLίʔυ͸ɺҰ౓ϒϥ΢βͰදࣔͯ͠ݕূ͠·͢ɻࢦఆͨ͠ཁૉ͕ਖ਼͘͠දࣔ͞ΕΔ͔ɺσβΠϯ͕ҙਤͨ͠௨Γ͔Λ֬ೝ͠·͢ɻ ίʔυͷݕূʹ͸ɺϒϥ΢βͷσϕϩούʔπʔϧΛ࢖༻͢ΔͱศརͰ͢ɻΤϥʔ͕͋Δ৔߹͸ɺݪҼΛಛఆͯ͠मਖ਼͠·͢ɻ ಛʹϨεϙϯγϒσβΠϯ΍Ϋϩεϒϥ΢βޓ׵ੑͷ֬ೝ͕ॏཁͰ͢ɻҟͳΔσόΠε΍ϒϥ΢βͰͷදࣔΛ֬ೝ͓ͯ͘͠ͱ҆৺Ͱ͢ɻ ίʔυͷݕূ ݕূͷ݁Ռɺෆ۩߹͕ݟ͔ͭͬͨ৔߹͸ɺίʔυΛमਖ਼͠·͢ɻHTMLߏ଄ͷݟ௚͠΍CSSͷௐ੔ͳͲ͕ඞཁʹͳΔ͜ͱ͕ଟ͍Ͱ͢ɻ मਖ਼ޙɺ࠶౓ϒϥ΢βͰදࣔͯ͠໰୊͕ղܾ͍ͯ͠Δ͔Λ֬ೝ͠·͢ɻಛʹɺϢʔβʔΠϯλʔϑΣʔεͷཁૉ͕ਖ਼ৗʹػೳ͍ͯ͠Δ͔ΛνΣοΫ͠· ͢ɻ ඞཁʹԠͯ͡ɺ৽͍͠ཁૉ΍ػೳΛ௥Ճ͢Δ͜ͱ΋ՄೳͰ͢ɻϝϯςφϯε͠΍͍͢ίʔυߏ଄ʹ͢Δ͜ͱΛ৺͕͚·͠ΐ͏ɻ ίʔυͷमਖ਼ ChatGPTͷੜ੒ίʔυͷ֬ೝͱमਖ਼
7. HTMLΛFigmaʹม׵ ͢Δ 02
8. 28M+ ϩʔΧϧϑΝΠϧͷ࡞ ੒ อଘϑΝΠϧͷ֬ೝ ੜ੒͞ΕͨHTMLίʔυΛϩʔΧϧϑΝΠϧͱͯ͠ อଘ͠·͢ɻςΩετΤσΟλΛ࢖༻ͯ͠ɺϑΝΠ ϧʹίʔυΛషΓ෇͚ɺʮreservation.htmlʯͷΑ͏ ͳ໊લͰอଘ͠·͢ɻ ϑΝΠϧอଘ࣌ʹɺΤϯίʔυܗ͕ࣜUTF- 8Ͱ͋Δ ͜ͱΛ֬ೝ͠·͢ɻ͜ΕʹΑΓɺ೔ຊޠͳͲͷଟݴ ޠςΩετ͕ਖ਼͘͠දࣔ͞Ε·͢ɻ ϑΝΠϧͷอଘ৔ॴ͸ɺޙͰ༰қʹΞΫηεͰ͖Δ σΟϨΫτϦʹઃఆ͠·͢ɻϓϩδΣΫτϑΥϧμ ಺ʹอଘ͢Δͱ؅ཧ͕͠΍͘͢ͳΓ·͢ɻ อଘͨ͠HTMLϑΝΠϧΛμϒϧΫϦοΫͯ͠ɺϒ ϥ΢βͰਖ਼͘͠දࣔ͞ΕΔ͔Λ֬ೝ͠·͢ɻϑΝΠ ϧʹΤϥʔ͕ͳ͍͔ɺ༧ظͨ͠௨ΓʹϨϯμϦϯά ͞Ε͍ͯΔ͔ΛνΣοΫ͠·͢ɻ ಛʹɺϦϯΫ΍ϘλϯͳͲͷΠϯλϥΫςΟϒཁૉ ͕ਖ਼ৗʹػೳ͍ͯ͠Δ͔Λ֬ೝ͠·͢ɻಈ࡞ʹ໰୊ ͕͋Δ৔߹͸ɺίʔυΛमਖ਼ͯ͠࠶อଘ͠·͢ɻ HTMLϑΝΠϧ͕ਖ਼͘͠อଘ͞Ε͍ͯΔ͜ͱΛ֬ೝ ͨ͠Βɺ࣍ͷεςοϓʹਐΉ४උ͕੔͍·͢ɻ HTMLϑΝΠϧͷอଘ
9. 02 01 ʮhtml.to.designʯΠϯετʔϧ Chrome΢ΣϒετΞʹΞΫηε͠ɺʮhtml.to.designʯΛݕࡧ͠·͢ɻΠϯετʔ ϧϘλϯΛΫϦοΫͯ͠ɺChromeϒϥ΢βʹ֦ுػೳΛ௥Ճ͠·͢ɻ Πϯετʔϧ׬ྃޙɺϒϥ΢βͷӈ্ʹ֦ுػೳͷΞΠίϯ͕දࣔ͞Ε·͢ɻ͜ͷ ΞΠίϯΛΫϦοΫ֦ͯ͠ுػೳͷઃఆΛߦ͍·͢ɻ ઃఆϝχϡʔͰ͸ɺΠϯϙʔτͷৄࡉ΍࢖༻͢ΔπʔϧͷΧελϚΠζ͕ՄೳͰ ͢ɻඞཁʹԠͯ͡ઃఆΛௐ੔͠·͢ɻ ֦ுػೳͷಈ࡞֬ೝ ֦ுػೳ͕ਖ਼͘͠Πϯετʔϧ͞Ε͍ͯΔ͔Λ֬ೝ͠·͢ɻϒϥ΢βΛ࠶ىಈ͠ɺ ֦ுػೳͷΞΠίϯ͕දࣔ͞ΕΔ͜ͱΛ֬ೝ͠·͢ɻ ৽͍͠λϒΛ։͖ɺอଘͨ͠HTMLϑΝΠϧΛChromeͰදࣔ͠·͢ɻ ʮhtml.to.designʯΞΠίϯΛΫϦοΫ͠ɺઃఆϝχϡʔ͔ΒʮFull pageʯΛબ୒ ͠·͢ɻ FigmaʹΠϯϙʔτ͢Δ४උ͕੔ͬͨΒɺ࣍ͷεςοϓʹਐΈ·͢ɻ Chrome֦ுػೳͷઃఆ
10. Chromeϒϥ΢βͰอଘͨ͠HTMLϑΝΠϧΛ։͖·͢ɻϑΝΠϧͷ಺༰͕ ਖ਼͘͠දࣔ͞Ε͍ͯΔ͔Λ֬ೝ͠·͢ɻ ϖʔδ͕ਖ਼͘͠දࣔ͞Ε͍ͯΔ৔߹ɺʮhtml.to.designʯ֦ுػೳΛ࢖༻͠ ͯFigmaʹΠϯϙʔτ͠·͢ɻ֦ுػೳͷΞΠίϯΛΫϦοΫ͠ɺදࣔ͞ Εͨϝχϡʔ͔ΒʮFull pageʯΛબ୒͠·͢ɻ FigmaϓϩδΣΫτ͕։͔ΕɺHTMLίʔυ͕σβΠϯཁૉͱͯ͠Πϯϙʔ τ͞Ε·͢ɻ HTMLϑΝΠϧΛදࣔ 01 FigmaϓϩδΣΫτ͕։͍ͨΒɺΠϯϙʔτ͞ΕͨσβΠϯཁૉΛ֬ೝ͠ ·͢ɻ͢΂ͯͷཁૉ͕ਖ਼͘͠഑ஔ͞Ε͍ͯΔ͔ɺσβΠϯ่͕Ε͍ͯͳ͍ ͔ΛνΣοΫ͠·͢ɻ ಛʹɺจࣈ΍ը૾ͷҐஔɺαΠζɺ৭ͳͲ͕ਖ਼͘͠൓ө͞Ε͍ͯΔ͜ͱΛ ֬ೝ͠·͢ɻඞཁʹԠͯ͡ɺϨΠΞ΢τΛௐ੔͠·͢ɻ Πϯϙʔτ͕׬ྃͨ͠Βɺ࣍ͷεςοϓʹਐΈɺσβΠϯͷमਖ਼Λߦ͍· ͢ɻ Πϯϙʔτޙͷ֬ೝ 02 Figma΁ͷΠϯϙʔτ
11. Figma಺Ͱमਖ਼͢Δ 03
12. 01 FigmaͰΠϯϙʔτͨ͠σβΠϯͷ৭Λमਖ਼͠·͢ɻϓϩδΣΫτ಺ͷΧϥʔί ʔυΛ֬ೝ͠ɺඞཁͳมߋΛՃ͑·͢ɻ FigmaͷΧϥʔϐοΧʔΛ࢖༻ͯ͠ɺཁૉͷ৭Λௐ੔͠·͢ɻಛʹϘλϯ΍Ϧϯ Ϋͷ৭͸ɺϢʔβϏϦςΟʹӨڹΛ༩͑ΔͨΊॏཁͰ͢ɻ ৭ͷมߋ͕׬ྃͨ͠ΒɺશମͷσβΠϯόϥϯεΛ֬ೝ͠·͢ɻௐ੔ͨ͠৭͕ ଞͷཁૉͱௐ࿨͍ͯ͠Δ͔ΛνΣοΫ͠·͢ɻ ৭ͷௐ੔ 02 Πϯϙʔτ͞ΕͨσβΠϯͷϑΥϯτΛमਖ਼͠·͢ɻ࢖༻͢ΔϑΥϯτΛબ୒ ͠ɺαΠζ΍ελΠϧΛௐ੔͠·͢ɻ ϑΥϯτͷมߋʹΑΓɺσβΠϯશମͷҹ৅͕มΘΔͨΊɺ஫ҙਂ͘બఆ͠· ͢ɻಛʹಡΈ΍͢͞΍σόΠεؒͷޓ׵ੑʹ഑ྀ͠·͢ɻ ϑΥϯτͷมߋ͕׬ྃͨ͠ΒɺςΩετ͕ਖ਼͘͠දࣔ͞Ε͍ͯΔ͔Λ֬ೝ͠· ͢ɻಛʹ೔ຊޠͷจࣈྻ่͕Ε͍ͯͳ͍͔ΛνΣοΫ͠·͢ɻ ϑΥϯτͷௐ੔ σβΠϯͷجຊతͳमਖ਼
13. FigmaͰσβΠϯཁૉͷҐஔΛௐ੔͠·͢ɻಛʹɺॏཁͳ৘ ใ͕Ϣʔβʔʹ௚ײతʹ఻ΘΔΑ͏ʹ഑ஔ͠·͢ɻ άϦου΍ΨΠυϥΠϯΛ࢖༻ͯ͠ɺཁૉͷҐஔΛਖ਼֬ʹௐ ੔͠·͢ɻ౷Ұײͷ͋ΔσβΠϯΛ໨ࢦ͠·͠ΐ͏ɻ ௐ੔͕׬ྃͨ͠ΒɺσβΠϯશମͷόϥϯεΛ࠶֬ೝ͠· ͢ɻมߋ͕ଞͷཁૉʹӨڹ͍ͯ͠ͳ͍͔ΛνΣοΫ͠·͢ɻ 01 σβΠϯཁૉͷαΠζΛௐ੔͠·͢ɻಛʹɺը૾΍Ϙλϯͷ αΠζΛݟ௚͠ɺద੾ͳେ͖͞ʹઃఆ͠·͢ɻ αΠζௐ੔ʹ͸ɺFigmaͷϓϩύςΟύωϧΛ࢖༻͠·͢ɻ ࢦఆͨ͠αΠζ͕ଞͷཁૉͱόϥϯεΑ͘഑ஔ͞ΕΔΑ͏ʹ ௐ੔͠·͢ɻ ௐ੔͕׬ྃͨ͠ΒɺσβΠϯશମͷදࣔΛ֬ೝ͠ɺඞཁʹԠ ͯ͡ඍௐ੔Λߦ͍·͢ɻ 02 ཁૉͷҐஔௐ੔ αΠζௐ੔ ϨΠΞ΢τͷमਖ਼
14. σβΠϯ಺ͷϘλϯʹΞΫγϣϯΛઃఆ͠·͢ɻྫ͑͹ɺʮૹ৴͢ΔʯϘλϯΛΫϦοΫͨ͠ࡍͷಈ࡞Λఆٛ͠·͢ɻ FigmaͷϓϩτλΠϐϯάػೳΛ࢖༻ͯ͠ɺϘλϯͷΞΫγϣϯΛઃఆ͠·͢ɻϢʔβʔ͕ϘλϯΛΫϦοΫͨ͠ࡍͷϑϩʔΛࢹ֮తʹ֬ ೝͰ͖·͢ɻ ΞΫγϣϯઃఆ͕׬ྃͨ͠ΒɺϓϩτλΠϓͷϓϨϏϡʔΛߦ͍ɺಈ࡞֬ೝΛ͠·͢ɻඞཁʹԠͯ͡ઃఆΛมߋ͠·͢ɻ σβΠϯ಺ͷϦϯΫʹରͯ͠ɺφϏήʔγϣϯΛઃఆ͠·͢ɻಛఆͷϖʔδ΁ͷϦϯΫ΍ɺ֎෦αΠτ΁ͷϦϯΫΛఆٛ͠·͢ɻ FigmaͷϓϩτλΠϓϞʔυΛ࢖༻ͯ͠ɺϦϯΫͷઃఆΛߦ͍·͢ɻϦϯΫ͕ઃఆ͞ΕͨཁૉΛબ୒͠ɺλʔήοτϖʔδΛࢦఆ͠·͢ɻ ઃఆ͕׬ྃͨ͠ΒɺϦϯΫ͕ਖ਼͘͠ػೳ͢Δ͔Λ֬ೝ͠·͢ɻϦϯΫઌʹ໰୊͕ͳ͍͔ΛνΣοΫ͠ɺඞཁʹԠͯ͡मਖ਼͠·͢ɻ ϘλϯͷΞΫγϣϯઃఆ ϦϯΫͷઃఆ ΠϯλϥΫγϣϯͷ௥Ճ
15. Figma͔ΒHTMLʹΤ Ϋεϙʔτ͢Δ 04
16. ϓϥάΠϯͷ௥Ճ Figma͔ΒHTMLʹΤΫεϙʔτ͢ΔͨΊʹɺʮFigma to HTMLʯϓϥάΠϯΛ௥Ճ ͠·͢ɻFigma಺ͷϓϥάΠϯϝχϡʔ͔ΒʮFigma to HTMLʯΛݕࡧ͠ɺΠϯετ ʔϧ͠·͢ɻ Πϯετʔϧ͕׬ྃ͢ΔͱɺϓϥάΠϯͷΞΠίϯ͕දࣔ͞Ε·͢ɻ͜ΕΛΫϦοΫ ͯ͠HTML΁ͷΤΫεϙʔτΛ։࢝͠·͢ɻ Πϯετʔϧ࣌ʹඞཁͳΞΫηεڐՄΛ֬ೝ͠ɺঝೝ͠·͢ɻ͜ΕʹΑΓɺϓϥάΠ ϯ͕FigmaͷϓϩδΣΫτʹΞΫηεͰ͖ΔΑ͏ʹͳΓ·͢ɻ ϓϥάΠϯͷಈ࡞֬ೝ ϓϥάΠϯ͕ਖ਼͘͠Πϯετʔϧ͞Ε͍ͯΔ͔Λ֬ೝ͠·͢ɻϓϥά Πϯϝχϡʔ͔ΒʮFigma to HTMLʯΛىಈ͠ɺઃఆը໘͕දࣔ͞Ε Δ͜ͱΛ֬ೝ͠·͢ɻ ઃఆը໘Ͱ͸ɺΤΫεϙʔτΦϓγϣϯ΍ϑΝΠϧͷอଘઌΛࢦఆͰ ͖·͢ɻॳظઃఆΛ׬ྃ͠ɺΤΫεϙʔτͷ४උ͕੔͍·͢ɻ ϓϥάΠϯͷಈ࡞֬ೝ͕׬ྃͨ͠Βɺ࣍ͷεςοϓʹਐΈ·͢ɻ ʮFigma to HTMLʯͷΠϯετʔϧ
17. Figma಺Ͱमਖ਼͕׬ྃͨ͠σβΠϯΛબ୒͠ɺϓϥάΠϯΛىಈ͠·͢ɻΤΫεϙʔτର৅ͷཁૉΛ֬ೝ͠ɺඞཁͳΦϓγϣϯΛઃఆ͠·͢ɻ ಛʹɺΤΫεϙʔτ͢ΔϑΝΠϧܗࣜ΍඼࣭ઃఆΛ֬ೝ͠·͢ɻҰൠతʹ͸ɺHTMLϑΝΠϧͱͯ͠ΤΫεϙʔτ͢ΔઃఆΛબ୒͠·͢ɻ ΤΫεϙʔτલʹશମͷϓϨϏϡʔΛ֬ೝ͠ɺඞཁʹԠͯ͡࠷ऴௐ੔Λߦ͍·͢ɻ४උ͕੔ͬͨΒɺΤΫεϙʔτΛ։࢝͠·͢ɻ ΤΫεϙʔτͷ४උ ϓϥάΠϯͷΤΫεϙʔτϘλϯΛΫϦοΫ͠ɺHTMLϑΝΠϧͷੜ੒Λ։࢝͠·͢ɻΤΫεϙʔτத͸ɺFigmaͷਐߦঢ়گΛ֬ೝͰ͖·͢ɻ ΤΫεϙʔτ͕׬ྃ͢Δͱɺࢦఆͨ͠อଘઌʹHTMLϑΝΠϧ͕࡞੒͞Ε·͢ɻϑΝΠϧ͕ਖ਼͘͠ੜ੒͞Ε͍ͯΔ͔Λ֬ೝ͠·͢ɻ ΤΫεϙʔτޙɺHTMLϑΝΠϧΛ։͖ɺϒϥ΢βͰදࣔ֬ೝΛߦ͍·͢ɻදࣔʹ໰୊͕ͳ͍͜ͱΛ֬ೝ͠ɺϑΝΠϧͷڞ༗΍௥Ճमਖ਼Λߦ͍·͢ɻ ΤΫεϙʔτͷ࣮ߦ σβΠϯͷΤΫεϙʔτ
18. ϒϥ΢βͰͷ֬ೝ ΤΫεϙʔτͨ͠HTMLϑΝΠϧΛϒϥ΢βͰ։͖ɺσβΠϯ͕ਖ਼͘͠දࣔ͞ΕΔ͔Λ ֬ೝ͠·͢ɻಛʹɺΠϯλϥΫςΟϒཁૉ΍ϨεϙϯγϒσβΠϯͷಈ࡞ΛνΣοΫ͠ ·͢ɻ දࣔʹ໰୊͕͋Δ৔߹͸ɺHTMLίʔυΛमਖ਼͠ɺ࠶౓ϒϥ΢βͰ֬ೝ͠·͢ɻඞཁʹ Ԡͯ͡ɺCSS΍JavaScriptͷௐ੔΋ߦ͍·͢ɻ ࠷ऴ֬ೝ͕׬ྃͨ͠ΒɺHTMLϑΝΠϧΛνʔϜ΍ΫϥΠΞϯτͱڞ༗͠·͢ɻ ௥Ճमਖ਼ͱ࠶ΤΫεϙʔτ ϒϥ΢βͰͷ֬ೝ݁Ռʹج͖ͮɺ௥Ճमਖ਼͕ඞཁͳ৔߹͸FigmaͰσβΠϯΛमਖ਼͠·͢ɻमਖ਼͕ ׬ྃͨ͠Βɺ࠶౓ϓϥάΠϯΛ࢖༻ͯ͠ΤΫεϙʔτΛߦ͍·͢ɻ ΤΫεϙʔτΛ܁Γฦ͠ߦ͏͜ͱͰɺσβΠϯͷਫ਼౓ΛߴΊ·͢ɻ࠷ऴతͳHTMLϑΝΠϧ͕׬੒ ͢Δ·Ͱɺඞཁͳमਖ਼ͱΤΫεϙʔτΛଓ͚·͢ɻ ׬੒ͨ͠HTMLϑΝΠϧ͸ɺϓϩδΣΫτͷ੒Ռ෺ͱͯ͠อଘ͠ɺඞཁʹԠͯ͡׆༻͠·͢ɻ ࠷ऴ֬ೝͱௐ੔
19. HTMLϑΝΠϧͷ഑෍ ׬੒ͨ͠HTMLϑΝΠϧΛؔ܎ऀʹ഑෍͠·͢ɻϝʔϧ΍Ϋϥ΢υετϨʔδΛ ࢖༻ͯ͠ɺϑΝΠϧΛڞ༗͠·͢ɻ ഑෍࣌ʹɺϑΝΠϧͷ࢖༻ํ๏΍஫ҙ఺Λઆ໌͠·͢ɻಛʹɺϒϥ΢βޓ׵ੑ ΍σόΠεؒͰͷදࣔ֬ೝΛґཔ͠·͢ɻ ϑΝΠϧͷ഑෍ޙɺड͚औͬͨϑΟʔυόοΫΛݩʹɺ࠷ऴௐ੔Λߦ͍·͢ɻඞ ཁʹԠͯ͡ɺ௥Ճमਖ਼΍࠶ΤΫεϙʔτΛ࣮ࢪ͠·͢ɻ 2 ϑΟʔυόοΫͷ൓ө ड͚औͬͨϑΟʔυόοΫΛݩʹɺσβΠϯ΍HTMLϑΝΠϧͷमਖ਼Λߦ͍·͢ɻಛʹɺ Ϣʔβʔ͔Βͷཁ๬΍ෆ۩߹ใࠂΛॏࢹ͠·͢ɻ ϑΟʔυόοΫΛݩʹɺ࠶౓FigmaͰσβΠϯΛमਖ਼͠ɺΤΫεϙʔτΛ܁Γฦ͠· ͢ɻ࠷ऴతͳϑΝΠϧ͕׬੒͢Δ·ͰɺϑΟʔυόοΫͱௐ੔Λଓ͚·͢ɻ ׬੒ͨ͠HTMLϑΝΠϧ͸ɺ࠷ऴ֬ೝΛܦͯɺਖ਼ࣜʹϦϦʔε͠·͢ɻϦϦʔεޙ΋ɺఆ ظతͳϝϯςφϯε΍ߋ৽͕ඞཁͰ͢ɻ ഑෍ͱϑΟʔυόοΫͷऩू
20. 20XX Thanks for your attention Here is where your presentation begins 20XX-XX-XX