📁 Web制作

【無料Webツール公開】画像文字入れ・比率トリミング・背景透過がブラウザ完結!「画像文字入れ&ぷっくり袋文字メーカー」の使い方

#Webツール#文字入れ#背景透過#トリミング#LINEスタンプ#画像編集#個人開発

AIでかわいいイラストやLINEスタンプ用の画像を作ったのに、「文字だけ日本語が崩れてしまう」「背景透過と比率トリミングと文字入れを別々のアプリでやるのが面倒……」と感じたことはありませんか?

そんな悩みを一発で解決するために、当サイト「ちょべらっこ」オリジナルの無料Webツール「画像文字入れ・比率トリミング&背景透過メーカー」を開発・公開しました!

チョベラッコチョベラッコ

おはぽよ!
見て見てオジサン!ウチらのLINEスタンプを作るために、「単色背景の自動透過」と「比率トリミング」と「ぷっくり袋文字入れ」が全部ブラウザだけでできるツール、ガチで作っちゃったよ〜!

オジサンオジサン

お疲れ様です!画像生成AIはとても便利ですが、「日本語の細かい文字入れ」や「スタンプ規格(370×320px・余白10px)への厳密な合わせ込み」だけは、後から自力で調整した方が確実に綺麗に仕上がりますからね。
今回はこのツールの特徴と、PC・スマホそれぞれの具体的な使い方を順番に紹介していきましょう。


このツールでできること(4つの強み)

よくある「切り抜き専用サイト」や「文字入れ専用アプリ」を行き来しなくても、以下の処理がこのページ1つで完結します。

Tool Features

ブラウザ完結&100%ローカル処理で安心の4大機能

🪄
1. 外周保護つき「単色背景の自動透過」&外枠フレーム自動除去

画像の四隅・内側から背景色を自動検出し、ワンクリックで背景を透明化。さらに「外周から繋がる背景のみ透過(Flood-Fill)」に対応しているため、キャラクターの白目や白いシャツまで誤って透けてしまう事故を防げます。

📐
2. 黄金比・白銀比・16:9・LINEスタンプ規格(余白10px)の比率トリミング

デザイン定番の黄金比(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)までワンクリックで切り替えられます。

🔤
3. 13種の日本語フォント × 二重フチ × ぷっくりツヤ表現

丸ゴシック・Noto Sans JP・明朝体(Noto Serif JP)・手書き・ドット文字など13フォントを収録。内フチ+外白フチの二重袋文字、7パターンのグラデーション方向、文字の輪郭に沿う「ぷっくり輪郭ツヤ」「上部グロス帯」も自由自在です。

🔒
4. PNG / WebP / JPG 保存対応 & 画像は外部サーバーに一切送信なし

すべての画像処理はお使いの端末のブラウザ内(HTML5 Canvas)で実行されます。写真や制作中のイラストが外部サーバーへアップロード・保存されることは一切ありません。


加工実例:背景付きのイラストを一発でスタンプ化するとこうなる!

実際に、当サイトのミントグリーン背景+外枠付きイラストを本ツール(LINEスタンプ 370×320 プリセット+自動透過+ぷっくり文字入れ)で加工した Before / After がこちらです。

実例①:オジサンラッコ(横書き・小悪魔パープル×白外フチ)
Before(元画像・外枠&緑背景)
背景透過前のオジサンイラスト
➡
After(背景透過+白フチ袋文字 PNG)
背景透過+おじさん文字入れ後のLINEスタンプ画像
※LINEトーク背景(薄青)での見え方イメージ
実例②:チョベラッコ(縦書き・ギャルピンク×オレンジ+長音「!」対応)
Before(元画像)
背景透過前のチョベラッコイラスト
➡
After(370×320余白10px自動配置 PNG)
背景透過+縦書きしごでき文字入れ後の画像
※LINEダークモード背景での見え方イメージ

シール風の四角い外枠がついたイラストでも、背景色と一緒に外周の飾り枠だけを自動分離して除去しつつ、キャラクター内部の白いシャツや白目はしっかり残ったまま透明化できているのが分かります!


ステップ別・ツールの詳しい使い方(5ステップ)

画面は大きく分けて、左(スマホでは画面上部に固定)の「プレビューキャンバス」と、右(スマホでは下部のタブ)の「①〜⑤の操作パネル」で構成されています。

