ByteCutの仕組み
ByteCutは、透明な切り抜き、揃った正方形アセット、軽量WebPファイルをサーバーへアップロードせずに準備するためのブラウザベース画像ツールです。このドキュメントでは、処理の流れ、対応形式、書き出し設定、AIクリーンアップ、プライバシーの範囲、公開前の確認点を説明します。
概要
ブラウザで実行
元画像はブラウザで開かれ、端末上で処理されます。ByteCutはクラウド画像ライブラリではなく、元ファイルを保存しません。
2つの主な流れ
背景が問題なら背景削除を使い、画像の見た目は問題なく軽くしたい場合はWebP最適化を使います。
出力は新しいファイル
ByteCutは別のWebPファイルを書き出します。元画像は端末にそのまま残ります。
処理の流れ
1. 画像をアップロード
PNG、JPG、JPEG、WebPファイルから始めます。単一の被写体で背景とのコントラストが明確な画像は、複雑なシーンより処理しやすくなります。
2. ワークフローを選ぶ
背景クリーンアップは透明アセットを作り、WebP最適化は透明処理が不要な画像をリサイズまたは圧縮します。
3. 実用的なプリセットを選ぶ
Food、Icon、Thumb、SNS、Largeプリセットは用途に合ったサイズを選ぶための基準です。一覧やUIには小さいサイズ、再利用ソースにはLargeが向いています。
4. プレビューを確認
透明アセットはチェッカーボードで確認し、ダウンロード前に最終サイズを見ます。実際に表示されるサイズでも確認してください。
5. 結果をダウンロード
書き出したWebPは新しいローカルファイルです。結果が不自然な場合は感度を調整するか、別の処理方法やより適した元画像を試してください。
対応形式と出力
ByteCutエディタはPNG、JPG、JPEG、WebPファイルを受け付けます。背景クリーンアップは透明WebP出力向けで、最適化はWebサイト、アプリ、Open Graph画像、メニュー、サムネイル、アセットライブラリ向けのリサイズまたは圧縮WebPコピーを作ります。
PNG入力
ソースグラフィック、スクリーンショット、すでに透明度を持つ画像に向いています。
JPG/JPEG入力
写真や生成画像に便利ですが、圧縮ノイズが多いと境界処理が難しくなることがあります。
WebP入力
既存のWebアセットをリサイズ、正方形フィット、または別のWebP出力へ変換する場合に使えます。
WebP出力
透明度をサポートし、同等のPNG出力よりファイルサイズを抑えやすくなります。
適切なモードを選ぶ
背景削除
ステッカー、食品イラスト、キャラクター、ロゴ、アイコンなど、被写体を透明背景に置きたい場合に使います。
WebP最適化
写真、サムネイル、ソーシャル画像、ヒーロー画像、生成画像など、背景を残したまま軽くしたい場合に使います。
アイコンリサイズ
メニュー、グリッド、アプリUI、デザインシステムで複数アセットの寸法を揃える場合は正方形プリセットを使います。
書き出し設定とプリセット
Food / Thumbプリセット
メニューサムネイル、商品カード、繰り返し表示されるUI一覧など、読み込み速度が重要な場所に小さいサイズを使います。
Iconプリセット
アプリUI、カテゴリ画像、ステッカートレイ、小さな再利用ビジュアル要素向けのサイズです。
Largeプリセット
後から編集するソースや高密度画面が必要な場合に使います。すべてのサムネイルにLargeを使うと不要に重くなります。
品質設定
WebP品質80は多くの場合で実用的な既定値です。小さな文字、線画、食品の質感が柔らかすぎる場合は品質を上げて確認してください。
AIクリーンアップとフォールバック
一部の画像は高速な明るい背景処理だけでは足りないことがあります。AIクリーンアップが使える場合、初回にモデルをダウンロードし、ブラウザ内で実行します。AI経路は遅く、メモリを多く使う場合があるため、ByteCutは単純な背景やAI結果が不安定な場合に備えて高速処理を残しています。
AIが役立つ場合
髪、キャラクターの小物、取っ手、内側の穴、白一色ではない背景で試す価値があります。
高速処理が安全な場合
食品ステッカー、白背景グラフィック、単純なイラストは高速処理のほうがきれいな場合があります。
AIが失敗する場合
高速処理で再試行する、より小さな元画像を使う、または被写体と背景のコントラストが明確な画像を選んでください。
プライバシーとローカル処理
ByteCutは画像処理がブラウザ内で行われるように設計されています。元ファイル、プレビュー、マスク、ダウンロード結果はセッション中にローカルで扱われます。問い合わせフォームのメッセージは画像処理とは別で、返信のためにのみ使われます。
編集用画像のアップロードなし
エディタは背景処理や最適化のために元画像をByteCutサーバーへ送りません。
アカウントライブラリなし
ByteCutはホストされたギャラリー、プロジェクトフォルダ、処理画像のクラウド履歴を作成しません。
サードパーティスクリプト
分析や広告スクリプトがサイトで読み込まれる場合がありますが、エディタで処理する画像ファイルは受け取りません。
パフォーマンスの目安
大きな画像はメモリを使う
非常に大きな写真はブラウザを遅くしたり、低メモリ端末で失敗したりすることがあります。不安定な場合は元画像を先に小さくしてください。
AIは初回が遅い場合がある
初めてAIクリーンアップを使うときは、モデルファイルのダウンロードと初期化で時間がかかることがあります。
WebP出力は配信用
元ファイルは別に保管してください。ByteCutの出力は公開用に軽くしたファイルであり、唯一のアーカイブ用コピーではありません。
制限と手動確認
低コントラストの境界
白い皿と白背景、明るい服、ガラス、柔らかい影は背景と混ざる場合があります。
細いディテール
髪、小さな小物、取っ手、透明であるべき内側の空間はチェッカーボードプレビューで確認してください。
AI食品画像
生成食品画像には不自然な食器、繰り返しの質感、偽の文字、実物と違う材料が含まれることがあります。公開前に確認してください。
権利とブランド確認
ByteCutはファイルを準備するツールです。画像の権利、ブランド適合性、プラットフォーム規則、実際の商品表現の正確性はユーザーが確認する必要があります。
トラブルシューティング
背景が残る
クリーンアップ感度を上げる、AI再試行を使う、または背景と被写体のコントラストがより明確な元画像を使ってください。
被写体が欠ける
処理の強さを下げる、単純なグラフィックではAIではなく高速処理を使う、または被写体周辺の余白を広く取ってください。
結果がぼやける
小さい画像を無理に拡大しないでください。元画像に近いサイズで書き出すか、より高解像度の元画像から始めてください。
ファイルが予想より大きい
小さいプリセットまたは低いWebP品質を試してください。透明グラフィックも大きく書き出すと重くなることがあります。
元画像の選び方
ByteCutは、元画像に被写体を分けるための情報、重要な輪郭、最終サイズに足りる解像度があるときにもっとも安定します。結果が不自然に見える場合は、まず元画像を確認してください。多くの失敗は、小さすぎる、コントラストが低い、すでに圧縮で傷んでいる元画像から始まります。
向いている元画像
- 背景から分離して見える明確な単一被写体。
- 最大の書き出しサイズに足りる解像度がある画像。
- 背景に貼り付く強い影が少なく、照明が単純な画像。
- 皿、キャラクター、ロゴ、ステッカー、小物の輪郭がきれいな画像。
確認が必要な元画像
- 白背景上の白い皿、ガラス、明るい服、明るい飲み物。
- 小さな元画像を大きな再利用素材として書き出す場合。
- 偽の文字、不自然な食器、不安定な物体の輪郭がある生成画像。
- 影や反射をシーンの一部として残したい画像。
作業別ガイド
活用事例ページでは、各ワークフローで実際に確認すべき点を説明しています。すべての画像に同じ設定を使うのではなく、作りたい出力にもっとも近いページから確認してください。
画像アセット整理
背景整理・サイズ調整・WebP書き出しで、画像をすぐ使えるアセットに整えましょう。
背景除去
メニュー、アプリアセット、出品画像、UIライブラリにすぐ使える透過カットアウトを作成します。
WebP変換
見た目を保ちながら、Webやアプリでそのまま使いやすい軽量アセットに変換します。
アイコンリサイズ
アプリアイコン、メニューサムネイル、再利用できるデザインアセット向けの規格に整えます。
フードメニューアイコン
レストランメニューやデリバリーアプリ向けの統一アイコン。
AI生成食品画像
AIで作った食品画像を、メニュー、ブログ、レシピカード、軽量WebP公開向けに整えます。
スタンプアセット
メッセージアプリ向けの透過スタンプ画像。
キャラクターアセット
ステッカー、アバター、ゲーム試作、アプリUI向けの透過キャラクター素材。