ティアリスト作成ツール

ティアリストとは何か、何ではないのか

ティアリストは、比較できる項目をS、A、B、Cなどの順序付きの段階に分類するものです。通常、上の行ほど、選んだ基準に対する好み、性能、適合度が高いことを示します。このツールが点数を計算したり、どの項目をどこに置くか決めたりすることはありません。

そのため、ティアリストは次の2種類のボードとは目的が異なります。

好きなアルバム、製品候補、ゲームのキャラクター、また作りたいレシピ、優先したいアイデアなど、意見や比較による判断にはティアリストが向いています。完了状況を記録するならチェックリスト、項目が作業工程を進む場合はカンバンボードを使います。

順位付けの前に、分かりやすいティアを決める

初期設定のS〜Fは慣例であり、必須ではありません。判断内容に合わせて、最高／良い／検討／見送り、第一候補／予備／不適合など、意味が明確な尺度に変更できます。ティア行は最大12行です。

項目を動かす前に評価基準を決めましょう。「コストパフォーマンスが高い」と「品質が高い」では、まったく異なる結果になる場合があります。説明なしで書き出した画像を見せるなら、具体的なタイトルと分かりやすい行名を付けると意図が伝わりやすくなります。

同じティア内でも項目の順序を変更できます。行の中でも左から右へ好みの順を示したい場合は並び順を使い、そうでなければ同じ行の項目は同等として扱います。

テキスト項目と端末内の画像

ボードに追加できる項目は合計100個までで、そのうち画像は60枚までです。テキスト項目は名前、候補、アイデアなどに適しています。画像はブラウザ内で正規化されるため、元画像の大きさが異なっても一定のタイルに収まり、不要な画像メタデータは保存プロジェクトに引き継がれません。

入力画像の対応形式はPNG、JPEG、WebPです。1ファイルは最大8 MiB、一辺は最大8192ピクセル、デコード後の画素数は最大16メガピクセルです。受け付けた画像は必要に応じて端末内で最大512 × 512ピクセルに縮小されます。プロジェクト内の正規化済み画像データは合計32 MiBまでです。

外部画像のURLとSVGのアップロードには意図的に対応していません。デコード済みの端末内ラスター画像だけを入力対象にすることで、外部リソース切れ、オリジン間のCanvasエラー、能動的なSVG/XMLコンテンツを避けられます。OWASPのFile Upload Cheat Sheetでも、多層的なアップロード防御として、必要な形式だけを許可すること、容量制限を設けること、申告されたMIMEタイプ以外も検査すること、画像を書き直すことが推奨されています。

ドラッグ操作は必須ではありません

ドラッグ＆ドロップは便利ですが、順位付けの方法はそれだけではありません。項目にフォーカスして移動ボタンを使うか、EnterまたはSpaceキーでキーボード移動モードに入れます。矢印キーで移動先のティアと位置を選び、EnterまたはSpaceで確定、Escapeでキャンセルします。

細かなドラッグが難しいスマートフォンでも、この方法なら編集しやすくなります。WCAG 2.2のドラッグ操作に関するW3Cの解説では、ドラッグを使う機能に、より簡単なポインター操作の代替手段が必要な理由を説明しています。このツールでは同じ移動を、ドラッグ、キーボード、クリックまたはタップで行えます。

このブラウザに保存される内容

タイトル、ティア、項目のテキスト、画像データ、順位は、この端末のブラウザストレージに保存されます。編集データとしてページのURLに入ることも、サーバーへ送信されることもありません。端末内の復元用コピーにはIndexedDBを使用するため、通常の再読み込みなら作業を復元できます。

端末内の復元機能はクラウドストレージではありません。別のブラウザや端末からプロジェクトを見ることはできず、サイトデータを消去すると削除されます。同じブラウザプロファイルを使う人が再び開ける可能性もあります。共有端末ではプロジェクトを消去を使い、確実なバックアップが必要なときはプロジェクトJSONを書き出してください。

JSON、PNG、SVGは用途が異なります

JSONを読み込む際は、現在のプロジェクトを置き換える前に内容を検証します。壊れている、未対応、または容量超過のファイルを選んでも、開いているプロジェクトは変更されません。プロジェクトJSONの上限は48 MiBです。

PNGは正規化済みの端末内画像を使ってブラウザ内で直接描画されます。ダウンロードの作成にはブラウザ標準のcanvas.toBlob()メソッドを使用します。外部画像を使わないため、Canvasがオリジン間データによって汚染されず、書き出し可能な状態を保てます。

SVGは、少数の非対話型の図形、テキスト、画像要素から生成されます。項目のPNG・JPEG・WebP画素データはSVG内に埋め込まれますが、トレースされてベクターに変換されるわけではありません。MDNではSVGの<image>要素がラスター画像を表示できることを説明しています。書き出すファイルに、アップロードされた任意のSVG、スクリプト、リンク、HTMLがコピーされることはありません。

安定した書き出しのための上限

書き出し幅は800、1200、1600、2400ピクセルです。PNGは、生成されるビットマップが一辺8192ピクセル以内かつ16 × 1024 × 1024ピクセル（約16.8メガピクセル）以内に収まる場合、1×または2×で生成できます。2×でブラウザの安全上限を超える場合、勝手に縮小せず問題を案内します。SVGの書き出しにも同じ48 MiBのプロジェクトおよびファイルの安全上限が適用されます。

初期設定では、未分類の項目は完成画像に含まれません。最後に中立な行として表示したい場合は、未分類の項目を含めるをオンにします。必ずプレビューを確認してください。タイトルが非常に長い、行や項目が多いといった場合、技術上は有効なボードでも小さく共有すると読みにくくなることがあります。

ティアリストでよくある間違い

• 途中で基準を変える。 順位付けの前に比較基準をタイトルへ書きましょう。
• 分かりにくい行名を使う。 「検討」や「避ける」などのラベルは、説明のない色より多くの情報を伝えます。
• ティアを正確な点数として扱う。 同じ段階の項目は分類を共有しますが、別の段階との距離が測定値になるわけではありません。
• 未分類プールを忘れる。 未分類の項目は、完成版の書き出しに自動では含まれません。
• プロジェクトファイルだけを共有する。 JSONはエディターを再び開くための形式です。相手が結果を見るだけならPNGまたはSVGを使います。