블로그 및 SNS 피드에서 사용자가 기사를 읽는지 여부를 결정하는 시간은 “0.2 초"라고합니다. 아무리 질 높은 본문을 써도 아이 캐치 이미지에서 눈길을 끄지 않으면 기사의 존재 자체가 스루되어 버립니다.

지금까지 수백회의 썸네일 A/B 테스트를 실시해 온 데이터로부터 도출한, 클릭률(CTR)을 극적으로 개선하는 배색과 레이아웃의 설계 원칙을 차트 형식으로 해설합니다.

시선 유도를 제어하는 「Z의 법칙」과 문자 배치

인간의 시선은 화면의 왼쪽 위에서 오른쪽 위, 왼쪽 아래, 오른쪽 아래로 “Z"의 궤적으로 움직입니다. 스마트 폰의 좁은 화면에서 즉시 메시지를 전달하기위한 레이아웃은 다음이 철칙입니다.

• 메인 카피는 왼쪽 상단에 배치: 시선이 먼저 도달하는 왼쪽 상단에 독자의 관심을 끄는 최대의 후크(의문형이나 숫자)를 놓습니다.
• 문자수는 최대이라도 13~15문자 이내: 확실히 보면 순간 읽을 수 있는 문자수로 좁혀 2~3행으로 나누어 신축성을 부여합니다. 조사(~의,~는)를 작게 해, 키워드가 되는 명사를 2배의 사이즈로 하는 것만으로 가독성이 튀어 오릅니다.
• 오른쪽 하단에는 ‘시각적 앵커’를 배치: 인물의 표정 사진이나 입체감 있는 아이콘 일러스트를 오른쪽에 배치하여 화면 전체의 중심을 안정시킵니다.

스마트 폰 화면에 묻히지 않는 “보색 대비"설계

배경과 문자의 대비가 충분하지 않은 아이 캐치는 피드에서 완전히 배경과 동화됩니다.

• 명도차 60% 이상의 콘트라스트를 확보: 밝은 배경에는 짙은 문자, 어두운 배경에는 흰색 문자를 기본으로 하고, 색조환으로 반대쪽에 위치한 “보색(예: 파란색 배경에 악센트로 노란색이나 오렌지)“을 효과적으로 배치합니다.
• 자이불(띠)과 드롭 섀도우 활용: 사진이나 복잡한 배경 이미지 위에 문자를 얹을 때 반투명한 흑대(좌이불)를 깔거나, 테두리·드롭 섀도우를 적용하여 문자의 윤곽을 쿠키리와 독립시킵니다.

피해야 할 NG 디자인의 전형적인 예

「여백이 너무 많아 문자가 작고 스마트폰으로 읽을 수 없다」 「멋쟁이를 중시하고 가는 명조체를 사용해 버린다」라고 하는 것은 자주 있는 실패입니다. 아이 캐치는 예술 작품이 아니라 “클릭을 촉구하는 간판"입니다. 스마트 폰 기기에서 축소 미리보기를 확인하고 엄지 손가락을 멈출 수있는 강도가 있는지 항상 확인하십시오.