※この記事はアフェリエイト広告を利用しています。
レスポンシブサイト多いですね。
レスポンシブは消去法で最適だけど、最強・万能ではないと思っています🤔
レスポンシブの欠点を「でもどうにかして！！」と言われないようにどういった対処ができるか、レスポンシブについてもう一度よく考えてみようと思います😊
レスポンシブとは？
レスポンシブWebデザイン。
デバイスに関係なく、同じURLで同じHTMLコードを使用し、画面幅によってコンテンツサイズが変わるデザインのことです。
少し前までスマートフォンは大体みんな320px（iPhone5・SEサイズ）だったので、PC用とスマホ用のHTMLコードを用意してデバイスによってそれぞれを読み込ませていました。
しかし昨今ではiPhoneだけでもSEや6、7、8、X、XR、Plus等々…
さまざまなデバイスサイズが存在するため、その方法では全てに対応するのが難しくなってきました。
そこで採用されるのがレスポンシブWebデザイン。
これで万事解決！
そう思われそうですが、レスポンシブにもメリットとデメリットがあります。
レスポンシブにするメリット
🙆多くの人に見てもらえる
レスポンシブにするとき使用するCSS3は現在ほとんどのブラウザでサポートされているため、多くの人に見てもらうことが可能です。
🙆同一コードを利用するため管理が楽
更新が頻繁にあるサイトの場合、これは重要になってきます。
PC用とスマホ用で2つコードかあると、どちらも更新しなければなりません。
レスポンシブで同一コードの場合、更新は1つのコードで済むので、更新忘れやスマホだけ古いまま…といったことを防げます。
またユーザーのデバイスに適した表示をするので、SNSでシェアされやすいという利点もあります。
🙆Googleに推奨されている
同一コードを利用するため、このデバイスではエラーが出るといった事態を防ぐことができユーザビリティの向上につながります。
またGoogle検索エンジンのクローラーの巡回の手間が少なくなります。
よってGoogleはレスポンシブデザインの使用を推奨しているようです。
Googleの検索順位に関係するモバイルフレンドリーや今後導入するとされているモバイルファーストインデックスにも適しています。
☝️モバイルフレンドリー
スマホでの閲覧に適したページの順位を引き上げ、適していないサイトを引き下げるGoogleのアルゴリズム。
モバイル フレンドリー テスト - Google Search Console
☝️モバイルファーストインデックス
これまでPCサイトの内容を元に評価していたのを、スマートフォンを主軸に評価しインデックス（検索エンジンのデータベースに登録）すること。
評価には様々な基準があり、今後導入予定とGoogleが発表しました。
🙆今後出てくるかもしれないデバイス幅にも対応できる
レスポンシブにしておけば今後もし新たなサイズのデバイスが出てもすぐに対応可能です。
レスポンシブのデメリット
🙅表示速度が遅くなる
同一コードのため、PCとスマホ両方のコードを読み込んでしまう、スマホでもPC用の大きな画像を読み込んでしまうため、特にスマホではページの表示速度が遅くなります。
🙅構築が大変
「同一コードなら作るの楽なんじゃない？」と思われそうですが、基本的に画面に横スクロールバーがでないよう、どの画面幅に対しても綺麗なレイアウトで見せなければならないため、工数は増え構築は繁雑になります。
🙅構築が大変
特に凝ったデザインで複雑なレイアウトだったり、対応デバイスが増えるほどコーディングは大変です。
🙅構築が大変
大事なことなのでもう5回くらい言いたい
🙅デザインやレイアウトが制限される
シンプルなデザイン・レイアウトでないとレスポンシブ対応はなかなか難しいです。
凝ったデザインでもなんとかなる場合もありますが、やはり表示速度が遅くなるなどデメリットが目立ってきます。
🙅スマホでのコンテンツ量が多くなり見にくくなる
テキストや画像を沢山載せたページの場合、PCでは見やすくてもスマホの小さい画面になると情報量が多すぎて見にくくなってしまいます。
🙅IE8以下は未対応
CSS3は多くのブラウザ対応とはいえ、IE8以下は残念ながら未対応です😔
レスポンシブの欠点を補うには？
欠点を説明しても、「やっぱりレスポンシブがいい！」となることは多いと思います。
構築が大変とか見る人には関係ないもんね…そうすると利点の方が多いもんね…
完成した後「なんか表示遅い」とか「デザイン変わってるけど！！」とか言われないために、では、どういった対策ができるでしょうか。
🙋レスポンシブが本当に必要か確認をする
できればデザインを作る前に、レスポンシブかどうか確認した方が今後自分の首を絞めることがなくなります。
🙋ブレイクポイントを詰める
たとえば750px以下はレスポンシブだけど、それ以上は横スクロールバーが表示されるとか、なんちゃってレスポンシブの提案もいいかもしれません。
PC、スマホ、タブレット以外で、わざわざブラウザの画面幅縮めて見るのなんてそうそうない…
動画サイトとお絵かきソフトで2画面するときくらいでしょ…でしょ！！？
☝️ブレイクポイント
ブラウザ画面を縮めていったときレイアウトが切り替わるポイントのこと。
CSSで調整する。
🙋できるだけシンプルなデザインにする
デザイナー（）としては凝ったデザインにしたいわけですよ！！！
でもそうすると自分の首が絞まるわけですよ！！！！
🙋できるだけテキストベースで作る
画像ベースだと上記のデメリットでページ表示速度が遅くなってしまうのと、iPhone等で採用されているRetinaディスプレイのことを考えると、できるだけテキストベースで作るのが良いかもしれません。
結果工数が増えます笑
どうしてもデザイン性重視で画像を使用する場合は、スライス時に普通なら2、3枚にするところを1枚にし、さらに解像度を下げるなどしてデータを軽くすると良いようです。
🙋スマホメインで作る
スマホ用の画像やCSSを先に記述し読み込ませると、スマホの表示速度が少し早くなるかもしれません。
PCコンテンツ量が多い場合はスマホのコンテンツ量を調整することも必要です。
☝️モバイルファースト
スマホで見やすく使いやすい設計にすること。
PCに比べ画面が小さく回線速度が遅いスマホの場合、スワイプによる操作を中心に、必要最小限の情報を適切なレイアウトで表示させることが必要となる。
🙋jsでIE8以下にも対応させる
jsを利用することでIE8以下にHTML5、CSS3を対応できるようです。
結局どうすればいいの？
- ①レスポンシブが必要かどうかよく考え
- ②盛り込む情報を精査、スマホでも見やすい設計にし
- ③テキストベースでPC・スマホ共に構築しやすいレイアウト、デザインにし
- ④必要に応じてIE8以下にも対応させる
ということ！！？🙋♀️
今のところ全てを網羅するようなベストな代替策は私のようななんちゃってWebデザイナーには考えもつきませんが、きっと今後いろんなアイディアがもっと生まれてくると思います🤗
レスポンシブに怯まないよう、今後も勉強していこうと思います！
【参考サイト様】
・レスポンシブデザインとは｜今更きけない基礎知識とメリット・デメリット｜ferret [フェレット]
・レスポンシブWebデザインについて知っておきたいこと【作り方入門編】 : ビジネスとIT活用に役立つ情報
・モバイルフレンドリーとは？対応して順位を下げないための基礎知識｜ferret [フェレット]
・モバイルファーストインデックスとは？ SEOへの影響と対応方法
・【速報】モバイルファーストインデックス、Googleの本番環境にて既に導入が開始 現在の状況と必要な対策とは？
・モバイルファーストとは？スマートフォンサイトをデザインする時の考え方 | デジタルハリウッドお役立ちWebマガジン「くりたま」
参考サイト様方、本当にありがとうございます！🙇♀️
