ティア表メーカー(Tier表を画像で作成)

ティア表メーカーは、S・A・B・C・D の段に画像や文字を並べて、ティア表(tier 表)を 1 枚の PNG 画像にする無料ツールです。 段の名前・色・数を変えられ、項目はドラッグで段へ動かします。スマホでも指でそのまま並べ替えられます。

ティア表は、好きなキャラクター、作品、食べ物、ゲームの武器などを「どれくらい好きか」「どれくらい強いか」で段に分けた表です。 いちばん上の S が最上位で、A、B、C、D と下がっていきます。 X に貼って「自分ならこう並べる」と見せ合う遊び方が広まっていて、同じお題でも人によって並びが違うところに面白さがあります。

1. 必要ならタイトルを入れます。画像のいちばん上に白い文字で入ります
2. 「画像を追加」から並べたい画像をまとめて選びます。文字だけの項目は入力欄に書いて「追加」を押します
3. 追加した項目は「未配置の項目」に並びます。1 つずつドラッグして、入れたい段へ動かします
4. 段の名前や色を変えたいときは「段の名前・色・数を変える」を開きます
5. 並べ終わったら「PNG 画像で保存」を押します。画面に出ている並びのまま画像になります

ティア表の画像はどんな大きさで保存される?

保存される画像の横幅は、項目の数にかかわらず 1,200px で固定です。 高さは段の数と、それぞれの段に入れた項目の数で決まります。

画像の左端には幅 140px の段の名前の欄があり、その右に一辺 100px の正方形の項目が 4px 間隔で並びます。 1 行に入るのは 10 個までで、それを超えると同じ段の中で次の行へ折り返します。 1 行の段の高さは 108px、1 行増えるごとに 104px ずつ高くなります。タイトルを入れると上に 72px の帯が付きます。

最初の 5 段に 3 個、5 個、8 個、4 個、2 個と入れ、タイトルを付けた場合は72 + 108 × 5 = 612px で、1,200×612px の画像になります。 S の段だけ 25 個に増やすと、S は 3 行に折り返し、画像は 1,200×820px に伸びます。 上限の 100 個を 10 段に 10 個ずつ入れても 1,200×1,152px で、 スマホの Safari でも扱える大きさに収まります。

「未配置の項目」に残っているものは画像に入りません。 保存したあとに「未配置の ○ 個は画像に入っていません」と出たら、置き忘れがないか確かめてください。

S・A・B・C・D の段の色は何色?

初期の 5 段は、英語圏の tier list でよく見かける配色に合わせ、S を赤、下の段ほど黄色から緑に寄せています。 段の名前の文字色は背景の明るさから自動で選び、明るい色の段には黒、暗い色の段には白の文字を載せます。

文字色の切り替えは、背景色の相対輝度(WCAG の定義)で判定しています。 黒い文字と白い文字のコントラスト比がちょうど等しくなる輝度はおよそ 0.179 で、それより明るい背景なら黒、暗い背景なら白を選びます。 濃い紺や黒を段の色にしても、段の名前が背景に埋もれません。

段の名前や数はどこまで変えられる?

段は 1 段から最大 10 段まで増減でき、名前は 1 段あたり 12 文字まで入れられます。 「段を追加」を押すと、まだ使っていないアルファベット(初期の 5 段なら E、次は F)を名前にした段が下に足されます。

名前は S や A のような記号でなくても構いません。「神」「推し」「好き」「普通」「苦手」のように言葉で分けると、 強さの格付けではなく好みの表として見せられます。 1〜2 文字の名前は大きく、それより長い名前は小さめの文字で 3 行まで折り返して画像に入れます。

段を消したときは、その段に入っていた項目は消えずに「未配置の項目」へ戻ります。 段の順番は ↑ ↓ で入れ替えられ、中の項目も段と一緒に動きます。

スマホで項目をドラッグするには?

スマホでは、項目を指で押さえたまま動かすと、その項目が指に付いてきます。入れたい段の上で指を離すと、その位置に入ります。 同じ段の中でも、隣の項目の左半分で離せば前に、右半分で離せば後ろに入るので、段の中の順番もドラッグで整えられます。

指の動きでページがスクロールしてしまう場合や、細かい操作がしにくい場合は、タップで動かす方法もあります。 項目をタップすると枠が付いて選ばれた状態になり、続けて段の名前(左端の色の付いた欄)をタップすると、その段の末尾へ移ります。 選んだ項目は「置き場へ戻す」で未配置に戻し、「削除」で表から消せます。 ページをスクロールしたいときは、項目のない場所を触って動かしてください。

画像の項目はどう切り抜かれる?

追加した画像は、中央を基準に正方形へ切り抜いて並べます。横長の画像は左右が、縦長の画像は上下が切り落とされます。

スマホで撮った横長の写真(4,032×3,024px)なら、 中央の 3,024×3,024px を使い、左右の 504px ずつが切り落とされます。300×200px の画像なら、左右 50px ずつを落とした 200px 四方になります。

顔やロゴが端に寄った画像は、切り抜きで欠けることがあります。 見せたい部分がある場合は、先に画像切り抜き(トリミング)で正方形に切ってから追加すると、狙った範囲がそのまま表に載ります。 iPhone の写真(HEIC 形式)を読み込めないブラウザでは、HEIC→JPG 変換で JPG にしてから追加してください。

読み込んだ画像は、その場で 200px 四方に縮めて持っておきます。 元の写真は 1 枚で数千 px 四方あり、何十枚も並べるとスマホのブラウザのメモリが足りなくなるためです。 保存する画像のタイルは 100px 四方なので、縮めても画質が落ちて見えることはありません。

文字だけのティア表も作れる?

作れます。入力欄に書いて「追加」を押すと、白地に黒い文字のタイルが項目として加わります。 手元に画像がないお題(好きな言葉、行ってみたい国、季節のイベントなど)でも、文字だけでティア表になります。

文字の項目は 1 つ 20 文字まで入れられます。 保存する画像では 100px 四方のタイルに収まるよう 1 文字ずつ折り返し、4 行に入りきらない分は末尾を「…」で省略します。 4〜6 文字程度の短い言葉にすると、大きな文字で読みやすく収まります。画像と文字の項目は同じ段に混ぜて並べられます。

作りかけのティア表は保存される?

ティア表メーカーの作りかけの表は残りません。ページを閉じたり再読み込みしたりすると消えます。 並べた内容をどこかに記録する仕組みはなく、残せるのは「PNG 画像で保存」で書き出した画像だけです。 時間をかけて並べた表は、こまめに画像で保存しておいてください。

表をそのまま他の人に見せるための共有リンクもありません。 共有したいときは保存した画像を X や LINE に貼ってください。 画像に広告やツール名の透かしは入らないので、そのまま投稿に使えます。

画像に文字や吹き出しを書き足したいときは画像に文字入れ、 何枚かのティア表を 1 枚にまとめて見比べたいときは画像結合が使えます。

キャラクターの画像を使ったティア表を投稿してもいい?

アニメやゲームのキャラクターの画像には権利者がいるため、投稿する前に作品の利用規約やガイドラインを確認してください。 このツールにあらかじめキャラクターの画像が入っていないのも同じ理由で、並べる画像は利用者が自分で用意する形にしています。

ゲーム会社によっては、配信や SNS での画像の使い方をガイドラインで定めています。 自分で撮った写真や自分で描いたイラスト、文字だけの項目なら、権利の心配なく使えます。 本ツールは表を作る手段を提供するもので、作った画像の利用について責任を負いません。