ローカル処理、画像はアップロードされません 無料、透かしなし 角丸 + 枠線 + 影、リアルタイムプレビュー

画像に角丸、枠線、影を追加、スクリーンショットが瞬時に美しい展示画像に

画像をアップロードして、スライダーで角丸の丸みをリアルタイムに調整できます。枠線を有効にして色と幅を設定したり、影を有効にして強さと投影距離を設定したりでき、キャンバスの背景色もカスタムできます。アプリのスクリーンショット、商品画像の仕上げ、SNSカバー画像の装飾に最適で、すべてブラウザ内で完結し、サーバーへのアップロードはありません。

3重ねられる効果(角丸/枠線/影)
20MB1枚あたりの上限
0インストールが必要なソフト

サーバーへのアップロードなし

効果の描画と書き出しはすべてブラウザ内で完結し、画像はどのサーバーも経由しません

角丸/枠線/影を自由に重ねられる

3つの効果は個別に使うことも組み合わせることもでき、ほとんどの仕上げ・展示ニーズに対応します

見たままリアルタイムプレビュー

スライダーを動かすと画面がすぐに更新され、満足したらダウンロードするだけで、何度も試行錯誤する必要がありません

無料で回数制限なし

登録不要、料金不要。隠れた回数制限もありません

利用シーン

特に多い3つの仕上げニーズを、この1つのツールで解決

アプリのスクリーンショット展示でも、商品画像の仕上げでも、角丸・枠線・影を調整するだけで全体の質感を高められます。

組み合わせ例

角丸、枠線、影をどう組み合わせると効果的か

シーンによって適したパラメータの組み合わせが異なります。まずこの一覧を参考にしてから微調整すると、ゼロから試すより早く満足のいく効果が見つかります。

効果の組み合わせ推奨パラメータ範囲向いているシーン
軽い角丸 + 柔らかい影角丸8%〜15%、影の不透明度25%〜40%、ぼかし範囲は広め、投影距離は小さめアプリ/Webスクリーンショット展示、浮いたカード風の効果を演出
大きい角丸 + 影なし角丸25%以上、影は無効化アイコンや図案系の画像、丸みのある可愛らしい見た目を求める場合
細い枠線 + 影なしまたは軽い影枠線の幅は細め、色は背景色に近いかまたは白EC商品画像で、白背景に境界感を加える場合
直角 + はっきりした影角丸0%、影の不透明度40%以上、投影距離は大きめ立体感のある浮き上がり効果を強調する宣伝画像やポスター要素

以上はよくある組み合わせの考え方の例です。実際の効果は画像自身の構図や背景色によって変わるため、プレビュー画面でスライダーを動かして何度も比較しながら、現在の画像に最も合うパラメータの組み合わせを見つけることをおすすめします。

使い方

4ステップで画像への角丸/枠線/影処理が完了

ソフトのインストールは不要。すべてWebページ上で見たままの結果を確認しながら完了します。

  1. 1

    画像をアップロード

    クリックして選択するか、そのままページに画像をドラッグします。JPG、PNG、WebP、GIFに対応、1枚20MB以下で、一度に1枚のみ処理できます。

  2. 2

    角丸の丸みを調整

    角丸スライダーをドラッグして四隅の丸みをリアルタイムに調整すると、画面はすぐに更新されます。

  3. 3

    枠線または影を有効化

    必要に応じて枠線と影を有効にし、それぞれの色、幅、不透明度、範囲を設定します。キャンバスの背景色も設定できます。

  4. 4

    ダウンロードして保存

    効果に満足したらダウンロードをクリックすると、画像は現在の設定で再生成されローカルに保存されます。

技術的な説明

ローカルでの角丸/枠線/影処理について知っておきたい2つのこと

01

リアルタイムプレビューと最終出力は同じパラメータを使用

