ラベルクリックで星が表示される評価アイコンの実装方法

本記事では、セレクトフィールドの選択内容に応じて★マークで視覚的に評価を表示するシステムの実装方法を紹介します。

評価システムを導入するだけで、ユーザーの選択内容が直感的に把握でき、入力体験の向上とエンゲージメント向上に寄与します。軽量で既存フォームに簡単に組み込み可能です。

ポイント: ★マークによる視覚的評価表示でユーザビリティが大幅向上

導入効果
- 選択内容の即座な視覚化でユーザー体験向上
- 直感的な★マーク表示で評価の理解が容易
- リアルタイム更新で選択結果が一目瞭然
- 軽量・依存なしで既存フォームにすぐ追加

できること（メリット詳細）

デモサイト

デモサイトで動作をご確認頂けます。セレクトフィールドで評価を選択すると、リアルタイムで★マークが表示される動作をご確認ください。

視覚的評価: セレクト選択と同時に★マークが動的に表示される
UX向上: 選択内容が即座に視覚化され、入力体験がリッチに
直感的理解: 1-5段階の評価が★マークの個数で一目瞭然
導入容易: 既存フォームにHTML/JSを追加するだけ
カスタマイズ可能: ★マークのスタイルや色を簡単に変更可能

コードの説明と実装方法

★マーク表示エリアの設置方法

<div>
  <div class="stars" id="star_storeScore">☆☆☆☆☆</div>
</div>

実装方法

既存のセレクトフィールドに★マーク表示機能を追加する場合は、上記のHTMLをセレクトフィールドの上部に追加してください。
重要: セレクトフィールドにIDが設定されていない場合は、selectタグに

id="select_storeScore"

を設置してください。
その後、★エリアのIDを

id="star_storeScore"

に設定してください。
別の評価項目の場合は、例：selectタグに

id="select_productScore"

を設置 → ★エリアに

id="star_productScore"

のように対応させてください。

★マーク制御のJavascript

<script>
    const starSelector_store = document.getElementById('select_storeScore');
    const starDisplay_store = document.getElementById('star_storeScore');
    const totalStars = 5;

    function updateStars(selector, display) {
        const selectedValue = parseInt(selector.value, 10);
        let starsHTML = '';
        for (let i = 1; i <= totalStars; i++) {
            if (i <= selectedValue) {
                starsHTML += '<span class="star filled">★</span>';
            } else {
                starsHTML += '<span class="star empty">★</span>';
            }
        }
        display.innerHTML = starsHTML;
    }
    starSelector_store.addEventListener('change', () => {
        updateStars(starSelector_store, starDisplay_store);
    });
    starSelector_store.dispatchEvent(new Event('change'));

</script>

実装方法

<body class="body">

タグ内の一番下に設置してください。
セレクトフィールドの値が変更されると、自動的に★マークが更新されます。

★マークのスタイル（CSS）

.stars {
font-size: 24px;
}

.star {
  font-size: 24px;
  margin: 0 2px;
}

.star.filled {
  color: #DF781E;
  /* 選択された星の色 */
}

.star.empty {
  color: #8f8f8f;
  /* 未選択の星の色 */
}

実装方法

★マークの色やサイズを調整するCSSです。
ページ内の

<style>

タグ内に記載してください。
色やサイズはお好みに応じて変更可能です。

実装が終わるとこのようなHTMLソースになります（参考用）

<dl class="cf">
    <dt class="title">
        評価<span class="need">必須</span>
    </dt>
    <dd class="data ">
        <div>
            <div class="stars" id="star_storeScore">☆☆☆☆☆</div>
        </div>
        <select id="select_storeScore" class="$errorInputColor:storeScore$" name="storeScore">
            <option value="">----- 選択してください -----</option>
            <option value="1" $storeScore:1$>1</option>
            <option value="2" $storeScore:2$>2</option>
            <option value="3" $storeScore:3$>3</option>
            <option value="4" $storeScore:4$>4</option>
            <option value="5" $storeScore:5$>5</option>
        </select>
  
        <span class="msg">$error:storeScore$</span>
    </dd>
