← 最新情報一覧

スタジオ品質の商品写真を、URLから

https://ix-marketing.imgix.net/release-product-photos-hero-dark-2400x1350.jpg?auto=format,compress
https://ix-marketing.imgix.net/Release-hero-feature-cards%20(2).mp4

今回のリリースでは、リアルな影と光沢のある床面への映り込み、無地の背景からの切り抜き、オンデマンドの商品モックアップ、物件写真向けのcurb-appeal編集が登場しました。

カタログには何千もの商品があり、そのすべてが同じスタジオで撮影されたように見えるべきです。新商品はさまざまなカメラマンやサプライヤーから届き、季節のキャンペーンでは新しい背景が必要になり、カスタム商品は購入前にモックアップを用意しなければなりません。そのたびに、レタッチのやり直しやデザインツールからの書き出しが発生しがちです。

カタログの見た目を揃えるのは、10枚なら簡単でも、1万枚となれば大きな手間です。今回のリリースで、商品撮影スタジオの仕上げ作業をURLから行えるようになりました。商品を接地させる影、光沢のある床への映り込み、無地の背景からの切り抜き、マグカップやシャツにデザインを沿わせるモックアップ、そして物件外観のcurb-appeal編集です。新機能をご紹介します。

1

影と映り込みで、商品を床に置いたように

無地の背景に置いた切り抜き商品は、宙に浮いているように見えます。自然な影や映り込みを加える作業は、たいていデザインツールで1枚ずつ行われ、背景を変えるたびにやり直しが必要です。

backdrop.png?mark=green-tube.png&mark-drop-shadow=12&mark-drop-shadow-type=flat|cast|float&mark-drop-shadow-mode=ai
mark,mark-drop-shadow-mode
16:9
https://ix-marketing.imgix.net/logo-forme.png?rect=320,150,4,4&fit=fillmax&fill=solid&fill-color=F4EFE7&w=1600&h=900&mark=https%3A%2F%2Fix-marketing.imgix.net%2FMinimalist%2520Green%2520Tube.png%3Fbg-remove%3Dtrue%26fm%3Dpng%26trim%3Dalpha%26h%3D640%26pad%3D130&mark-h=900&mark-align=middle,center&mark-drop-shadow-elevation=40&mark-drop-shadow-azimuth=160&mark-drop-shadow-softness=90&mark-drop-shadow-falloff=75&mark-drop-shadow-y=24&mark-drop-shadow-color=59412E1E&mark-drop-shadow-x=26@mark-drop-shadow-type:flat&auto=format,compress
暖かみのある背景に`mark`で配置した切り抜きチューブ。クラシックなオフセットの影なら`flat`、床面に影を落とすなら`cast`(`drop-shadow-mode=ai`が商品の形状を読み取ります)、浮いた商品には`float`を選びます。
影をオフにすると、切り抜きが背景に平らに重なります。

ドロップシャドウと床面の映り込み

drop-shadow-type=cast

Imgixは、影と映り込みをレンダリングの一部として描画できるようになりました。柔らかなドロップシャドウ、配置したライトで床面に落ちるキャストシャドウ、浮いた商品の下にできるフロートシャドウ、押し込んだような見た目のインセットシャドウから選べます。距離に応じてフェードする床面の映り込みを加え、ガラスや黒いアクリルのような質感に色付けすることもできます。

キャストシャドウと映り込みでは、AIモードが商品の形状とカメラアングルを読み取り、それに合わせて影を配置します。細かく制御したい場合は、角度と光の方向を自分で設定できます。AIモードは通常のレンダリングと同じ料金です。

影と映り込みはURLパラメーターなので、1つのテンプレートですべての商品を同じように演出できます。季節のキャンペーンで背景色を変えても、すべての画像が影を保ったまま更新されます。影と映り込みはウォーターマークレイヤーにも使えるため、商品をライフスタイルシーンに配置し、その場に自然に接地させることもできます。

このグループのその他の機能
プレースホルダー · 静止画

4種類のシャドウ

drop-shadow-type=inset

