【自作LINEスタンプ制作記】AIで「チョベラッコ」のLINEスタンプを作ってみた!背景透過・サイズ規格の壁を乗り越えて公開するまでの全手順

【無料Webツール公開】画像文字入れ・比率トリミング・背景透過がブラウザ完結!「画像文字入れ&ぷっくり袋文字メーカー」の使い方
AIでかわいいイラストやLINEスタンプ用の画像を作ったのに、「文字だけ日本語が崩れてしまう」「背景透過と比率トリミングと文字入れを別々のアプリでやるのが面倒……」と感じたことはありませんか?
そんな悩みを一発で解決するために、当サイト「ちょべらっこ」オリジナルの無料Webツール「画像文字入れ・比率トリミング&背景透過メーカー」を開発・公開しました!
画像文字入れ・比率トリミング&背景透過メーカー
登録不要・完全無料!LINEスタンプ規格(370×320)や黄金比・白銀比・16:9トリミング、単色背景の自動透過(スポイト対応)、ぷっくり袋文字・白フチ文字入れがブラウザだけで完結します。
今すぐツールを開く →
チョベラッコ
オジサンこのツールでできること(4つの強み)
よくある「切り抜き専用サイト」や「文字入れ専用アプリ」を行き来しなくても、以下の処理がこのページ1つで完結します。
ブラウザ完結&100%ローカル処理で安心の4大機能
画像の四隅・内側から背景色を自動検出し、ワンクリックで背景を透明化。さらに「外周から繋がる背景のみ透過(Flood-Fill)」に対応しているため、キャラクターの白目や白いシャツまで誤って透けてしまう事故を防げます。
デザイン定番の黄金比(1:1.618)・白銀比/大和比(1:1.414)・白金比(1:1.732)や 16:9・4:3・3:2・1:1、カスタムpxに加え、LINEスタンプ(370×320・メイン240×240・タブ96×74)までワンクリックで切り替えられます。
丸ゴシック・Noto Sans JP・明朝体(Noto Serif JP)・手書き・ドット文字など13フォントを収録。内フチ+外白フチの二重袋文字、7パターンのグラデーション方向、文字の輪郭に沿う「ぷっくり輪郭ツヤ」「上部グロス帯」も自由自在です。
すべての画像処理はお使いの端末のブラウザ内(HTML5 Canvas)で実行されます。写真や制作中のイラストが外部サーバーへアップロード・保存されることは一切ありません。
加工実例:背景付きのイラストを一発でスタンプ化するとこうなる!
実際に、当サイトのミントグリーン背景+外枠付きイラストを本ツール(LINEスタンプ 370×320 プリセット+自動透過+ぷっくり文字入れ)で加工した Before / After がこちらです。




