GLOSSARY — WEB

レスポンシブ​デザイン​とは?

DEFINITION

レスポンシブ​デザイン​とは、​一つの​Web​ページを、​パソコン・​タブレット・​スマートフォン​など​閲覧する​端末の​画面幅に​応じて、​見やすい​レイアウトに​自動で​切り​替えて​表示する​設計手法の​ことです。

画面幅ごとの​表示の​ルールを​CSS​(ページの​見た​目を​指定する​言語)で​記述し、​同じ​URL・​同じ​内容の​まま​見え方だけを​切り​替えます。​パソコン用と​スマートフォン​用に​別々の​ページを​用意する​「スマホ​専用​サイト」​と​違い、​管理する​ページが​一つで​済むのが​特徴です。

01EXPLANATION

詳しい​解説

企業サイトは​スマートフォンで​閲覧される​機会が​多く、​文字が​小さい、​横には​み出すと​いった​サイトは、​内容を​読まれる​前に​離脱されやすくなります。​Googleは、​主に​スマートフォン​向けの​表示内容を​もとに​ページを​評価する​方針​(モバイル​ファースト​インデックス)​を​とっており、​実装と​管理が​しやすい​方法と​して​レスポンシブ​デザインを​推奨しています​(2026年7月時点)。

レスポンシブ​デザイン​には、​次のような​利点が​あります。

  • URLが​一つなので、​検索での​評価や​SNSで​共有される​リンクが​分散しない
  • 更新が​一度で​済み、​パソコン版と​スマホ版で​内容が​ずれる​心配が​ない
  • 新しい​画面サイズの​端末にも​対応しやすい

注意したいのは、​パソコン向けの​レイアウトを​縮めただけでは​見やすくならない​ことです。​文字の​大きさや​行間、​ボタンの​大きさと​間隔、​横に​広い表の​扱いなどを、​スマートフォン​での​使いやすさを​前提に​設計する​必要が​あります。​画面に​表示しない​要素まで​読み込む​作りに​なっていると、​表示が​遅くなる​こともあります。

制作の​段階では、​スマートフォン​での​見え方から​先に​設計する​「モバイル​ファースト」​と​いう​考え方も​あります。​公開前には、​パソコンの​ブラウザでの​確認に​加えて、​実際の​スマートフォンの​複数の​機種で、​表示の​崩れや​押しやすさを​確かめます。

CONTACT

Webの​「攻め」も​「守り」も、まずは​ご相談ください

お急ぎの​場合は​お電話が​確実です: ​03-5928-5032​(平日 9:00〜18:00)

無料診断 お問い合わせ