LINEスタンプ用画像分割ツールの使い方

登場人物

リナ社長 … 高校生なのに会社経営するやり手ギャル。テックにも強くてAI活用が得意。

タクヤ … 入社3年目の男性社員。真面目で少しだけコードが書ける。

タクヤ「社長、ツールページの画像分割ツール使ってみたんですけど、機能が意外と多くて最初ちょっと迷いました」

リナ社長「あー、確かに左パネルにわーっとオプション並んでるからね。LINEスタンプ申請まで全部ここで完結させようとしたら自然とそうなった」

タクヤ「そもそも何ができるんですか？」

リナ社長「一枚の画像をグリッドで切り刻んで、背景透過かけて、LINEスタンプ用のZIPに固めるまでがブラウザ内で全部終わる。Canvas APIとJSZipで動かしてるからサーバーに画像は一切送ってない」

機能一覧

機能	内容
対応形式	PNG・JPEG・WEBP・BMP
グリッド分割	行数・列数を指定、分割線をドラッグで微調整
背景透過	スポイトで色取得、許容値スライダーで範囲調整、リアルタイムプレビュー
複数ファイル	ファイルごとに分割線・背景色を独立管理
保存設定	プレフィックス・開始番号のカスタマイズ
通常ZIP	分割画像をそのままZIP圧縮
LINE申請用ZIP	スタンプ(370×320px)＋main.png＋tab.png(各240×240px)を自動生成

使い方

1. 画像を読み込む

タクヤ「まず画像を読み込むんですよね。ドラッグ＆ドロップでいいですか？」

リナ社長「うん。エリアにドロップか、クリックしてファイル選択。複数ファイルを一気に放り込んでもOK。PNG以外もJPEG・WEBP・BMPに対応してる」

タクヤ「複数ファイルのとき、上に並ぶタブみたいなやつが出てきました」

リナ社長「それがファイル切り替えタブ。サムネ＋ファイル名で表示される。タブをクリックするとそのファイルのプレビューと設定に切り替わる」

タクヤ「ファイルを読み込み直したいときは？」

リナ社長「「すべてリセット」ボタンで全部クリアされる。ファイルも設定も全部消えてゼロから」

2. グリッドを設定する

タクヤ「行数・列数を入れて均等に切り刻む感じですね」

リナ社長「そう。数字を設定して「グリッドリセット＆更新」を押すと均等グリッドに戻る。で、プレビュー上の赤い分割線をドラッグして位置を細かく調整できる」

タクヤ「ドラッグ、意外と操作しやすかったです。線に近づくとカーソルが変わるんですね」

リナ社長「縦線は左右矢印、横線は上下矢印に変わる。その状態でドラッグすると線が動く。ドラッグ判定は線から8px以内だから、細かくてもちゃんと掴める」

タクヤ「ファイルAは3×4、ファイルBは2×2みたいに別々の設定も保持されますか？」

リナ社長「される。ファイルごとに分割線の位置が独立して保存されてるから、タブ切り替えしても設定は混ざらない」

3. 背景を透過する

タクヤ「スポイトアイコンをクリックして、プレビュー上の背景色をクリックする感じですか？」

リナ社長「そう。スポイトモードにするとカーソルが十字になるから、抜きたい背景部分をクリックすると色が自動でセットされる。HEX値で直接入力もできる」

タクヤ「許容範囲スライダーはどう使うんですか？」

リナ社長「値を上げると、指定した色に近い色も一緒に透過される。背景が完全な白じゃなくてわずかにグレーがかってるとき、許容値を少し上げると綺麗に抜ける。逆に上げすぎると本体の色まで抜けちゃうから加減が必要」

タクヤ「「透過プレビュー」チェックボックスがありますが、これは？」

リナ社長「チェックを入れるとプレビューに透過効果がリアルタイムで反映される。許容値を動かしながらその場で確認できる。実行前に「これで合ってる？」って確認するためのやつ」

タクヤ「これ地味に便利ですね。実行してから「やり直し」ってなりにくい」

リナ社長「そう。ファイルごとに背景色の設定も独立してるから、白背景の画像と水色背景の画像が混ざってても、それぞれ別々に設定できる」

4. 保存設定（プレフィックス・開始番号）

タクヤ「「保存設定」セクションに「プレフィックス」と「開始番号」があるんですけど、これは何ですか？」

リナ社長「出力ファイルの名前を決めるやつ。デフォルトだと 01.png・02.png…って連番になるけど、プレフィックスを stamp_ にすると stamp_01.png・stamp_02.png になる。開始番号を5にすると 05.png から始まる」

タクヤ「複数バッチに分けて作業するときに番号を合わせられる感じですか？」

リナ社長「そう。1回目で01〜16まで作って、2回目は開始番号を17にして続きから出力するみたいな使い方ができる」

5. 実行とダウンロード

タクヤ「「▶ 実行」を押すと全ファイルをまとめて処理するんですよね」

リナ社長「うん。全ファイルを順番に処理して、下に分割結果のサムネが並ぶ。個別でDLしたい場合は各サムネの「DL」リンクから落とせる」

タクヤ「ZIPが2種類ありますよね。「ZIPでDL」と「LINE申請用ZIP」」

リナ社長「「ZIPでDL」は分割画像をそのままZIPにまとめるだけ。「LINE申請用ZIP」はLINEの仕様に合わせてリサイズ・加工したうえでmain.pngとtab.pngも自動生成して一緒に入れてくれる」

タクヤ「ZIPの中身はどうなってるんですか？」

リナ社長「こんな感じ」

line_stamps.zip
├── 01.png  ← 370×320px（スタンプ画像）
├── 02.png
├── ...
├── main.png  ← 240×240px（ストアメイン画像）
└── tab.png   ← 240×240px（トークルームタブ）

タクヤ「main.pngってLINEクリエイターズマーケットで必要なやつですよね。どうやって作られるんですか？」

リナ社長「分割した画像の1〜4枚目を使って自動生成される。1枚なら単体でセンターフィット、2枚なら横並び、3〜4枚なら2×2グリッドで配置。tab.pngは1枚目からそのまま作られる」

タクヤ「実行後すぐにプレビューで確認できるのも良いですね」

リナ社長「「LINE申請ファイルプレビュー」ってエリアが出て、main.pngとtab.pngの仕上がりが見える。DLする前に確認できる」

典型的なワークフロー

タクヤ「LINEスタンプを一から作るとき、どういう流れで使えばいいですか？」

リナ社長「こんな感じかな」

キャラクターを並べた素材画像を用意して一気にドロップ
タブを切り替えながら各ファイルの分割線を調整
「透過プレビュー」でチェックしながら背景色・許容値を設定
「▶ 実行」で全ファイルをまとめて処理
main.png・tab.pngのプレビューを確認
「LINE申請用ZIP」をダウンロード
LINEクリエイターズマーケットの「スタンプ画像」タブからZIP一括アップロード

タクヤ「スタンプの枚数制限って確かありましたよね？」

リナ社長「8・16・24・32・40枚のどれかにする必要がある。出力枚数がそのうちのどれかになるように素材を用意しておくといい」

タクヤ「ブラウザだけで全部完結するのは本当に楽ですね。昔は毎回スクリプト実行してたって言ってましたよね」

リナ社長「Pythonスクリプト、引数の順番を毎回忘れて --help 見てた。さすがにめんどくさくなってツールにした。ツールページからアクセスできるので使ってみて〜」