
반응형(Responsive)은 “외적 조건에 반응할 수 있음”을 나타내는 영어 단어입니다. 웹 용어는 주로 장치에 따라 레이아웃이 변경되는 웹 사이트를 의미합니다. 단말에 따라 표시를 설계한 것을 「리스폰시브 WEB 디자인」이라고 하고, 기존의 PC용 사이트·모바일 전용 사이트를 레스폰시브 WEB 디자인으로 수정하는 것을 「레스폰시브 대응」이라고 표현합니다.
응답형 WEB 디자인은, 문서의 본문이나 구성을 기록하는 「HTML」에 대해서, 표시상의 레이아웃이나 표현을 기술하는 「CSS」에 반응형 대응의 기술을 실시하는 것으로 실현합니다. PC용·스마트폰용과 각각에 홈페이지 제작하는 것이 아니라, 단말에 맞추어 유연하게 표시를 조정하는 것이 최대의 특징입니다.
반응형 대응과 적응 대응의 차이
반응형 대응에 대해 적응 대응이라는 생각도 있습니다. 적응(Adaptive)이란 영어로 ‘적응성’이라는 의미입니다.
「어댑티브 대응」이란, WEB 사이트에 미리 다종의 화면 사이즈를 향한 HTML나 CSS를 준비해, 단계적으로 적정한 레이아웃을 표시할 수 있는 사이트로 하는 것을 말합니다.
어댑티브 대응의 장점
- 각 장치의 환경별로 HTML 파일을 준비하여 설계하기 때문에, 어느 단말에서도 WEB 사이트의 표시 속도가 빠르다
- 단말에 따라 자유롭고 최적의 WEB 디자인을 제작할 수 있다
어댑티브 대응의 단점
- 기본적으로 모바일판·PC판을 따로 디자인하게 되기 때문에, 반응형 대응에 비해 제작 비용이 든다
- 태블릿이나 최신의 고해상도 스마트폰 등 「중간 사이즈의 디바이스」의 대응을 할 수 없게 배제해 버리는 케이스가 많다
- HTML이나 CSS를 개별적으로 준비하기 위해 표시되는 정보가 다르거나 구현 방법에 따라 URL까지 다를 수 있음
이러한 단점은 SEO에 불리하고, 효과를 저감·억제시켜 버릴 가능성이 있습니다. 귀하의 사이트가 적응형 또는 개별 모바일 버전 홈페이지제작인 경우 반응형 대응을 고려하십시오.
반응형 대응의 중요성
지금 「스마트폰 검색한 적이 없다」라고 하는 사람이 드문 시대입니다. 가구간 ‘모바일 단말기’ 보유율은 96.1%, 그 내수에 있어서 ‘스마트폰’은 83.4%를 차지하고 있으며, 개인 소유율도 67.6%로 그 비율은 해마다 증가 추세에 있습니다. PC에 대해서 스마트폰 이용이 급속히 퍼진 것으로, 인터넷 이용 환경이 크게 변화했습니다.
참고:총무성 정보통신기기의 보유 상황
이 사실을 근거로, 「왜」응답 대응이 바람직한지, 그 중요성에 대해 풀어 갑니다.
반응성 대응하지 않으면 어떻게 될까?
전반적으로 모바일 사용자에게 반응형이 아닌 사이트는 “보기 어려운, 읽기 어려운, 사용하기 어렵다”는 것입니다.
PC판의 WEB 사이트밖에 없는 경우, 화상과 같이 스마트폰의 디스플레이에 맞지 않는 등, 적절하게 표시되지 않는 문제가 발생합니다.
- 옆으로 미끄러지면 읽을 수 없다.
- 문의 버튼이나 메뉴가 어디에 있는지 알 수 없습니다.
라고 하는 유저에게 불편한 WEB 사이트는, 당연히 이탈율은 높아, 전환에도 연결되지 않습니다.
또, 디바이스별로 제작·운용하려고 하면 비용이 늘어날 뿐만 아니라, 같은 콘텐츠로 복수의 URL을 가지게 되므로 인덱싱에 문제가 생겨 SEO에 악영향을 미치게 되어, 저평가를 받는 등 의 가능성을 생각할 수 있습니다.
검색 환경의 변화에 따라 「읽기 어려워, 유저의 편리성을 해치는 콘텐츠」를 도태시키는 움직임이 본격화하고 있기 때문에, 응답 대응은 반응형홈페이지제작에 있어서 필수 조건이라고 할 수 있습니다.