レスポンシブWEBデザインとは？知っておきたい基礎やメリット・デメリット

2018/9/28

皆さんはホームページを見る時に、何を使って閲覧しますか？
スマートフォンやタブレット、パソコンなど、色々な画面サイズの機器がありますよね。
ホームページを見る環境が多様化している現在、パソコンに合わせたレイアウトだけでは他の機器で閲覧した時にホームページ自体が見切れていたり、
崩れたりして見づらいホームページになってしまいます。スマートフォンやタブレット、パソコンなど、どれで閲覧しても見やすいホームページになっていないと良いホームページとは見なされなくなっているのです。
今回は、見やすいホームページの構築方法の1つであるレスポンシブWEBデザインについてご紹介します。

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

レスポンシブWEBデザインとは、1つのHTMLを、CSSでデバイスの画面サイズに応じてページのデザインレイアウトを最適化して表示させるための構築手法です。
つまり、どんなサイズの画面でも見やすく、使いやすいWEBサイトをワンソースで構築できるのです。
スマートフォンやタブレットなど多様化した閲覧環境になっている今、レスポンシブWEBデザインは非常に有効な構築手法と言えます。

レスポンシブWEBデザインのメリット・デメリット

メリット

1つのHTMLソースでパソコンにもスマートフォンにも対応しているため、管理がしやすい

簡単なテキスト修正や画像の差し替えなど、更新作業が1回で済みます。
URLがパソコンでもスマートフォンでも同じなのでシェアされやすい

パソコン用サイトとスマートフォン用サイトで2つのURLが存在している場合、閲覧する環境によっては適していないページが表示されてしまう場合があります。レスポンシブWEBデザインでは1つのURLでどの閲覧環境でも適したページ表示となります。
Googleで推奨されている為、検索エンジンで上位に表示されやすい

パソコンサイトではなくスマートフォンサイトがページ評価の基準となる「モバイルファーストインデックス」との相性が良いです。

デメリット

スマートフォンで表示に時間がかかる

1つのHTMLソースのため、スマートフォンでもパソコンと同じデータが読み込まれてしまい表示に時間がかかります。
コンテンツの順番などの見せ方を変えずらい

1つのHTMLソースのため、パソコンとスマートフォンで、コンテンツの順番を変えるなど、大幅な変更ができなくなります。
デバイスごとに調整する為、制作工数がかかる

デバイスに合わせたデザイン、コーディングをするため複雑になりがちで、制作工数がかかってしまいます。

レスポンシブWEBデザインの構築方法

ビューポートタグを、head内に記述する
```
記述例

<head>
	<meta name=”vieport” content=”width=device-width,initial-scale=1”>
</head>
```
上記のコードをhead内に記述する事で、画面幅を各端末の表示領域が自動で調整されます。

ブレイクポイントを記述する

パソコンやタブレット、スマートフォンに適した切り替え地点、つまりブレイクポイントをメディアクエリを使って、cssに記述します。

記述例

/*
@media以外の所は全てのサイズで読み込まれます。
*/

p {
	color:red;
}

@media screen and (min-width:480px) {
/*　画面サイズが480pxからはここを読み込む　*/

p { 
	color:#ededed;
}

}

@media screen and (min-width:768px) and ( max-width:1024px) {
/*　画面サイズが768pxから1024pxまではここを読み込む　*/
	
p {
	color:black;						
}

}

@media screen and (min-width:1024px) {
	/*　画面サイズが1024pxからはここを読み込む　*/
}

“レスポンシブWEBデザインの活用”

レスポンシブWEBデザインはブレイクポイントで表示を切り替える手法です。
そのため、表示させる画面サイズによっては綺麗に収まらないこともあります。その分ブレイクポイントを増やす事もできますが、その都度追加していくのも手間ですし、ブレイクポイントだらけになってしまいます。つまり、レスポンシブWEBデザインだけでは全てのデバイスに対応させるには不十分なのです。
この問題を解決する方法として、レスポンシブWEBデザインにリキッドレイアウトやフレキシブルレイアウト、可変グリッドレイアウトなどを組み合わせる手法があります。リキッドレイアウトやフレキシブルレイアウト、可変グリッドレイアウトをくしする事で、表示を可変的にし、どの画面サイズで閲覧しても、自動的に最適な表示にさせる事ができるようになるのです。

レスポンシブWEBデザインの制作事例をご紹介

No.1のホームページプランは全てレスポンシブWEBデザインで制作しています。
No.1の制作事例をご紹介します。
https://www.no1web.jp/works/

まとめ

レスポンシブWEBデザインについて簡単にご説明しましたが、レスポンシブWEBデザインは、ブレークポイントを切り替える構築方法の為、入れるブレークポイントによっては全てのデバイスに対応できていない場合があります。これを綺麗に対応させる為に、リキッドレイアウトやフレキシブルレイアウト、可変グリッドレイアウトなども組み合わせる事をおすすめします。リキッドレイアウトやフレキシブルレイアウト、可変グリッドレイアウトについてはまた別の機会でご紹介しますね。

株式会社No1のホームページプランはレスポンシブWEBデザインにて構築しています。
新規制作やリニューアルなど、ホームページに関する事でしたら、何でもご相談ください。