正確なピクセルサイズで画像を書き出す方法

正確なピクセルサイズが重要な理由

ほとんどのWebとデジタルプラットフォームには、自分では制御できない方法で適用される特定のサイズ要件があります。ECサイトは固定グリッドで商品画像を表示します——間違ったサイズの画像は引き伸ばされ、クロップされ、または白いパディングでレターボックスされます。すべてプロらしくない見た目になります。SNSプラットフォームはアスペクト比を適用し、合わないものは自動クロップします。

アップロード前に正しいサイズで画像を準備することで、これらの問題をすべて防げます。構成・背景・使用される正確なピクセル領域をコントロールできます。出力が予測可能になります。

主要プラットフォームのピクセルサイズ一覧

EC商品画像：ほとんどのプラットフォームは正方形のクロップを要求します。通常700×700・800×800・1000×1000ピクセルです。OGP画像（URLをSNSでシェアした際に表示されるプレビュー）は1200×630ピクセルです——Facebook・Twitter・LinkedIn・リンクプレビューを表示するほとんどのメッセージングアプリの標準です。Instagramのグリッド投稿は1080×1080（1:1）または1080×1350（4:5）が最適です。

YouTubeのサムネイルは1280×720（16:9）です。メールヘッダーには600px幅がほとんどのメールクライアントの標準です。ブログのヒーロー画像は通常1200×630または1200×900です。キャンバスのプリセットボタンがこれらの最も一般的なサイズに直接アクセスできます。

手順：正確なサイズで書き出す

1. キャンバスサイズを設定 — プリセットをクリックするか、正確なピクセル値を入力します。キャンバスの輪郭が書き出し範囲を示します。
2. 画像をドロップ — 写真をドラッグ＆ドロップするか、クリックして選択します。画像がキャンバスの中央に表示されます。
3. 位置とスケールを調整 — ドラッグして移動します。コーナーのハンドルをドラッグしてリサイズします（Shiftで比率をロック）。被写体をキャンバスフレーム内の望む位置に配置します。
4. 背景色を設定 — デフォルトはオレンジ（#ff8800）で、未カバーの領域が一目でわかります。書き出す前に白・黒・ブランドカラーに変更してください。
5. 必要に応じてスマートシャープを有効にする — 画像を50%以上縮小した場合、スマートシャープでエッジの鮮明さを回復します。強さ60・半径0.8から始めてください。
6. 書き出す — JPG・PNG・WebPを選択し、品質を設定して書き出しをクリックします。ファイルがキャンバスの正確なサイズで保存されます。

スマートシャープ：スケール後の鮮明さを回復する

画像を縮小するとエッジを表すピクセル数が減ります。Canvas APIの補間処理は鋭い境界——オブジェクトのエッジ・テキスト・細かなテクスチャ——でわずかにソフトな結果を生成することがあります。スマートシャープはエクスポートレンダリング後にアンシャープマスクを適用してこれを補正します。

ほとんどのEC商品写真には強さ50〜70・半径0.5〜0.8が安全な出発点です。プレビューでハロー効果なしにシャープに見えることを確認してください。布地・木目・髪の毛など細かなテクスチャがある場合は強さを30〜40に下げてノイズ増幅を防いでください。

画像はデバイス上に留まる

Tracelyx CanvasはHTML Canvas APIを使ってすべてブラウザ内で動作します。画像がブラウザメモリに読み込まれ、仮想キャンバスに配置され、出力ファイルにレンダリングされます——すべてネットワークリクエストなしで。デバイスから何も出ていきません。未公開商品の商品写真・NDA下のクライアント画像・個人ポートレート・第三者サーバーに保存したくないコンテンツに重要です。

ブラウザのタブを閉じると、すべてのデータが破棄されます。ストレージ・ログイン・使用状況の追跡は一切ありません。このツールは設計上ステートレスです——データを送信するサーバーがありません。