デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development

Transcript

1. #FTU
   1SBDUJDFT
   GPS
   #VJMEJOH
   B
   $POTJTUFOU
   %FTJHO
   4ZTUFN
   GSPN
   %FTJHO
   UP
   %FWFMPQNFOU -*/&ヤフー
   .FEJB
   $PNQBOZ
   :BIPP
   +"1"/
   .FEJB
   4FSWJDFT
   (SPVQ 4IV[P
   5BLBIBTIJ
2. "OESPJE
   &OHJOFFS
   
   6*69
   %FTJHOFS !
   :BIPP
   +"1"/
   "QQ 8IP
   BN
   * 4IV[P
   5BLBIBTIJ *
   MPWF
   'JHNB
   BOE
   ,PUMJO
3. FWFO
   NPSF
   JNQPSUBOU "*
   JT
   $IBOHJOH
   UIF
   $PNNPO
   4FOTF
   PG
   %FTJHO
   4ZTUFNT 5IF
   CFTU
   QSBDUJDFT
   XF
   IBWF
   JNQMFNFOUFE
   TP
   GBS *O
   UIJT
   "*
   FSB
   XIZ
   BOE
   IPX
   IBWF
   UIFZ
   CFDPNF
4. 5IF
   %FFQ3PPUFE
   (BQ
   #FUXFFO
   %FTJHO
   
   *NQMFNFOUBUJPO %JTDSFQBODZ 7JTVBM
   EJGGFSFODFT
   CFUXFFO
   EFTJHO
   BOE
   JNQMFNFOUBUJPO $PTUT 6OTFFO
   JNQMFNFOUBUJPO
   DPTUT 'BJMVSFT -BZPVU
   CSFBLJOH
   JO
   FEHF
   DBTFT *ODPOTJTUFODZ *ODPOTJTUFOU
   DPNQPOFOU
   EFTJHO
5. *OFGGJDJFOU
   $PNNVOJDBUJPO "
   $SJUJDBM
   #MPDLFS GPS
   'VUVSF
   "VUPNBUJPO ˣ
6. 4USVDUVSBM
   &YQSFTTJPO
   JO
   'JHNB ,FZ
   QPJOUT
   GPS
   DSFBUJOH
   IJHIRVBMJUZ
   CMVFQSJOUT
7. *U
   EFGJOFT
   UIF SVMFT PG
   QBSFOUDIJME
   SFMBUJPOTIJQT
   BOE
   SFTJ[JOH
   CFIBWJPS
   5IFTF
   SVMFT
   BSF
   UIF
   TPVSDF
   PG
   SFTQPOTJWF
   DPEF 3VMF
   
   %FGJOF
   #FIBWJPS
   /PU
   +VTU
   "QQFBSBODF "VUP
   -BZPVU
8. 3VMF
   
   $MFBSMZ
   $PNNVOJDBUF
   UIF
   *OUFOU
   PG
   $IBOHF 5IF
   NPTU
   DSVDJBM
   TFQBSBUJPO
   PG
   SFTQPOTJCJMJUJFT
   UP
   DPSSFDUMZ
   DPOWFZ
   JOUFOU
   UP
   "*
   BOE
   FOHJOFFST
9. 4FQBSBUJPO
   PG
   3FTQPOTJCJMJUJFT
   A7BSJBOUTA
   
   A1SPQFSUJFTA
10. 3VMF
    
    (JWF
    &WFSZ
    -BZFS
    *NQMFNFOUBUJPO-FWFM
    .FBOJOH 8IJDI
    CMVFQSJOU
    GPTUFST
    CFUUFS
    DPMMBCPSBUJPO
11. ˔ $POTJTUFODZ %FGJOJOH
    DPMPST
    CZ
    SPMF
    FH DPMPS CBDLHSPVOEQSJNBSZ
    JOTUFBE
    PG
    CZ
    WBMVF
    ''''''
    NBLFT
    EBSL
    NPEF
    TVQQPSU
    FBTJFS ˔ .BJOUBJOBCJMJUZ $IBOHJOH
    B
    UPLFOT
    WBMVF
    VQEBUFT
    BMM
    JOTUBODFT
    BU
    PODF .BOBHJOH
    4UZMFT
    XJUI
    %FTJHO
    5PLFOT "
    TZTUFN
    GPS
    DFOUSBMMZ
    NBOBHJOH
    BMM
    TUZMF
    WBMVFT
    MJLF
    DPMPST
    UZQPHSBQIZ
    BOE
    TQBDJOH
    XJUI
    OBNFE
    WBSJBCMFT
12. 5IF
    1PXFS
    PG
    5PLFOT
    JO
    "EBQUJWF
    6* .BOBHF
    TDSFFO
    TJ[FT
    XJUI /VNCFS
    7BSJBCMFT ˠ
    &BTJMZ
    DIFDL
    EJTQMBZT
    GPS
    FBDI
    EFWJDF 5PLFOJ[F
    NBSHJOT ˠ
    3VMFCBTFE
    BEKVTUNFOUT
    MJLF NBSHJO TQ
    QY WT NBSHJOQD
    QY
13. 5IF
    1PXFS
    PG
    5PLFOT
    JO
    "EBQUJWF
    6*
14. 5IF
    %FFQ3PPUFE
    (BQ
    #FUXFFO
    %FTJHO
    
    *NQMFNFOUBUJPO ▶
    4UBSU
    CZ TIBSJOH
    DIBMMFOHFT ▶ 'PSN
    B DSPTTGVODUJPOBM
    UFBN ▶
    /VSUVSF
    B DVMUVSF
    PG
    DPOUJOVPVT
    JNQSPWFNFOU
15. 8IBU
    -JFT
    #FZPOE
16. 0VS
    3PBENBQ
    UP
    UIF
    'VUVSF
17. 4UFQ
    
    #FIJOE
    UIF
    4DFOFT
    PG
    UIF
    -JOUFS
    "
    (MJNQTF
18. 5IF
    GVUVSF
    CFHJOT
    XJUI IPX
    XF
    CVJME
    JO
    'JHNB
    UPEBZ 5IFTF
    GVOEBNFOUBM
    CFTU
    QSBDUJDFT
    BSF
    B
    TPMJE
    TUFQ
    UPXBSE
    B
    GVUVSF
    PG
    IVNBO"*
    DPMMBCPSBUJPO 4IBMM
    XF
    TUBSU
    ESBXJOH
    UIF
    CMVFQSJOUT
    GPS
    UIF
    GVUVSF
    UPHFUIFS
19. 5IBOL
    ZPV !TIV[P@DSFBUF