>  >  >  > 

レスポンシブデザインを(なぜか)うさぎとねこと服で説明してみた

レスポンシブデザインを(なぜか)うさぎとねこと服で説明してみた

こんにちはかわさきです。今年は暖かい日が続くな~と思ったところからの、ここ数日は寒波で冷え込んでますね。皆様もお風邪を召されないようお気をつけください。

さて、タイトルにあります「レスポンシブデザイン」。ご存知の方も多いと思いますが、Webサイトをスマートフォン(正しくは複数デバイス)に対応させるための手法のひとつです。

近年スマートフォンの台頭はめざましく、Web制作の現場でもスマートフォンの対応を行うのがスタンダードになってきました。

マグネッツでもWebサイトのご提案をする時、スマートフォンへの対応をご提案するのですが、その際、「スマホ対応はPCとスマホ別ページ、もしくはレスポンシブウェブデザイン、どちらで対応しますか?」と確認させていただく場合がございます。

Web制作にお詳しい方でなければ、「?」となられることが多いので、今回はできるだけわかりやすく解説してみました。

少しでもわかりやすくなれば…と思い、下手くそな味のあるイラストとともに、お送りします。

※ちなみに、タイトルでは「レスポンシブデザイン」と書いておりましたが、正しくは「レスポンシブウェブデザイン(RWD)」となりますので、以下はそちらで統一させていただきます。

目次

レスポンシブウェブデザインの仕組み

レスポンシブウェブデザインのイメージ

そもそもレスポンシブウェブデザインとはなんぞや??

以下、Wikipediaからの引用です。

レスポンシブウェブデザイン (Responsive Web Design, RWD) は、デスクトップパソコンや携帯電話といった幅広いデバイスのいずれに対しても、外観や操作方法が最適化された (リサイズ、パンニング、スクロールを最小限にし、読みやすく、ナビゲーションしやすい) サイトを制作するためのウェブデザインの手法。

RWDでデザインしたサイトは、比率ベースのフルードグリッド、フレキシブルイメージ@mediaルールの拡張であるCSS3メディアクエリを以下のように使用することで、レイアウトを表示環境に適応させる。

レスポンシブウェブデザイン – Wikipedia

