← PC・IT用語集へ戻る

アコーディオン

Accordion
web development beginner
Webデザインにおいて、見出しをクリックすると詳細内容が縦方向にスライド開閉する折りたたみ式のUIパーツ。
アコーディオン (Accordion)

概要（サマリー）

アコーディオン（Accordion）は、Webデザインにおいて、見出し部分をクリック（タップ）すると、隠されていた詳細なコンテンツがアコーディオン（楽器）のように縦方向にスライドして開閉する、折りたたみ式の表示パーツ（メニュー）である。

主に、よくある質問（FAQ）のページや、スマートフォンの狭い画面スペースでナビゲーション項目をスッキリ整理して見せたい場面で非常によく利用される。必要な情報だけをユーザーの選択に応じて展開させることで、画面全体の情報量を最適化する効果がある。

実際に開閉の動きを試すと、見出し・本文・開閉状態のクラス切り替えの関係がつかみやすい。以下はこのページ上で動く簡単なデモである。

クレジットカード、銀行振込、各種スマホ決済が利用できる。

全国一律500円。5,000円以上の購入で送料無料になる。

商品到着後7日以内であれば返品を受け付けている。

詳細解説

アコーディオンとは何か（情報を隠して整理する）

Webページ内にテキストや画像などの情報があまりにも大量に並んでいると、ユーザーはスクロールするだけで疲れてしまい、目的の情報を見つけ出せなくなる（情報過多の状態）。

アコーディオンは、この問題を解決するためのUI（ユーザーインターフェース）デザインである。初期状態では「見出し（タイトル）」だけを縦に並べて表示しておき、ユーザーが興味のある見出しをクリックしたときに初めて、そのすぐ真下から説明文がすーっと現れる。これにより、画面のファーストビュー（最初に目に入る領域）を非常にコンパクトで読みやすい状態に保つことができる。

アコーディオンを導入するメリット

アコーディオンの導入は、特にスマートフォンの普及した現代のWeb制作において以下のメリットをもたらす。

  • スクロール量の削減：長い文章を折りたたむことで、ユーザーがページの下部まで移動しやすくなり、ページ全体のスクロールによる疲労を軽減する。
  • 直感的な操作性：見出しの右端に「＋ / ー」や「∨ / ∧」のようなアイコンを添えることで、視覚的に「ここはクリックすると開く」ということが直感的に理解しやすい。
  • 特定情報への集中：ユーザーが自ら選んで開いた項目だけが表示されるため、不要な情報が目に入らず、今読んでいる情報に集中しやすい。

HTML5標準タグによるシンプルな実装コード例

かつてはアコーディオンの実装には複雑なCSSやJavaScriptが不可欠だったが、現代のHTMLでは <details> タグと <summary> タグを使うだけで、ブラウザ標準の非常にシンプルなアコーディオン（JavaScriptなし）を構築できる。

以下はそのコード例である。

HTMLの場合

<!-- detailsタグがアコーディオン全体を囲む -->
<details class="accordion-item">
  <!-- summaryタグがクリックする見出しになる -->
  <summary class="accordion-title">よくある質問1: 支払方法は何がありますか？</summary>
  <!-- 開いたときに表示される詳細本文 -->
  <div class="accordion-content">
    <p>クレジットカード（Visa、Mastercard、JCB）、銀行振込、および各種スマホ決済がご利用いただけます。</p>
  </div>
</details>

CSSの場合

/* アコーディオン全体のスタイル */
.accordion-item {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 10px;
  background-color: #fff;
}

/* 見出し部分（クリックできる場所） */
.accordion-title {
  padding: 15px;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  list-style: none; /* デフォルトの三角マーク（矢印）を消す場合 */
  position: relative;
}

/* 見出しの右側に矢印アイコンを独自に配置 */
.accordion-title::after {
  content: "▼";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  transition: transform 0.3s ease;
}

/* アコーディオンが開いている（open状態）のときの矢印の向きの変化 */
.accordion-item[open] .accordion-title::after {
  transform: translateY(-50%) rotate(180deg); /* 矢印を上下反転させる */
}

/* 本文部分 */
.accordion-content {
  padding: 15px;
  border-top: 1px solid #ddd;
  background-color: #f9f9f9;
}

このコードでは、<details> タグが自動的にクリック判定を行い、開いた際には内部的に [open] 属性が付与されるため、JavaScriptを使わなくても完全に動作するアコーディオンが完成する。CSSのアニメーション（滑らかに開く動き）をさらに加えたい場合は、CSSの transition や display: grid を組み合わせるか、JavaScriptで高さを制御する。

