디자인킷 · 도식
핵심 문장 한 줄과 근거 3개
D-도식-글-핵심문장근거3
언제 쓰는가
장 전체가 한 문장을 말하고 근거가 셋일 때. 문장을 가장 크게, 근거는 아래 3단으로. 핵심 문장 2줄 이내(45자 안팎), 근거 3개 고정, 근거 설명 2줄 이내. 값 바꾸는 법: .big=핵심 문장(강조할 구절 하나만 em). li=근거(span 라벨, h3 제목, p 설명). 헤드카피와 같은 말을 되풀이하지 않도록 헤드카피는 주제, 여기는 주장으로 나눔.
참고
컨설팅 장표 규칙 해설(Deckary 'consulting slide standards' https://deckary.com/blog/consulting-slide-standards , 'slide types guide' https://deckary.com/blog/pillar-slide-types-guide)의 무장식·제한된 색·한 장 한 주장 원칙 참고. 결론 하나를 위에, 근거 셋을 아래에 두는 피라미드 구성. 신문 편집의 큰 표제와 3단 본문 조판. 구성 방식만 참고, 그림과 코드는 직접 제작.
조각
<div class="dk dk-tkey">
<p class="big">광고비를 늘리기 전에, 검색 첫 화면에서 <em>자사 콘텐츠가 보이는 칸</em>부터 늘려야 함</p>
<ol>
<li><span>근거 1</span><h3>첫 화면 점유 낮음</h3><p>브랜드 검색 결과 첫 화면 10칸 가운데 자사 콘텐츠는 3칸</p></li>
<li><span>근거 2</span><h3>클릭은 위쪽에 집중</h3><p>검색 클릭의 대부분이 첫 화면 위쪽 절반에서 발생</p></li>
<li><span>근거 3</span><h3>후기 탐색 후 구매</h3><p>구매 고객 10명 중 6명이 후기 글을 먼저 확인했다고 응답</p></li>
</ol>
</div>스타일
.dk-tkey .big{margin:0;font-size:var(--f-num);font-weight:700;line-height:1.32;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.dk-tkey .big em{font-style:normal;color:var(--ac)}
.dk-tkey ol{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line2)}
.dk-tkey li{padding:20px 32px 0 0}
.dk-tkey li+li{padding-left:32px;border-left:1px solid var(--line)}
.dk-tkey li span{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dk-tkey h3{font-size:var(--f-lg);font-weight:700;margin:4px 0 4px;line-height:1.35}
.dk-tkey li p{margin:0;font-size:var(--f-body);color:var(--ink2)}