ドキュメント
tierrr.com のサイト全般や、各種ツール（Tier List Maker（テンプレート、カスタムテンプレート）、画像セットジェネレータ）の使い方や仕様について解説します。
ツールは開発効率を優先し、英語で設計されています。
トップページから各アプリページに飛ぶことができます。
テンプレートの各タイトルには画像セットが用意されており、すぐに使うことができます。括弧内の数字は画像の総数となります。
カスタムテンプレート は、自身で用意した画像ファイルを使用したオリジナルのTier表を作成することができます。
画像セットジェネレータ は、カスタムテンプレートで使用する画像セットを生成するためのツールになります。保有する画像をまとめて加工し、保存することができます。
トップページにはサイト全体の更新日時が記載されています。更新時にはすべてのアプリにおけるTier表の状態や設定がすべて初期化されますのでご了承ください。
Tier List Maker の使い方
アプリページを開くと、デフォルトでA～Fのラベルを持つTier表が用意されています。下部の画像をドラッグ＆ドロップで移動させることができます。画像セットの下の領域には不要な画像を入れてボタンで開閉することができます。
Tier表上部には、「←」「→」「Reset」「Add a Row」「Preview」ボタンがあります。
「←（元に戻す）」は、編集を1つ前の状態に戻します。
「→（やり直し）」は、編集を1つ後の状態に戻します。
「Reset（リセット）」は、Tier表やカードセットの状態を初期状態に戻します。
「Add a Row（行を追加）」は、Tier表の最下部に新しい行を追加します。
「Preview（プレビュー）」は、Tier表を画像出力するプレビュー画面を開きます。
～ プレビュー画面の説明 ～
プレビュー画面では、作成したTier表の出力画像を確認できます。編集画面のTier表とは異なり、こちらには1枚のPNG画像で表示されています。以下で紹介する「Download」で保存されるものと同じ画像のため、右クリックメニューの「名前を付けて画像を保存」や「画像をコピー」にて直接保存することもできます。
出力画像の上部には、列数指定用のセレクトボックス、「Download」「Close」ボタンがあります。
「Columns:（列数）」のセレクトボックスで、各行の画像の列数を 1～20 の範囲で指定できます。
「Download（ダウンロード）」は、出力画像を PNG形式 で保存します（保存場所はデバイスによりますが、Windowsでは「ダウンロード」ディレクトリに保存されます）。
「Close（閉じる）」は、プレビュー画面を閉じて編集画面に戻ります。
～ プレビューの説明終わり ～
各行の左端のラベルは、クリックで編集可能です。Enterキーで改行でき、ラベル外をクリックすることで編集モードを抜けます。
各行の右端の3点メニューを押すと、行に対する設定メニューを開きます。
上部のカラーボタンで、ラベルの色を変更します（12色 + グレーから選択可）。
「Move Up（上に移動）」は、行を1つ上に移動します。
「Move Down（下に移動）」は、行を1つ下に移動します。
「Remove Images（画像を削除）」は、行の画像をすべて削除します（画像領域に移動）。
「Delete Row（行を削除）」は、行を削除します。
ヘッダー右端には、「Slim」「Quantity」「Pin」「Lock」の切り替えボタンと、XS～XLの画像サイズ調整ボタンがあります。
「Slim（ラベル収縮表示）」を有効にすると、ラベルが長い場合に幅を折りたたんで表示します（ラベル編集中は元の幅で表示）。
「Quantity（枚数表示）」を有効にすると、各領域に存在する画像枚数を表示します。
「Pin（画像領域固定配置）」を有効にすると、画像領域を下部に固定配置し、画面を上下に分割します。画像枚数が多い場合などにTier表間の画像の移動が楽になります。
「Lock（操作ロック）」を有効にすると、編集に関するあらゆる操作を無効にします。スマホでのスクロール時などに便利です。
「XS、S、M、L、XL」の5段階で画像サイズを変更できます。
これらヘッダーの設定は編集効率をサポートするためのもので、出力画像には影響しません。
カスタムテンプレートの独自仕様
カスタムテンプレートもテンプレートのものと基本的な使い方は同じですが、一部仕様に違いがあるので説明します。
Tier表上部の「Add Image」ボタンで画像を追加できます（複数の画像をまとめて追加できます）。
画像は PNG、JPG、JPEG、GIF、BMP、WEBP、SVG、ICO などのあらゆる形式に対応しています（透過画像にも対応）。
画像は幅160pxの同サイズに成形されるため、あらゆるサイズで問題なく利用できます。
画像サイズは最初に読み込まれた画像のアスペクト比（縦横比）に統一されます。
カスタムテンプレートではデータを保存しないため、ブラウザを更新するとすべての状態がリセットされます。
「Reset」ボタンではTier表がリセットされ、追加した画像は画像領域に移動します。
画像を追加すると、「元に戻す」「やり直し」の記憶がリセットされます。
カスタムテンプレートでは基本的には幅、高さの同じ（もしくは近い）画像の使用を想定しています（例えばカードゲームの公式サイトから抽出したカード画像など）。そのため、アスペクト比が大きく異なる画像を使用する場合は、まとめて160 x 160[px]の正方形に成形できる画像セットジェネレータにてあらかじめ整形すると便利です。
画像セットジェネレータの使い方
画像セットジェネレータは、カスタムテンプレートで使用する画像セットを生成するためのツールとなります。手元の画像をまとめて160 x 160[px]に成形して、自由に並び替えた後「1.png」形式の連番のファイル名でPNG形式の画像として保存することができます。
「BreakingDown」の画像を生成するために使用していたものを一般向けに改良したものになります。BreakingDownのシーズン毎に動画から選手の画像を抽出してテンプレートを作っていましたが作業が大変だったため断念し、カスタムテンプレートでの利用をサポートするためにこのツールを開発しました。
使い方の例としては、動画をスクショしてペイントツールなどで人物の顔の部分だけが収まるようにサイズ調整して保存します。「Add Image」にてそれらの画像を読み込むと、160 x 160[px]の正方形に成形されたものがリストに並びます。リスト内の画像はドラッグ＆ドロップにて並び替えが可能です。
「Download」ボタンで、リスト内の画像を「1.png」形式の連番のファイル名でPNG形式の画像として保存します。
大量の画像の場合出力に時間がかかったり、ダウンロードディレクトリに大量の画像が保存されるため、まずは数枚で動作確認することをおすすめします。
読み込み可能な画像の形式はカスタムテンプレートでの説明と同じです。
生成される画像は PNG形式 となります。透過画像の場合、透過も保持されます。
画像が整形される仕様は、後述する「Cover/Contain」ボタンの設定によります。
各ボタンの説明:
「Cover/Contain（覆う、含む）」が無効（Contain、初期状態）の場合、画像全体が160 x 160[px]の正方形に収まるように、幅、高さの "長いほう" を基準に成形します。そのため、もともと正方形でない画像では余白ができます。
「Cover/Contain（覆う、含む）」が有効（Cover）の場合、正方形の領域を画像が埋めるように、幅、高さの "短いほう" を基準に成形します。そのため、もともと正方形でない画像でも余白ができません。
「Circle/Square（円、正方形）」を有効にすると、画像を円形にクリッピングします。
「Fill Background（背景を塗りつぶす）」を有効にするとカラーパレットの操作が有効になり、成形で出た余白を指定色で塗りつぶします（透過画像の場合、透過部も塗りつぶされます）。