STEP 1:画像を読み込み、単色背景を透過する

  1. 「📁 自分の画像を選択」から、手持ちの画像(PNG / JPG / WebP)を読み込みます。まだ手元に画像がない場合は、「サンプル1(緑背景オジサン)」「サンプル2(チョベラッコ)」ボタンですぐに動作を試せます。
  2. イラストの単色背景を消したい場合は、「単色背景を自動透過」にチェックを入れます(写真やバナーにそのまま文字入れしたい場合はチェックを外してください)。
  3. 「🔄 四隅自動」で背景色が自動ピックアップされますが、うまく別の色を拾ってしまう場合は、「💧 スポイト」ボタンを押してキャンバス上の消したい背景部分をクリックすれば、ピンポイントで透過色を指定できます。
  4. 輪郭に少し背景色のフチが残るときは、「透過の許容幅」スライダー(または右側の数値ボックスへの直接入力)を少し大きめ(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%)」で配置を微調整できるほか、キャンバス上部のドラッグ切替で「🖼️ 画像移動」を選べば、マウスや指でイラスト自体を直接ドラッグして好きな位置に動かせます。

オジサンオジサン

画像の位置調整を固定の px ではなく、キャンバスサイズに対する「%指定(-100%〜+100%)」にしたことで、高解像度の写真でも、96×74pxの極小タブ画像でも同じ感覚で端から端まで動かせるのがこだわりポイントです。


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種)・グラデ方向・二重フチ(袋文字)

  1. ワンクリック配色プリセット16種:
    • 「ギャルピンク」「ピーチ×黄」「神ゴールド」「チョコミント」「小悪魔パープル」「黒×金フチ」など、押すだけで文字色2色と相性の良い内フチ色がセットされます。
    • 「⇄ 色入替」ボタンで上下の色をワンタッチで反転できます。
  2. グラデーション方向(7種類):
    • 「1文字ずつ(上→下 / 下→上 / 左→右 / 斜め)」か、「テキスト全体(上→下 / 左→右)」か、または「単色」を選べます。スタンプのロゴ感は「1文字ずつ 上から下」、タイトルバナー感は「テキスト全体」がおすすめです。
  3. 二重フチ(内フチ + 外白フチ):
    • 黒や濃茶の「内フチ」で文字をくっきりさせた上で、さらに「外フチ(白など)」を3〜6px程度追加すると、写真や濃い背景の上でも文字が埋もれない立体的なステッカー風の袋文字になります。

STEP 5:保存形式(PNG / WebP / JPG)を選んでダウンロード

最後に用途に合わせてファイル形式を選択し、「💾 この設定で画像をダウンロード」を押せば完了です!

  • PNG(背景透過・推奨):LINEスタンプの提出用や、背景が透けたアイコン・ロゴ素材に。
  • WebP(画質設定可):透過を保ったままファイルサイズを劇的に軽くしたいブログ記事・Webサイト用画像に。
  • JPG(画質設定可):透過が不要な写真・SNS投稿用画像に(※透明部分は自動で白背景で塗りつぶされます)。

スマホ(390px幅)での快適な使い方

チョベラッコチョベラッコ

てかさ、スマホで画像編集サイト開くと、下のスライダーいじってる間に肝心の画像が画面外に消えて見えなくなる問題、あるあるじゃね?

オジサンオジサン

まさにその通りですよね。そこでこのツールでは、スマホやタブレットの画面幅(860px以下)で開いたとき専用のレイアウトを組み込みました。

スマホでアクセスすると、自動的に以下の「2段分割・操作モード」に切り替わります。

  1. プレビューキャンバスを画面上部にピタッと固定(Sticky表示): 画面の上部約3割にプレビューが常時固定されるため、サイズや色を調整しても仕上がりを見失いません。
  2. 操作パネルは「STEP 1〜5」の5タブ切替: キャンバスのすぐ下に並ぶ STEP 1 画像・透過 〜 STEP 5 保存 のタブをタップするだけで、スクロールせずに手元ですべての設定を切り替えられます。

まとめ

チョベラッコチョベラッコ

LINEスタンプ制作はもちろん、ブログのアイキャッチの16:9切り抜きや、YouTube・SNS画像へのデカ文字入れまで、これ1ページあればマジで秒で終わるっしょ!
ブックマークしてバンバン使い倒しちゃって〜!

オジサンオジサン

Webツール自体は純粋なブラウザ側の仕組みだけで動いていますので、登録も待ち時間もなく、いつでも無料で気軽にお使いいただけます。ぜひ制作作業のお供に活用してみてください!