Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Atomic Design の導入と実践プロセス

Kento Nagata
September 13, 2018

Atomic Design の導入と実践プロセス

アトミックデザインは、デザインコンポーネントの共通化により開発プロセスの効率化を図るためのフレームワークです。Wantedly VisitのiOS Appでは、このフレームワークを導入し、開発の効率化とデザインの一貫性を向上させることができました。このトークでは、具体的にどのようにコンポーネントを分類し、どのようにプロセスを回していったかについて、実際に作成したコンポーネントと共にご紹介します。

Kento Nagata

September 13, 2018
Tweet

More Decks by Kento Nagata

Other Decks in Technology

Transcript

  1. ©2018 Wantedly, Inc. ,FOUP/BHBUB 8BOUFEMZ *OD&OHJOFFS ೥ੜ·Εɻ৽ଔͰגࣜձࣾ7JJCBSʹೖࣾ͠ɺαʔ όαΠυΛ೥΄Ͳܦݧͨ͠ͷͪɺ8BOUFEMZ  *OD

    ʹೖ ࣾɻݱࡏ͸8BOUFEMZ7JTJUͷάϩʔεΛ8FCͱJ04ͷϓ ϥοτϑΥʔϜͰߦͳ͍ͬͯ·͢ɻJ04ྺ͸൒೥Ͱ͢ɻ 5XJUUFS!OHULOU
  2. ©2018 Wantedly, Inc.  "UPNJD%FTJHOͱ͸Կ͔  "UPNJD%FTJHOΛνʔϜʹಋೖ͢Δํ๏  8BOUFEMZ7JTJUJ04Ͱͷ࣮ྫ w

    ͜ͷ"QQͷ֓ཁͱ৽͍͠σβΠϯʹ͍ͭͯ w ઃܭํ਑ w ۩ମతͳઃܭɾίʔυ ࠓ೔࿩͢͜ͱ
  3. ©2018 Wantedly, Inc.  σβΠϯͷج४΍ݪଇ  Ξηοτ΍ίϯϙʔωϯτ  σβΠϯ΍։ൃϓϩηε 

    υΩϡϝϯςʔγϣϯ σβΠϯγεςϜʹؚ·ΕΔ΋ͷ Atomic Design supports this
  4. ©2018 Wantedly, Inc.  "UPNTݪࢠ  .PMFDVMFT෼ࢠ  0SHBOJTNT༗ػମ 

    5FNQMBUFTςϯϓϨʔτ  1BHFTϖʔδ Atomic Design ͷํ๏࿦
  5. ©2018 Wantedly, Inc. Atomic Design ͷํ๏࿦ Atoms - ݪࢠ Atom

    - ݪࢠ͸ɺϥϕϧɺϘλϯɺςΩετϑΟʔϧ υͳͲجຊతͳཁૉΛؚΈ·͢ɻશͯͷجຊతͳε λΠϧΛҰ໨Ͱද͠·͢ɻͨͩ͠ɺࣗવքͷʮݪࢠʯ ͕୯ҰͰۭؾதʹଘࡏ͠ͳ͍ͷͱಉ༷ʹΞϓϦέʔ γϣϯͷதͰద༻͞ΕΔଘࡏͰ͋Δͱ͍͏఺͕ॏཁ Ͱ͢ɻ
  6. ©2018 Wantedly, Inc. Atomic Design ͷํ๏࿦ Molecules - ෼ࢠ Molecule

    - ෼ࢠ͸ɺݪࢠΛ૊Έ߹Θͤͯγϯϓϧͳ ҰͭͷػೳΛఏڙ͠·͢ɻྫ͑͹ɺϥϕϧ΍ςΩε τϑΟʔϧυɺϘλϯ͕૊Έ߹Θͤɺ৔ॴΛݕࡧͰ ͖ΔίϯϙʔωϯτΛ࡞Δ͜ͱ͕Ͱ͖·͢ɻ
  7. ©2018 Wantedly, Inc. Atomic Design ͷํ๏࿦ Organisms - ༗ػମ Organisms

    - ༗ػମ͸ɺݪࢠ΍෼ࢠɺଞͷ༗ػମΛ ૊Έ߹ΘͤͯΑΓෳࡶͳίϯϙʔωϯτΛ࡞Γ·͢ɻ ྫ͑͹ɺΩʔϫʔυΛೖྗͯͦ͠ͷ݁ՌΛݟΔ͜ͱ ͕Ͱ͖ΔίϯϙʔωϯτͳͲͰ͢ɻ
  8. ©2018 Wantedly, Inc. Atomic Design ͷํ๏࿦ Templates - ςϯϓϨʔτ Templates

    - ςϯϓϨʔτ͸ɺϖʔδΛද͢ίϯ ϙʔωϯτͰ͢ɻͨͩ͠ɺߏ଄΍ϨΠΞ΢τʹؔ͠ ͯͷΈʹ੹೚Λ࣋ͪɺ۩ମతͳσʔλΛ൐͍·ͤΜɻ
  9. ©2018 Wantedly, Inc. Atomic Design ͷํ๏࿦ Page - ϖʔδ Pages

    - ϖʔδ͸ɺTemplateͷΠϯελϯεͰ͢ɻ ςΩετ΍ը૾ͳͲ۩ମతͳσʔλΛ൐͍·͢ɻ TemplateͱPageΛ෼͚Δ͜ͱͰɺϖʔδϨϕϧͰ ͷॏෳΛ๷͙͜ͱ͕Ͱ͖·͢ɻ
  10. ©2018 Wantedly, Inc.  νʔϜશһͰ"UPNJD%FTJHOΛཧղ͢Δ w σβΠφ΍ΤϯδχΞશһͰ࿩ͯ͠ཧղ͢Δ  ํ਑ΛܾΊΔ w

    σβΠϯ΍࣮૷ͷϑϩʔΛܾΊΔ w අ༻ରޮՌΛߟ͑ɺಋೖ͢ΔϨϕϧΛܾΊΔ  σβΠϯɾ࣮૷ νʔϜͰͷಋೖํ๏
  11. ©2018 Wantedly, Inc.  ืूݕࡧ  ืूϖʔδ  ൃݟλϒ 

    ձࣾϖʔδ  ϓϩϑΟʔϧϖʔδ  ௨஌΍ϝοηʔδ Wantedly Visit iOS ͷػೳ
  12. ©2018 Wantedly, Inc.  "UPN .PMFDVMF 0SHBOJTN 1BHFΛಋೖ w ଟ༷ͳػೳɺߴ౓ͳந৅Խ͕ٻΊΒΕΔͨΊ΄΅શͯͷϨϕϧΛಋೖ

    w 5FNQMBUF͸ݱ࣌఺Ͱઃܭίετ͕ߴ͘ϝϦοτʹݟ߹Θͳ͍ͱ൑அ w ࣮૷Ͱ͸ɺिؒ΄ͲͰ"UPNT .PMFDVMFTͷϕʔεΛ࡞੒ɺ͋ͱ͸దٓ௥Ճ Wantedly Visit iOS Ͱͷํ਑
  13. ©2018 Wantedly, Inc.  Ξηοτ w ΧϥʔύϨοτ΍ΞΠίϯ΍ςΩετελΠϧ  ϕʔεͱͳΔදݱ w

    Ϙλϯ΍ϥϕϧ w 7JFXͷந৅తͳσβΠϯͷύλʔϯͳͲ Atom - ݪࢠ ʹؚ·ΕΔ΋ͷ