ティアリストメーカー

ティアリストメーカーについて

画像や文字の項目をS・A・B・C・D・Fなどのランク行にドラッグしてティア表を作り、PNG画像やリンクで共有するツールです。画像はファイル選択、ドラッグ＆ドロップ、Ctrl+Vでの貼り付けで追加でき、名前だけの文字項目も作れます。

ティア表は1位から順番に並べるランキングとは違います。同じ行の中の順序はあまり問題にならず、まず「このくらいの格」という帯を決める方式なので、項目が30、50と増えても判断しやすいのが利点です。その代わり、AとBの境目にあるものをどこに置くかは必ず議論になります。

ティア表は格闘ゲームのコミュニティから生まれた

キャラクターを格付けする文化は、1991年のストリートファイターII以降の対戦格闘ゲームの大会文化とともに育ったと説明されるのが一般的です。米ゲームメディアInverseは、今見かける形式のティア表がネットに広まったきっかけとして鉄拳4のコミュニティを挙げ、2005年のフォーラム投稿が「God Tier」などの呼び名を定着させたと紹介しています。その後スマブラのコミュニティを経てリーグ・オブ・レジェンドなど別のジャンルへ、さらに食べ物や映画まで何でも格付けするYouTubeの定番形式へと広がりました。

もともとの基準は「大会で勝てるかどうか」という比較的客観的なものでした。いまのティア表は好みを表すことが多いので、作る前に基準を1つ決めてタイトルに書いておくと、見る人との無駄な言い合いが減ります。このツールのプリセットにS〜Fのほか「神作〜駄作」「推し〜無理」「必須〜非推奨」「非常に難しい〜とても簡単」がある理由です。

行の色と文字色

標準パレットは赤から紫へ下がる9色で、行がそれより多いときは最後の色を12%ずつ暗くしてつなげ、灰色に落ちないようにしています。パステル・ネオン・オーシャン・サンセット・モノクロのパレットもあります。

行ラベルの文字色は、背景色の相対輝度（WCAGで定義された明るさの計算）を求め、黒い文字と白い文字それぞれのコントラスト比を計算して、大きいほうを使います。黄色の行に白い文字が乗って読めないことも、グレー（#808080）のような中間の明るさの行にコントラストの低い白文字が乗ることもありません。

画像の保存場所と縮小

追加した画像は長辺440ピクセルに縮小し、WebP（品質0.88、非対応ブラウザではPNG）に変換してこのブラウザのストレージに自動保存します。編集の手を止めて0.5秒後に保存し、タブを閉じる瞬間にももう一度保存します。

ブラウザのストレージにはサイトごとの容量上限があり、画像が非常に多いと保存に失敗することがあります。その場合は「保存容量が不足しています」という通知が出ます。画面上の作業は残っていますが、再読み込みすると最後に保存できた時点に戻ります。大きな作業はJSONファイルに保存しておくと、別の端末でもそのまま読み込めます。

元に戻すは直近60手まで記憶します。

共有リンクの仕組み

「共有リンクをコピー」を押すと、ティア表全体をJSONにしてブラウザ内蔵の圧縮（deflate）で縮め、URLの#の後ろに入れます。#以降はサーバーに送信されないため、リンクが7,000文字以下ならサーバーを一切通りません。

画像があるとリンクはすぐ長くなります。7,000文字を超えるとまず画像を長辺96ピクセル・品質0.6に縮め直し、30,000文字を超えると画像を外して文字と配置だけを入れます。それでも超える場合はリンクを作りません。

リンクに収まらないときはサーバー保管を選べます。このサイトで作ったものがサーバーに送られる唯一の経路で、確認画面で「はい」を選んだときだけ送られます。保管期間は1時間・1日・1年（未使用の場合）から選び、誰かがコードを開くたびに期限が延びます。

PNGで保存するとき

PNGは画面のスクリーンショットではなく、キャンバスに描き直したものです。表の幅から1行に入るマス数を計算してはみ出した分は折り返し、空の行も1マス分の高さを保ちます。保存倍率は1×・2×・3×で、初期値は2×です。マスが84ピクセルなら2×では168ピクセルで描かれます。ブラウザが対応していれば、ファイル保存の代わりにクリップボードへ直接コピーもできます。

例

使い方

1. プリセット（S〜F、星、好みなど）を選び、タイトルを入れます。
2. 画像をドロップ・貼り付け・選択し、必要なら文字項目を追加します。
3. 待機列の項目を各ランク行へドラッグします。
4. PNGで保存するか共有リンクをコピーします。

よくある質問