Web戦略講座 ソーイ株式会社
未経験のWeb担当者でもWeb戦略を作成できるようになるWeb戦略ブログ

レスポンシブWebデザインとは何か

Webサイトのスマホ対応は今や必須となってきた。

スマホ対応の仕方についてはいくつかやり方があるが主流なのはレスポンシブWebデザインだろう。

本記事ではレスポンシブとは何なのかをWebのことがわからない人向けに解説する。

 

 

1.Webサイトはどうやって表示されるのか

まずレスポンシブについて解説する前に、そもそもWebサイトはどうやって表示されるのかを説明する。

あなたも聞いたことがあるかもしれないが、Webサイトは主に2種類のファイルから構成される。

HTMLとCSSだ。

 

 

【HTMLとは】

HTMLはマークアップ言語といわれ、Webサイトのコンテンツがこのファイルの中に書かれている。

HTMLファイルの中身は下図のようなものだ。こんなものがあるんだぐらいの理解で構わない。

ss

これをWebブラウザで表示すると、下図のようになる。

sc

つまりHTMLファイルというのはデザインされていない情報の羅列である。

 

 

【CSSとは】

CSSファイルというのはデザイン専用のファイルだ。

CSSファイルに意図したデザインになるよう記述し、HTMLファイルからcssファイルを読み込む設定をすると上図は下図のようになる。

 

sc2

 

HTMLファイルはWebサイトに表示させる情報を書き込むもの、CSSファイルはその情報をどうレイアウトするかを指定するものである。

 

もう少し説明すると、HTMLファイルにはid(アイディー)やclass(クラス)というものがいたるところに設定されている。

 

例えば<div id=”top”>*****</div>というような記述がHTMLファイルにあるとする。このid=”top”に囲われた部分(「*****」の部分)のレイアウトを指定する場合は、CSSファイルでtopに対してレイアウトを指定する記述をする。

 

そうすることで、HTMLファイルの情報は綺麗にデザインされるという仕組みになっている。

 

 

2.レスポンシブWebデザインとは

スマホ対応する場合は、大きく2つの方法がある。

 

・HTMLは共通でCSSだけPCとスマホで切り替える(レスポンシブWebデザイン)

・HTMLもCSSもすべて切り替える(URL切り替え:スマホ版のURLを新規につくる)

 

それぞれ説明しよう。

 

 

CSSの切り替え:レスポンシブWebデザイン

モニター幅に応じて読む込むCSSを切り替えることで中身は同じだがレイアウトを変える手法である。デバイスの画面幅によって細かくデザインを変えていくこともできる。もちろんタブレット表示の最適化も可能だし、iPhone6+のように大きな画面サイズの場合にデザインを切り替えることもできる。

 

また、HTMLが共通なので、管理が楽だ。一箇所を修正するのにわざわざPCとスマホそれぞれを修正する必要はない。

 

ただ、高解像度の画像を多用するなど容量の重たいWebサイトの場合、レスポンシブWebデザインだとPCでは問題がなくてもスマホで表示速度が落ちることはある。

 

 

HTMLもCSSも切り替え:URL切り替え

レスポンシブWebデザインと違い、そもそも読み込むHTMLファイルが異なる。HTMLごと切り替えるので、デザインに制約はない。PCとスマホのHTMLが共通だとどうしても、スマホ対応する際のことを考えてHTMLを作成していく必要があるので、制約はでるが、そういった制約がないので自由なデザインが可能になる。

 

また、一箇所を修正するのにわざわざPCとスマホどちらも修正する必要があるので手間がかかる。

 

表示速度については、スマホ用に画像サイズを調整したものを読み込むことができるので、全体のファイルサイズを小さくして読み込み速度を早くすることができる。

 

 

どちらがいいのか

奇抜なデザインや見せ方を根本的に変えるようなことがなければレスポンシブWebデザインで画面幅に応じて柔軟に形を変えるものが良いだろう。

 

 

3.まとめ

それぞれに特徴があるが、デバイスが多様化していく中でレスポンシブWebデザインのように、画面幅に応じてデザインを切り替えるという考え方はもっていた方がよいだろう。



無料相談はこちらから

Web制作についてのご相談はこちらからお願いします。
真剣に制作をお考えの方に無料でご提案いたします。まずはお気軽にメールでご相談ください。

* しつこい営業は一切しておりません。

御社名
お名前
ふりがな
HPのURL
メールアドレス
検討内容
制作の背景
認識している課題・要望
その他、ご相談



ホームページ制作会社の賢い選び方