アプリ/Webスクリーンショットへの角丸と影の追加
商品紹介ページやポートフォリオに掲載する画面のスクリーンショットに角丸と柔らかい影を加えて、実際の端末で表示しているような効果を演出し、より洗練された印象にします。
画像をアップロードして、スライダーで角丸の丸みをリアルタイムに調整できます。枠線を有効にして色と幅を設定したり、影を有効にして強さと投影距離を設定したりでき、キャンバスの背景色もカスタムできます。アプリのスクリーンショット、商品画像の仕上げ、SNSカバー画像の装飾に最適で、すべてブラウザ内で完結し、サーバーへのアップロードはありません。
効果の描画と書き出しはすべてブラウザ内で完結し、画像はどのサーバーも経由しません
3つの効果は個別に使うことも組み合わせることもでき、ほとんどの仕上げ・展示ニーズに対応します
スライダーを動かすと画面がすぐに更新され、満足したらダウンロードするだけで、何度も試行錯誤する必要がありません
登録不要、料金不要。隠れた回数制限もありません
利用シーン
アプリのスクリーンショット展示でも、商品画像の仕上げでも、角丸・枠線・影を調整するだけで全体の質感を高められます。
商品紹介ページやポートフォリオに掲載する画面のスクリーンショットに角丸と柔らかい影を加えて、実際の端末で表示しているような効果を演出し、より洗練された印象にします。
商品メイン画像に細い枠線と軽い影を加えると、白背景の上でより立体感が出て、クリック率やコンバージョン率の向上につながります。
note カバー画像やアイコン画像に角丸効果を加え、背景色を組み合わせて視覚スタイルを統一すると、SNSのプロフィールがより整った印象になります。
組み合わせ例
シーンによって適したパラメータの組み合わせが異なります。まずこの一覧を参考にしてから微調整すると、ゼロから試すより早く満足のいく効果が見つかります。
| 効果の組み合わせ | 推奨パラメータ範囲 | 向いているシーン |
|---|---|---|
| 軽い角丸 + 柔らかい影 | 角丸8%〜15%、影の不透明度25%〜40%、ぼかし範囲は広め、投影距離は小さめ | アプリ/Webスクリーンショット展示、浮いたカード風の効果を演出 |
| 大きい角丸 + 影なし | 角丸25%以上、影は無効化 | アイコンや図案系の画像、丸みのある可愛らしい見た目を求める場合 |
| 細い枠線 + 影なしまたは軽い影 | 枠線の幅は細め、色は背景色に近いかまたは白 | EC商品画像で、白背景に境界感を加える場合 |
| 直角 + はっきりした影 | 角丸0%、影の不透明度40%以上、投影距離は大きめ | 立体感のある浮き上がり効果を強調する宣伝画像やポスター要素 |
以上はよくある組み合わせの考え方の例です。実際の効果は画像自身の構図や背景色によって変わるため、プレビュー画面でスライダーを動かして何度も比較しながら、現在の画像に最も合うパラメータの組み合わせを見つけることをおすすめします。
使い方
ソフトのインストールは不要。すべてWebページ上で見たままの結果を確認しながら完了します。
クリックして選択するか、そのままページに画像をドラッグします。JPG、PNG、WebP、GIFに対応、1枚20MB以下で、一度に1枚のみ処理できます。
角丸スライダーをドラッグして四隅の丸みをリアルタイムに調整すると、画面はすぐに更新されます。
必要に応じて枠線と影を有効にし、それぞれの色、幅、不透明度、範囲を設定します。キャンバスの背景色も設定できます。
効果に満足したらダウンロードをクリックすると、画像は現在の設定で再生成されローカルに保存されます。
技術的な説明
スライダーを動かすと、プレビュー画面はブラウザ標準のCSSの角丸、枠線、影のスタイルによって即座に描画されます。ダウンロードをクリックすると、ブラウザのCanvas描画機能を使って完全に同じ比率のパラメータで再描画し、画像ファイルとしてエンコードします。ダウンロード結果とプレビュー効果が確実に一致し、すべてあなたの端末上でローカルに完結し、どのサーバーも経由しません。
影や幅の広い枠線を有効にすると、効果を完全に表示するために画像の周囲へある程度広げる必要があり、切り取られることを防ぎます。書き出し時にはキャンバスが現在の影のぼかし範囲、投影距離、枠線の幅に応じて必要な拡張マージンを自動計算し、増えた領域は選択した背景色で塗りつぶされるか透明のまま保持されます。影や枠線が不要な場合(すべて無効または数値が0の場合)、書き出し画像のサイズは元画像と同じになります。
よくある質問
対応していません。このツールは単体の画像を仕上げるためのもので、角丸の半径や影の強弱が適切かどうかは、その画像の比率や用途に応じて1枚ずつ確認する必要があります。例えば正方形のスクリーンショットと縦長のポスターでは必要な角丸の比率が明らかに異なるため、同じパラメータを適用すると効果が不自然になりやすいです。そのため1枚の画像を精密に調整するツールとして設計されています。複数枚の画像を処理する場合は1枚ずつ開いて個別に調整することをおすすめします。
完全にお使いの端末のブラウザ内で完結します。リアルタイムプレビューはブラウザ標準のCSSの枠線、角丸、影のスタイルで即座に描画され、ダウンロード時には同じパラメータでCanvasを使って再描画し、最終的な画像を生成します。原画像がどのサーバーにもアップロードされることはありません。
影は投影効果をはっきり見せるために外側へある程度広がる必要があるためです。キャンバスが元画像と同じ大きさだと、影は直接切り取られて見えなくなってしまいます。そのため書き出し時には現在設定している影のぼかし範囲、投影距離、枠線の幅に応じてキャンバスが自動的に四方へ拡張されます。増えた領域は選択した背景色で塗りつぶされるか(または透明のまま保持され)、影が完全に表示され、切り取られることを防ぎます。
JPG形式自体が透明チャンネルに対応していないためです。透明背景を選択しても元画像がJPG形式の場合、透明領域は自動的に白で塗りつぶされます。これはJPG形式そのものの制約であり、処理エラーではありません。本当の透明背景が必要な場合は、PNGまたはWebP形式の画像をアップロードしてください。処理後の書き出し結果には透明背景が保持されます。
いずれも画像自身の幅・高さに対する比率で計算され、固定のピクセル値ではありません。そのためアップロードした画像の解像度が大きくても小さくても、同じスライダーの数値で視覚的に一致した比率の効果が得られます。プレビューで見える効果とダウンロード後に生成される最終画像の効果も完全に一致します。
処理の本質は再描画と再エンコードです。元画像が透明背景を持っている場合、角丸の外側の透明領域はそのまま保持されます(不透明な背景色を選んで塗りつぶした場合を除く)。元画像のEXIF撮影パラメータや位置情報などのメタデータは再エンコード後には保持されません。EXIFを個別に確認または削除したい場合は「EXIF情報の確認/削除」ツールをご利用ください。
登録不要、待ち時間なし。処理が終わればそのままダウンロードできます。