いいねボタン
Like button
別名: リアクションボタン、ハートボタン、いいね、Like button、Reaction button、Favorite button、Heart button
生態（さわってみる）
一言定義
投稿やコンテンツへの好意的な反応をワンタップで表明し、オン/オフの状態と件数を同時に示すトグル型のボタンUI。
分類
使う場面
- 投稿やコメントへの軽い反応を、コメントより低コストで集めたいとき
- オン/オフの状態と件数を同時に見せたいとき
避ける場面
- 賛成/反対など意味のある投票結果に使うとき（→評価UIや投票UI）
- 複数種類の感情表現を出し分けたいとき（→リアクション絵文字ピッカーのような別UI）
近縁種との比較
いいねボタンはクリックのたびにオン/オフが切り替わるトグル型のボタンで、状態を表す aria-pressedと件数表示を同時に持つ点が、単発のアクションを実行するだけの通常のボタンと異なる。 ui-patterns.comなどでは「Like / Reaction」としてまとめて扱われる通り、ハートやいいねアイコンだけ でなく感情表現全般を指す通称としても使われる。コピーボタンも同じ「クリック後にその場で状態が 変わる」特化型ボタンだが、コピーボタンの状態変化が一過性で元に戻るのに対し、いいねボタンの状態は ユーザーが再度押すまで保持される永続的なトグルである点が異なる。
実例リンク
アクセシビリティ
- role
- button[aria-pressed]（トグルボタンパターン。WAI-ARIA APGのButton Patternにおけるtoggle button）
- キーボード操作
- Tabで到達、Enter/Spaceでオン/オフを切り替え
- 補足
- prefers-reduced-motion時はハートの弾む/拡大するアニメーションを無効化し、色とアイコンの即時切り替えだけで状態変化を示す。件数の増減はaria-live領域での読み上げは過剰になりやすいため、状態（押した/押していない）のみをaria-pressedで伝えるにとどめるのが定石