145 測定値

信頼性、パーソナライゼーション、および効率性のために UGI を動的に処理する

に imgix5m2023/05/10

長すぎる; 読むには

ユーザー生成コンテンツ (UGI) は、増え続けるユーザーベースを構築するのに最適です。 UGI は取り扱いが難しく、間違えた場合のペナルティが大きくなる可能性があります。この記事では、UGI をプログラムで処理する方法を紹介します。

featured image - 信頼性、パーソナライゼーション、および効率性のために UGI を動的に処理する

ユーザーエンゲージメントとソーシャル共有に依存するオンラインマーケットプレイスを管理している場合、ユーザー生成コンテンツと画像 (UGC/UGI) は最も価値のある資産の一部です。 Yelp のようなレビューサイトでは、ユーザーは写真を通じてレストランの質を絶賛したり、嘆いたりできます。旅行サイトは、所有者が美しい写真やビデオで訪問者を引き付けるのに役立ちます。最後に、 Unsplashのような写真共有サイトは、写真家が独自の感性を披露し、露出を増やすのに役立ちます。

ただし、UGI は取り扱いが難しく、間違った場合のペナルティが大きくなる可能性があります。この記事では、UGI をプログラムで処理する方法を紹介します。これにより、信頼を構築し、ユーザーエクスペリエンスを向上させ、ワークフローを簡素化できます。

ユーザー生成コンテンツのメリット

ユーザー生成コンテンツ、特に画像や動画は、増え続けるユーザーベースを構築するのに最適です。サイトやアプリで健全なエコシステムを構築する場合、次の 3 つの方法で UGI の力を活用できます。

信頼:友人、隣人、仲間、同僚は、マーケティングメッセージを信頼するよりも、お互いを信頼しています。 Stackla による最近の調査では、消費者の 60% が家族や友人からのアドバイスに基づいて購入を決定していることがわかりました。接続が本物である場合、より多くの信頼があります。
パーソナライゼーション:人々の好みや好みはそれぞれ異なります。個性が強まる世界では、ユーザーはパーソナライゼーションを求めています。ユーザー生成コンテンツは、ニッチな視聴者にリーチし、そのニーズに応える優れた方法です。
費用対効果:さらに、ユーザーから画像を取得することは、コンテンツを生成するためのより実用的で費用対効果の高い方法であることが多く、特にオンラインマーケットプレイスの場合はそうです。

ユーザーが作成した画像を処理する際の注意事項

UGC を使用している場合、毎日何百万とは言わないまでも、何千もの UGI を扱っている可能性があります。画像は、経験の浅いインフルエンサー、ベテランの写真家、またはその中間の人物によるものです。その結果、これらの画像の形式、サイズ、品質は非常に多岐にわたる可能性があります。

一方、コンテンツを消費するサイト訪問者は、次のような最高のエクスペリエンスを期待しています。

高速な画像の読み込みとページ速度
レスポンシブデザインとデバイス適応性
標準化されたフォーマットと構成
ブランドセーフティとコンテンツモデレーション

ユーザーの期待と UGI 処理の課題との間のギャップを埋めることは困難な場合があります。そして、これらすべてのニーズを解決する単純なソリューションを見つけることは、ほぼ不可能に思えるかもしれません。ただし、費用対効果が高く、信頼性が高く、スケーラブルなソリューションがあります。この記事の残りの部分では、それらが何であるか、およびそれらをいかに簡単に展開できるかを正確に示します。

1. 高速読み込みとページ速度の最適化

画像や動画、特にユーザーが作成したものは、多くの場合、Web ページで最大のファイルであり、ページの速度が遅くなります。 SEO がビジネスにとって重要である場合は、画像の最適化と圧縮を試みる必要があります。これにより、ページの速度、 Core Web Vitals 、ひいては検索結果が向上します。 Imgix を使用すると、3 つの一般的な手法を組み合わせて、画像ファイルのサイズを縮小し、ページの速度を上げることができます。

AVIF や WebP などの次世代形式で画像を提供する
画像のサイズを適切に変更する
Imgix にベストエフォート圧縮を適用させる

以下の例では、元の画像のファイルサイズは 3.3 MB です。最適化された画像は、同じように見えますが、ファイルサイズはわずか 215kB で、元の画像より 93% 小さくなっています。これにより、読み込み速度が大幅に向上します。これは、URL クエリ文字列としてfm=webp&auto=compress&w=2000 3 つの単純な変換を使用することによって実現されます。

元の画像 - 3.3MB

最適化された画像 - 215kB .リンクをクリックすると、サイズが縮小されます。

2.レスポンシブデザイン

デバイスとブラウザーが急増する中、1 つのイメージバージョンに依存して、さまざまな環境に適応し、それぞれの環境で見栄えを良くすることはできません。逆に、さまざまな次元の派生ファイルを手動で生成するのは、労力がかかり、ほとんど拡張できません。

幸いなことに、 <srcset>属性は、利用可能なオプションに基づいて最適な画像サイズを特定するようブラウザに指示することで、その必要性を軽減します。さらに、アートディレクションには Imgix と<picture>要素を使用できます。

解像度切り替え用ソースセット
<picture> アートディレクション用

3. ビジュアルの品質と構成を標準化する

ほとんどのユーザー生成画像は専門的に作成されたものではありません。多くの場合、それらは明るすぎたり、暗すぎたり、単に互いに一貫性がありません。視覚的な品質とまとまりを向上させるには、標準的な画像拡張セットを検討する必要があります。また、1 日に数千件以上の UGI を処理している場合、自動化によって大幅な時間を節約できます。

auto=true — RGB チャンネル全体のハイライト、ミッドトーン、およびシャドウの分布を調整することで、画像をより鮮やかにします
auto=redeye — 赤目除去を提供します

顔のピントとフレーミングも重要です。ニュースの主題の表情は、ズームインして適切にトリミングすれば、どんな言葉よりもニュアンスのあるストーリーを伝えることができます.また、ユーザーからの製品レビューをホストする場合、ユーザーアバターは信頼性と信頼性を高めます。いくつかの Imgix API パラメータにより、顔の検出、フレーミング、トリミングが簡単になります。

faceindex — 画像を中央に配置する面を選択します。特定の面を分離したり、複数の面を含めることができます。以下の例では、 faceindex=2とその他のいくつかのパラメーターを使用して、子供の顔を選択しています。

facepad — 顔の周りのパディングの量を定義します。以下の例では、他のいくつかのパラメーターとともに、 facepad=1を使用してモデルの顔にズームインします。

mask — 画像にマスクを設定します。以下の例では、他のいくつかのパラメータとともに、 mask=ellipseを使用してモデルの顔の周りに円形のマスクを配置しています。

注意点として、Imgix は顔情報を保存したり、写真の個人を特定したりしません。すべての検出はオンザフライで行われ、EU データ保護規制に準拠しています。

4. コンテンツの監視とモデレーション

UGI では、コンテンツの安全性も重要な考慮事項です。 Imgix Asset Manager は、潜在的に暴力的、成人向け、またはその他の疑わしいコンテンツを自動的に検出するのに役立ちます。コンテンツアラートを使用すると、ユーザーが生成した画像をすばやく簡単に整理でき、コンテンツのモデレートをより効果的に自動化できます。