Tier表のランク色を変更する方法 - プリセットと見やすい配色

標準6色とパステル・補助色

ランク編集画面には14色のプリセットがあります。標準色は赤 `#ef4444`、橙 `#f97316`、黄 `#eab308`、緑 `#22c55e`、青 `#3b82f6`、紫 `#8b5cf6` の6色です。

加えて、パステル赤 `#ff7f7f`、パステル橙 `#ffbf7f`、パステル黄 `#ffdf7f`、パステル緑 `#bfff7f`、パステル青 `#7fbfff`、ピンク `#ec4899`、グレー `#9ca3af`、濃いグレー `#374151` を選べます。色名は選択画面のツールチップで確認できます。

ランクの色を変更する手順

編集画面で対象ランクの編集を開き、色の四角を選びます。プリセット以外を使う場合はカラーピッカーを操作するか、`#`に続く6桁のHEX値を入力します。入力形式が不正な場合はグレー `#9ca3af` が使われます。

新しいランクでは、追加位置も同じ画面で指定できます。既存ランクを編集する場合は色と名前を確認して保存し、通常表示と画像書き出しの両方で意図した色になっているか確認してください。

色の意味は作者が決める

赤から紫の並びはTier表でよく見かける配色ですが、各色に普遍的な心理的意味があるとは限りません。文化、テーマ、周囲の色、画面設定によって印象は変わります。赤を必ず最高評価、紫を必ず最低評価にする必要もありません。

重要なのは、表の中で対応が一貫していることです。独自の配色を使う場合は、S・A・B等のランク名や「おすすめ」「保留」等の意味が読めるようにし、説明文にも評価軸を記載します。

色覚多様性とコントラストを確認する

Sortpiaはランクに文字ラベルも表示するため、色だけに頼らない手掛かりがあります。ただし、ユーザーが自由に色を選べる以上、すべての組み合わせで十分なコントラストや識別性を保証していません。

似た明るさの色を連続させない、ランク名を空にしない、縮小表示とダークモードでも確認する、グレースケール表示でも境界と文字を判別できるか試す、という確認が有効です。企業やイベントで公開する場合は、実際の利用者と端末で読みやすさをテストしてください。

目的別の配色例

迷う場合は標準6色を上から順に使うと、一般的なTier表に近い見た目になります。保留や未評価はグレー、特別枠はピンクなど、評価軸とは別の状態に補助色を使う方法もあります。

ブランド色を使う場合でも、ロゴの色をそのまま全段に当てる必要はありません。背景色と白文字の組み合わせを確認し、見分けにくい段だけ明度を調整します。季節や作品を連想させる配色は装飾として使い、評価の意味は必ずランク名で伝えてください。

よくある質問

さっそくTier表を作ってみよう

Sortpiaなら、登録から公開まで5分。無料で何個でも作れます。

Tier表を作る →

関連記事

• Sortpiaの8種類のデザインテーマ - 切り替え方と表示上の注意 — 8種類のテーマを正しく切り替え、内容と閲覧環境に合う表示を選ぶための実装準拠ガイドです。
• スマホでTier表を作る方法 - タップ配置と操作のコツ — スマホでTier表を編集するときの2つの配置方法と、画面が狭いときに迷わない進め方を紹介します。
• Tier表エディタのキーボード操作 - DeleteとEscの使い方 — 実装済みの3キーと削除時の注意点を、未対応の操作と分けて解説します。