排他型 アコーディオン

通称：排他アコーディオンExclusive accordion (one panel open at a time)1つ開くとほかが閉じるアコーディオンを指します。「シングルオープン」とも呼ばれます。

見本の中のメニューやボタンは押して動きを試せます（リンク先へは移動しません）。

同時に開ける項目を1つに限ったアコーディオンです。別の項目を開くと前の項目はたたまれ、画面にはいつも1つの中身だけが出ます。順に比べながら読んでほしい内容に向いています。

自分のサイトの中身で、この形を作らせる指示文です。最初の「サイトの情報」を書き換えてから渡します。今あるページを直させるときは、その HTML を貼ります。

この形で作る 
# サイトの情報（ここを書き換える）
- どんなサイトか：〈例：工務店のサイト、税理士事務所のサイト、ネットショップ〉
- 入れたい文言・項目：〈見出し・ボタンの文言・項目の数など。決まっていなければ空けてよい〉
- 今あるページ：〈今のページを直すなら、その HTML を貼る。新しく作るなら空ける〉

# 部品の呼び名
一般に「排他アコーディオン」（Exclusive accordion (one panel open at a time)）と呼ばれる部品です。1つ開くとほかが閉じるアコーディオンを指します。「シングルオープン」とも呼ばれます。

# 作ってほしいもの
排他型のアコーディオン（Exclusive accordion）。同時に開ける項目を1つに限り、別の項目を開いたら前の項目はたたむ。

# 並べるもの
- 見出しと中身の組を4個、縦に並べる
- 中身は2〜3行の説明と、回数・料金などの短い箇条書き
- 最初は1つ目だけを開いておく

# 守ってほしいこと
- 見出しは h3 の中に button を入れる。button に aria-expanded と aria-controls を付け、中身には role="region" と aria-labelledby を付ける
- 開いた項目は見出しの背景色を変え、右端の ∨ の印を上向きに回す
- 開いている項目をもう一度押したら閉じる（すべて閉じた状態も許す）
- 項目の区切りは太めの線か背景色の差で示し、細い枠で1つずつ囲まない
- 見出しの押せる高さは 52px 以上にする

# SP（画面幅 599px 以下）
- 並びは同じ。見出しの文字を少し小さくし、左右の余白を詰める
- 開いた項目の見出しが画面の上に隠れていたら、見出しまでスクロールする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 色は CSS 変数（--accent など）にまとめ、あとから変えやすくする
- 文言は「サイトの情報」に合わせて考える。決まっていないところは〈 〉で囲んだ仮の文言にする
- 「並べるもの」に書いた項目の名前（エリア・間取りなど）は一例。サイトに合うものに置き換える
- 今あるページを渡したときは、そのページの色・文字・余白に合わせ、変えた場所を最後に箇条書きで知らせる

アコーディオンを8つの型に分け、AIへの指示文・動く見本・コードを載せています。

アコーディオンはどの型を選ぶか

アコーディオンは、見出しを押すと中身が開く部品です。長いページを短く見せられる一方で、閉じた中身は読まれにくくなります。型を選ぶ前に「この内容は隠してよいか」を考え、そのうえで、一度に開くのは1つか複数か、閉じたまま何を見せたいか、の2点で選びます。

こんなとき 向いている型
コースやプランを1つずつ読んで比べてほしい排他型
規約や仕様書のように、条が多く印刷もされる全開閉つき型
長い文章の続きを、読みたい人にだけ見せたい本文折りたたみ型
申し込みや設定で、閉じたまま今の選択を見せたい要約表示型
サービスや機能を一覧で見渡してから詳しく読ませたいカード型
手続きの流れを、順番どおりに1つずつ進めてほしい番号つき手順型
項目が10を超え、分類から順にたどってほしい入れ子型
PC では全部見せたいが、SP ではページを短くしたいSPだけ開閉型

開く・閉じるときの動き方は、アニメーション集の部品の動き（アコーディオンがなめらかに開く）にあります。

よくある質問の見せ方は、FAQ のパターンにまとめています。

どの型でも守ること

  1. 見出しの中に button を置く。h3 などの見出し要素の中に button を入れ、aria-expanded で開閉の状態、aria-controls で開く中身を伝えます。div にクリックを付けただけでは、キーボードで開けません。
  2. 開閉の状態は、色ではなく形で伝える。∨ の向きや ＋/− の印、見出しの背景色などで、色だけに頼らずに状態がわかるようにします。
  3. 決めるために要る情報は閉じた中に入れない。料金・解約の条件・注意事項は、最初から見える場所に置きます。
  4. 押せる部分を広く取る。印の部分だけでなく見出しの1行がまるごとボタンになるようにし、高さは 44px 以上取ります。
  5. ページ内検索と印刷を考える。検索で見つけてほしい文章は hidden="until-found" を使い、印刷するときは中身を開いた状態で出します。

よくある質問 (FAQ)

中身が HTML に書かれていれば、閉じていても読み取られます。ボタンを押してから中身を取りに行く作りでは、検索エンジンに届かない場合があります。ただし、検索で大事な語や、ページを開いた人がまず知りたいことは、閉じずに見せておくほうが確実です。

単純な開閉なら、details と summary で十分です。JavaScript なしでキーボード操作と開閉の状態の読み上げに対応でき、ページ内検索で語が当たると自動で開くブラウザもあります。すべて開くボタンや要約の書き換えのように、ほかの部品と連動させたいときは button で作るほうが扱いやすくなります。

多くの人が最初に読む項目があるなら、それだけ開いておきます。全部が畳まれていると、そこが開け閉めできる場所だと気づかない人もいます。1つ開いておくと、中身の量と開き方の見本になります。

印の種類はどちらを選んでも構いません。大事なのは、同じサイトの中で混ぜないことです。入れ子型のように段を見分けたいときは、1段目は ∨、2段目は ＋/− と使い分けると、どの段を開いているかがわかりやすくなります。印は見出しの右端か左端のどちらかに決めて、位置もそろえます。