아이콘은 일러스트와 달리 그 자체로 뜻을 전하는 기호입니다. 나란히 놓았을 때 하나만 윤곽이거나 하나만 원으로 둘러싸여 있으면, 그것만으로 그 항목이 강조된 것처럼 읽힙니다. 출처가 다른 아이콘을 섞었을 때 생기기 쉬운 어긋남과 피하는 방법을, 이 사이트의 아이콘을 늘어놓아 살펴봅니다.
채운 아이콘과 윤곽 아이콘을 섞지 않는다
먼저 정할 것은 속을 채운 아이콘을 쓸지, 윤곽만 있는 아이콘을 쓸지입니다. 이 둘은 서로 다른 기호 체계라서, 섞이면 채운 쪽이 「선택됨」 「사용 중」 같은 상태를 나타내는 것처럼 보입니다.
내비게이션이나 체크리스트에서는 이 오독이 그대로 조작 실수로 이어집니다. 한쪽으로 정해 자료 끝까지 밀고 나가세요. 바꾸는 것은 상태의 차이를 나타낼 때로 한정합니다.
테두리 모양도 맞춘다
같은 채운 아이콘이라도 원으로 둘러싼 것, 사각형으로 둘러싼 것, 테두리가 없는 것이 섞이면 둘러싸인 쪽이 버튼처럼 보입니다.
선의 굵기는 자료 하나에 한 종류로 정한다
윤곽 아이콘을 다른 곳의 소재와 섞을 때 인상을 가장 크게 좌우하는 것은 선의 굵기입니다. 절차 목록에 가는 선과 굵은 선이 섞여 있으면 굵은 쪽이 중요한 공정으로 받아들여집니다. 굵기는 한 종류로 고정하고, 강조는 색이나 배치로 하는 편이 안전합니다.
작은 쪽을 기준으로 크기를 고른다
줄이면 세부가 뭉개지고, 키우면 선이 힘없어 보입니다. 한 자료에서 여러 크기로 돌려 쓸 거라면 작은 쪽을 기준으로 고르세요. 작아도 뜻이 읽히는 아이콘은 키워도 무너지지 않지만, 그 반대는 성립하지 않습니다.
색은 뜻을 담을 때만 바꾼다
아이콘에 색을 넣는 것은 그 색이 무언가를 나타낼 때만으로 합니다. 빨강은 경고, 초록은 완료——이런 대응이 자료 안에서 일관되면 색은 정보로 작동합니다. 장식으로 하나씩 다른 색을 입히면, 읽는 사람은 의미 없는 차이를 찾게 됩니다.
여백을 깎지 않는다
아이콘 주위의 여백은 형태의 일부입니다. 틀에 딱 맞추려고 여백을 깎으면 옆 요소와 간섭해 읽기 어려워집니다. 글자와 나란히 놓을 때는 아이콘 높이를 글자 높이보다 살짝 작게 잡으면 안정됩니다.
Visual Hub의 아이콘에 대하여
위의 견본은 모두 이 사이트의 아이콘입니다. 단색 면으로 그려져 있으며, 윤곽만 있는 것처럼 보이는 것도 안쪽을 도려낸 면으로 만들었습니다. 같은 모양에 대해 채운 것·윤곽·테두리가 다른 것을 준비해 두었으므로, 나란히 쓸 때는 어느 하나로 맞춰 골라 주세요. 색과 크기는 내려받을 때 지정할 수 있으며, SVG와 PNG 어느 쪽으로도 저장할 수 있습니다.