公益社団法人 日本バス協会 様
コーポレートサイト
RESPONSIVE
レスポンシブ対応
スマホにも対応した
レスポンシブデザイン
レスポンシブデザインは、同一のURL、HTML・CSSファイルを用いながら、パソコン、スマートフォン、タブレットなど、デバイスの大きさに合わせレイアウトを最適化して表示するWebデザイン手法です。
近年スマホユーザーの増加に伴い、Googleはスマートフォンで表示されるホームページにおいて、 テキストが小さすぎないか、コンテンツサイズは適切か、読み込みが遅くないかなど「モバイルフレンドリー」であるかも 重視するようになりました。Googleが推奨するモバイルフレンドリーな手法のひとつが、レスポンシブデザインになります。
レスポンシブ対応で
解決できる課題
-
お悩み
1- レスポンシブ対応しないと
いけないのでしょうか - どのデバイスでもアクセスしても同じURLで表示するため、SEO効果の向上が期待できます。
- レスポンシブ対応しないと
-
お悩み
2- レスポンシブ対応の
デメリットはありませんか - 共通のHTML・CSSで制御するため、パソコンやスマートフォンで大幅に見せ方をかえることができない等の制限があります。
- レスポンシブ対応の
-
お悩み
3- レスポンシブ対応って
お金が掛かりますか？ - パソコン、スマホ、タブレット版のデザインとそれに合わせた構築をするため制作工数は増えますが、１つのファイルで管理するため更新の手間は省けます。
- レスポンシブ対応って
シスコムの
「レスポンシブデザイン」
ユーザーは、ひとつのデバイスだけではなく、会社にいる時はパソコンで、移動中はスマートフォンでホームページをみるなど、 時と場合によって使い分けることもあります。 さまざまなデバイスがある昨今、ユーザーのデバイスに合わせ最適なコンテンツを出し分けできるよう構築する必要があります。 ただし、スマートフォンの画面はパソコンに比べて小さいため、一画面で表示できる情報量は少なくなります。 小さな画面でありながら、ユーザーに効率的に情報を届けられるよう、サイト設計をしてユーザビリティを高める工夫をしています。
-
レスポンシブデザインのメリット
- デバイスに合わせたデザインの表示が可能
- 同一ソースのためWebページ更新の手間を軽減できる
- 同一URLのためコンテンツ共有やリンクが簡単（リダイレクトも不要）
- 同一URLで管理できるためSEOに有利（評価の分散を防げる）
- 管理コストを抑えられる
レスポンシブデザインのデメリット
- パソコン、スマホ、タブレット版のデザインとそれに合わせた構築をするため制作工数が増える
- 共通のHTML・CSSで制御するため、パソコンやスマホで大幅に見せ方をかえるなどに制限があります
- スマホを表示する際もパソコン用の大きな画像を読み込ませると表示速度が遅くなる
上記のメリット、デメリットを踏まえた上で、パソコンでもスマートフォンでもタブレットでも、どのユーザーにとっても使いやすいサイトを目指して構築いたします。また、構築後Googleのレスポンシブ対応サイトになっているかのチェックも合わせて行ないます。
Google提供 モバイルフレンドリーテスト
“「モバイルフレンドリー」や「モバイルファーストインデックス」の対応としてGoogleが推奨している理由”
レスポンシブ ウェブ デザイン | Google 検索デベロッパー ガイド | Google Developer 引用
Googleの施策 上記のデメリットでもあげましたが、パソコンに主軸を置いてホームページを構築した場合、デバイス問わずに表示させる画像を同一のものにしてしまいがちです。しかしスマホとパソコンの環境では回線速度が違いますので、パソコン用に用意された画像データはスマホでは大きすぎて、ページ表示速度を遅くしてしまいます。また、画面の大きいパソコンと画面の小さいスマホでは、当然のことながら情報の表示枠の大きさが異なります。コンテンツの配置を含め適切な情報設計がなされなければスマホでは、離脱率の高い成果の出ないホームページになってしまいます。こういったスマホならではの制約を理解せずにホームページ構築を行なってしまうと、SEOにも悪影響が出てしまいます。 ページ表示速度の最適化やスマホに適したUI/UXを実現し、Googleが推奨しているモバイルフレンドリーなホームページを制作することが重要です。