シール風の四角い外枠がついたイラストでも、背景色と一緒に外周の飾り枠だけを自動分離して除去しつつ、キャラクター内部の白いシャツや白目はしっかり残ったまま透明化できているのが分かります!
ステップ別・ツールの詳しい使い方(5ステップ)
画面は大きく分けて、左(スマホでは画面上部に固定)の「プレビューキャンバス」と、右(スマホでは下部のタブ)の「①〜⑤の操作パネル」で構成されています。
STEP 1:画像を読み込み、単色背景を透過する
- 「📁 自分の画像を選択」から、手持ちの画像(PNG / JPG / WebP)を読み込みます。まだ手元に画像がない場合は、「サンプル1(緑背景オジサン)」「サンプル2(チョベラッコ)」ボタンですぐに動作を試せます。
- イラストの単色背景を消したい場合は、「単色背景を自動透過」にチェックを入れます(写真やバナーにそのまま文字入れしたい場合はチェックを外してください)。
- 「🔄 四隅自動」で背景色が自動ピックアップされますが、うまく別の色を拾ってしまう場合は、「💧 スポイト」ボタンを押してキャンバス上の消したい背景部分をクリックすれば、ピンポイントで透過色を指定できます。
- 輪郭に少し背景色のフチが残るときは、「透過の許容幅」スライダー(または右側の数値ボックスへの直接入力)を少し大きめ(40〜60程度)に上げると綺麗に馴染みます。
【コツ】背景プレビューを切り替えて消し残しチェック!
キャンバス上部にある背景ボタン(透明グリッド/LINE青/ダーク/白/黒)を切り替えると、白背景では気づかないフチの残りや、ダークモードで目立つ白ジャギーを一瞬で確認できます。プレビュー枠のサイズは出力画像と全く同じサイズ(fit-content)になっているため、余白のバランスもそのまま把握できます。
STEP 2:サイズ・比率プリセットを選んでトリミング&位置調整
使いたい用途に合わせて比率プリセットボタンを選びます。
| 用途カテゴリ | 選べるプリセット | おすすめの使いどころ |
|---|---|---|
| LINEスタンプ規格 | スタンプ(370×320) メイン(240×240) タブ(96×74) |
スタンプ画像を10pxの安全余白込みで自動縮小・センタリング。タブ画像は横幅いっぱいにアップ配置。 |
| 基本・カスタム | 元サイズ / カスタムpx / 1:1 | 解像度を落とさずそのまま文字入れしたい時や、SNSアイコン(正方形)、任意のpx指定に。 |
| 美しさの黄金比・白銀比 | 黄金比(1:1.618) 白銀比(1:1.414) 白金比(1:1.732) |
サムネイルやバナー、日本の印刷物・カードに近い安定感のある比率で美しく切り抜きたい時に。 |
| Web・写真定番 | 16:9 / 4:3 / 3:2 | YouTubeサムネイル、ブログのアイキャッチ、一眼カメラ写真のトリミングに。 |
右上の「🔄 縦横入替」ボタンを押せば、16:9を9:16(スマホ縦長・ショート動画用)にしたり、縦長の黄金比・白銀比に一瞬で反転できます。
また、「画像ズーム(20〜250%)」と「画像 横位置・縦位置(-100%〜+100%)」で配置を微調整できるほか、キャンバス上部のドラッグ切替で「🖼️ 画像移動」を選べば、マウスや指でイラスト自体を直接ドラッグして好きな位置に動かせます。
オジサンSTEP 3:文字入力・フォント・縦書き/横書き・ツヤ効果
入れたいセリフやタイトルを入力したら、文字のデザインを整えます。
- フォント13種類(4ジャンル):
- 丸ゴシック・ポップ系:
M PLUS Rounded 1c/Zen Maru Gothic/Kosugi Maru(スタンプ定番のぷっくり感) - 角ゴシック・太字系:
Noto Sans JP/M PLUS 1p/Dela Gothic One/RocknRoll One(ブログ・YouTube向けの視認性) - 明朝体・セリフ系:
Noto Serif JP/Shippori Mincho B1/Kaisei Decol(エモい・和風・上品な印象に) - 手書き・個性派系:
Yusei Magic/Hachi Maru Pop/DotGothic16(ゆるかわ系やレトロゲーム風)
- 丸ゴシック・ポップ系:
- 縦書き・横書き:
- 縦書きにした際、日本語の長音符「ー」や波ダッシュ「〜」「…」は自動的に90度回転して縦書き仕様になるため不自然になりません。
- 文字の移動&傾き:
- ドラッグモードが「🔤 文字移動」の状態でキャンバス上の文字を掴んで動かせます。「文字サイズ」「文字の傾き(°)」はスライダーでも数値の直接入力でも調整可能です。
- ぷっくりツヤ効果:
- 従来の「丸い点を置くだけ」ではなく、文字の形に沿って左上の輪郭がキラッと光る「✨ ぷっくり輪郭ツヤ」、上半分にグラデーション光沢が入る「🌈 上部グロス帯」、その両方を組み合わせた「💎 輪郭ツヤ+上部グロス帯」から選べます。
STEP 4:配色プリセット(16種)・グラデ方向・二重フチ(袋文字)
- ワンクリック配色プリセット16種:
- 「ギャルピンク」「ピーチ×黄」「神ゴールド」「チョコミント」「小悪魔パープル」「黒×金フチ」など、押すだけで文字色2色と相性の良い内フチ色がセットされます。
- 「⇄ 色入替」ボタンで上下の色をワンタッチで反転できます。
- グラデーション方向(7種類):
- 「1文字ずつ(上→下 / 下→上 / 左→右 / 斜め)」か、「テキスト全体(上→下 / 左→右)」か、または「単色」を選べます。スタンプのロゴ感は「1文字ずつ 上から下」、タイトルバナー感は「テキスト全体」がおすすめです。
- 二重フチ(内フチ + 外白フチ):
- 黒や濃茶の「内フチ」で文字をくっきりさせた上で、さらに「外フチ(白など)」を3〜6px程度追加すると、写真や濃い背景の上でも文字が埋もれない立体的なステッカー風の袋文字になります。
STEP 5:保存形式(PNG / WebP / JPG)を選んでダウンロード
最後に用途に合わせてファイル形式を選択し、「💾 この設定で画像をダウンロード」を押せば完了です!
- PNG(背景透過・推奨):LINEスタンプの提出用や、背景が透けたアイコン・ロゴ素材に。
- WebP(画質設定可):透過を保ったままファイルサイズを劇的に軽くしたいブログ記事・Webサイト用画像に。
- JPG(画質設定可):透過が不要な写真・SNS投稿用画像に(※透明部分は自動で白背景で塗りつぶされます)。
スマホ(390px幅)での快適な使い方
チョベラッコ
オジサンスマホでアクセスすると、自動的に以下の「2段分割・操作モード」に切り替わります。
- プレビューキャンバスを画面上部にピタッと固定(Sticky表示): 画面の上部約3割にプレビューが常時固定されるため、サイズや色を調整しても仕上がりを見失いません。
- 操作パネルは「STEP 1〜5」の5タブ切替:
キャンバスのすぐ下に並ぶ
STEP 1 画像・透過〜STEP 5 保存のタブをタップするだけで、スクロールせずに手元ですべての設定を切り替えられます。
まとめ
チョベラッコ
オジサン画像文字入れ・比率トリミング&背景透過メーカーを開く
登録不要・完全無料!スマホでもPCでもそのまま使えるブラウザ完結型の画像編集&スタンプ文字入れツールです。
ツールを使ってみる →
【自作LINEスタンプ制作記】AIで「チョベラッコ」のLINEスタンプを作ってみた全手順
LINEスタンプ第1弾の申請〜公開までの失敗談・レギュレーションまとめ・自動スクリプト構築の裏側はこちら!
制作記を読む →

