いいねボタン
Like button投稿やコンテンツへの好意的な反応をワンタップで表明し、オン/オフの状態と件数を同時に示すトグル型のボタンUI。
○ 使う場面
- 投稿やコメントへの軽い反応を、コメントより低コストで集めたいとき
- オン/オフの状態と件数を同時に見せたいとき
× 避ける場面
- 賛成/反対など意味のある投票結果に使うとき(→評価UIや投票UI)
- 複数種類の感情表現を出し分けたいとき(→リアクション絵文字ピッカーのような別UI)
別名
リアクションボタン、ハートボタン、いいね
近縁種との比較
ui-patterns.comなどでは「Like / Reaction」としてまとめて扱われる通り、ハートやいいねアイコンだけでなく感情表現全般を指す通称としても使われる。
| 近縁種 | 違い・使い分け |
|---|---|
| ボタン | クリックのたびにオン/オフが切り替わるトグル型のいいねボタンは、状態を表すaria-pressedと件数表示を同時に持つ点が、単発のアクションを実行するだけの通常のボタンと異なる。 |
| コピーボタン | コピーボタンも同じ「クリック後にその場で状態が変わる」特化型ボタンだが、コピーボタンの状態変化が一過性で元に戻るのに対し、いいねボタンの状態はユーザーが再度押すまで保持される永続的なトグルである点が異なる。 |
分類
機能・役割
- ナビゲーション
- 入力・操作
- 表示・整理
- フィードバック・状態
表示レイヤー
- インライン
- 固定・追従
- オーバーレイ
- 全画面・遷移
複雑さ
- 単体パーツ
- 複合パーツ
- セクション