igal-commits/art-directing-site-imagery

サイトイメージのアートディレクション

概要

Webサイトのイメージはセットとして失敗するのであって、個々の写真として失敗するわけではありません。何も共有していない3枚の良い写真は、光、パレット、被写体を共有する3枚の普通の写真よりもひどく見えます。そして、隣の文章を証明していない美しい写真は、単なる装飾です。

中核原則：1枚の画像も生成する前に、セット全体の定数を決定し、すべての画像が隣の主張を証明するようにする。

エンジンとアートディレクター

ページ上のイメージは、エンジンから生成され、アートディレクターによって指示されます。ストックや古いページのトリミングからは決して取得しません。

私たちのスタックでは、エンジンは自社製のオンモデルレンダリングエンジンであるBotikaであり、アートディレクターはその上に位置するスキルです。ブリーフの定数を保持し、各画像のモデル、ポーズ、衣装の完成、背景を選択し、レンダーバッチを実行し、結果を要求されたスタイルに対してQAチェックします。そのスキルはプライベートパイプラインを駆動するもので、このリポジトリの一部ではありません。それが果たす契約は、このスキルが任意のエンジンに要求するものです。

入力	出力
ブリーフの定数（パレット、光、環境、クロップ、連続性、バリエーション）	ネイティブ解像度のセット、スロット名で命名
衣類または被写体ごとに1つのソースアセット	忠実度を確認するためのソース対レンダリングシート
スロットリスト：各セクションの主張とそのボックスのアスペクト	QAログ：チェックされた内容、再レンダリングされた内容

エンジンが定数を入力として受け取れない場合、アートディレクターステップはチェックリストを持つ人間になり、そのチェックリストがこのスキルです。

予算ルール

レンダリングにはクレジットと時間がかかります。1つのジョブにつき1レンダー。新しいものを作る前に既存のアセットを再利用します。約6枚を超えるバッチの前に人間に確認します。「念のため」という投機的なバッチは禁止です。同じレンダリングが2つのセクションに役立つことがよくあります。再利用します。

最初に定数を決定する

これらを書き留めます。その後、すべての画像はそれらに対して評価され、基準を満たさない画像は受け入れられず、再生成されます。

定数	決定事項
パレット	3つのニュートラル、最大1つのアクセントカラー（16進数）
光	1つの言語：柔らかい日光、ハードな指向性、または曇り
環境	スタジオ、実際のロケーション、または両方の宣言された比率
クロップ	フルレングス/ミッド/タイトのうち2つを選択し、3つは不可
連続性	セット全体で変わらない1つのもの
バリエーション	セット全体で変化する1つのもの

プロダクトセットにおいて最も強力な連続性のデバイスは、異なるモデルとシーンで同じ1つの衣類です。それは範囲を示しながら一貫性を証明し、通常はページがまさに主張していることです。弱いバージョンは、異なる衣類を着た1つのモデルです。それは何も証明せず、ルックブックのように見えます。

イメージはコピーを証明する

レイアウトに触れる前に、各セクションについて、そのコピーが行う唯一の主張と、それを証明する写真を書き留めます。「シーン」の下の顔のクロップや「プリントとロゴ」の下の無地のドレスは、カードを装飾するだけで、実証にはなりません。

セクションの主張	写真の内容
プリントは揃ったまま	縫い目に沿って並んだストライプ
ロゴは所定の位置に留まる	胸のエンブレム、すべてのモデルで同じ位置
カタログに拡張可能	1つのスタジオ内の多くの異なる製品（ステータスリスト付き）
1つの衣類、どんなシーンでも	同じ衣類とモデルが複数の場所に、コントロールが変化
インクルーシブ	異なる数人のモデルに1つの衣類

セクションに主張があり、それを証明する写真がない場合、それはレンダリングブリーフです。

既存のセットにマッチングする

既存のイメージに追加する場合、何かを生成する前に、そこから定数を導き出します。目視ではなく測定します。既存のフレームの背景輝度と支配的な色相をサンプリングし、それぞれのクロップと照明をメモします。

既存のセットが4つの明るいフレームと1つの暗いフレームである場合、新しいセットは4つの明るいフレームと1つの暗いフレームにします。比率は見た目の一部です。

被写体の調達

• 画像モデルを使用して、ルック写真から各衣類を抽出し、ルック写真を参照として使用します。衣類ごとに1製品、レンダリングごとに1ルックをレンダリングします。
• 第三者のワードマークやロゴが含まれるソース画像は決して使用しないでください。
• ストーリーに合わせてポーズを選びます。トップスは上半身のポーズ。ドレス、ジーンズ、スカート、トラウザーズはフルレングス。手を腰に当てるとポケットと揃ったストライプが見えます。
• 背景はニュートラルにします。温かい背景ではなく、キャスティングとスタイリングを通じてムードを演出します。

シーンのプロンプト作成

シーンを説明し、衣類は決して説明しません。衣類は入力として提供されるため、説明するとモデルと競合し、忠実度が低下します。

