display:none;は、要素やコンテンツを非表示にしつつ、レイアウトからも除外する便利な方法として知られています。特にスマートフォンユーザーに適切なコンテンツの見せ方を考えたとき、このコードをうまく活用することがポイントの1つです。

ただし、適切に使用しないと、SEOに悪影響を及ぼす可能性があります。そこでdisplay:none;の基本的な使い方やメリット、SEOとの関係性、そして安全な活用方法など詳しく解説します。

display:none;の概要

display:none;は、WEBページの要素を非表示にするCSSコードです。このコードを使用すれば、特定の要素が非表示にされ、同時にスペースも削除されます。使用する主な目的としては、スマートフォンとパソコンで表示させるコンテンツを変えたり、メンテナンスで一定期間、非表示にするなどが挙げられます。

検索エンジンは非表示になっているコンテンツをクロールし、インデックスできますが、使い方によっては表示されているコンテンツと比較して重要度が低く評価されたり、ペナルティの対象となる可能性もあります。

display:none;を使用するメリット

display:none;は、不要な要素・コンテンツを非表示にしてレイアウトを整え、ユーザー体験を向上させる便利なCSSコードです。そこで、このコマンドを使用する主なメリットをとりあげ解説します。

限られたスペースを有効活用できる

JavaScriptもあわせて使えば、タブメニューやアコーディオンを設置できます。これらを使用すれば、ユーザーが必要な情報だけを見ることができ、他の情報を非表示にできます。スマートフォンなどの限られたスペースで情報を表示する際に便利です。

例えば、アコーディオンは、見出しをクリックするとコンテンツが展開・折りたたみされる仕組みですが、普段は折りたたんでおくことで、情報をかいつまんで知りたい人にとって視認性が良くなります。こういったアコーディオンやタブはUI（ユーザーインターフェース / 画面や操作方法などの設計）の一種ですが、display: none; のCSSコードによって実現できます。

デバイスごとに表示する情報を変えられる

2つ目のメリットは、デバイスごとに表示する情報を変えられることです。例えば、PCでアクセスするユーザーにのみ特定のコンテンツを読んでもらい、スマートフォンのユーザーには不要な情報なので表示しないといった使い方が可能です。

このように、デバイスごとに提供する情報を変えることができるため、よりパーソナライズされた閲覧体験を提供することができます。

display:none;とSEOの関係性

非表示設定することは、場合によってSEOに影響を与えます。例えば、SEO対策として検索エンジンを騙すような使い方をすればペナルティを受ける可能性があります。そこで、SEOに与える影響や関係性についてお伝えします。

マイナス影響を与える使い方

以前、ユーザーには見えない大量のキーワードをページに埋め込む「display:none SEO」と呼ばれる手法が横行していました。

キーワードの羅列はユーザーにとって不要なコンテンツなので非表示にし、検索エンジンに対してキーワードを大量に読み込ませる手法でランキング操作を目的におこなわれます。もちろん現在では、ブラックハットSEOとみなされペナルティ対象となっています。

検索エンジンにマイナス影響を与えるケースとしては、次のようなものがあります。

SEOに影響しない使い方

ユーザーエクスペリエンスを向上させる目的で使用する場合、ペナルティの対象となる可能性は低く、影響はほとんどありません。

例えば、スマートフォンユーザーに対して、伝える必要のない情報は 非表示にするなどが該当します。また、タブやアコーディオンのようにユーザー操作で表示/非表示を切り替える場合も使用できます。

こういった使い方は一般的におこなわれていることで、SEOに影響することはほとんどありません。

参考ページ:ユーザーエクスペリエンス（UX）とは？ UIとの違いやUXを高めてSEOに活かす方法を解説

display:none;で隠してはいけない要素

Google検索のクローラーは、ユーザーが閲覧するのと同じようにページを理解するように設計されています。そのため、非表示にしたコンテンツはインデックスされますが、視認できるコンテンツと比べて重要度は低く評価される傾向にあります。こういった理由からも、次のような要素やコンテンツは非表示にならないようにしてください。

ページの主要コンテンツ

ページの主要コンテンツは、ユーザーがそのページを訪れた際にもっとも知りたい情報で、検索エンジンがページのテーマを理解するのに重要な要素です。そのため、主要コンテンツを 隠すと、検索エンジンはページの内容を正しく評価できなくなり、検索ランキングに悪影響を及ぼす可能性があります。

見出し

見出しとは、文章の区切りやコンテンツの概要を伝えるもので、通常、h1〜h6タグによって記載されます。ページの構造や主要テーマを明確にする役割があるため、見出しはユーザーにとっても検索エンジンにとっても重要な情報といえます。そのため、これらの要素を隠すのは不適切です。

参考ページ:見出しとは？SEOにおけるh1～h6のhタグの使い方や役割について解説

display:none;以外のコンテンツ非表示方法

実は、display:none;だけがコンテンツを非表示にする方法ではありません。目的に応じて「visibility:hidden;」や「opacity:0;」など、他の非表示方法も使用できます。そこで、それぞれの特性や活用シーンなど詳細をお伝えします。

visibility:hidden;

visibility:hidden;は、コンテンツを非表示にする方法の1つです。ただし、要素を非表示にしてもレイアウト上のスペースを維持します。 つまり、テキストや画像などの要素は見えなくなりますが、その要素のあった場所を空白のまま残します。

