TEL
お問い合わせ

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

レスポンシブデザインとはホームページをスマホからパソコンまで対応させるための制作方法

レスポンシブデザインとはホームページをスマホからパソコンまで対応させるための制作方法

まずWebサイトを制作する場合、基本的にHTML(エイチティーエムエル)ファイルとCSS(シーエスエス:カスケードスタイルシート)というファイルが基礎になります。
HTMLファイルは実際に見えているページを司るファイルで、CSSファイルはレイアウトやデザインを司るファイルです。

スマートフォンに対応するWebサイトは大きく分けて2種類あります。

ひとつ目はパソコンサイト + スマホサイトを制作してアクセスしてきた端末の情報を基にどちらかのページに振り分ける。
ホームページは2つ制作することになります。
この場合URLは
パソコンサイト https://example.com/
スマホサイト https://example.com/sp/
のような形になります。
HTMLやCSSもパソコン用・スマホ用それぞれ制作します。

もう一つがレスポンシブデザイン。
この場合のURLは
https://example.com/
のみとなります。
これは1つのHTMLファイルにアクセスし、アクセスした端末の「画面の大きさ」によってレイアウトを変換する制作方法です。
よってホームページは1つ制作すれば良いのです。
この画面の大きでレイアウトやデザインを変更するのがCSSになります。(厳密にはメディアクエリという機能になります)

なぜレスポンシブデザインを薦めるのか

これは現在のWeb環境の要因が一番大きいのですが、代表的な理由として以下のようなものがあります。

制作費や更新料金などのコストを抑えられる

パソコンサイト+スマホサイトを制作する場合それぞれの制作料金が必要となり、完成後の更新作業を行なった場合もそれぞれの作業代が発生します。
これがレスポンシブデザインの場合は1つのサイト制作費で抑えることができます。

様々なデバイスに対応することが可能

パソコンやスマホは機種によって画面の大きさもマチマチ、さらにタブレットもあります。
レスポンシブデザインの場合、どのような画面サイズでも最適化させることができるのです。
ただ現実的にはスマホを中心に考えて、次にパソコン、さらにタブレットと3パータンくらいで制作するのが一般的になっています。

SEO対策が行いやすい

単純にSEO対策の効果が上がるという訳ではないのですが、Googleが推奨していることもありレスポンシブ化したサイトの方がSEO対策は行いやすいです。
これは専門的な要素のため、ここでは割愛します。

Infinityは100%レスポンシブデザインで制作

当社のホームページ制作は100%レスポンシブデザインでの制作となります。
特に一般消費者を対象とする業種に関してはスマホでの見やすさや操作性重視してレスポンシブデザインで構築します。