順序：設定、光、カメラ、ポーズとムード、パレット。

長い波形の鋼製シャッターのそばの夕暮れの空っぽの街路、クールな青いアンビエントライトと右から差し込む1つの暖かいナトリウムランプ、35mmフルレングスの環境フレーム、モデルはフレームの右側に立ち静止、左側に長い空の壁、両手をリラックスして脇に置きカメラをまっすぐ見つめる、シネマティックで静か、クールなコンクリートグレーとクリームのパレット。

特にWeb向け：

• 被写体は中央から外し、空いている側を指定する。 ヒーローにはコピーのための余地が必要です。
• 全体を通して肯定的な表現を使用します。望まないものを指定すると、それがフレーム内に入ってしまいます。
• シーンは、そこに属するもので満たされた、現実の、具体的で、生活感のある場所です。モデルがいる薄暗い空の部屋は、場所を装ったスタジオとして読まれます。
• テンプレートはプロンプトを上書きします。テンプレートが要求していないルックを返し続ける場合、それを破棄し、プロンプトからシーン全体を駆動します。

ヒーローグリッド

ポートレートのグリッドは3つの方法で失敗します。これらはすべて最初の1秒で見えます。

• 同じ写真が2つ、並んでいる
• 頭がヒーローの端で切れている
• フェードではなくスライドする変化

ルール：表示されるすべての写真は一意で、どれもヒーローの端で切れておらず、写真は1つのセルから別のセルにフェードアウト/インすることで場所を変えます。8秒間フレームをサンプリングし、重複するソース、ヒーロー長方形の外側のタイル、タイルの重なり、またはコピーの下のタイルがある場合は失敗とします。

ネイティブ解像度でのQA

サムネイルとコンタクトシートは、27インチモニターで気づくまさにその失敗を隠します。ロケーターシートで手と足の位置を特定し、それらの領域をフルサイズファイルから切り出し、2倍から4倍で表示します。

• 足と靴：ペアとして2つを比較します。ソールの厚さ、ラストの形状、ストラップ、ヒール。
• 手：指の数を数えます。数が判別できない場合、それは合格ではなく失敗です。
• 四肢の接合部：裾から靴につながる脚、肩、肘、膝
• 接触影：足の下にあり、オフセットしていない
• 衣類の忠実度：ポケット、縫い目、襟、裾の長さ、ウォッシュをソースと比較
• テキスト：フレーム内の看板やプリント

最も安価な修正は構図によるものです。フレームが太ももの中ほどで終わっている場合、靴の失敗を完全に排除します。下半分が重要でない場合はいつでもこれを使用します。プロンプトガードも有効です：「フレームは太ももの中ほどで終了し、足、足首、靴はどこにも見えません。」

解像度

スロットが占める最大のCSS幅の約2倍で出荷し、srcsetを通じて1x画面には1xファイルを提供します。すべてのスクロール位置で、すべての画像の実効比率を監査します（必要なピクセル÷ファイル内のピクセル数。1.0を超えるとソフト）。小さなソースをアップスケーリングするとピクセルが追加されますが、ディテールは追加されません。そう伝え、再レンダリングを提案します。

画像上のカラーフィールドとテキスト

画像またはカラーフィールド上のテキストは、判断ではなく測定されます。白いテキストは、大きなサイズで3:1、本文サイズで4.5:1のコントラスト比が必要で、ピクセルからサンプリングします。フィールド内のスリムは、色をくすませずに可読性を修正します。カラーフィールドに配置されたモックUIは、それ自身のテキスト色が必要です。そうしないと、シーンから白を継承し、白いカード上で消えてしまいます。

スロットに合わせた構図

ゆるく生成し、タイトにクロップします。配信するアスペクトをCSSボックスに合わせ、ブラウザがほとんど選択しないようにします。

• カードグリッド：すべてのカードに1つのアスペクト、ラッパーに設定、画像にobject-fit: cover
• ヒーロー：サポートする最も広いビューポート比率の約10%以内
• オーバーレイゾーン：カードのコピーが画像の下部3分の1にある場合、そのゾーンは静かでなければならない
• 一貫性を証明するコラージュ：1つの大きなセルと2つの小さなセル、すべて同じアスペクト

チェックリスト

• 生成前に定数を書き留めた
• すべてのセクションに主張とそれを証明する写真がある
• すべての画像が定数に対して評価され、基準を満たさないものは再生成され、受け入れられなかった
• 明るいフレームと暗いフレームの比率が既存のセットと一致する
• モデルはセット全体で異なるが、衣類または光は異ならない
• 手、足、衣類の詳細をネイティブ解像度でチェックした
• どのソースにも第三者のワードマークがない
• すべてのヒーローフレームにコピーのための余地があり、正しい側にある
• 配信アスペクトがCSSボックスと一致し、実効比率が1.0以下である
• 画像上のテキストのコントラストを測定した
• 再レンダリングする前に再利用した。約6枚を超えるバッチは人間が承認した