今こそ知っておいてもらいたい「レスポンシブ対応」のこと

ついこの間、お正月を迎えたかと思えば、早いもので暦はすでに2月…例年以上に「一月往ぬる二月逃げる三月去る」という言葉をひしひしと感じている今日この頃、皆さまはいかがお過ごしでしょうか？

こんにちは、きびだんごの制作担当・濱崎です。

最近、よく耳にする「レスポンシブ対応」とは？

今、このブログをご覧いただいている方々の中には、職場でWEB担当者として、社内のWEBに関する業務に携わっていらっしゃる方も多いのでは？なんて推測を元に、昨今、耳にする機会が多くなってきた「レスポンシブ対応」を記事のテーマにしてみました。

…とは言え、聞き慣れない横文字を含む「レスポンシブ対応」なるものの全容を把握できていない方もいらっしゃるかもしれませんので、まずは「レスポンシブ対応」について、簡単におさらいしてみたいと思います。

いわゆる「レスポンシブ対応」と呼称されるものは、「レスポンシブWEBデザイン」のことであり、スマートデバイス（スマートフォン（以下、スマホ）・タブレットなど）の普及に伴い、これまでのパソコン（以下、PC）向けのWEBサイトのままでは、見づらい・使いづらいなどの弊害を解消するために生まれた制作手法です。

つまり、「レスポンシブWEBデザイン」とは、ユーザーの閲覧環境＝PC・スマホ・タブレットなどの複数の異なる画面サイズを判断基準にして、ユーザーが訪れるWEBサイトのデザイン・レイアウトをレスポンシブ（反応よく）≒柔軟に調整して表示する手法のことなのです。

ちなみに、「レスポンシブWEBデザイン」誕生以前のWEBサイトでは、デバイスごとにそれぞれ最適化されたWEBページを複数用意して対応してきました。
PC向けのWEBサイトをスマホで訪れると、「スマートフォン版はこちら」というボタンやリンクを大きく表示して、ユーザーに専用ページへ遷移してもらうような対応を取っているWEBサイトがそれに当たります。

「レスポンシブWEBデザイン」は必須条件！

以前投稿した「そのままでも大丈夫？ 今こそ確認しておきたい、WEBサイトのモバイル（スマートフォン）対応」の記事で、スマホの普及率はPCに肩を並べ、「スマホネイティブ」と呼ばれる10～20代の若年層でPCの使い方を知らない「PC離れ」が問題になっていることを、そして「ソーシャルメディアの浸透とスマホ対応の必要性」の記事では、その利便性から、今やスマホは多くの人々が日常生活を送る上で手放せない存在になっていることを紹介しています。

スマホによるインターネット接続率が8割に迫る中、これらの記事が指し示すのは、WEBを介した情報発信やビジネスに取り組む上で、スマートデバイスへの最適化＝「レスポンシブWEBデザイン」の導入なくして成功には辿り着けない、と言っても過言ではないほどの現状です。

また、Google社が「モバイルファーストインデックス」導入によって、モバイル重視の姿勢を明らかにしていることから、モバイルシフトはもはや必然と言えるでしょう。

それだけに、「レスポンシブWEBデザイン」は必須条件なのです。

「レスポンシブWEBデザイン」は必ずしもコスト削減・工期圧縮につながらない

「レスポンシブWEBデザイン」のメリット・デメリットについても書きたかったのですが、長くなりそうなので、また別の機会にお話ししたいと思います。

さて、そんなもはや当たり前になろうとしている「レスポンシブWEBデザイン」ですが、思いがけない落とし穴があったります。

それは、「レスポンシブWEBデザイン」の要である「デバイスごとに異なる複数の画面サイズを判断基準にして…」の「デバイスごとに異なる複数の画面サイズ」の部分にあります。

「レスポンシブWEBデザイン」では、WEBページを構成する要素の一つであるHTMLと呼ばれる言語で記述されたファイルをデバイスによらず単一にし、デザイン・レイアウトを司るCSSと呼ばれる言語で記述されたファイルの一部をデバイスの画面サイズごとに書き分けることで、それぞれのデバイスでの表示を最適化しているのですが、この「デバイスの画面サイズ」に足元をすくわれる可能性があるのです。

ところで、皆さんがお使いのスマホは何ですか？
おそらく、「iPhone」という方が多いのではないかと思いますが、そんな「iPhone」も「画面サイズ」の観点から見ると現行だけでも4種類あるのをご存知ですか？

現行の「iPhone」だけでも4種類ある「画面サイズ」をすべてのデバイスで網羅しようものなら、その数は数え切れないほどの種類に及びます。

…とは言え、実際のところ、「レスポンシブWEBデザイン」の対象デバイスとして、PC・スマホ・タブレットと大きく3～4つに区切ることが多いのですが、それでも単純計算でおよそ3～4倍の手間がかかると言えます。

つまり、対象となるデバイスの「画面サイズ」が増えれば、コストと時間がかかるということでもあります。

それだけに、「レスポンシブ対応＝レスポンシブWEBデザイン」は、簡単にできるものではないのです。

「レスポンシブWEBデザイン」を導入する際には、自社のサービスや商品でターゲットとなるユーザーの閲覧環境を見極めて、制作要件としてしっかり明示して、余計なコストと時間をかけないようにしたいものです。

まとめ

いかがでしたか？今回は「今こそ知っておいてもらいたい『レスポンシブ対応』のこと」と題して、「レスポンシブ対応」の概要と導入に向けた注意点についてお話をさせていただきました。

ポイントしては、「もはやWEBサイト制作の必須条件『レスポンシブ対応＝レスポンシブWEBデザイン』の導入は、明確なターゲティングをしないと、無駄なコストと時間を発生させることになる」ということになります。

弊社では、「レスポンシブ対応」の「WEBデザイン/ホームページ制作」を承っておりますので、WEBサイト・LPの新規制作・リニューアルのご相談はお気軽にきびだんごまでお寄せください。