車両画像の背景は、車が駐車している場所についての事実でした。レンダリングされた画像では、デザイントークンになります。車はクリーンなカットアウトとして到着し、その上に乗っているものは、CSSまたは制御する合成ステップで決定します。チームはこれを画像編集の問題と考えるために、この機能を活用しません。これはパラメータです。
構成要素
リクエストは、transparency で純粋なカットアウト、shadow でスタジオ風の地面に立つ見た目、ground と mirroring でショールームの床に映る反射、さらに color、format とサイズを組み合わせます。すべての組み合わせは URL です — つまり、以下のすべての見た目は、一度定義してカタログ全体に適用するテンプレートです。
四つのレシピ
1. ブランドカラー、どこでも
ブランドの背景色に透明なWebPを重ねると、一番安い完全なリデザインが得られます：CSSルール一つで、在庫全体がアイデンティティに乗るようになり、四十の異なるディーラーショップに乗るのではなくなります。メールでも同じように動作します。背景はテーブルセルの塗りつぶしです。
2. グラウンドスタジオ
中立なフィールド上の影バリアントは、どんなコンポジットもなくプロのスタジオ撮影のように見える。これはリストと詳細ページの安全なデフォルトだ。車は何かの上に乗っており、すべての車は同じものの上に乗っている。バリアントは影、反射、透明度で並べて表示される。
3. ショールームの床
ミラー付きの地面反射でプレミアムコンフィギュレータの見た目を作り出し、車を磨かれた暗い床に置きます。ダークページテーマと組み合わせて、カタログの中立性ではなく意図的なドラマを求めるランチページやフラッグシップの配置に最適です。
4. キャンペーンのコンポジット
季節やキャンペーンのクリエイティブに対して、透明なカットアウトはデザインチームが構築するシーンに簡単に組み込めます：グラデーションフィールド、写真、イラストレーション。カットアウトの一貫したフレーミングがスケールを生み出します：一つのテンプレートで、すべての車両、車両ごとのマスク作業は不要です。
意図的な見た目を保つためのルール
- 各サーフェスごとに1つのレシピを選ぶ：グリッドやギャラリーは1つの見た目、キャンペーンサーフェスは別の見た目
- グリッド内で地面に接している車と浮いている車を混ぜることはしないでください、それはバグに見えます。
- コントラストを正直に保つ：暗い車両は暗い背景で反射や影が必要です。
- テンプレートが背景を所有するようにし、リクエストには透明度とサイズのみを持たせる
各レシピがファネルにどのように収まるか
レシピは互換性がないため、ファネルステージで選択することでシステムが一貫性を保ちます。リストグリッドや検索結果は中立性が求められるため、スタジオ風の画像が適しています。詳細ページは、一台の車が主役となるため、ショールーム風の画像が適しています。キャンペーンの表面、例えば有料ソーシャルや季節限定メールなどは、比較ではなく注意を引くために設計されているため、合成画像が効果を発揮します。
メールは独自の文に値します、なぜならチームが最初に諦めるのがメールの表面だからです。テーブルセルの塗りつぶしの上に透明なカットアウトは、ダークモードを生き残り、クライアント間で一貫してレンダリングされ、キャンペーンの色が変わっても画像編集が不要です。背景はテンプレート内の16進数値なので、リブランドは1つの変数に触れるだけで、1000枚の画像に触れる必要はありません。
画像が意図的に含まないもう一つのブランドストーリーは、トリムとカラーの正確性です。
