【レッスン後記：レスポンシブデザインでよくある失敗】

レスポンシブデザインで初心者がよくやる失敗とは？

スマホ対応のレスポンシブサイトのコーディングで、初心者がよく間違える失敗があります。

あなたは「レスポンシブデザイン」とはスマホで表示するとスマホの画面サイズに合せてページ全体のレイアウトが切り替わったり、画像が縮小されることだと思っていませんか？

確かにその通りなのですが、ただ単に縮小すればよいのではありません。

よくある間違い

●HTML

<img id="banner" src="xxx" />

●CSS

#banner {
    width: 100%;
}

スマホで見たとき画面いっぱいに自動的に縮小させるには、CSSで横幅を固定値(960pxなど)ではなくパーセントで指定します。しかし、元の画像ファイルのデータサイズが大きい場合はこれだけでは正しいレスポンシブデザインとは言えません。

仕組みを理解すれば何が間違いなのかが分かります

ウェブサイトを開くとき、インターネット上のウェブサーバーから該当ページのHTMLやCSS、画像などがブラウザによってパソコン（またはスマホ）にダウンロードされ、ブラウザはダウンロードされたページを表示しています。

1. ブラウザがHTMLやCSS、画像をダウンロードする
2. ブラウザはHTMLにタグがあれば、src="xxx" にある画像ファイルをダウンロードする
3. ブラウザはCSSの width:100% を見て、画面サイズに応じて画像を表示（レンダリング）する

つまり、最初の段階で既に元の画像ファイルはダウンロードされるのです。データサイズの大きい画像をタグで書いていると、スマホでアクセスしようがパソコンでアクセスしようが、ブラウザは「この画像が必要なんだな」と判断して、ダウンロードをしてしまうのです。

この時点で、スマホに大きな通信負荷がかかってしまい、大事なトップページの表示に何秒もかかる原因になるのです。

CSS で width:100% を指定していても、それはあくまでもブラウザに画像を表示する際の倍率に過ぎません。その証拠に、スマホ対応のサイトをパソコンで開いて、開き終わったあとにブラウザのウィンドウを小さくして画面サイズを変化させてみてください。

ある程度小さくなったらスマホ用のレイアウトに切り替わると思いますが、切り替えは一瞬で終わりますよね？わざわざリロードが掛かることはありません。

まとめ

ウェブページの表示が重くなる最たる原因は、ページに含まれるデータが大きいために、ブラウザによってインターネットからパソコンやスマホにダウンロードされるまでの処理時間が長くなることです。

CSSによるレイアウトの切り替えは、ページ内のデータがダウンロードされたあとブラウザ内で行われることなので、表示倍率を下げたところでページの読み込み速度は全く変わらないのです。

オンラインレッスンで解決

先日とある生徒さんにオンラインレッスンでこの問題について原因と対処法をアドバイスさせていただきました。

無料相談だけでも受けてみたい方へ

ワードプレスに限らず、ホームページの制作やカスタマイズでお困りの方はお気軽にご相談ください。

oshierumanaberu.net

↑ページの中ほどにあるオレンジ色の「先生に聞いてみる」というボタンを押すと、メッセージが入力できますので、お気軽にご相談ください。

ご相談のメッセージをいただきましたら２４時間以内にお返事を差し上げます。より詳しい状況をお聞かせいただける方には１時間ほどですがスカイプで無料相談を承りますので、ご遠慮なくお尋ねください。