Article page

by
  • Comment:0
  • Trackback:0

レスポンシブデザインにはかかせない

display: none;

というCSSプロパティがあります。
対象要素を非表示にする、というものです。
例えば、ナビゲーション内容はスマートフォンでは折りたたむ、とか。
レスポンシブデザインはPC画面だけを考えて製作すれば良いわけではありませんので、スマートフォンというPCと比べれば極小画面(ビューポート)にも対応しなければいけません。
PCのナビをそのまま流用してしまえば、まぁ大抵はみ出すか縦幅がすんごい大きくなってしまいますわね (´・ω・`)
こういうのが UA であり UX なわけです。

* UA = ゆーざーいんたーふぇいす。視覚に訴えるもの。目に見える全てのデザインやレイアウトがUA
* UX = ゆーざーえくすぺりえんす。使い勝手など体感できるものがUX (あの店はサービスが良い、とかもUX)

PC(パソコン)とSP(スマートフォン)とで、一部レイアウト及びデザインをUXのために変更しよう、と思った時
デバイスによって不要となる方を display: none; で非表示にする、というのはよく使われる手法です。

ところがですね、これについて勘違いをされている方が非常に多かったりするんです。

display: none; で非表示にすればページの読み込みが速くなります

みたいな。
これ完全なる誤解・勘違い です (´・ω・`)


見えないからといって読み込みが行われないわけではない


displayプロパティのnoneという値は、存在する要素を視覚的に見えないようにする というだけですので、ローディングされないわけではないんです。
ですから決して負荷が軽減するということではない。
例えば大量に高画質画像を貼り付けて、それらを全てdisplay: none; に指定しても、フツーに表示するのと同じだけの負荷がかかっていますのでスクロールがなかなか始められなかったり、例えばGoogle Chromeなどの拡張機能に「ダブルクリックでタブを閉じる」といったようなものがありますが、ローディング中だと閉じられません(笑)
そういうサイト、みなさん出くわしたことありませんか (´・ω・`)
ファーストビューだけやたら速いのにスクロールができない… みたいなの。
でもまぁ、ファーストビューの確保が出来ているのは良いことだと思いますけれど。
これは display: none; とは関係なかった


display: none; はSEO的に悪?


これは場合によると思います。
最近のGoogle botはとってもかしこですので、色んなことを見破ります。
見破るっていうか…(笑)
例えばその display: none; が UXのためのものなのか
それとも単なる 意義のよくわからない隠し要素であるのか
これらは看破されると思った方が良いですね。

具体例で行くと、FC2ブログのトップページが全文表示タイプだとします。
通常は「続きを読む」「Read more」とされるリンクから個別記事(パーマリンク)へ遷移することになります。
が、一部テンプレートでは個別ページに飛ばずともその場で 折りたたみ展開 をすることで、現在ページに滞在したまま読めるようになっているものもあります。
私のテンプレートにもあります(GirlOnWire など)
で、botはそれが「展開されるものである」ということはちゃんと理解してくれます。
つまり UXのための非表示であろう と解釈してくれる。
しかしそれが展開しないもの、単純に非表示になっているだけで展開させるためのボタンやJSが含まれていない場合。
これは文章内容の「隠しテキスト」、リンクが含まれていれば「隠しリンク」、あるいはbotへ渡す情報と実際に閲覧者が目にする内容がかけ離れている「クローキング」と判断されることもあるかと思います。

クローキングという判定はもう絶対避けなければいけないですね。
例えSEO操作目的でないとしても、それはGoogle様の腹一つです。

display: none; の使い所を間違ってはいけないよ、というのもありますが、話しを戻して 展開型追記 のテンプレートの場合。
追記を個別記事へ移動して読んでもらうタイプよりもローディング負荷は高くなります。
初期の見た目がすっきりしているからといって、内容が存在していることに変わりはありません。
この点はよくよくご理解頂いてから使用を検討された方が良いと思います。

また、よく見かけるのですが、
「○○ブログはコメントを折りたたむようにした。それはページを軽くするためだ。」
これはですね、そのコメント欄が ajaxを利用した非同期通信 を行うものであれば正解です。
ただ単に折りたたみ展開型になっているだけならば不正解。
寧ろそれ用のCSSなりJSなりを組んでる分若干重くなってるんじゃないか(笑)
不正解の場合たぶんそれは「SPの時のスクロール量を減らす努力」かもしれませんね。負荷軽減目的ではなく。
それはそれで大切。だから無意味ではないと思いますよ。
それこそまさしくUXです。


まとめ


というわけで display: none; はページを軽くするために使えるわけではない、というお話しでした。
関連記事
vanillaice (Akira)
Posted byvanillaice (Akira)

Comments 0

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い