コンポーネント
評価(レーティング)
Rating
評価とは、星などのアイコンを並べ、そのうち何個を選んで点数をつける入力方式のことです。
定義
レーティングは、星のようなアイコンをいくつも並べ、そのうち何個を選ぶかで点数を つける入力方式です。もっとも見慣れた形は五つの星で、マウスを星の上に乗せるとその 位置まで先に塗られ、どの点数になるかをプレビューしてくれます。実際にクリックすると、 その値で点数が確定します。乗せて見るプレビューと、押して決める確定を分けておくのが レーティングの特徴です。点数をつけるための入力としてだけ使われるわけではなく、 すでに集計された平均評価を見せるだけの表示専用としてもよく登場します。この二つは 目的がはっきり違うので、押せるのか押せないのかをユーザーが迷わないよう、見た目の 時点で区別してあげる必要があります。
なぜ重要か
レーティングが大切なのは、複雑な評価をたった一つの単純な操作に圧縮してくれるから です。ユーザーは長い文章を書かなくても、星を数個押すだけで満足度を表現でき、参加の ハードルが大きく下がります。そうして集まった評価は、ほかのユーザーにとっては選択を 支える確かな判断材料になります。私たちは知らない商品やコンテンツを選ぶとき、まず平均 の星の数と評価件数をざっと眺め、信頼できるかどうかを素早く判断します。つまり レーティングは、片方では手軽な表現手段であり、もう片方では圧縮された信頼情報でも あって、少ない手間でサービス全体に価値あるデータを積み上げてくれる、小さくても 影響力の大きい要素です。だからこそ、正確に、そして正直に扱うことが重要になります。
よくある間違い
- ホバー時のプレビューと、クリックによる確定を区別していないケースです。マウスを 乗せただけで点数が決まってしまったり、逆に押しても何も変わらなかったりすると、 ユーザーは自分が何点をつけたのか確信が持てず戸惑い、望まない値が残る失敗に つながります。
- 表示専用の評価を、入力できるように見せてしまうケースです。押せそうな星を押したのに 何も起きなければ、壊れていると誤解されてしまいます。
- 一度つけた点数を取り消したり、つけ直したりする方法を用意しないケースです。誤って 押してしまったユーザーが値を直せないと、次からは評価そのものを残さなくなります。
実務のヒント
- 乗せて見るプレビューと、押して決める確定をはっきり分けましょう。プレビュー状態と 確定状態を色や塗りで違って見せると、押し間違いが減り、ユーザーは自分の選択に確信を 持てるようになります。
- 点数を見せるだけの表示用と、実際に入力を受け付ける入力用をはっきり区別しましょう。 表示専用なら、カーソルの形や大きさで押せないという印象を与え、ユーザーがつい押して みて反応がないと慌てる事態を防ぎます。
- アクセシビリティのために、星のアイコンとあわせて数値も提供しましょう。星五つ中 四つのように文字でも読めれば、スクリーンリーダー利用者に役立つうえ、0.5刻みの 評価も表現でき、検索や並べ替えにもその値をそのまま活用できます。
AIに頼む
5段階の星評価入力コンポーネントを作って。マウスを星の上に乗せると、その位置まで先に塗って何点になるかを見せるホバープレビューと、実際にクリックして初めて値が確定する確定状態を必ず分けて。プレビューの塗りと確定後の塗りは色か明度を変えて、ユーザーが自分の点数を確信できるようにして。一度選んだ点数はもう一度押して別の値に変えたり0点に戻せるようにして、星グラフィックの横に「5点満点中4点」のようにテキストとaria-labelで数値も一緒に提供して。
[商品/コンテンツ名]の平均評価[例: 4.3]を星5つで見せる表示専用レーティングを作って。これは入力じゃなく読み取り専用だから、クリックイベントやホバーの塗りは入れないで、cursorもpointerじゃなくdefaultにして、押せそうな印象を絶対に与えないようにして。4.3のような小数は半分(half)単位で星を部分的に塗って、星の横に「4.3 / 5(レビュー128件)」のように数値と評価数をテキストで一緒に出して。スクリーンリーダー用にaria-labelには「5点満点中4.3点」を入れて。
下に貼り付けるレーティングコードを4つの観点で点検して。① ホバープレビューとクリック確定が分かれているか — マウスを乗せただけで点数が決まったり、押しても変化がないなら直して。② 表示専用なのにpointerカーソルやホバー効果のせいで入力のように見える(または逆に、入力なのに表示に見える)箇所がないか。③ 一度付けた点数を変えたり戻したりする方法があるか。④ 星の横に「5点満点中4点」のような数値とaria-labelがあるか。各項目を合格/不合格で表示して、失敗した箇所は修正コードを出して。