컴포넌트 단위의 설계를 하면 디자인 가이드라인을 만들자

안녕하세요, 웹 사이트 디자이너입니다.
작년 11월에, Spotlight 라고 하는 가상 통화를 사용한 CtoC 미디어 서비스를 릴리스 했습니다. (담당 부분은 디자인과 화면 코딩입니다.)

그리고, 2019년 5월 31일에 가결된 개정 자금 결제법에 포함되는 「암호 자산 카스트디 업무에 대한 규제」에 따라 1월 31일의 서비스 내용 변경과 동시에 디자인의 개수도 실시했습니다.

그 때, 디자인 가이드 라인 되는 것을 작성했기 때문에, 만드는 방법과 중요성이라든지 만들고 나서 어떻게 바뀌었는지 이야기합니다.

디자인 가이드라인이란?

가타카나로 쓰면 너무 어색하다.
로고라든지, 홈페이지라든지 여러가지 있다고 생각합니다만, 이번은 CSS 프레임워크의 Doc같은 것,이라고 파악해 주세요.

Bootstrap

BULMA

Pure.css

어떤 것을 만들었는가

Notion으로 간단한 Doc을 만들었습니다.



디자이너가 없어도, 화면 디자인을 구현할 수 있는 구조를 만들 수 있는 것은, 컴퍼넌트화했을 때의 강점이라고 생각합니다.

이렇게하면 미세한 수정의 쓸데없는 커뮤니케이션이 없어집니다.

만드는 방법

Notion을 사용하여 카드 유형으로 정렬 된 문서를 만듭니다.

새 문서를 만들고 제목, 사용법, 이미지 및 코드를 설명합니다.

URL을 게시하고 공유합니다.

만들고 나서 바뀐 것

보다 컴포넌트화를 의식한 디자인과 구현을 하게 되었다

문서를 작성하고 게시하는 것을 의식하기 때문에 코드가 더 잘 갖추어졌습니다

클래스명을 컴퍼넌트 단위로 붙이는 것을 의식할 수 있게 되었다

솔직히, 현재 엔지니어 2명, 디자이너 1명으로 하고 있으므로 거기까지 성과가 나오고 있는 인상은 없습니다만(화면 코딩도 내가 담당하고 있기 때문에), 팀 규모가 커질수록 이런 것이 필요하게 되는 인상입니다.

쓸데없는 커뮤니케이션을 없애고 서비스를 더 잘 할 수 있도록 노력할 수 있다고 생각합니다.