左からflat、cast、float、inset。同じ切り抜きに、それぞれ1つのパラメーターを指定しています。

ドキュメント →
プレースホルダー · 静止画

光沢のある黒い床

reflection-blur=0

暗い背景に、キャストシャドウと床面の映り込みを組み合わせています。reflection-blurを0にすると、ガラスや黒いアクリルのような仕上がりになります。

ドキュメント →
2

白やグリーンの背景で撮った写真を、切り抜きに

影や映り込みには、透明な背景の商品が必要です。しかし多くのカタログにとって、AIによる背景除去は過剰です。商品をシームレスな白背景やグリーンスクリーンで撮影しているなら、背景がすでに仕事の大半をこなしています。

watch.png?colorkey&bg=54423B
16:9
https://ix-marketing.imgix.net/watch.png?w=1600&h=900&fit=fill&fill=gen&colorkey-tol=25&colorkey-feather=4&colorkey-defringe=100&transparency=grid&grid-size=40&grid-colors=FFFFFF,E6E6E6&fm=png
グリーンスクリーンで撮影した商品。`colorkey`が写真の隅からグリーンを読み取って透明にし(チェッカーボードで表示)、`bg`で切り抜きをブランドカラーの上に配置します。`colorkey`をオフにすると、撮影したままの写真が表示されます。
グリーンスクリーンで撮影したままの商品。

カラーキー

colorkey

URLにcolorkeyを追加するだけで、Imgixが写真の隅から背景色を読み取り、透明にします。正確な色を知っておく必要はありません。bgを追加すれば、切り抜きをブランドカラーの上に配置できます。さらに細かく制御したい場合は、色を自分で指定する、エッジがきれいになるまで許容値とぼかしを調整する、照明にムラのあるグリーンスクリーンにはクロマモードを使う、といった方法があります。通常のレンダリングとして処理されるため、画像ごとにAIを呼び出すことなくカタログ全体を処理できます。

髪、毛並み、柔らかいエッジには、引き続きAIによる背景除去が適しています。クリーンな背景に置いたエッジのはっきりした商品なら、カラーキーとキャストシャドウを組み合わせるだけで、シンプルなカタログ写真を1つのURLで演出された商品写真に仕上げられます。

このグループのその他の機能
プレースホルダー · 静止画

ブランドカラーの上に、キャストシャドウ付きで

mark-drop-shadow-type=cast

同じ切り抜きをブランドカラーの上に配置し、キャストシャドウを加えました。元のグリーンスクリーン写真から、1つのURLで演出しています。

ドキュメント →
3

閲覧されたときに生成される商品モックアップ

プリントオンデマンドやパーソナライズ商品には、デザインごとにモックアップが必要です。マグカップ、シャツ、スマホケースにお客様のアートワークを載せたものです。これを事前にレンダリングすると、売れるかどうかわからないデザインのために何千ものファイルが生まれます。

tee.jpg?blend=vintage-graphic.jpg&blend-mode=multiply|normal&blend-alpha=85&blend-displace=tee-map.png&blend-displace-x=10&blend-displace-y=10
blend,blend-alpha,blend-displace-x,blend-displace-y
16:9
https://ix-marketing.imgix.net/jsb-co-HxFhwIRko5Y-unsplash.jpg?rect=421,60,1663,935&w=1600&h=900&blend=https%3A%2F%2Fix-marketing.imgix.net%2Fvintage-graphic.jpg%3Fw%3D1000&blend-w=480&blend-x=600&blend-y=300&blend-displace=https%3A%2F%2Fix-marketing.imgix.net%2Fjsb-co-HxFhwIRko5Y-unsplash.jpg%3Frect%3D421%2C60%2C1663%2C935%26w%3D1600%26h%3D900%26sat%3D-100%26blur%3D60%26con%3D-40%26bri%3D-10%26fm%3Dpng&auto=format,compress
Tシャツにブレンドしたグラフィック。`blend-displace`は写真をぼかして彩度を落としたコピーをマップとして使うため、プリントがしわに沿います。`multiply`で生地の質感が透けて見えます。`normal`に切り替えると、平らなステッカーのようなグラフィックになります。