なにやら小難しいですね…(´・ω・`)

世の中のWebサイトは、まず「HTML」という骨組みのファイルがあります。それに、「CSS」という見た目(レイアウトや装飾など)を指定するためのファイルを組み合わせることで、現在ご覧いただいているような多種多様なデザインが施された状態になるのです。

ここでひとつ、マグネッツのサイトを用意します。

マグネッツのサイトcssあり

これからちょちょちょい~…っとcssファイルとの繋がりを切ると…

マグネッツのサイトcssなし

このように、テキストと画像だけの状態になります。これでも内容は伝わりますが、個性も何もなく、見づらいですね。

例えるならば、「HTML」=裸の人、「CSS」=洋服 となります。

htmlとは人であり、cssとは服である

上のHTMLだけのサイトは裸の状態なわけです。いやん。

PCとスマートフォン、別々のページを準備した場合

PC・スマホそれぞれに最適化したページ(HTML)を用意しておきます。もちろんそれぞれのデバイス用にスタイル(CSS)を適用させておきます。

ユーザーが閲覧している端末のOSやブラウザには「ユーザーエージェント」という情報があり、それを判別してそれぞれのHTMLを表示します。

例えば、Internet Explorerで見ている場合はPC用のHTML+CSS、iPhoneのSafariで見ている場合はスマートフォン用のHTML+CSS…という具合です。

PCとスマートフォン、別々のページを準備した場合

図にするとこうなります。スマホさんのところには、専用の服を着たねこさんが、PCさんのところには、専用の服を着たうさぎさんが行くわけです。

レスポンシブウェブデザインの場合

対して、レスポンシブウェブデザインは1つのHTMLしか用意しません。うさぎさんオンリーです。Wikipediaの引用で「レイアウトを表示環境に適応させる。」とありますが、具体的にはブラウザの横幅サイズを判断基準としてCSSを切り替えます。

幅が1200pxならPC向けのスタイル…320pxならスマートフォン向けのスタイルという具合です。

レスポンシブウェブデザインの場合

図にするとこうです。うさぎさんがそれぞれのブラウザ幅に合わせたお洋服に着替えしています。

生着替え

↑弊社Webサイト生着替えの様子。

PCで見ているか、スマートフォンで見ているか…が判別基準ではないので、ブラウザ幅を変えるとどの環境でも表示が切り替わるわけです。

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

メリット

制作後のメンテナンスが楽

別ページの場合、うさぎさん・ねこさんそれぞれの面倒を見て、それぞれを確認して…となりますが、うさぎさんだけだったら(単純に2分の1とは行きませんが)大幅に手間を減らすことができます。

別々に管理していると…

ねこの左目だけ変えるの忘れてた―!!!!!

なんてこともあるかも…。

SEOに効果的

Googleの公式ブログで、

と述べられているように、Googleは「検索結果で良い結果が得られる方法」として、スマートフォン最適化の手法にレスポンシブウェブデザインを推奨しています。

利点として、以下のような理由が上げられています。

  • PC 用のページとモバイル用のページを単一の(同一の) URL とすることができるため、ユーザーにとってはシェアやリンクが容易であり、Google のアルゴリズムにとってはコンテンツを適切にインデックスできるようになります。
  • ユーザーエージェントの異なる Googlebot ごとにページをクロールする必要がないため Google がより効率的にコンテンツを発見することができます。

別々のページを見るよりも効率がいいから、クローラーもインデックスしやすいわけですね。

どっちも見るの大変

SNSのシェアにも有利

別のページに分けるということは、イコールPC版とスマートフォン版でURLが変わるということになります。

PC版 ・・・ index.html
スマホ版 ・・・ index-sp.html

という具合です。

これでは、SNSでURLがシェアされた場合に、別々のページだと判別されてしまい、シェア実績が半減してしまいます。

また、PCユーザーがスマホ版のURLから来た場合、逆にスマホユーザーがPC版のURLから来た場合、最適化されていないページが表示されて、操作や閲覧性にストレスを感じて離脱してしまう可能性も…。

SEOの項目でも述べられていたように、レスポンシブウェブデザインの場合ひとつのページ=統一されたURLとなりますので、シェアの実績も統一され、シェアされたURLから訪問があっても最適なレイアウトを表示しやすいのです。

うさぎさんいいね!!!

デメリット

ページが重たくなる(特にスマートフォン)

上で、「服(CSS)をブラウザ幅に合わせて着替えしている状態」と述べましたが、正確には着替えているわけではなく、常に何着もの服を着込んでいる状態となります。PCであろうとスマートフォンであろうと一度双方のCSSを読み込んでいるわけです。

例えるなら十二単を着ているような感じ?

そうなると、スマートフォンは画面サイズは小さいのに大きいサイズ用であるPC用の装飾も読み込まねばならず、結果、ページは重たくなり表示速度の減少や回線の消費を招きます。

近年、スマートフォン向け回線も大容量になってきたとは言え、まだまだ配慮が必要です。

設計・構築に時間がかかる、技術が必要=コスト増の可能性あり

ひとつのHTMLで様々なデバイスに対応させるため、それぞれに最適化させるために設計やデザイン、コーディングを行っていく必要があります。そのために構築には技術やノウハウが必要ですし、かかる時間=コストも高くなりがちです。

縦ロールは、ドレスには似合うけどジーンズには似合わないからどちらにも合う髪型を考えないと…

※ただし、ページ(HTML)の制作量は別ページにする場合の2分の1になるわけですから、サイトのボリュームや作り方によっては逆にコスト減になる場合も…。

デバイスそれぞれで、最大限に最適なコンテンツを載せることはできない

PCだけで表示するのであれば大きい画面を最大限に活かし、沢山のテキストやバナーなどを掲載し、情報を盛りだくさんにすることができます。しかし、スマートフォンのことを意識すると、情報量を減らさざるをおえません。

また、「スマホユーザーにはこの商品がよく見られているから、スマホにだけバナーを一番上に載せたいな…」といった、デバイスごとの柔軟な対応も難しいです。

そのため、各デバイスで最大限に訴求や操作性を高めてコンバージョンにつなげたい、ECサイトやランディングページなどには向いていないといえます。

着飾ることはできても…他の人になることはできない

終わりに

レスポンシブウェブデザインがブームを経て、手法として定番化してから数年が経ちました。一般のお客様からも「レスポンシブで作りたい!」と始めからご指定頂くことも増えてきました。

ただし、上記のメリット・デメリットでも述べたように、猫も杓子もレスポンシブ…が正解というわけではなく、状況に応じて選択することが大事です。

例えば、

こちらの記事にあるように、様々な事情でPC用の表示にしたいのにできない…等の不都合もあったりします。

サイトを作る際、どのようにスマートフォンに対応していくのがベストなのか迷われたらお気軽にご相談ください!

同じカテゴリー()の記事

マグネッツとは?
福岡でWEB制作や中小企業様の集客支援などを行っている会社です。
新着情報配信中!
商用利用OK&無料!総合素材サイト|ソザイング