アプリ/ウェブページのスクリーンショットと角の丸い投影ディスプレイ
製品紹介ページやポートフォリオのインターフェイスのスクリーンショットに丸い角とソフト シャドウを追加して、実際のデバイスの表示効果をシミュレートし、スクリーンショットをより洗練されたプロフェッショナルに見せます。
はじめる
ソフトウェアをインストールする必要はなく、すべてのプロセスが Web ページ上で完了し、画面はリアルタイムで更新されます。
画像をクリックして選択するか、Web ページに直接ドラッグします。 JPG、PNG、WebP、GIF がサポートされています。各画像は 20MB を超えてはなりません。一度に処理される画像は 1 つだけです。
角丸スライダーをドラッグして四隅の曲率をリアルタイムに調整すると、プレビュー効果がすぐに更新されます。
必要に応じて境界線と影をオンにし、それぞれの色、幅、透明度、範囲を設定し、キャンバスの背景色を設定します。
効果が満足できることを確認したら、「ダウンロード」をクリックします。画像は現在の設定に従って再生成され、ローカルに保存されます。
トラブルシューティング
サポートされていません。このツールは単一の画像調整として位置付けられています。フィレットの半径と影の強さが適切かどうかは、通常、イメージの具体的な比率や用途を 1 つずつプレビューして確認する必要があります。たとえば、正方形のスクリーンショットと長いポスターでは、大幅に異なるフィレットの比率が必要になります。同じパラメータのセットを適用すると、効果に一貫性がなくなる可能性があるため、単一の画像を微調整するためのツールとして設計されています。複数の写真を処理する必要がある場合は、1 つずつ開いて個別に調整することをお勧めします。
現在お使いの端末のブラウザ上で完全に完結します。リアルタイム プレビューは、ブラウザーのネイティブ CSS 境界線、丸い角、影のスタイルを使用して即座にレンダリングされます。ダウンロード時に、Canvas を使用して同じパラメータに従って再描画し、最終イメージを生成します。元の画像は、プロセス全体を通じてどのサーバーにもアップロードされません。
投影効果をはっきりと確認するには、影を一定の範囲に外側に広げる必要があるため、キャンバスが元の画像と同じサイズの場合、影は直接切り取られて見えなくなります。したがって、エクスポート時には、現在設定されている影のぼかし範囲、投影距離、境界線の幅に応じてキャンバスが自動的に拡張されます。追加の領域は選択した背景色で塗りつぶされ (または透明のまま)、影が完全に表示され、トリミングされないことが保証されます。
JPG 形式自体は透明チャネルをサポートしていません。背景が透明で、元の画像が JPG 形式の場合、透明部分は自動的に白で塗りつぶされます。これは JPG 形式に固有の制限であり、処理エラーではありません。本当に透明な背景が必要な場合は、画像を PNG または WebP 形式でアップロードしてください。エクスポート結果は処理後も透明な背景を保持します。
これらは、固定ピクセル値ではなく、画像自体の幅と高さの比率に基づいて計算されます。このようにして、アップロードされた画像の解像度が大きくても小さくても、同じスライダー値で同じ視覚的比率効果を実現できます。プレビューで見られる効果も、ダウンロード後に生成される最終的な画像効果とまったく同じです。
このプロセスの本質は、再描画とエンコードです。元の画像の背景が透明な場合、透明な領域は丸い角の外側に残ります (塗りつぶしに不透明な背景色が選択されていない限り)。元の画像の EXIF 撮影パラメータ、位置情報、その他のメタデータは、再エンコード後は保持されません。特に EXIF を表示または消去する必要がある場合は、「EXIF Cleaner」ツールを使用できます。
エフェクトのレンダリングとエクスポートのプロセス全体はブラウザー内でローカルに完了し、画像はサーバーを経由しません。
3 つの効果は単独で使用することも、組み合わせて使用することもでき、最も洗練された表示ニーズに対応できます。
スライダーをドラッグすると、画面がすぐに更新されます。ダウンロードする前に、満足していることを確認してください。試行錯誤を繰り返す必要はありません。
登録、支払い、隠れた使用制限はありません
該当する状況
機能リストではありませんが、「画像をドラッグする価値があるのはどのような場合か?」うまくいかない場合は、無理に使用せず、ツールを変更してください。
製品紹介ページやポートフォリオのインターフェイスのスクリーンショットに丸い角とソフト シャドウを追加して、実際のデバイスの表示効果をシミュレートし、スクリーンショットをより洗練されたプロフェッショナルに見せます。
メインの商品画像に細い枠線とわずかな影を追加して、商品画像が白い背景に重なり合うようにし、クリック数とコンバージョン数を増やします。
公式アカウントのカバーやアバターに角丸を追加し、ビジュアルスタイルと背景色を統一することで、ソーシャルトップページをよりすっきりと美しく見せます。
一致する提案
異なるパラメータの組み合わせには、異なるシナリオが適しています。最初にこのチートシートを参照して微調整すると、最初から試すよりも早く満足のいく結果が得られます。
| エフェクトの組み合わせ | 推奨パラメータ範囲 | シーンに合わせて |
|---|---|---|
| 角を少し丸く+ソフトシャドウ | 角丸 8%~15%、影の透明度 25%~40%、ぼかし範囲が大きく、投影距離が小さい | アプリ/ウェブページのスクリーンショット表示、フローティング カード効果をシミュレート |
| 大きな丸い角 + 影なし | 角が 25% 以上丸くなっており、影は有効になっていません | アバターとアイコン絵、丸くて愛らしいビジュアルスタイルを追求 |
| 細い境界線 + 影なしまたは薄い影 | 枠線の幅が狭く、色が背景色または白に近い | 白背景に枠感をプラスしたEC商品画像 |
| 直角 + 鮮明な影 | 角丸0%、影の透過率40%以上、投影距離が長い | 立体的な吊り下げ感を強調したプロモーション映像やポスター素材 |
上記は一般的なマッチングのアイデアです。実際の効果は、写真自体の構成と背景色に関係します。プレビュー領域でスライダーをドラッグして繰り返し比較し、現在の画像に最適なパラメータの組み合わせを見つけることをお勧めします。
技術的な説明
スライダーをドラッグすると、ブラウザーのネイティブ CSS の丸い角、境界線、および影のスタイルを使用して、プレビュー画像が即座にレンダリングされます。クリックしてダウンロードすると、ブラウザの Canvas 描画インターフェイスが使用され、まったく同じ比率パラメータで再描画され、画像ファイルにエンコードされ、ダウンロード結果とプレビュー効果の一貫性が保証されます。プロセス全体はサーバーを経由せずにデバイス上でローカルに完了します。
シャドウまたは幅広の境界線を有効にした後、切り取られることなく完全に表示されるように、効果を画像の周囲の特定の範囲に拡張する必要があります。エクスポート時に、キャンバスは現在の影のぼかし範囲、投影距離、境界線の幅に基づいて拡張する必要がある余白を自動的に計算し、余分な領域は選択した背景色で塗りつぶされるか透明のままになります。影と境界線が必要ない場合 (両方ともオフに設定されているか、値が 0 の場合)、エクスポートされる画像のサイズは元の画像と同じままになります。
口座を開設する必要はありません。満足したら、バッチ処理を開始してください。そうでない場合は、パラメーターを変更して再試行してください。