イメージワープ

blend-displace-x=10

イメージワープは、URLから商品写真にデザインを配置します。デザインの四隅を面に合わせて遠近感をつける、マグカップのような曲面に沿わせて曲げる、傾ける、ディスプレイスメントマップで布のしわに沿わせる、といったことが可能です。位置は画像に対する割合で指定するため、同じURLがどのサイズや画面密度でもジオメトリを保ちます。

モックアップはリクエスト時に、閲覧されたデザインの分だけレンダリングされ、商品ラインナップ全体で同じテンプレートを使えます。

このグループのその他の機能
プレースホルダー · 静止画

マグカップの曲面に沿って

blend-arc=-9

arcで、同じグラフィックをマグカップの側面に沿って曲げます。小さな値にすると自然に見えます。

ドキュメント →
プレースホルダー · 静止画

箱に遠近感をつけて

blend-distort=0.43,0.405,…

distortでグラフィックの四隅を箱の正面に合わせ、遠近感のあるプリントに仕上げます。

ドキュメント →
4

外観の印象を高める物件写真

購入希望者は、最初の写真を見て物件をクリックするかどうかを決めます。曇りの日に撮影した家は、晴れた午後に撮影した同じ家より魅力が劣って見えます。数千件の物件で外観を撮り直したり、手作業で編集したりするのは現実的ではありません。

house-listing.png?ai-image-edit=curb-appeal&ai-image-edit-analysis=true
ai-image-edit-analysis
16:9
https://ix-marketing.imgix.net/house-listing.png?w=1600&h=900&fit=crop&crop=focalpoint&fp-y=0.42&auto=format,compress
曇りの日に撮影した物件写真。`curb-appeal`は、1回のリクエストで空をより青く、芝生をより緑に、外壁をよりきれいにします。
撮影したままの物件写真。

AI Image Edit:curb-appeal

ai-image-edit=curb-appeal

AI Image Editの新しいcurb-appealモードは、1回のリクエストで物件の外観を向上させます。空をより青く、芝生をより緑に、外壁をよりきれいに仕上げます。分析機能が事前に各写真をチェックし、編集に適さない場合はお知らせするため、効果のある写真だけに適用できます。

外観を補正した物件では、直帰率の低下、クリック数の増加、バーチャルツアーの閲覧時間の延長が期待できます。編集した写真の開示については、各地域の不動産広告のルールをご確認ください。

このグループのその他の機能
No items found.
5

その他の新機能

16:9

オリジンのキャッシュエイジを保持

ソース単位の新しい設定「Preserve origin cache age」により、オリジンのキャッシュエイジがImgixを通じて引き継がれます。CDN上のコピーは、キャッシュ期間をまるごと待つことなく、オリジンのコピーと同時に期限切れになります。

これまでdrop-shadowをお使いだった方へ:このパラメーターは以前は非公開で、余白を追加するだけでした。既存のURLでも、今後は影が表示され、キャンバスが大きくなります。詳しくは変更履歴をご覧ください。変更履歴 →

このグループのその他の機能
No items found.

URLで商品写真を仕上げる、その他の方法

背景除去は、1つのパラメーターで商品や被写体を背景から切り抜きます。ドキュメント →

被写体認識クロップは、どのアスペクト比でも商品をフレーム内に収めます。ドキュメント →

テキストとバッジのレイヤーは、テンプレートから任意の画像にセールタグ、ロゴ、見出しを追加します。ドキュメント →

AI Image Editは、1つのパラメーターで写真のクリーンアップ、リステージング、ライティング調整を行います。ドキュメント →

これらはすべて、今回のリリースの機能と組み合わせてご利用いただけます。1つのプラットフォームで、URLもAPIもそのままです。

さっそく始めましょう

すでにImgixをご利用中の方は、ドキュメントをご確認いただくか、導入のサポートが必要な場合はカスタマーサクセス担当者までお問い合わせください。

Stay up to date with the latest Imgix news. No noise.