Tier表をPNG画像で保存する方法 - 背景・枠・ラベルと端末別の動作
公開: 2026-06-10 ／ Sortpia編集部
Sortpiaでは、公開済みTier表の共有メニューから画像作成画面を開き、タイトル、ランク、配置済みアイテムをPNGへ書き出せます。背景、枠、文字ラベルを選べますが、保存方法は端末とブラウザで異なり、外部画像の取得条件によっては画像部分が欠けます。この記事では、実装されている設定、端末別の保存処理、失敗時の確認、公開前の権利確認を説明します。
公開済みTier表から画像作成画面を開く
対象のTier表を公開した後、編集画面の「共有」から画像で共有する項目を選びます。画像作成画面には現在のタイトル、ランク順、配置済みアイテムが表示されます。未配置パレットの項目やコメント、いいね、チャット、説明文は出力画像へ含まれません。
公開直後に配置を変更した場合は、画像作成前に最新状態が保存されているか確認します。過去バージョンを閲覧している場合や編集権限がない場合など、同じ操作が表示されないことがあります。保存後の画像は静的なPNGなので、後からTier表を更新しても自動更新されません。
5種類の背景・4種類の枠・ラベルを選ぶ
背景は白、暗色、グラデーション、紙風、透明の5種類です。枠はなし、シンプル、角丸、影付きの4種類から選べます。アイテムの文字ラベルは表示・非表示を切り替えられます。透明背景はプレビュー上で市松模様に見えますが、PNGの透明部分を確認するための表示です。
暗色とグラデーションでは文字色も暗い背景用になります。長いラベルはアイテム幅に合わせて省略されるため、画像だけで項目名を伝える場合は短いラベルへ整えます。背景や枠を変えた後、ランク名、画像、文字のコントラストをプレビューで確認してください。
出力サイズと縦長画像を確認する
Canvas APIがタイトルと各ランクを専用レイアウトへ描画します。ランク内のアイテムが横幅を超えると折り返し、ランク数やアイテム数が増えるほど画像の高さも増えます。特定SNSの正方形や横長比率へ自動トリミングする機能ではありません。
保存前に、すべてのランク、折り返したアイテム、末尾の`sortpia.com`表記まで表示されるか確認します。縦長になりすぎる場合は、用途ごとにTier表を分ける、ラベルを短くする、投稿先で縮小された状態でも判別できる画像へ替える方法があります。
スマートフォンとPCで保存処理が異なる
タッチ端末でブラウザがファイル共有に対応している場合、PNG生成後にOSの共有シートを開きます。表示される保存先やアプリは、OS、ブラウザ、インストール済みアプリに依存します。「写真へ保存」が常に表示される、写真アプリへ自動保存されるとは限りません。共有をキャンセルした場合は保存されません。
それ以外の環境では、対応ブラウザなら保存先選択画面を開き、未対応または失敗時は通常のブラウザダウンロードへ切り替わります。基本ファイル名は「Tier表タイトル_sortpia.png」です。保存先、ファイル名、ダウンロード通知を確認し、完成ファイルを一度開いてください。
画像が欠ける場合は取得条件を確認する
画像作成画面は、配置済みアイテムの画像を取得してdata URLへ変換し、Canvasへ描画します。画像URLが無効、認証が必要、配信元がブラウザからの取得を許可しない、通信が失敗した場合は、そのアイテムの画像が欠ける可能性があります。プレビューに見えていても出力結果を必ず確認します。
欠けた場合は元画像が現在も公開されているか、自分に利用権限があるか、別ブラウザでも再現するかを確認します。CORS制限を回避するために無断で別サイトへ再アップロードせず、自分で撮影・作成した画像、利用条件が明確な素材、または文字ラベルへ置き換えてください。
SNSや資料へ載せる前に権利と文脈を確認する
PNGを生成できることは、含まれる写真、キャラクター、ロゴ、商品画像、人物の肖像を再配布できることを意味しません。各画像のライセンス、引用条件、ブランドガイドライン、公開範囲を確認します。出典表記が必要でも画像内へ十分に入らない場合は、投稿文や掲載ページで補ってください。
画像だけでは評価軸、対象期間、未評価、更新日が失われやすいため、短い説明と公開Tier表へのリンクを併記します。画像投稿がURL投稿より反応を増やすとは一律に保証できません。投稿先の推奨比率、代替テキスト、ファイル容量を確認し、実測結果に基づいて使い分けます。
よくある質問
Q. どこからPNG画像を作れますか？
A. 公開済みTier表の編集画面で共有メニューを開き、画像で共有する項目から画像作成画面へ進みます。
Q. 背景を透明にできますか？
A. はい。白、暗色、グラデーション、紙風、透明の5背景から選べます。透明はPNGのアルファとして出力されます。
Q. スマホでは写真アプリへ直接保存されますか？
A. 端末と共有先によります。対応時はOSの共有シートが開きますが、写真への保存が常に表示されるとは限りません。
Q. 画像が一部表示されないのはなぜですか？
A. 元画像の公開状態、通信、認証、CORS条件等で取得できない可能性があります。権利を確認できる別素材か文字ラベルへ置き換えてください。
Q. 未配置アイテムも画像に入りますか？
A. いいえ。出力対象はタイトル、ランク、配置済みアイテム、選択したラベル等で、未配置パレットは含まれません。
さっそくTier表を作ってみよう
Sortpiaなら、登録から公開まで5分。無料で何個でも作れます。
関連記事
- 投稿済み画像を検索・追加する方法 - 表示条件と再利用前の権利確認 — 検索候補を権利処理済み素材と誤認せず、自分が再利用できる画像だけを選ぶための機能ガイドです。
- Tier表をブログへ埋め込む方法 - iframeコード・高さ調整・表示されない時の確認 — 埋め込み先の仕様とセキュリティ設定を確認し、公開Tier表を崩さず表示するための実装準拠ガイドです。
- Tier表をX・SNSで共有する方法 - OGP画像・共有シート・キャッシュの確認 — 共有先で正しいタイトルと画像を表示するために、公開範囲・サムネイル・キャッシュ・権利を確認する手順です。