First CHTools無料Webツール

FIRST CH TOOLS / 画像 / 82 ICON PREVIEW

アイコンの丸切り抜きプレビュー（新旧比較）

アイコンを差し替える前に、今のアイコンと新しいアイコンを同じ一覧画面の中で左右に並べて見比べます。丸く切り抜かれて隠れる部分は赤く表示されるので、文字やロゴが欠けないかをその場で確かめられます。画像はお使いの端末の外へ送りません。

今のアイコン見本
押すかドロップで置く

新しいアイコン見本
押すかドロップで置く

  • 赤い部分＝選んだ形で切り抜くと隠れる範囲
  • 破線＝外周から1割内側の線（本ツール独自の目安で、各サービスの規定ではありません）
形
背景
周りのアイコン
変更前 上から3番目が今のアイコン
一覧
    変更後 上から3番目が新しいアイコン
    一覧
      96px
      40px
      96px
      40px
      全サイズ（24・32・40・64・96・160px）を見る
      比較シート位置を合わせて指を離すと作り直します
      変更前と変更後の一覧を並べた比較シートのプレビュー
      比較シートを保存（PNG 1200×630） 新しいアイコンを保存（PNG 1000×1000）

      正方形のPNGは丸く切り抜いていない元の形です。投稿用の画像を媒体ごとのサイズに書き出すなら SNS画像サイズ一括書き出し が使えます。

      How to Use

      1. 画像を置く「今のアイコン」「新しいアイコン」の枠に画像をドラッグ&ドロップするか、「画像を選ぶ」で選びます。最初は見本の画像が入っていて、見本のうちは枠を押してもファイルを選べます。
      2. 位置と拡大を合わせる枠の中をドラッグして位置を、つまみで拡大を合わせます。赤い部分は隠れる範囲です。形・背景・周りの色を切り替えて、一覧の中での見え方を比べます。
      3. 書き出す比較シート（1200×630のPNG）か、新しいアイコンの正方形PNG（1000×1000）を保存します。比較シートは確認の依頼やSNSでの意見募集にそのまま使えます。

      About This Tool

      SNSやLINE公式アカウント、チャットツールのアイコンは、四角い画像を丸く切り抜いて表示するものが多く、隅に置いた文字やロゴは見えなくなります。また、一覧の中では40px前後まで小さくなるため、単体で見て良かったデザインでも、周りのアイコンに紛れて見つけにくくなることがあります。本ツールは、今のアイコンと新しいアイコンを同じ一覧画面の上から3番目に置き、周りのアイコンの色・背景の明暗・形を切り替えながら比べられるようにしたものです。周りの色は「いろいろな色」と、新しいアイコンの平均色に近い色の2通りで、似た色に囲まれても見分けがつくかを確かめられます。

      編集枠の赤い部分は、選んだ形で切り抜いたときに隠れる範囲です。破線は外周から1割内側に引いた本ツール独自の目安で、各サービスが定める安全範囲ではありません。要素が残るかどうかは表示を見て判断してください（自動の合否判定はしません）。一覧の画面は特定のアプリを模したものではなく、実際の表示は各サービスで異なります。代表の大きさとして40pxと96pxを常に表示し、24〜160pxの6段は「全サイズ」を開くと並びます。

      書き出しは2種類です。比較シート（1200×630のPNG）は左に「変更前」、右に「変更後」の一覧と40px・96pxの単体を並べ、下端に作成日と「表示は目安」の注記を入れます。新しいアイコンの正方形PNG（1000×1000）は丸く切り抜いていない形で、位置と拡大を合わせた結果をそのまま各サービスへ登録できます。透過のある画像は透過を残して書き出し、元の解像度が足りないときは画面に注意を出します。ファビコンを作るなら faviconジェネレーター、画像の白い背景を抜くなら 白背景の透過 へ。

      処理はすべてブラウザのCanvasで行い、選んだ画像はサーバーへ送信されません。読み込めるのはPNG・JPEG・WebP・AVIF・SVGです。枠を選んで矢印キーで移動（Shiftで大きく）、＋と−で拡大縮小、0で元に戻せます。画像をコピーしてこのページに貼り付けると、新しいアイコンの枠に入ります。

      Other Tools