スライダーを動かすと、プレビュー画面はブラウザ標準のCSSの角丸、枠線、影のスタイルによって即座に描画されます。ダウンロードをクリックすると、ブラウザのCanvas描画機能を使って完全に同じ比率のパラメータで再描画し、画像ファイルとしてエンコードします。ダウンロード結果とプレビュー効果が確実に一致し、すべてあなたの端末上でローカルに完結し、どのサーバーも経由しません。

02

書き出した画像のサイズが元画像より大きくなる理由

影や幅の広い枠線を有効にすると、効果を完全に表示するために画像の周囲へある程度広げる必要があり、切り取られることを防ぎます。書き出し時にはキャンバスが現在の影のぼかし範囲、投影距離、枠線の幅に応じて必要な拡張マージンを自動計算し、増えた領域は選択した背景色で塗りつぶされるか透明のまま保持されます。影や枠線が不要な場合(すべて無効または数値が0の場合)、書き出し画像のサイズは元画像と同じになります。

よくある質問

画像の角丸/枠線/影について、よく聞かれる質問

角丸、枠線、影の追加は一括処理に対応していますか?

対応していません。このツールは単体の画像を仕上げるためのもので、角丸の半径や影の強弱が適切かどうかは、その画像の比率や用途に応じて1枚ずつ確認する必要があります。例えば正方形のスクリーンショットと縦長のポスターでは必要な角丸の比率が明らかに異なるため、同じパラメータを適用すると効果が不自然になりやすいです。そのため1枚の画像を精密に調整するツールとして設計されています。複数枚の画像を処理する場合は1枚ずつ開いて個別に調整することをおすすめします。

角丸、枠線、影の処理はパソコンやスマホ上で完了するのですか、それともサーバーにアップロードされますか?

完全にお使いの端末のブラウザ内で完結します。リアルタイムプレビューはブラウザ標準のCSSの枠線、角丸、影のスタイルで即座に描画され、ダウンロード時には同じパラメータでCanvasを使って再描画し、最終的な画像を生成します。原画像がどのサーバーにもアップロードされることはありません。

影を追加すると、書き出した画像の周囲が元画像より大きくなるのはなぜですか?

影は投影効果をはっきり見せるために外側へある程度広がる必要があるためです。キャンバスが元画像と同じ大きさだと、影は直接切り取られて見えなくなってしまいます。そのため書き出し時には現在設定している影のぼかし範囲、投影距離、枠線の幅に応じてキャンバスが自動的に四方へ拡張されます。増えた領域は選択した背景色で塗りつぶされるか(または透明のまま保持され)、影が完全に表示され、切り取られることを防ぎます。

背景色を「透明」に設定しても、書き出したJPG画像の背景がまだ白いのはなぜですか?

JPG形式自体が透明チャンネルに対応していないためです。透明背景を選択しても元画像がJPG形式の場合、透明領域は自動的に白で塗りつぶされます。これはJPG形式そのものの制約であり、処理エラーではありません。本当の透明背景が必要な場合は、PNGまたはWebP形式の画像をアップロードしてください。処理後の書き出し結果には透明背景が保持されます。

角丸の丸み、枠線の幅、影の範囲の数値は固定ピクセルですか、それとも比率で計算されますか?

いずれも画像自身の幅・高さに対する比率で計算され、固定のピクセル値ではありません。そのためアップロードした画像の解像度が大きくても小さくても、同じスライダーの数値で視覚的に一致した比率の効果が得られます。プレビューで見える効果とダウンロード後に生成される最終画像の効果も完全に一致します。

処理後の画像はEXIF撮影情報や元の透明背景を保持しますか?

処理の本質は再描画と再エンコードです。元画像が透明背景を持っている場合、角丸の外側の透明領域はそのまま保持されます(不透明な背景色を選んで塗りつぶした場合を除く)。元画像のEXIF撮影パラメータや位置情報などのメタデータは再エンコード後には保持されません。EXIFを個別に確認または削除したい場合は「EXIF情報の確認/削除」ツールをご利用ください。

今すぐアップロードして、数秒で展示レベルの仕上がりに

登録不要、待ち時間なし。処理が終わればそのままダウンロードできます。