例えば、青・黄・赤の信号があるとします。中央にある黄色を布で隠せば黄色はみえなくなりますが、青・赤の信号はその配置を維持したまま残ります。つまり、本来の黄色のあった場所を空白にし、周囲の配置を変えないのがvisibility:hidden;です。

一方、display:none;は要素を完全に削除してしまうため、他の要素がその空白を埋めるように移動します。 先ほどの例でいえば、黄色を隠して、さらに黄色のスペースがなくなるため、青と赤が隣に並ぶイメージです。このように隠す要素の扱いに違いがあるため、目的に応じて使い分けることが必要です。

参考ページ:CSS display:none and visibility:hidden – What’s the Difference?

opacity:0;

opacity:0;を設定すれば、特定の要素が非表示にみえます。しかし、実際には特定の要素やコンテンツを透明にしているだけで、コンテンツはその場に存在し続けます。例えば、リンクボタンをopacity:0;で隠せば、透明でみえなくなりますが、ボタンとリンクの機能はそのまま残ります。そのため、ユーザーが透明のボタンを押せば、ページが遷移します。

イメージとしては、ガラスのようなもので、何もないようにみえますが、そこに実在しています。また、display:none;は要素を完全に削除するためレイアウトに影響を与えますが、opacity:0;は視覚的に透明化するだけで、レイアウトは維持されます。
 

よくある質問（Q＆A）

ここでは、display:none;についてよくある質問を取りあげ解説します。WEBデザインにおいてと、とても重要な点なので、詳細までご確認ください。
 

Q:opacity:0; との主な違いは？

Answer）opacity:0は透明化することが目的です。詳細は下記の比較表をみて確認してください。

 

	opacity:0;	display:none;
見た目	要素が透明になり、画面に表示されないが存在は残る	要素が完全に非表示になり、画面にも存在しない
レイアウトへの影響	要素のスペースや位置が保持され、他の要素の配置には影響しない	要素がレイアウトから削除され、他の要素がそのスペースを埋める
ユーザー操作	透明な要素もクリックが可能	要素自体が存在しないため、クリックやタップは無効
用途	要素を透明化しつつ存在を保持する	要素を完全に非表示にしてレイアウトを整理する
検索エンジンへの影響	通常の要素として認識される	非表示の要素もインデックスされるが、優先度が低くなる可能性がある

 

Q:visibility:hidden; との主な違いは？

Answer）visibility:hidden;は、見た目が非表示になりますが、要素自体は残ります。詳細は下記の比較表をみて確認してください。

 

	visibility:hidden;	display:none;
見た目	要素が非表示になるが、スペースや存在は保持される	要素が完全に非表示になり、画面にも存在しなくなる
レイアウトへの影響	要素のスペースや位置がそのまま残る	要素がレイアウトから削除され、他の要素がそのスペースを埋める
ユーザー操作	非表示だが、要素自体は存在するためプログラム的に操作可能	要素が存在しないため、操作は無効
用途	要素を非表示にしつつ、レイアウトを維持したい場合	要素を完全に非表示にし、レイアウトを整理したい場合
検索エンジンへの影響	インデックスされるが、非表示であるため優先度が低くなる可能性がある	インデックスされるが、非表示であるため優先度が低くなる可能性がある

 

Q:コード設定が自社でできない場合どうすれば良いか？

Answer）非表示コマンドを設定することは慣れれば難しいことではありません。しかし、コードの記述が自社で難しい場合、WEB制作会社に直接問い合わせてください。もしくは、フリーランスのエンジニアを見つけ直接、対応してもらうのも適切な方法の1つです。

 

Q:UXの向上に役立つか判断できない

Answer）非表示コマンドを設定することで、UXの向上になっているのかどうか判断がつかないことがあります。その場合、まずはヒートマップツールを利用し、該当箇所がユーザーにどれだけ見られているか、あるいはクリックされているかといったことを検証します。そのデータをもとに、仮説を立てて進めてください。自社だけで判断できない場合、UXの専門家に相談することも有効です。

 

参考ページ:UXコンサルティングとは？具体的な内容と解決できる課題やフローを解説

 

Q:WordPressなどのCMSでも利用できますか？

Answer）もちろん、使用することが可能です。WordPressの場合であれば、使用しているテーマの「追加CSS」から（外観 > カスタマイズ > 追加CSS）設定することで特定の要素を隠すことができます。

 

参考ページ:WordPressとは？入門者向けに基本事項や導入メリットなど解説

 

Q:設定しても非表示されない原因は？

Answer）正しく設定したつもりでも、非表示にならないことがあります。多くの場合、ブラウザにキャッシュが残っているだけのことが多いので、リロードして確認してください。それでも修正されない場合は、他のコマンドとバッティングし、打ち消されている可能性があります。エンジニアに相談することをおすすめします。

 

参考ページ:ブラウザキャッシュとは？特徴や懸念とクリアする方法を解説

 

 

まとめ

display:none;は、WEBデザイン、特にスマートフォンでのコンテンツ表示において非常に便利なCSSコードです。しかし、使い方を誤るとSEOペナルティのリスクが伴います。そこで、今回お伝えしたとおり、ユーザーエクスペリエンスの向上を目的として適切に使用するようにしてください。また、visibility:hidden;やopacity:0;といった他の非表示方法との違いを理解し、目的に応じて使い分けることもポイントです。WEBサイトの信頼性とユーザー満足度を保ちながら、効果的に活用してください。

 

SEOとWEBマーケティングの東京SEOメーカーTOPへ戻る