一括・個別の角半径
4つの角を一括調整するか、連動を解除して個別に設定できます。
大きな半径は画像サイズに合わせて正規化し、形状の重なりや崩れを防ぎます。012 · IMAGE EDIT
画像枠線・角丸ツール
画像に枠線、角丸、円形効果、影を追加できます。
LOCALブラウザ内で処理
WORKSPACE画像外周スタイルワークスペース
画像をここにドロップ
画像はサーバーへ送信されずブラウザ内で処理されます。
JPG · PNG · WebPHOW TO USE
使い方
- 01
画像を選択し、角丸または円形を選びます。
- 02
角の半径と各コーナーを調整します。
- 03
必要に応じて枠線の太さ・色・配置を設定します。
- 04
影の位置・ぼかし・広がり・不透明度、背景・自動余白を確認します。
- 05
元画像・結果・出力ピクセルを比較し、出力形式と画質を選んで保存します。
EDGE STYLE GUIDE
角丸・枠線・影を正確に描画する基準
CSS表示だけでなく、保存画像の実ピクセルに形状と外側効果を描画します。内側・中央・外側
枠線は角丸・円形の経路に沿い、太さと配置に応じて必要な外側領域を計算します。
外側枠線では結果キャンバスが元画像より大きくなる場合があります。切れない影
X・Y位置、ぼかし、広がり、色、不透明度を調整し、自動余白で必要範囲を確保します。
影が片側へ大きく移動しても方向ごとに余白を計算します。どの形状を選ぶべきですか？
- プロフィール画像には、元画像を強制的に切り抜かず正確な円を作れる円形モードが適しています。
- アプリ画面やカード画像では、小さめの角丸と細い枠線を組み合わせると自然に外周を整えられます。
- 透明PNGは角丸の外側を透明のまま保存できるためWeb・アプリ素材に向いています。
保存前に確認すること
- JPGは透明度を保存できないため、透明背景では選択した背景色を合成して保存します。
- 外側枠線や大きな影は結果キャンバスを広げるため、元画像より出力ピクセルが増える場合があります。
- 円形モードは長方形画像を自動で中央切り抜きせず、元画像全体を保持します。
- 一般ユーザー向けのサービス上限は、結果画像の一辺16,000px・合計80,000,000ピクセルです。枠線・影・余白で拡張された最終結果にも同じ基準を適用します。
RENDER ROUTES
設定が結果サイズへ反映される順序
形状、外側効果、余白を分けて考えると最終サイズを予測しやすくなります。SHAPE→BORDER
先に形状を決める
角丸または円形を決め、その経路を基準に枠線を計算します。
BORDER→SHADOW
外側効果の範囲を計算
中央・外側枠線と影のX・Y、ぼかし、広がりから必要な拡張量を求めます。
PADDING→OUTPUT
余白を加えて保存
自動余白と追加余白を反映してからJPG・PNG・WebPとして最終描画します。
PRACTICAL DETAILS
実際の出力品質を左右する4項目
角のアンチエイリアス
小さい画像や大きな半径でも境界がギザギザになりにくいようCanvas経路で描画します。
枠線の均一な太さ
円形や角丸でも一部だけ太く見えたり角で途切れたりしないよう経路を合わせます。
透明アルファ
PNG・WebPでは角丸や影の周囲の透明ピクセルを保持し、プレビューの市松模様は保存しません。
元解像度で保存
プレビューは画面用に縮小し、保存時は元画像の解像度を基準に再描画します。
EXPERT POST
画像の外周スタイルをきれいに仕上げる実務基準
角丸、円形、枠線、影は単純に見えても、半径・配置・透明度・キャンバス計算がずれると保存結果にすぐ現れます。半径は画像サイズとの比率で考える
同じ40pxでも300px画像と3000px画像では見え方が異なります。カード画像では短辺との比率を意識し、個別半径では4つの角が幅・高さと衝突しないよう正規化された結果を確認します。
正確な円は50%の角丸だけでは作れない
長方形に50%の角丸を適用すると楕円になります。正確な円には正方形の出力領域が必要です。このツールは元画像を強制的に中央切り抜きせず、全体を保持して円形マスクを適用します。
枠線の配置で出力サイズが変わる
内側枠線は元キャンバス内に収めやすい一方、中央・外側枠線は元画像の外へ出るため、切れないようキャンバスを拡張する必要があります。
マスクと枠線の半径を同じ経路として扱わない
画像マスクと枠線中心の半径を常に同じにすると角部分で太さが不均一に見えることがあります。枠線位置と太さを反映した内外の形状計算が必要です。
自動余白は影の切れを防ぐ計算
影がX・Y方向へ偏る場合、四辺に同じ余白を加えるだけでは不十分です。上・右・下・左の影範囲を別々に計算することで位置を変えても切れにくくなります。
透明PNG・WebPとJPGでは保存基準が違う
PNGとWebPは角丸や影の周囲のアルファを保持できます。JPGにはアルファがないため背景色との合成が必要で、背景色によって境界の印象が変わることがあります。
プレビューと保存を同じ解像度で描画する必要はない
大きな元画像を設定変更のたびにフル解像度で描画するとメモリと操作性が悪化します。画面用プレビューは縮小し、保存時だけ元解像度で再描画する方法が安全です。
ファイル容量だけでなく結果ピクセル面積を見る
圧縮された入力ファイルが小さくても外側枠線・余白・影で結果キャンバスは大きくなります。安全限界はファイル容量だけでなく幅・高さ・総ピクセル・エンコード時メモリを合わせて検証します。
FAQ
よくある質問
01画像の角を丸くできますか？+
はい。すべての角を一括調整するか、各コーナーを個別設定できます。
02円形画像も作れますか？+
はい。長方形画像は切り取らず正方形キャンバスに全体を保持してから円形マスクを適用します。
03角丸画像にも枠線を付けられますか？+
はい。枠線は角丸の形状に沿って描画されます。
04枠線の配置を変更できますか？+
はい。内側・中央・外側を選択でき、必要に応じて結果キャンバスが広がります。
05影を追加できますか？+
はい。横位置、縦位置、ぼかし、広がり、色、不透明度を調整できます。
元ファイルは変更されず、すべての処理は現在のブラウザ内で行われます。