SWELLの評価スターの使い方｜比較表で魅せるコツ

2026年10月26日

※本記事はアフィリエイト広告を含む記事へのリンクを含みます。

商品レビューや比較記事で、評価を星の数でわかりやすく見せたいと思っていませんか。私は以前、記号の「★」を手入力していたため、半分の星が表現できず、スマホでは記号の見た目もばらばらになっていました。

この記事では、SWELLの評価スターの使い方を、入力するショートコードまで具体的に初心者向けに解説します。実際の失敗談も交えるので、読みながら進めれば、ひと目で伝わるきれいな評価を表示できます。

※まだエックスサーバーを契約していない方へ：今月は最大30%OFFの限定キャンペーンが開催されています。この記事の手順を見ながら進めれば、初心者でも最短10分で国内シェアNo.1の高速ブログを開設できますよ。

➡️【公式】エックスサーバーの限定特設ページはこちら

早めに申し込むほど、キャンペーンの割引をしっかり活かせます。

ニャフィ

レビュー記事に、星の評価を入れたいのにゃ！

たいがブログ

星があると、評価がひと目で伝わりますよね。

ニャフィ

半分の星とかも、ちゃんと表示できるのかにゃ？

たいがブログ

0.5刻みで表示する手順を、5つのステップで解説しますね。

▼あわせて読みたい：比較記事やレビュー記事も快適に表示できるサーバー選びについては、こちらの記事で詳しく紹介しています。

SWELLの評価スターとは

評価スターは、星の数で点数をわかりやすく表示できるSWELLの機能です。0.5刻みの半分の星も表示できるので、細かな評価の違いもきちんと伝えられます。

筆者は記号の「★」で代用していたころ、端末によって星の形や大きさが違って見えることに悩んでいました。SWELLの評価スターならどの端末でも同じデザインで表示されるので、安心して使えます。

星の数で評価をひと目で伝えられる

「満足度は高め」と文章で書くより、星4.5のように見せたほうが直感的に伝わります。流し読みする読者にも、商品の評価がすぐにわかるのが大きなメリットです。

比較表や商品レビューで活躍する

評価スターは、複数の商品を比べる表やレビュー記事のまとめで特に役立ちます。項目ごとに星を並べると、どの商品が何に強いのかがひと目でわかります。

SWELLの評価スターの使い方

評価スターは、ショートコードを入力するだけで表示できます。エディターのツールバーからも呼び出せるので、コードを覚えていなくても大丈夫です。

筆者はAFFINGER6を使っていたころ、星を表示するためのタグを調べながら入力していました。SWELLはツールバーから選ぶだけで入力できるので、レビュー記事を書く手間がぐっと減りました。

ショートコードで点数を指定する

評価スターは、「」のように入力して使います。前の数字が点数、後ろの数字が満点なので、表示したい評価に合わせて書き換えましょう。

表の中に入れて比較しやすくする

評価スターは、テーブルブロックのセルの中にも入れられます。比較表に入れると、数字より直感的に違いが伝わるので、読者が商品を選びやすくなります。

STEP

星を入れたい位置を選ぶ

記事の編集画面で、評価スターを表示したい段落や表のセルをクリックします。カーソルのある位置に星が入るので、場所を決めてから操作しましょう。

STEP

ツールバーから評価スターを選ぶ

ツールバーのショートコードのメニューから評価スターを選びます。見つからない場合は、「」を直接入力しても同じように表示されます。

STEP

点数と満点を書き換える

ショートコードの数字を、表示したい評価に書き換えます。筆者は全角で「４．５」と入力して星が出なかったので、数字は必ず半角で入力しましょう。

STEP

比較表のセルにも入れる

比較表を作る場合は、各セルに同じ形式で評価スターを入れます。満点の数字をそろえることで、商品同士を正しく比べられる表になります。

STEP

プレビューで表示を確認する

編集画面ではショートコードのまま表示されるので、プレビューで星になっているか確認します。スマホでも星が崩れていないかチェックしておきましょう。

評価スターを効果的に使うコツ

評価スターは、使い方しだいで読者の信頼にも影響する装飾です。ここでは、実際にレビュー記事を書きながら効果を感じたコツを紹介します。

筆者はモニターの比較記事を書いたとき、「価格」「目の疲れにくさ」「作業のしやすさ」など評価の基準を先に決めてから星を付けました。基準がはっきりしていると、星の数に説得力が生まれると実感しています。

評価の基準と理由をはっきり書く

星の数だけでは、読者はなぜその評価なのかがわかりません。実際に使って感じた良い点と気になる点を添えて、正直な評価を伝えることが信頼につながります。

星を使う場所を絞る

記事のあちこちに星を入れると、どこが大事なのかぼやけてしまいます。比較表や記事の最後のまとめなど、評価をまとめて見せる場所に絞って使いましょう。

評価スターのチェックポイント

数字を半角で入力している
同じ記事の中で満点の数字をそろえている
評価の基準と理由を文章で添えている
プレビューで星が表示されるか確認している

▼あわせて読みたい：評価スターを使って実際の使用感をまとめた、筆者愛用の作業用モニターのレビューはこちらです。

よくある質問

ショートコードがそのまま表示されてしまいます。: 編集画面ではショートコードのまま見えるのが普通です。プレビューでも星にならない場合は、数字が全角になっていないか、かっこの形が正しいかを確認しましょう。
星の色を変えることはできますか？: 星の色は、追加CSSを使えば変更できます。ただし初心者のうちは、サイトのデザインになじむ初期の色のまま使うのがおすすめです。
評価スターを入れるとSEOに効果がありますか？: 星そのものが検索順位を直接上げることはありません。ただし評価がひと目で伝わり、読者が記事を読みやすくなる点で、記事の満足度アップにつながります。
商品リンクと組み合わせて使えますか？: 使えます。Pochippの商品ボックスの直前に、評価スターと短い感想を入れると、読者が購入を判断しやすくなります。