Webflowで車両画像を使用し、CMSフィールドに書き込み、デザイナーでバインドし、サイトにキーを置かない。

Webflowには制御できるサーバーがないため、統合はサイトの外側で行われます。オートメーションで車両を解決し、URLをCMSコレクションに書き込み、デザイナーで他の画像と同様にフィールドをバインドします。

LP webflow: hero1
LP webflow: hero2
LP webflow: s1

カスタムコードの埋め込みは、ここには適していません

APIを呼び出す埋め込みは、キーをページソースに配置し、すべての訪問者に第三者を待たせます。CMSフィールドはレンダリング時にコストがかからず、サイトを運営する者が編集できます。

  • キーは自動化に残り、サイトには決してありません
  • CMSから画像がレンダリングされ、追加のリクエストは不要です
  • 編集者はコードブロックではなく、通常のフィールドを見ます

Webflow版の統合

角度ごとに1つのCMSフィールド、1つの自動化、そしてデザイナーが残りを担当します。

01
CMSフィールドを追加

車両コレクションのVINまたは既に保存している仕様の隣に、角度ごとのプレーンテキストフィールドを作成

02
自動化で解決

Make、Zapierまたは小さなスクリプトがAPIを呼び出し、Webflow CMS APIを通じてURLを書き戻します。

03
デザイナーでバインド

画像要素をフィールドに向けます。Webflowはそれを自分のスタイリングで通常の画像としてレンダリングします。

04
変更時に公開

コレクション項目が追加されたり、車両データが変更されたりしたときに自動化を再実行し、その後公開します。

LP webflow: s2

統一されたアートワークはここでのデザインの利点です

Webflowサイトは通常、グリッドが揃っていることを気にするデザイナーによって構築されます。すべての車両で同じフレーミングと照明は、誰もリタッチしないのにコレクションリストが意図的に見えます。

  • すべてのカードが同じベースラインに配置されます
  • 任意のブランド背景に透明なカットアウト
  • ストック写真のライセンスを追跡する必要はありません

Webflowでの車両画像、実践編

Webflowプロジェクトは、デザインが完成し、コンテンツが未完成の時点で車両画像に直面します。コレクションには40台の車両があり、プレースホルダーアートでグリッドが完璧に見え、実際の写真が6種類のクロップとセクションの色と競合する背景で到着します。

Webflowにはサーバーがないため、修正は自動化に住む必要があります。解像度はアイテムごとに1回実行され、訪問者ごとに1回実行されるのではなく、サイト自体は第三者の呼び出しがない静的エクスポートのままです。デザイナーは、スタイルを自由に設定できるフィールドとして画像を扱い続けます。

Webflowチームが尋ねること

カスタムコードの埋め込みからAPIを呼び出すことはできますか?

しない方が良いです。キーがページソースに表示され、すべての訪問者がリクエストの料金を支払うことになります。オートメーションで解決してください。

どの自動化ツールをお勧めですか?

MakeとZapierの両方が動作し、スケジュールに設定された小さなスクリプトも動作します。唯一の要件は、キーを安全に保管する場所です。

画像をWebflowにアップロードする必要がありますか?

いいえ。URLをプレーンテキストフィールドに保存し、画像要素にバインドします。ファイルは私たちのCDNに残り、アセットの制限は変わりません。

Webflow CMSのアイテム制限はどうですか?

影響を受けません。既存の項目にフィールドを追加するのであって、新しい項目を追加するのではありません。

静的エクスポートでも動作しますか?

はい。URLは絶対パスなので、エクスポートされたサイトはWebflowランタイムなしで引き続きレンダリングします。

一致しない車両はどう扱いますか?

応答はフォールバックが使用されたときを教えてくれるので、自動化はフィールドを空にし、デザイナーの条件付きが要素を非表示にできます。

ステージングプロジェクトで試してみてください

車両コレクションの構造とデザインで使用する角度を教えてください。URLと自動化の概要を返します。

  • 車両の角度ごとにCMSフィールド構造を作成
  • グリッドと詳細レイアウト用のサイズ変更されたバリアント
  • トライアルは全コレクションをカバーします
ありがとうございます。メッセージを受け取りましたので、設定に合わせた画像のURLをお返しします。
問題が発生しました。もう一度お試しいただくか、info@vehicleimagery.com までご連絡ください。

コレクションを埋める

コレクションの車両を送信して、CMSに貼り付けまたは自動化する準備ができたURLを返します。

通常、同じ営業日中