【HTML】アコーディオン表示をやめたほうがいい理由

ウェブにおけるアコーディオン表示とは

HTML 界でのアコーディオン表示とは呼んで字のごとく，楽器のアコーディオンのように折り畳みが出来るような表示の仕方を表す．

(CSSだけでアコーディオン表示をするHTMLの書き方は以前のページを参照)

なんとなくエレガント？にも見えるためか，いろんなページで使われていることも多い．
しかし，注意して使う必要がある．というか，あまり使用はお勧めしない．
以下でメリットとデメリットをあげて説明をする．

アコーディオン表示動作サンプル

アコーディオン表示というのは下のような動作を指す．
初期状態で隠しておいて，クリックすることにより隠しておいた部分を表示させる方法である．

アコーディオン表示のメリット

いうまでもなくすっきり見えること．
以下に説明を並べてみる．

情報量を減らして，閲覧性が上がる

重要な訴えたい見出しのみ表示して，細かいところは隠すことにより，すっきり分かりやすくなる．
全体として何が言いたいのかというテーマが分かりやすくなる．

情報の取捨選択が容易になる

極端なことをいえば，見出しだけ残してコンテンツを全部隠した状態にすれば，見たい部分だけクリックしてみることが出来るようになる．
なので，閲覧側からすると必要な情報だけを見ることが出来る．

スクロールしなくて済む

縦型のアコーディオンの場合であるが，最初閉じた状態にしておけば短くて済むので最後の方にあるコンテンツでもスクロールの手間が省ける．

アコーディオン表示のデメリット(やめた方がよい理由)

メリットだけ見るといいことばかりのように思えるが実は重大なデメリットがある．

探している情報がどこにあるか分からなくなる

全部が表示されていない状態なので特に検索エンジンからアクセスされた場合に探しているものを見つけられなくなる可能性が出てくる．

特に「ページ内検索」でも見つけられなくなるので注意する必要がある．
(ソースの表示してから検索すれば見つかるが，当然その方法では見にくい．)

検索エンジンよけをしているページの場合，その心配は無用だが普通のページは検索エンジンを除外してはいないので折角アクセスしてくれた訪問者に対して不親切なことになる．

アコーディオン表示のうまい使い方

ということで，メリット・デメリットを踏まえた上でどういう場所でアコーディオン表示を使えばよいかだが，基本的に検索エンジンからのアクセスを考えなくてよいページや場所ということになる．

このようなことはあえて書かれることは少ないが，これも検索エンジンからのアクセスを考えた使い方なので，ある意味 SEO 対策の一つと言える．
SEO 対策をしているという人や会社がアコーディオンを使っていた場合はなぜアコーディオンを使っているのか聞いてみるといいだろう．

メニューのアコーディオン表示

メニューというのは基本的にリンクだけで構成されている．
リンクを折りたたんで見えないようにしても検索エンジンにマッチすることは考えなくてよい．
しかも隠れている文字列はそのリンク先のページを説明する単語なので，今見ているページではない．
つまり検索されることはないと考えてよいのだ．

今，まさに見ているこのページもスマホで見ていただければ，上部メニューはハンバーガーメニューに代わり，アコーディオン表示にしているので，参考までにスマホでも見ていただければと思う．
ブラウザの横幅や縦幅を狭めてもらってもスマホ表示に切り替わる．

ちなみにこのサイトのメニューは全部 CSS のみで実現していて，javascript は使っていない．
作り方も参考までに紹介しているので，レスポンシブな多階層ハンバーガーメニューの作り方【CSSのみ】を見ていただきたい．

検索結果に現れないページにおけるアコーディオン

検索結果に現れないというのは例えば動的に生成しているページなどが当てはまる．

具体的にいうとサイト内検索やページコンテンツを動的に生成するツールのページなどだ．

レクタスで言えば，キーワードの出現頻度解析のページなどである．
これは URL を入力されると形態素解析するページであるが，ついでに a タグや h タグも表示する．
その際，タグの中身は本題の形態素とは違うので当初は隠している．＋を押して初めて開くように作っている．(＋を押すと－に代わるので閉じるときは－を押すことになる．)

これは動的に生成しているページなので通常は検索エンジンに収集されることはない．
そもそも，この解析結果は入力された URL によって変わるものなので検索エンジンにマッチさせる必要もないのでアコーディオン式の表示を使っているわけである．