Web 사이트에 있어서의 좌단 모조에 대해～정렬하는 것만으로 극적으로 디자인이 바뀌는～

비 디자이너 디자인 북에 말할 수있는 디자인의 기본에 "정렬"이 있습니다.

이것은 레이아웃상의 각 요소의 가장자리 선(왼쪽에서 오른쪽으로 각 문자라고 좌단이 많다)을 딱 맞추어, 선을 의식시키는 것으로 시각적으로 효과를 주는 디자인 수법입니다.

중앙 집합을 채택하지 않는 경우, 기본적으로는 사이트내의 모든 요소를 ​​갖추게 됩니다.

최근 웹 사이트에서 가장 왼쪽의 예

예를 들면 Guardian의 책 블로그 .
이 사이트에서는 6개의 세로선을 따라 각 요소가 깔끔하게 배치되어 있습니다.
세련되고 아름다운 인상을줍니다.

정렬할 때의 요령은 로고나 타이틀 등 화면 밖의 요소도 함께 갖추는 것입니다.
이 경우 "The Guardian"이라는 문자의 오른쪽 가장자리는 사진의 오른쪽 가장자리와 정렬됩니다.

간단한 웹사이트에서 시각적 효과를 확인하세요.

흑백만의 간단한 웹사이트에서 시각적인 효과를 확인하세요.
(이미지가 잡히기 때문에, 이미지 사이즈가 갖추어지지 않았다는 불편한 죄송합니다)

나쁜 예

여기까지 가타가타로 하면, 더 이상 보고 있어 불쾌하네요.

갖추어진 예

왼쪽 가장자리를 정렬했습니다.
다른 요소가 부족하기 때문에 아직 세련된 인상은 받지 않지만, 다소 깨끗해졌군요!

양단 정렬, 중앙 정렬에 대해

방금 전 Guadian의 예에 있었지만 세로 가이드 라인은 왼쪽 가장자리 중 하나뿐이 아닙니다.
오른쪽 가장자리도 갖추어져있는 것이 더 깨끗하고 여러 요소를 넘어 하나의 세로선이 보이면 아름답습니다.

중앙 모임과의 병용에 대해서

가운데 세트의 요소와 왼쪽 끝 세트의 요소를 병용하는 경우도 있습니다.
개인적으로 좋아하지 않기 때문에 예는 내지 않습니다.

왼쪽 끝에서 강한 인상을 내고있는 것이 완화되기 때문에, 잘 잘하지 않는 한, 그다그다가됩니다.

로고의 위치에 대해

로고의 위치는 대략 3 패턴 있습니다.

화면 왼쪽 끝

중앙

일부 화면의 지침에 맞게 배치

기본적으로 이 중이라면, 화면내의 가이드라인에 따라 배치하는 것이 안정적입니다.
(Guadian 사이트만큼 고급 로고 배치를하기가 어렵습니다)

기본적으로는 본문과 왼쪽의 라인을 갖추는 형태가 될까 생각합니다.
화면의 왼쪽 가장자리에 로고를 놓는 패턴이라면 요소의 왼쪽 가장자리 라인을 파괴하는 경우가 많습니다.
중앙 모임은 옛날 잘 보았습니다만, 최근의 사이트라고 별로 보지 않습니다.
(아마도 왼쪽 끝 정렬의 효과를 내고 싶기 때문이라고 생각됩니다)

정렬을 무너뜨리는 경우도 있다(단, 선은 의식시킨다)

좌단 정렬을 무너뜨리면서, 선을 의식시키고 있는 사이트로 예쁜 예는, 이쪽의 ESTYLE 사이트 입니다.
이 사이트에서는, 왼쪽 끝 정렬을 의도적으로 무너뜨리는 연출을 하고 있습니다. (Who we are의 곳입니다)

다만 이 경우에도, 좌단의 선과 문자의 좌단의 선, 이 2개는 선명하게 의식할 수 있게 되어 있습니다.

정렬 정보 요약

기본이지만 요소 정렬은 웹 디자인을 획기적으로 향상시킵니다.
세로선이 보이지 않는 사이트는 디자인면에서 상당히 불리하게 되어 있는 것 같아요.

기본적인 것입니다만, 정렬에 대해서였습니다.