「アコーディオン」というと鍵盤の楽器を思い浮かべる人が大半だと思いますが、Webにおいては別のことを意味します。
Webにおけるアコーディオンは「アコーディオンメニュー」とも言い、ナビゲーションメニューの一種です。アコーディオンをクリックすることで隠れている詳細を展開表示させることができます。
コンテンツをコンパクトに収納することができるため、文字数の多いサイトやスマートフォンサイトでは特に効果的に使われています。
アコーディオンについて詳しく知りたい方は以下をご覧ください。
目次
●他のサイトでの説明
アコーディオンメニューとは | IT用語辞典
http://e-words.jp/w/アコーディオンメニュー.html
IT用語辞典での解説です。
動きが気持ちいい！jQuery（+CSS3）で作るアコーディオンまとめ8選！ | LIG
https://liginc.co.jp/designer/archives/10057
こちらにはアコーディオンで表現できる動きのサンプルが多く掲載されています。
●わかりやすい使用例
実際にアコーディオンを使用しているサイトを例に説明します。
以下の画像はJリーグクラブ「浦和レッドダイヤモンズ」の公式サイト（スマホ版）です。
「トップチームトピックス」「クラブインフォメーション」と書かれた箇所がアコーディオンメニューになっています。
この「クラブインフォメーション」と書かれた箇所をタップしてみると……
上の画像のように「クラブインフォメーション」の詳細が展開表示されました。もう一度タイトル部分をタップするとメニューを再度閉じることもできます。
このように、情報量が多い箇所をコンパクトに見せることができるため、特に縦長になってしまいがちなスマートフォンサイトで重用される表現方法なのです。
ちなみに、Wikipediaのスマホ版もアコーディオンを多用しています。
※浦和レッドダイヤモンズ 公式サイト
http://www.urawa-reds.co.jp/
●復習クイズ
説明がわかりづらい、間違っているなど御指摘ありましたらお問い合わせよりご連絡いただけると幸いです。
