소개

프런트 엔드 엔지니어를 목표로 프로그래밍을 배우고 있습니다.
나가타라고 합니다.
프로그래밍 학습의 아웃풋으로서 자작의 「Stay Japna」를 공개합니다.
이 기사에서는 「Stay Japna」의 개요에 대해 설명합니다.

URL

소스 코드↓
htps : // 기주 b. 코 m / 사토루 오사다 / s y_japan_po rt 후오

목적

자신의 프로그래밍 학습 출력
보수성, 운용성을 높이기 위한 Scss로의 기술과 css설계의 BEM에서의 기술로 컴포넌트화를 실행해, 개발 스피드를 향상시킨다.
반응형 디자인 학습.

다만 만드는 것이 아니라, 실제로 사용되는 의식을 가지고, 외형이나 배치, 사이트의 움직임을 고려해 작성해 보았다.

사양

사용 언어/HTML5/CSS3/SCSS/Javascript

개발 환경/MacOS,

태스크 러너/gulp, yarn

버전 관리/SourceTree(3.0.15)

주요 기능

· 반응형 디자인 대응
・javascript에 의한 동작
　→스크롤로의 헤더의 색의 변화, 키 비주얼의 자동 슬라이더, 스크롤했을 때의 화상과 문자 애니메이션, 페이지 로더의 구현, contact의 개소의 밸리데이션(입력하지 않으면 에러가 나오는 등).
· html, css로 구현한 이펙트의 버튼, 이미지의 호버 애니메이션.

개요

나는 여행에 관심이 많고 일본 민박 예약을 쉽게 할 수있는 민박 사이트를 공개한다고 가정하고 독자적으로 마케팅했습니다.
대상은 젊은 세대(20대~40대 메인)로 했습니다.
심플하고 외형의 디자인 등을 중시해, 숙소 찾기를 부드럽게 실시할 수 있는 사이트를 목표로 작성해, 일본의 여행 업계 활성화에 연결해 가고 싶었습니다.
장래적으로는 해외의 사람에게도 이용해 주었으면 하기 때문에, 일본의 상징적인 화상을 사용했습니다.
심플한 디자인으로 했습니다만, javascript등으로 움직임을 붙이기도 하고, 리치함을 내 보았습니다.
화려한 색을 억제하면서, 보기 쉽도록 상냥한 인상을 주는 사이트를 작성해 보았습니다.
또, 보수성과 운용성을 생각해 css를 컴퍼넌트화해, 또, 모바일 퍼스트에 맞춘 반응형 디자인 대응으로 했습니다.

개발 절차

1.디자인 캠프 작성(공수:1인일)

2.코딩, 모바일 퍼스트에 맞춘 반응 대응(공수:4인일)

3. 사이트 공개