비트린 플레이북

비트린은 지역 비즈니스를 위한 비즈니스 쇼케이스(브로셔) 사이트입니다: '무엇을 하는지, 누구를 위해, 얼마인지, 신뢰할 수 있는지, 어떻게 연락하는지'에 답하는 몇 개의 페이지로 구성됩니다. 방문자는 Google 또는 추천을 통해 도착하고, 몇 초 안에 결정을 내리며, 정보를 찾기 위해 헤매야 하면 떠납니다. 이 플레이북은 무엇을 어떤 순서로 구축해야 하는지 알려줍니다; 각 도메인 스킬은 세부 규칙을 담고 있습니다.

방향 게이트

새 페이지, 화면 또는 리스타일에 대한 코드를 작성하기 전에, 요청이 한 줄이라도 이 작업을 먼저 수행하십시오. 이 스킬의 나머지 부분은 실수를 제거할 뿐, 화면의 개성을 부여하지는 않습니다. 이를 건너뛰면 모든 모델이 만드는 평범한 페이지, 즉 세부 사항은 맞지만 아무도 소유하지 않은 결과물이 나옵니다.

다섯 줄. 제품: 무엇을 하는지, 누구를 위한 것인지. 개성: 두세 개의 구체적인 단어(예: 차분함, 정확함, 약간 따뜻함), 깔끔함, 현대적, 매끄러움, 미니멀, 프리미엄은 절대 사용하지 마십시오. 세계: 제품이 속한 장소나 재료; 중성 색조를 물들이고 강조색을 설정합니다. 순간: 풍부한 색상과 디테일을 사용할 한두 곳: 지역 비즈니스의 경우, 보통 작업 또는 직원의 실제 사진, 또는 업계에서 사용하는 인쇄 문서처럼 설정된 가격표입니다. 시그니처: 이 제품만이 가지고 있는 하나의 작은 디테일로, 일관되게 사용됩니다. 순간은 단지 깔끔하게 정리되는 것이 아니라, 세심하게 그려집니다: 전달해야 할 내용에 맞게 다시 그려진 차트(부드러운 선, 대칭 비교, 실제 스케일), 또는 무게와 빛이 표현된 제품 자체의 오브제.
목록화, 그런 다음 아이디어. 어떤 경쟁사도 공유하지 않는 8~12가지를 나열하십시오(이름, 거리, 브리핑의 숫자, 재료, 도구, 의례, 업계에서 인쇄하는 문서). "이 페이지에서, [하나의 항목]이 [장치]가 된다"라고 적으십시오. 그 장치가 순간입니다.
2차 기본값을 거부하십시오. 브랜드가 이미 소유하고 있지 않은 한 말입니다. 이는 명백한 표시가 금지되면 모델이 도달하는 것들입니다:
- 크림, 돌 또는 따뜻한 아이보리 배경에 번트 오렌지, 테라코타, 세이지 또는 포레스트 강조색을 사용하고, 세리프 헤드라인이 있거나 없는 경우(종이와 잉크 스타일은 이제 방향이 아니라 새로운 기본값입니다);
- 헤드라인 글꼴로 무조건 Fraunces, Instrument Serif, Playfair 또는 Georgia를 사용하고, 유일한 글꼴로 system-ui를 사용하는 경우;
- 흰색 배경에 Inter 또는 Geist를 사용하고 인디고 또는 파란색 강조색 하나를 추가하는 경우;
- 히어로, 서비스, 리뷰, 서비스 지역, 연락처 순서를 그 이유 없이 사용하는 경우;
- 중앙 정렬된 눈썹 텍스트, 헤드라인, 두 개의 버튼을 전체 첫 화면으로 사용하는 경우.
교체 테스트. 이름과 업종을 경쟁사의 것으로 바꾸어 보십시오. 페이지가 여전히 적합하다면, 주장, 순간 및 시그니처를 변경하고 다시 테스트하십시오.
보여주고 기다리십시오. 다섯 줄과 아이디어를 보여주고 소유자(비즈니스 주인)가 응답할 때까지 기다리십시오. 질문할 수 없는 경우(사용자가 그냥 만들라고 했거나, 사람 없이 실행하는 경우), 메인 파일 상단에 주석으로 작성하고 정확히 그대로 구축하십시오.