</dl>

参考

上記は完成したフォームの例です。★マーク表示エリア、セレクトフィールド、エラーメッセージが含まれた完全な実装例となります。
実際の実装では、上記の各セクションで説明したコードを組み合わせてこの形になります。

カスタマイズ（★マークの見た目変更ガイド）

上記の「★マークのスタイル（CSS）」のCSSを変更することで、★マークの色やサイズを簡単にカスタマイズできます。

ポイント
CSSのクラス指定を変更するだけなので、プログラムの知識がなくても安心して調整できます。

1. ★マークの色を変更する

「★マークのスタイル（CSS）」の以下の部分を変更すると、★マークの色をカスタマイズできます。

塗りつぶし★の色:
```
.star.filled
```
の
```
color: #DF781E;
```
を好きな色に変更
空の★の色:
```
.star.empty
```
の
```
color: #8f8f8f;
```
を好きな色に変更

おすすめ色:
・ゴールド（#FFD700）
・オレンジ（#FF8C00）
・赤（#FF0000）
・青（#0066CC）など

2. ★マークのサイズを変更する

「★マークのスタイル（CSS）」の以下の部分を変更すると、★マークのサイズを調整できます。

★のサイズ:
```
.star
```
の
```
font-size: 24px;
```
の数値を変更
★同士の間隔:
```
.star
```
の
```
margin: 0 2px;
```
の数値を変更
全体のサイズ:
```
.stars
```
の
```
font-size: 24px;
```
の数値を変更

3. 複数の評価項目に対応する場合

JavaScript内のID名を変更することで、複数の評価項目に対応できます。

HTML側: selectタグに
```
id="select_storeScore"
```
を設置し、★エリアのIDを
```
id="star_storeScore"
```
に設定
JavaScript側:
```
getElementById
```
で指定するIDを同じ名前に変更
例: 商品評価なら selectタグに
```
id="select_productScore"
```
、★エリアに
```
id="star_productScore"
```
など

4. 作業の流れ（かんたん手順）

1. セレクトフィールドにIDを設定: selectタグに
```
id="select_storeScore"
```
を設置
2. ★表示エリアを追加: 「★マーク表示エリアの設置方法」を参考にして既存のセレクトフィールド上部に★表示エリアを追加
3. CSSを追加: 「★マークのスタイル（CSS）」のCSSをページの
```
<style>
```
タグ内に追加
4. JavaScriptを追加: 「★マーク制御のJavascript」のJavaScriptをページ下部に追加
5. ID名の調整: ★表示エリアのIDを
```
id="star_storeScore"
```
に設定（select_storeScore → star_storeScore）
6. SPIRALへ反映し、ブラウザで表示を確認

5. うまく動作しない時

HTMLのIDとJavaScriptのIDが一致しているか確認してください。
selectタグのIDが
```
id="select_storeScore"
```
なら、★エリアのIDは
```
id="star_storeScore"
```
になっているか確認してください。
ブラウザをリロードしてください。

【お知らせ】本実装の構築代行・カスタマイズを承ります

記事でご紹介した内容や、貴社の要件に合わせた柔軟なカスタマイズ開発を承っております。

SPIRALの専門チームが要件定義から実装まで一貫してサポートいたしますので、まずはお見積もりをご依頼ください。

カスタマイズの見積もりを依頼する

開発情報・ナレッジ

できること（メリット詳細）

コードの説明と実装方法

★マーク表示エリアの設置方法

実装方法

★マーク制御のJavascript

実装方法

★マークのスタイル（CSS）

実装方法

実装が終わるとこのようなHTMLソースになります（参考用）

参考

カスタマイズ（★マークの見た目変更ガイド）

1. ★マークの色を変更する

2. ★マークのサイズを変更する

3. 複数の評価項目に対応する場合

4. 作業の流れ（かんたん手順）

5. うまく動作しない時

【お知らせ】本実装の構築代行・カスタマイズを承ります

関連記事