はじめに：アコーディオンのアイコン、なんとなく選んでいませんか？
アコーディオンはWebやアプリで最もよく使われるUIパターンの一つです。しかし、開閉状態を示すアイコンはチームによってバラバラです。キャレット（▼）、シェブロン（⌄）、矢印（→）、三角（▶）、プラス/マイナス（+/−）…デザイナーごとに好みが異なり、開発者はデザインカンプをそのまま実装することが多いのではないでしょうか。
問題は、このアイコン選択がユーザーの期待行動を変えてしまうという点です。アイコンがない場合、ユーザーはその項目を「新しいページへ遷移するリンク」と認識します。一方、カスタムアイコンは「アコーディオンが開く」というシグナルを明確に伝えられず、混乱を招きます。本記事では、実際のユーザビリティ調査の結果をもとに、どのアイコンが最も安全な選択かを整理します。
本記事はSmashing Magazineのアコーディオンアイコンのユーザビリティ調査を根拠資料として再構成したものです。
核心：アイコン別のユーザー期待行動の分析
アイコンを選ぶ際の最も重要な基準は**「このアイコンがユーザーにどのような行動を促すか」**です。調査結果を整理すると以下のようになります。
1. アイコンなし = 「ページ遷移」を期待
アイコンが全くない場合、ユーザーはメニュー項目をタップすると新しいページへ遷移すると期待します。アコーディオンが開くとは考えません。つまり、アコーディオンを使うならアイコンは必須です。
2. 矢印（▶）とスプリットボタンの罠
右向きの矢印（▶）は「新しいページへ遷移する」という期待とは結びつきません。同じアイコンが下向き（▼）になったとしても、「アコーディオンが開く」という意味は明確ではありません。
特にスプリットボタンは避けるべきです。テキストラベルはページへ遷移し、アイコンはアコーディオンを開く構造ですが、ユーザーはこの二つを区別できず、誤クリックを繰り返します。代わりにメインカテゴリをタップするとアコーディオンが開き、カテゴリページへはメニュー内のリンクから遷移する設計のほうがはるかに安定します。
3. +/− と ↓/↑：理解されるが誤解も招く
プラス/マイナス（+/−）と上下矢印（↓/↑）は直感的に理解されますが、意味が過負荷（overloaded） になっています。
+：保存、カートに追加、拡大など様々な意味に解釈されうる↓/↑：スクロール、スライド、次の項目検索、ページ内の特定位置への移動などと誤解されうる
特に多階層ナビゲーションで複数レベルが同時に開いている場合、+アイコンは混乱を助長します。
4. キャレット（▼）が最も安全な理由
結論として、キャレット（▼、下向きの三角） がデフォルトとして最も安全です。インタラクション時に上向きキャレット（▲）や横向きキャレット（▶）に変更する方式が一般的で、ユーザーの期待と最もよく一致します。
<!-- アコーディオンの基本構造例：キャレットアイコンを使用 -->
<button class="accordion-trigger" aria-expanded="false" aria-controls="panel-1">
<span>カテゴリ名</span>
<!-- キャレットアイコン：展開状態に応じて回転 -->
<svg class="caret" viewBox="0 0 24 24" aria-hidden="true">
<path d="M6 9l6 6 6-6" />
</svg>
</button>
<div id="panel-1" class="accordion-panel" hidden>
<a href="/category/page">カテゴリページへ移動</a>
</div>
/* キャレットの回転で状態を表示 */
.accordion-trigger[aria-expanded="true"] .caret {
transform: rotate(180deg);
}
.caret {
transition: transform 0.2s ease;
}
上記コードのようにaria-expanded属性とキャレットの回転を連動させれば、アクセシビリティと視覚的フィードバックを同時に確保できます。
注意点と深掘りTips
このアプローチの限界
キャレットが「最も安全」というのは絶対的な正解ではないという点を押さえておくべきです。この結論は特定のユーザビリティ調査の文脈から導かれたものであり、以下のような場合は別の選択が適切なこともあります。
- モバイルネイティブアプリ：プラットフォームガイドライン（iOS HIG、Material Design）を優先してください。iOSはシェブロン（›）を、Materialは展開アイコンを推奨しています。
- ダークパターンが懸念されるコマース：
+アイコンが「カートに追加」と誤解される文脈なら、キャレットのほうが安全です。 - 多階層の大規模メニュー：キャレットだけでは深さを表現しにくいため、インデントと組み合わせる必要があります。
実務チェックリスト
- リンクとアコーディオンを分離する：一つのボタンに二つの役割を持たせないでください。スプリットボタンは誤クリックの温床です。
- アイコンなしでリンクを示すなら下線を使う：リンクであることを示す最も確実な方法は下線です。矢印アイコンはむしろ混乱を招きます。
- アクセシビリティ属性を必ず連動させる：
aria-expanded、aria-controls、hidden属性を状態と同期してください。 - アイコンは装飾であり情報ではない：スクリーンリーダーユーザーのために
aria-hidden="true"を付け、状態はaria-expandedで伝えてください。
日本の開発エコシステムにおける適用文脈
日本の受託開発やSIerの現場では、デザイナーが渡したカンプのアイコンをそのまま実装するケースが多いです。しかし、カンプ段階で「このアイコンがユーザーにどのような行動を促すか」を議論することが重要です。特に公共機関・金融系プロジェクトでは、アクセシビリティ要件（JIS X 8341-3）の観点からaria-expandedの同期が必須となるため、アイコン選択よりもアクセシビリティマークアップが優先です。デザインレビュー時に本記事のチェックリストを共有してみてください。
まとめ：シンプルさが答え
アコーディオンアイコン選択の核心は**「一つのボタンは一つのことだけをする」** という原則に帰結します。
- デフォルトはキャレット（▼） を使い、状態に応じて回転させましょう。
- 代替が必要なら**+/−** も問題ありませんが、意味の過負荷を認識して使いましょう。
- スプリットボタンは避けましょう。 テキストとアイコンが異なる動作をすると、ユーザーは必ずミスをします。
- リンクは下線で示しましょう。 矢印アイコンでリンクを飾らないでください。
結局「シンプルなほうが良い（simpler is better）」という古くからの格言がここでも当てはまります。アイコン一つでユーザーを迷わせないようにしましょう。
次のステップ学習の方向性
- アクセシビリティの深化：WAI-ARIA Authoring PracticesのAccordionパターンを読んでみてください。キーボードインタラクション（Enter、Space、Arrow keys）まで扱っています。
- デザインシステム構築：キャレット・シェブロン・矢印をコンポーネントトークンとして管理すれば、チーム内の一貫性を保てます。
- ユーザビリティテスト：5人だけでもアイコンの誤解有無を素早く検証できます。