깊이: anti-slop 플레이북 §2(방향) 및 §12(앱 화면); 실제 참고 자료를 위한 design-inspiration-index 스킬.

비트린에 필요한 것

페이지당 하나의 명확한 제안. 첫 화면은 무엇을, 누구에게, 어디서 판매하는지 평범한 언어로, 하나의 주요 행동과 함께 명시합니다. 다른 모든 것을 건너뛴 독자도 여전히 알 수 있습니다. 개별 서비스에 대한 별도 페이지가 모든 것을 판매하는 하나의 페이지보다 낫습니다.
가격, 또는 "부터" 가격. 구매자는 비교합니다. 시작 가격과 포함 사항은 좋지 않은 잠재 고객을 걸러내고 신뢰를 구축합니다. "견적은 문의하세요"만으로는 가격을 제시하는 경쟁사에게 고객을 빼앗깁니다. 가격이 변하는 조건을 명시하십시오. 모든 페이지와 구조화된 데이터가 일치하도록 금액을 하나의 데이터 파일에 보관하십시오.
한 단계로 예약 또는 연락. 모든 페이지에 눈에 띄는 전화 링크와 하나의 짧은 양식 또는 예약 링크를 제공하십시오. 응답에 필요한 것만 물으십시오(이름, 연락처, 원하는 사항). 언제 답변을 받을 수 있는지 알려주십시오. 전송 후 명확하게 확인하십시오. 모바일에서 탭하여 전화 걸기.
증거. 결과가 포함된 실제 프로젝트, 이름과 날짜(또는 이에 대한 링크)가 포함된 실제 리뷰, 허가된 경우에만 로고. 몇 가지 구체적인 증거가 많은 모호한 증거보다 낫습니다. 스톡 사진 팀, 지어낸 사용후기는 사용하지 마십시오.
로컬 SEO 기본.
- 순위를 매길 가치가 있는 서비스 지역당 하나의 페이지, 각각 진정으로 현지 콘텐츠 포함(도시만 바꾼 동일한 텍스트가 아님).
- LocalBusiness(또는 더 구체적인 하위 유형) JSON-LD: 이름, 주소 또는 서비스 지역, 전화번호, 영업 시간, 게시된 가격과 일치하는 가격 범위. 하나의 표준 페이지에만 FAQPage를 추가하십시오.
- 완전한 Google 비즈니스 프로필: 사이트와 동일한 이름, 주소 및 전화번호, 카테고리, 영업 시간, 사진, 올바른 페이지에 대한 링크, 리뷰에 답변하는 습관.
- 페이지당 하나의 h1, 설명적인 제목 및 메타 설명, 두 언어 모두에 대한 hreflang, 사이트맵, 읽기 쉬운 URL.
속도 예산. 지역 방문자는 평균적인 연결 상태의 휴대폰을 사용합니다. LCP 이미지를 사전 로드하고 올바르게 크기를 조정하십시오(현대 형식, 명시적 너비 및 높이); 글꼴은 자체 호스팅, 한두 개 패밀리, font-display 설정, 서브셋; 장식을 위한 무거운 3D, 비디오 배경 또는 대규모 JS 라이브러리 사용 금지; 타사 스크립트는 그 가치가 입증된 경우에만 사용. 콘텐츠는 로드 시 표시됩니다. 모바일에서 LCP 2.5초 미만을 목표로 하고 실제 스로틀링으로 테스트하십시오.
시장에 따라 이중 언어 FR/EN. 각 언어별로 동일한 구조와 동등한 콘텐츠를 가진 하나의 메시지 소스, 현재 페이지를 유지하는 눈에 띄는 언어 전환, 지역화된 URL 및 hreflang. 프랑스어 사본은 약 20% 더 길어지므로 레이아웃이 깨지지 않아야 합니다. 모든 프랑스어 문자열에 french-typography 스킬을 적용하고 CI 가드를 추가하십시오.
퀘벡: Law 25. 퀘벡에서 개인 정보를 수집하는 사이트(문의 양식이면 충분함)는 loi-25-website 스킬을 실행합니다: 개인정보 보호정책, 책임자 표시, 수집 시 고지, 기본 추적 차단, 퀘벡 외부 도구 검토. 이를 빌드의 일부로 취급하고, 그에 따라 분석 및 양식 도구를 선택하십시오.
모션: 최대 하나의 시그니처 순간. 하나의 기억에 남고 목적 있는 상호 작용(크로스페이드가 있는 프로젝트 전환기, 전후 비교)과 일반적인 누름 및 호버 피드백. 스크롤 드러내기, 부드러운 스크롤 라이브러리 또는 반복 장식은 사용하지 마십시오. motion 스킬을 사용하십시오; reduced motion 설정은 최종 상태를 보여줍니다.

