手軽なLorikeetデザイン: 商品説明インフォグラフィックデザインの自動化

第3章「成功の方程式: コンバージョンを促進する商品展示方法」で説明したように、商品説明セクション(Lorikeet)は、商品の特徴、利便性、ビジュアルの詳細を潜在的な購入者に深く伝える重要な役割を果たします。ロリキートは商品ディスプレイの拡張として機能し、初期の関心を情報に基づいた意思決定へと変える役割を担います。

Lorikeetのレイアウトをデザインする際の重要な考慮事項の一つは、カタログ全体の商品写真の一貫性です。

  • 一貫した写真:商品画像が統一されたスタイルやフォーマット(例:前面写真、背面写真、モデル写真)に従っている場合、すべての主要な要素がシームレスに統合された単一の一貫したLorikeetレイアウトを設計できます。
  • バリエーションのある写真:商品画像がスタイルや可用性において異なる場合は、モジュラーアプローチを選択してください。各商品の特徴を示すセクション(例:特徴のハイライト、ライフスタイルショット、サイズチャート)を作成し、利用可能な画像に基づいて要素を組み合わせて視覚的に魅力的で情報豊富な商品説明を構築します。

 

ステップバイステップ: スプレッドシートから画像生成機能を使ったLorikeetの自動作成

ステップ1:Lorikeet用のカスタム画像フォーマットを作成

  1. 「ブランド設定 > プラットフォーム&サイズ > カスタム」へ移動。プラットフォームの「新規作成」をクリックし、新しいプラットフォーム(例:「ブランドサイト」)に名前を付けます。
  2. 「新規作成」をクリックし、利用可能なサイズの下で画像の寸法を定義します:
    • フォーマット名を入力します (例: 「Lorikeetサイズ」)。
    • 幅と高さをピクセル単位で指定します。
    • ダウンロード画像の最小および最大ファイルサイズ (キロバイト単位) を設定します。
  3. 「確認」をクリックしてサイズ設定を保存し、「設定を保存」をクリックしてプラットフォームの構成を確定します。

 

ステップ2:PhotoshopでLorikeetデザインに基づいたブランドレイアウトを作成

  1. シンプルなレイヤー化されたPhotoshopファイルを準備します。
    • 各テキストフィールドに別々のテキストレイヤーを使用します。
    • 各画像プレースホルダーに画像レイヤーを使用します。
      (ヒント:サンプルのPhotoshopファイルをダウンロードしてスタートポイントにしてください。)
  2. dippにPhotoshopファイルをアップロードし、各レイヤーをマッピングします。
    • テキストレイヤーを対応するテキスト要素に割り当てます。
    • 画像レイヤーを対応する画像要素に割り当てます。
  3. ステップ1で作成したカスタムLorikeetサイズを選択し、レイアウトが希望通りになるまでマッピングプロセスを完了します。

 

ステップ3:テキストおよび画像要素をスタイル設定

  1. テキスト要素をカスタマイズ:
    • 特徴タイトルの周りにボックスを追加するには、関連するテキスト要素をShift+選択し、テキスト形状アイコンをクリックして設定を調整します。
    • テキストカラーを変更するには、テキストカラーアイコンを選択し、希望の色を選びます。
  2. 画像要素をカスタマイズ:
    • 円形の商品画像を表示する場合は、関連する画像要素をShift+選択し、マスクアイコンをクリックして円形マスクを選択します。

 

ステップ4:スプレッドシートを使ってレイアウトに情報を入力

  1. コンテンツフィードセクションからCSVテンプレートをダウンロードします。
  2. スプレッドシート内で:
    • 各商品の新しい行を作成します。
    • 各列に必要なテキストを入力します。
    • 対応する画像フィールドに画像URLを貼り付けます。
      (ヒント:サンプルのコンテンツフィードファイルをダウンロードして参照してください。)
  3. 完成したCSVをdippにアップロードし、Lorikeetレイアウトに自動的に情報を反映させます。

 

このワークフローを利用すれば、視覚的一貫性を持つ詳細な商品ロリキートを効率的にバッチ作成でき、時間を節約し、ブランドの一貫性を維持できます。