スターレーティング(星評価)をおしゃれにするCSSスニペット13選。5段階評価☆彡
ウェブサイトに五段階評価を表示！スターレーティング(星評価)デザインのCSSサンプルをまとめました。
趣向を凝らしたデザインが素敵なウェブサイト・ブログが増えています。アクセスした利用者に評価をしてもらう仕組みを用意してあるサイトも増えています。
口コミや評価レビューサイトでは必須の機能と言えるでしょう。
本記事ではフォームの中でも「スターレーティング(星評価)」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。
なお、本記事ではレーティングのデザインサンプルをまとめた記事になります。
サイトに評価システム自体を実装・追加したい場合は、自分でコーディングするか以下のようなライブラリ・プラグインを利用する必要があります。
- Raty – A Star Rating Plugin(jQueryライブラリ)
- WP-PostRatings(WordPressプラグイン)
- Comment Rating Field Plugin(WordPressプラグイン)
評価システムの実装については本記事では触れません。別途記事を書いていますので、実装については以下を参考にしてください。
https://kodocode.net/design-js-raty/
シンプルなスターレーティング(星評価)のCSSデザイン例(クリックやマウスオーバーで動きあり)。
基本形のシンプルなレーティング。簡単なCSS＋スクリプトで実装できる。
See the Pen
Awesome jQuery rating with font awesome by shahjehan (@shahjehan)
on CodePen.
スターレーティング(星評価)の基本系になります。
シンプルなHTML+CSS+JSで構成されています。JSではマウスオーバーやクリックでclassを書き換えることで、動きを付けています。
レーティングデザインの基本系として非常に参考になりますね。
ラジオボタン＋SVG＋SCSSのスターレーティング。
See the Pen
CSS: Radio Input Stars by Jake Albaugh (@jakealbaugh)
on CodePen.
評価の★の表現方法はいくつかありますが、本サンプルはラジオボタン＋SVG＋SCSSで実装されています。
ラジオボタンで入力されていることがわかりやすいです。
柔らかいデザインのスターレーティング。Lessで実装
See the Pen
Rating in pure HTML5/CSS3 by Khoné Vongsouthi (@khone-vongsouthi)
on CodePen.
こちらは星の形が柔らかく可愛らしいスターレーティングデザインになっています。空の星も太めの白枠に囲まれていて素敵ですね。
Lessで実装されており、★評価の個数をカウントして表示したりなど、作り込まれています。
★がキラっと光る星評価デザイン。
See the Pen
CSS Unicode Star Rating by Joseph Fusco (@fusco)
on CodePen.
シンプルなデザインサンプルなのですが、★評価をONにすると光っているように見えるデザインになっています。
見栄えがよく素敵ですね。
スターレーティングは★★★★★以外でもOK。Font-Awesomeアイコンでバリエーション。
See the Pen
Day 27: star rating by Mandy (@racoonsmakeokayfriends)
on CodePen.
こちらはFont-Awesomeアイコンで、★部分を様々な他のアイコンで表示しているサンプルになります。
星評価みたいなことをしたいけど、★以外で表示したい場合は参考になるかと思います。
Font Awesomeアイコンについては以下記事を参考にしてください。
モックアップのみのスターレーティングのCSSデザイン例(動きはありません)。
星半分も小数点以下の指定表示もできる星評価デザイン。
See the Pen
Tiny but accessible 5 star rating by Fred Genkin (@FredGenkin)
on CodePen.
動きはないサンプルですが、5段階評価の★を小数点以下の単位で表示できるサンプルになります。
コードを見るとわかりますが、「2.3」が評価値として指定されていて、3つ目の★は1/3部分だけに色が付いています。
Bootstrap＋Glyphiconsのシンプルな星評価モックアップ。星半分あり。
See the Pen
Bootstrap Glyphicon Half-Star hack by Leo Gono (@leogono)
on CodePen.
こちらはBootstrap＋Glyphiconsのシンプルなスターレーティングデザインです。
halfクラスに対応するCSSを用意することで、0.5の評価値を実現しています。複数のCSSを用意することで、0.1単位の評価表示をするように改造することも出来そうですね。
サイトカラーに合わせてデザインされたスターレーティング。
See the Pen
WooCommerce CSS SVG Star Rating by Jan Wagner (@janwagner)
on CodePen.
スターレーティングといえば、黄色の★をイメージする人も多いかもしれませんが、こちらのサンプルは青系のサイトカラーに合わせてレーティングの色も変えています。
スターレーティングをうまくウェブサイトに馴染ませるデザインの参考になりそうですね。
凄い！美しすぎる星評価アニメーションのCSSデザイン例。
マウスオーバー時のアニメーション、5段階評価完成時の動きが美しいスターレーティング。
See the Pen
stars by Jordan-Simonds (@jexordexan)
on CodePen.
★にマウスオーバーすると、少し傾く動きをします。さらに★5個すべてをONにすると、★全体が光ります。
黒系のサイトカラーと星の色の明度がコントラストになっていますし、デザインとして完成度が高いスターレーティングデザイン例ですね。
非常に素敵だと思います。
マウスオーバーで星が起き上がるスターレーティング。
See the Pen
Star rating by Giel Berkers (@kanduvisla)
on CodePen.
こちらは★が寝た状態になっていて、マウスオーバーすると光って起き上がります。
面白い動きのサンプルです。
バーの操作で評価値が変わるスターレーティングデザイン。
See the Pen
star rating experiment by tamak (@tamak)
on CodePen.
★をクリックするのではなく、上部のスライダーバーを操作することで、レーティングが変わるデザイン例です。
半分星、1/4星の評価も指定できて、割と使い勝手が良さそうですね。
表情が変わる？！遊び心満載の星評価デザイン。
See the Pen
simple star rating by Mert Cukuren (@knyttneve)
on CodePen.
評価を上げていくと表情が変わっていきます。レビュー評価などで感情を表したいときに良さそうですね。
★5個のときの表情はなんの表情なんだろう・・・？（笑）
完成度が高いアニメーションのスターレーティングデザイン。
See the Pen
Star Rating Animation by Roxy (@roxy225)
on CodePen.
★のクリックで波紋が広がったり、バウンドする動きをする、楽しいアニメーションの星評価デザインサンプルです。
星を事前に半分づつ設置することで、0.5の評価指定もマウスで設定することができるようにしてあります。
非常に凝った造りになっていて素晴らしいデザインサンプルですね！
ウェブサイトのフォームをおしゃれにするCSSスニペットシリーズ記事一覧
フォームの各入力要素のスニペットはシリーズ記事化していますので、こちらの記事も参考にしてください。