제안 페이지

홈, 서비스(또는 서비스당 하나의 페이지), 사례 연구가 포함된 프로젝트, 가격, 연락처. 정직하게 유지하고 업데이트할 자신이 있는 경우에만 지역 페이지와 몇 가지 가이드를 추가하십시오. 증거를 제시하지 않는 한 '회사 소개' 페이지는 건너뛰고; 짧은 인간 소개를 홈이나 연락처에 포함시키십시오.

작업 순서

제안 및 증거. 디자인 전에 한 문장 제안, 가격 라인, 세 가지 증거 및 연락 경로를 작성하십시오. 일반 카피를 위해 ux 스킬을 사용하십시오.
방향 및 토큰. 위의 방향 게이트를 실행한 다음, ui 스킬을 사용하여 팔레트, 한두 개의 자체 호스팅 글꼴, 간격, 반경을 설정하십시오(프로젝트에 기본값이 없으면 취향 기본값 사용).
목업, 데스크탑 및 390px. 먼저 홈, 그 다음 내부 페이지 하나. 소유자가 평가합니다; 구축 전에 반복합니다(ui 스킬, 목업 우선).
실제 콘텐츠로 페이지 구축. 실제 사진과 텍스트, 로렘 입숨이 아닙니다. 긴 프랑스어 문자열을 확인하십시오.
SEO 및 스키마. 제목, 메타, JSON-LD, 사이트맵, hreflang, 지역 페이지, 사이트에 정렬된 Google 비즈니스 프로필.
언어 및 법률. 모든 프랑스어 사본에 french-typography를 실행한 다음, 감사 보고서를 위해 loi-25-website를 실행하십시오.
속도 패스. 스로틀링된 모바일 프로필에서 LCP, CLS 및 총 전송량을 측정하고 가장 큰 항목부터 먼저 수정하십시오.
모션, 그 다음 슬롭 패스. 하나의 시그니처 순간을 추가한 다음, anti-slop 및 해당 감지기를 실행하십시오.

일반적인 실수

제안 대신 "환영합니다" 또는 슬로건을 말하는 히어로.
양식 뒤에 숨겨진 가격, 또는 변경 후 스키마 및 도시 페이지에 남아 있는 이전 가격.
명확한 기본 연락 방법이 없는 다섯 가지 연락 방법.
마을 이름만 바꾼 동일한 페이지인 도시 페이지.
추적이 여전히 기본적으로 로드되는 동안 장식용으로 추가된 쿠키 배너.
방문자를 홈 페이지로 다시 보내는 언어 전환.

지역 가게 쇼케이스 사이트