KO N NI CHI HA !!!

皆様お久しぶりです。
久々のブログとなります！V(・ω＜)Vー★☆★イエーイ！！

台風が過ぎてからだんだんと秋らしくなってきました。
金木犀の香りも漂いだし、気分も上がりますね！


それでは！
今日は「レスポンシブWebデザイン」についてお話しします。

レスポンシブWebデザインとは、PC・タブレット・スマホなど
どのデバイズに対しても同じURLかつ同じHTMLのコードを配信し、
ページのデザインやレイアウトを各デバイズで変える事を指します。

つまり、PC・タブレット・スマホごとに表示内容を
隠したり、見えるようにしたり、レイアウトを変えたりと
それぞれ調整することが出来るんですね！（なるほどねーー！）



従来、スマホ用にWebの見せ方を変更する場合は、

パソコンで閲覧する人→PC用のサイト（PC用のURLあり）
スマホで閲覧する人→スマホ用のサイト（スマホ用のURLあり）

と複数のページをそれぞれ準備して更新を行っていましたが、
レスポンシブデザインはそれをひとつのHTMLで管理できる
というわけです（ーωー）

閲覧しているサイトがレスポンシブ対応かどうか知るには、
ブラウザの横幅を大小することで分かります。
ブラウザの大きさによって見え方が変わる場合は
レスポンシブ対応のサイトです。



レスポンシブ対応ではなく、
最初からスマホ版のサイトが別にある場合はURLを見てみると分かります。

例）TDC PCサイト→https://www.2102.jp/
　　TDC モバイルサイト→https://www.2102.jp/mobile/

ちなみにTDCのサイトはブログのみレスポンシブ対応になっていますので
ぜひ一度上記の方法を試してみてくださいね！


さて本題に戻ります。

「じゃあ全部のWebサイトをレスポンシブ化したら便利じゃん★（・3・）」

・・・な〜〜んて思いがちですが、
ちょっと待ってください！

レスポンシブ化するにあたっての
メリットとデメリットをそれぞれ紹介します。


【メリット】

①モバイルサイトと違い、PCページとタブレット・スマホページでHTMLが同一のため、
更新・修正作業が発生した際の管理がしやすいです。
また、更新・修正を行うのも一つのHTMLだけでよいため、
モバイルサイトだけ情報が古いままといった事態を防ぐこともできます。

②PCページのコンテンツや素材をそのままタブレットや
スマホページにも使用することができます。
モバイル用サイトではモバイル用の素材をPCサイトと別に準備する必要があります。

③PCページとタブレット・スマホ用のページを同一のURLで運用できますので、
シェアやリンクが簡単にできます。
同一のURLでスマホ対応サイトに自動で最適化されるため、ページの離脱を防ぐことができます。
例えば、スマホでモバイルサイトを閲覧したユーザーがそのサイトのシェア（モバイルサイト用のURL）を行うとします。別のユーザーが「PCで」リンクを開いてしまうと、URLはモバイルサイト用になっていますので、PCでモバイルサイトを閲覧する事態が発生しかねません。その不都合をレスポンシブ対応のサイトでは解消してくれます。


【デメリット】

①PC・タブレット・スマホなど全てのデバイズを同一のHTMLで読み込んでいるので、
ページの表示に時間がかかる場合があります。
PCページでのみ表示させ、スマホページでは表示させないように設定している情報でも、裏側のソースではPC用の情報も読み込んでいるため、時間がかかってしまいます。
その他にも、PC表示用の大きな画像をスマホやタブレット用に小さく制御し表示させるので読み込みの時間がかかり、ユーザーが待ちきれなくなる恐れがあります。

②シンプルなページであればよいのですが、
複雑なデザインのサイトを制作しようとすると通常より作業の工数がかかる場合が多いです。

③PCページのテキストや画像が多すぎると、スマホ用ではページがかなり長くなってしまい、レスポンシブ化が難しくなってしまいます。


上記のメリット・デメリットを理解し、
今後制作する予定のWebサイトをレスポンシブデザイン対応にする必要があるかどうか
判断する材料にして頂けたらと思います！