Rating (レーティング)

    Rating コンポーネントを使用すると、ユーザーは製品、サービス、ページ、その他のエンティティなどの項目またはエクスペリエンスに評価を適用できます。Rating には、単一ユーザーまたは集計されたスター レーティングを表示でき、ユーザーが独自のスター レーティングを設定できるようにするために使用されます。Rating は、Ignite UI for Angular Rating コンポーネントと視覚的に同じものです。

    Rating のデモ

    Figma での Rating の使用

    Rating はラベルと値から構築されます。値はレーティングのスケールの数値です。ラベルはブール型プロパティを使用してオン/オフを切り替えることができます。レーティングのスケール内のアイコンの数は合計 5 つ星に事前定義されていますが、より多くのレーティングのアイコンを含む Rating をデザインする必要がある場合、最も簡単な方法は、コンポーネントをワークスペースに挿入することです。その後、コンポーネントを右クリックするとコンテキスト メニューが開き、Detach instance が選択され、次のデタッチされたレイヤー構造が表示されます。

    レイヤー 使用
    🚫 componentVersion   禁止されたアイコンで開始する特定のロックされたレイヤー。このレイヤーはコード生成に必要なため、削除または変更しないでください。
    🚫 metadata 禁止されたアイコンで開始する特定のロックされたレイヤー。このレイヤーはコード生成に必要なため、削除または変更しないでください。
    Label 不要な場合は変更または非表示にできるテキスト レイヤー。
    Value すべてのレーティング アイコンが含まれています。

    デタッチした後、Value フレームにネストされている既存のレーティング アイコンのいずれかを複製することでレーティング アイコンの数を増やすことができ、自動レイアウトのおかげでサイズが調整されます。

    レーティング アイコンの数を減らすために、コンポーネントをデタッチする必要はありません。[レイヤー] パネルから不要なアイコンを非表示にすることができます。

    Sketch での Rating の使用

    Sketch の Rating コンポーネントは、ラベルと値セクションを含む Figma とほぼ同じ構築要素を共有し、デフォルトで 5 つのレーティング アイコンが付属しています。さらに多くのレーティング アイコンが必要な場合は、コンポーネントを右クリックし、コンテキスト メニューから Detach from Symbol を選択して、コンポーネントをデタッチする必要があります。デタッチすると、次のレイヤーが表示されます:

    レイヤー 使用
    🚫 metadata 禁止されたアイコンで開始する特定のロックされたレイヤー。このレイヤーはコード生成に必要なため、削除または変更しないでください。
    Label 不要な場合は変更または非表示にできるテキスト レイヤー。
    Value すべてのレーティング アイコンが含まれています。

    レーティング アイコンの数を増減するには、Value シンボルの上で Detach from Symbol オプションを再度使用し、既存のレーティング アイコンのいずれかを複製または削除することで、アイコンの希望の数を達成できます。

    Adobe XD での Rating の使用

    Note

    WIP: 現在、Adobe XD では Rating コンポーネントはサポートされていません。

    操作状態

    Figma では、挿入時にRating コンポーネントがデフォルトで常に有効になります。プロパティ パネルから無効にできますが、Sketch では、Rating を有効または無効の状態で挿入できます。

    状態

    Rating コンポーネントには Empty State (空の状態) があり、Figma のブール型プロパティからオンとオフを切り替えることができます。さらに、Figma には、Empty State とは逆の Value プロパティがあり、0 ～ 5 の事前定義されたオプションから Value の達成を選択できます (星半分もサポート)。Sketch では、~Symbol Overrides を使用してこれを簡単に実現できます。

    サイズ

    Rating には、小、中、大の 3 つのサイズがあります。

    スタイル設定

    Rating には、値アイコンの色とタイプ、およびラベルのテキストの色の変更に使用できるオプションを通じて、スタイルを柔軟に設定できます。ただし、テキストの読みやすさを最適化するために、テーマの明度に基づいて、事前定義された色とアイコン タイプを使用することをお勧めします。

    使用方法

    星は非常に認識しやすいランキングのシンボルであり、人々は他のシンボルをレーティング　スケールと関連付けないかもしれません。星をカスタム シンボルに置き換える場合は、その目的が明確であることを確認してください。同色の似た色合いや色収差を生じる組み合わせなど、コントラストの低い色は避けるようにします。アイコンの選択は強調され、視覚的に明確な外観を持つ必要があります。

    良い例 悪い例

    コミュニティに参加して新しいアイデアをご提案ください。