より具体的な作り方を確認したい場合は、アコーディオンの実装方法でHTML・CSS・JavaScriptのコード例を見られる。見た目のバリエーションを探したい場合は、アコーディオンのデザイン集も参考にしてほしい。

AIコーディングとの関係

Webサイトのコーディングにおいて、アコーディオンの実装はAIに依頼するのに非常に適したUIパーツである。

AIに対して「HTMLとCSS、JavaScriptを使って、よくある質問（FAQ）用のアコーディオンメニューを作成して。クリックしたときにアコーディオンが滑らかにスライドダウン（高さを変化）しながら開くアニメーションをつけて。また、1つの項目を開いたら、すでに開いていた他の項目は自動的に閉じる仕様にして」と指示すれば、実務で使える極めて高品質なフロントエンドコードを即座に生成してくれる。

また、AIに「HTMLの <details> タグを使って、CSSだけで滑らかにスライド開閉するアコーディオンの実装例を書いて」と頼めば、最新のWeb標準に沿った無駄のないコードと解説を提案してくれる。

よくある勘違い

画面をスッキリさせるために、すべての情報をアコーディオンに隠せば見やすくなる？

情報が隠れることはメリットでもあるが、同時に「ユーザーがその情報を見落とすリスク」も高まる。

ユーザーがサイトを流し読み（スキャン）しているとき、アコーディオンの中に重要な情報が隠されていると、その見出し自体に興味を持たれなかった場合、一生その情報が読まれないことになってしまう。
特に、サービスの「強み」や「料金プランの重要な規約」など、必ずユーザーに読ませたい核心的な情報はアコーディオンの中に隠すべきではない。基本的には、「ユーザーが自発的に探すような補足的な情報（FAQの詳細など）」に限定して利用するのがUI設計の鉄則である。

アコーディオンの中に折りたたまれているテキストはSEO的に不利（Googleに評価されない）？

かつては「初期状態で画面に見えていない隠しテキストは、Googleの検索エンジンに評価されない（または評価が下がる）」と言われていた時期があった。

しかし現代のGoogleの検索クローラーはJavaScriptやCSSによるデザインを高度に解析できるため、レスポンシブデザイン上の自然なアコーディオン内テキストは、通常のコンテンツとして扱われやすい。そのため、SEOだけを理由に無理にすべての文章を全表示にして画面を散らかす必要はない。

アコーディオンを開く仕組みには必ずJavaScriptが必要？

前述の通り、最新のHTML5では <details> と <summary> タグを使うことで、JavaScriptを1文字も書かずにアコーディオンを実装できる。

また、古いHTMLであっても、非表示のラジオボタン（<input type="radio">）とラベル（<label>）を組み合わせることで、CSSの :checked 擬似クラスを利用して完全にCSSだけで開閉制御を行うテクニックもある。ただし、現在では <details> タグが主要なすべてのブラウザでサポートされているため、特別な理由がない限りはHTML標準のタグを使用するのが最もシンプルで安全である。

まとめ

  • アコーディオンは、見出しをクリックすると詳細が縦方向に展開する折りたたみ式UIである。
  • 画面の専有面積を減らし、スマートフォンなどの狭い画面で情報を整理して見せるのに適している。
  • 主によくある質問（FAQ）や、スマホ用グローバルメニューなどで多用される。
  • 最新のHTML5では、<details> と <summary> タグを使ってJavaScriptなしで実装可能である。
  • 重要な情報をアコーディオンの中に隠しすぎると、ユーザーに見落とされるリスクがあるため使い所に注意する。

情報ソース

より詳しくAIに聞いてみよう

  • HTML5の <details> タグを使って、JavaScriptなしでCSSのみで開閉時にふわっとスライドするアニメーションを適用する方法を教えてください。
  • アコーディオンメニューで「1つの項目を開いたら、他の開いている項目を自動で閉じる（アコーディオンの排他制御）」をJavaScriptで実装する方法を教えてください。
  • アコーディオンと似たUIである「タブメニュー（Tab Menu）」との違い、および「どのようなコンテンツのときにどちらを使うべきか」の判断基準を教えてください。
  • 目が不自由なユーザーなどが音声読み上げソフト（スクリーンリーダー）を使用する際、アコーディオンを正しく認識させるための「WAI-ARIA（アクセシビリティ対応）」の書き方を教えてください。
  • AIに「自社のFAQデータを元に、動的にHTMLのアコーディオンリストを出力するJavaScriptプログラム」を作成してもらうためのプロンプトを教えてください。