Webサイトはスマホやパソコンなど様々なデバイスから見られるため、どのデバイスからでも見やすいものを制作しなければなりません。
この時に、「レスポンシブWebデザイン」が必要になります。
レスポンシブWebデザインとは、ホームページの画面のサイズを見ている端末によって合わせて表示してくれることを指します。
PC用サイトとスマホ用サイトを1つに統一できるメリットがある一方で、デザインやレイアウトが制限されてしまうと言うデメリットもあります。
この授業では、レスポンシブWebデザインの仕組みとメリット・デメリット、注意点などについて解説します。
レスポンシブデザインの仕組み
レスポンシブとは、元々返信が早いことや、快適なという意味で使われる単語です。
パソコンのサイトをスマートフォンサイトで表示しようとすると、パソコンサイトの容量の大きさにスマホの通信がついていけなく、結果読み込みが遅いなどの問題がおきます。
それを解決してくれるのがこのレスポンシブデザインです。さてそれでは、どういった仕組みになっているのでしょうか。
通常ホームページはHTMLタグを使って構築をされています。
HTMLタグは各ページの意味や構造を伝えるためのマークアップ言語ですが、通常CSS（カスケーディングスタイルシート）を用いて、どのように装飾するのかを指定していきます。
このCSSを利用し、その端末に合わせて、表示を変えていくことで、レスポンシブデザインになります。
CSSを使ってなぜレスポンシブデザインができるのか？
どうして変えていけるのかは、「グリットレイアウト」と呼ばれる、画面のページを縦横に直線で分断し格子状にするwebの定番でもあるレイアウトを使用していきます。
これを環境（この場合はweb端末）の情報によってサイズを変えて指定ができることで、その端末に合った表示ができるようになっています。
CSSメディアクエリを使うと、どのデバイスを使ってアクセスしているのかが、特性も一緒に知ることが出来るため、特性に合わせて幅を変えていくことができます。
ちょっと読んでいても分からないという方に、レスポンシブデザインを簡単に言うと、
- CSSメディアクエリによって見ている人のデバイス特性が分かる
- それに合わせて、表示する幅を自動で適正に変えて表示することが出来る
- 見ている人は、パソコンサイトをスマホやタブレットなどで簡単に見られる
- 作る人は、一つのHTMLタグやパソコン用のURLでスマホやタブレットに自動で表示できる！スマホ用のサイトがいらない
となっています。
実際Googleもレスポンシブデザインを勧めており、どのようなメリットやデメリットがあるのかを覚えておきましょう。
レスポンシブデザインのメリット
Googleが推奨
Googleから見ても端末によって表示されていない、というトラブルが起こりにくく、クローラーも巡回しやすいというメリットがあります。
またホームページのサイトとスマホ用のサイトがあることによって、違うURLで同じコンテンツが出来てしまうため、Googleは混乱してしまいます。
そういった問題を解決できるからこそ、Googleはレスポンシブデザインでサイトを表示することを推奨しているのです。
しかし注意が必要なことは、SEO的な評価はレスポンシブデザインにしたからといって高まるということは可能性が低く、順位が上昇するといったことも可能性が低くなります。
HTMLタグの管理
レスポンシブデザインによってできたサイトは、一つのHTMLタグで解決するので、スマホやタブレットのためにHTMLタグを新たに作り出す必要がありません。
また、パソコン用のサイトと携帯用のサイトどちらも更新・変更をしないといけないということもありませんので、作る側の制作者、そして運営する方にとっても管理がとても楽になります。
CSS
レスポンシブデザインにはCSSの中でも「CSS3」を使用しているため、装飾面においても豊かな表現力があり、ユーザー側にも見てもらいやすいサイトが完成します。
非表示設定ができる
パソコンでは表示されるのに、スマホ版では表示させないようにする方法です。
すっきりと見せたいときにCSSを使って非表示にすることもできます。
時代に対応しやすい
新しく出た端末のサイズが変わっていたとしても、少しの修正ですむ場合もありますし、さらに修正自体がいらない場合もあります。
時代とともに大きさが変わるスマートフォンですが、そういった変化に対応しやすいのもレスポンシブデザインのメリットです。
レスポンシブデザインを知るうえで知っておきたいデメリット
レスポンシブデザインにも当然デメリットといわれるところがあります。
レスポンシブデザインを使う上で気を付ける部分でもあるので、注意してみてください。
ブラウザの表示
プラウザが一般的なサイズのものに対応しているため、すぐに規格外のプラウザが出てきてしまうと対応しきれない可能性があります。
作りが甘いと、タブレットや特にスマホでの表示がくずれてしまいます。
またテキストや画像のバランスが悪いと、スマホやタブレットなどで表示がうまくいかないことがあります。
例えばパソコンで長い文章で横にずっと続く文字の場合、スマホ表示にしたときに、その列の最初と最後の文章が途切れて見えなくなってしまうことがあります。
表示速度
パソコン用に作られたコードがスマホでも読まれてしまい、表示が遅くなってしまうことがあります。
これと同じで画像もパソコン用の大きさなので、スマホでは表示が遅くなってしまうことがあります。
いくら高速化しているスマホでも、まだまだ読み込む速度がパソコンより遅くなってしまうのです。
隠しコンテンツがスパムとなる
先ほどメリットとして挙げられた、非表示にも注意が必要です。
パソコンで表示してあったものをスマホで表示させないことで、「隠しテキスト」というGoogleがスパムと認識するものにあたってしまう可能性もあります。
その結果、Googleが設けるガイドラインに違反することになり、最悪そのサイト自体、Googleからの流入が大きく減ってしまうことも考えられます。
作るのにコツがいる
パソコン用とスマホやタブレット用どちらもイメージして作らないと表示が崩れてしまいます。
少しの構成で表示が変わってしまうので、どのように表示されるかデザイン力が問われてしまいます。
またHTMLタグの他に、CSSタグを用いるので複雑になってしまい、なかなか初心者では取り入れづらいという方も出てきてしまう事でしょう。
表示されない端末がある
CSS3を使用していることで、フィーチャーホンと呼ばれるいわゆるガラケーではうまく表示されないことがあります。
では、表示が崩れないようにするにはどうしたらよいのでしょうか？
- サイト自体をシンプルにすることで、デメリットの大半が解決します。
- 読み込む必要があるもの（画像など）の表示を多くしすぎないようにします。
うまく、パソコンとスマホに表示させる画像を分けるのもポイントです。
まとめ
レスポンシブデザインは、一つのURLで、タブレットやスマホなどにも対応することが出来るので、とても便利です。
Googleから見ても、パソコン用とスマホ用で別でサイトを作らないので、同じコンテンツで違うURLにならないため混乱もおきません。
しかし、うまく作らないと表示が崩れてしまったり、速度が遅くなったりすることがあります。
また、いままでHTMLしか触っていないという方だと、HTMLタグだけでなくCSSを利用していくことになるので、最初は勉強が必要になります。
レスポンシブデザインにするには、スマホ用サイトの出来上がりをイメージして作り上げる能力が大切です。
知識はもちろん必要ですが、デザイン力や表現力といったことも重要になってくるのです
これからのデバイスや機種の変化が大きい時代が来ることが想定されます。
そのためにもレスポンシブデザインという言葉と基礎的な知識はしっかりと覚えておくようにしましょう。
