レスポンシブウェブデザインとは・・・

レスポンシブウェブデザインとは・・・

今ほとんどのWebデザインがレスポンシブウェブデザインになっています。

今さら聞けない・・・レスポンシブウェブデザインとはいったいどんなこと?

私なりにまとめてさせていただきましたのでご覧ください。

レスポンシブウェブデザインとは

現在ホームページを閲覧するとき、スマホ、タブレット、パソコンなど様々なデバイスで見ているかと思います。

ユーザー(見る側)のデバイスに関係なく、同じURLで同じHTMLのコードで配信しますが、画面のサイズに応じて表示を変えてくれることができることがレスポンシブウェブデザインと言います。

Googleが推奨するモバイルサイトとは?

1.レスポンシブウェブデザイン

2.動的な配信(PHP等で出されるページHTMLファイルは存在しない)

3.別々のURL(PC向けのHTMLとモバイル向けのHTMLを別々に用意されているURL)

レス本シブWebデザインとは

上記の3つの中でも1のレスポンシブウェブデザインが推奨されています。

どのデバイスに対してもURL、HTML、CSSファイルを使用されているためスマホでは表示されているのにタブレットではエラーが起きるなどの現象を避けることができます。

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

 ★ユーザー側(見る側)★

URLが統一された場合は、大きなメリットとしてリンクやシェアが簡単であること。

例えば・・・URLを相手に送るときに「この際はPCか?スマホ用サイトなのか?」などわざわざ確認しますか?そもそも一般的には「URLは1つ」と思っている方が多く想像すらしてないと思います。

このようにURLが異なると別のサイトと勘違いされる可能性がある点、サイトをアピールする際にもユーザーが迷うことなく最適に伝える事ができます。

また動的な配信も同じことです。

レスポンシブウェブデザインの最大のメリットは情報に差が生まれにくい点です。

表示設定などしてなければ、同じ情報を見せることが出来ます。

★Google(検索側)★

Googleにとってはクローラ(ロボットがWebサイトの収集をするプログラムのこと)に優しいというメリットです。

単一のURLであることで効率的に巡回する事が出来る為コンテンツ発見することが出来ます。動的な配信でも適切にディレクションすれば問題はないですが少し手間がかかります。

検索エンジンに誤解を受け、順位の下落の可能性もあります。

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

レスポンシブウェブデザインはSEOからにすれば改善しなければいけない点が表示の速度です。

どうしてもソースコードで読み込むためファイルの大きさがあると表示の速度が大きく影響されます。

デバイス対応が増えてくるとソースのコードの大きさが増えることになります。

最後に・・・・

「レスポンシブウェブデザインのついて」なんとなく・・・わかって頂けましたでしょうか?

レスポンシブウェブデザインは様々な画面のサイズに常に変化してウェブサイトを構築する必要が重要となります。

これからホームページを開設・リニューアルをご検討の方ぜひご参考にしていただければと思っております。

 

ホームぺージの情報局カテゴリの最新記事