レスポンシブとは

レスポンシブ

記事関連ワード

レスポンシブ テンプレート メリット デミリット

レスポンシブとは

一つ前の記事で、無料のWEBテンプレートを探す際、レスポンシブWEBデザインのものを選ぶよう記載しました。 この記事では、レスポンシブとは何かを簡単に説明していきます。

レスポンシブとは、PCやタブレット、スマートフォンなど画面のサイズが違う様々なデバイスに対して単一のファイルで最適化されたWEBサイトの表示を行う製作手法です。

このサイトもレスポンシブWEBデザインを採用しているので、あらゆるデバイスでページを見ても最適化された表示が行われています。

今、パソコンから記事を読んでいる方は、ブラウザのウィンドウ幅を変えてみてください。 幅を変えると、ページの表示形式が変わると思います。

では、レスポンシブでないサイトだとどうなるか。 何も対策を行っていないと、画面の幅を小さくすると、横スクロールが発生し(画面幅に内容がはいりきらなくなってしまう)とても見ずらくなってしまいます。

また、レスポンシブに対応していないサイトで表示の最適化を行う場合は、デバイスごとに表示するファイルを変える方法などがあります。 この場合、ページを見ている人には何らレスポンシブ対応のサイトと変わりなく表示されますが、作る側としては、PCで開いたときはAのファイルを表示させる。スマートフォンで開いた際はBのファイルを表示させるなど複数のファイルを作らなければなりません。

また、SEOの観点からAファイルとBファイルは別のURLになるので、リンクを貼ってもらう際、1つのファイルに集約できず好ましくありません。

レスポンシブのメリット

ファイルが1つですむ
先ほども述べた通り、PC用、スマートフォン用など複数のファイルを作らなくて良いため、作る際はもちろん、修正を行う際も1つのファイルの一か所を修正すれば良いので、修正漏れなどが発生しにくいです。

URLが1つですむ
PCで見ている人には、http://××××A.htmlを表示。 スマートフォンで見ている人には、http://××××B.htmlを表示。 としなくて良いため、SEOにも有効です。 また、このサイトを見てね~と宣伝やシェアする際も、1つのURLだと簡単に行うことができます。

※ただし、設定すればパソコン表示用のhttp://××××A.htmlにスマートフォンからアクセスがあった際に、 スマートフォン表示用のhttp://××××B.htmlへ飛ばす事は可能です。

レスポンシブのデメリット

では、レスポンシブは良いことだらけか。というとそうでもありません。 続いてデメリットも紹介します。

複雑化する
1つのソースでPC・タブレット・スマートフォンに対応した表示を行うため、作る際の作業が複雑化してきます。 また、表示のTESTをする際、各ブラウザでの表示チェックに加え、デバイスごとのチェックも必要になり大変な作業です。

表示画面が重たくなる
例えば、PCで表示する際は、ファイルサイズの大きい幅400pxの画像を読み込んで表示し、 スマートフォンの場合はファイルサイズの小さい幅100pxの画像を読み込むという指定が複数ファイルあれば簡単にできていましたが、 1つのファイルで行う際はそうはいきません。

スマートフォンで表示する際、見た目は小さなファイルであっても、実際は大きいファイルを読み込んで、 小さく表示させているといった状態になることがあり、LTEなどが普及してきたとはいえ、 表示が遅くなったり、必要以上のパケット通信が発生してしまいます。

全てのデバイスで完璧表示は難しい
1つのファイルでサイズの違う複数デバイスに完璧に対応するのは、とても難しいです。 作業していると、どうしてもここが気に入らない!! というところが出てくるかもしれません。

単純なデザインのサイトであれば全く問題無いと思いますが、凄く凝った複雑なデザインを必要とするサイトは、 いっそファイルを分けてしまった方が簡単かもしれません。

例えばこのブログはデザイン自体は単純で各デバイスに対しての対応はそれほど難しくありませんでしたが、 PCでは広告を2個表示、スマートフォンの場合は1つだけ表示とさせたかったため、あれこれ悩んでJavaScriptを使って表示方法を分けています。

知識のある方にとっては簡単な作業なのかもしれませんが、私はかなり苦戦しました。

まとめ

細かく書いているとどんどん長くなってお小遣い稼ぎの挑戦が始まらないので、このへんにしておきますが、 素人の私よりも知識も経験もたくさんある方が、わかりやすい記事をたくさん書いてくれていると思いますので、 色々と調べてみて、レスポンシブのテンプレートのメリット、デメリットを考えて、メリットが上回るなと思った方は、是非レスポンシブウェブをお使い下さい。

お金をもらって作っているお客様のご要望があるプロの方や作るページ数が決まっている方ではなく、ずっと記事を書き続ける方などは特に メリットの方が大きいと私は思います。

記事作成日:2016.09.14

Facebookへ Twitterへ RSSへ このエントリーをはてなブックマークに追加