グラフィックデザイン
商品ローンチメールのデザイン
スニーカー発売メール。オレンジの商品イラスト、特大の文字、1つの購入アクション、4つのスペックを、幅の狭いクリーム色のキャンバスにまとめています。
メールデザインの活用シーン
- 単一商品のローンチ1つの商品、1つのカラーウェイ、1つのアクションにスポットを当てます。
- フットウェアのキャンペーン商品のシルエットと、短いスペック一覧を組み合わせます。
- メールのアートディレクション実際に配信するメールを準備する前に、幅の狭い読み順を検討できます。
ローンチメールのポイント
- カラーウェイ主導のイラストEmber Flareのシューズとオレンジの見出しが、同じアクセントカラーを共有しています。
- 1つの購入アクション商品名とローンチの説明に続いて、ダークカラーのボタンを配置しています。
- 単位付きのスペック重量、ヒールスタック、ヒールトゥドロップ、クッショニングにラベルを付けています。
商品ローンチメールをセクションごとに見る
1 / 4
1足のスニーカーと縦方向の読み順
SPORT TESTは架空のフットウェアブランドで、このHTMLメールはEmber FlareカラーのAxis Proスニーカーを紹介します。カタログや競合する複数商品のグリッドから始めることはしません。コンパクトなマストヘッドから、大きな商品イラスト、発売メッセージ、購入アクション、スペックのグリッド、小さな配信登録フッターへと進みます。
メールの最大幅は680ピクセルです。クリーム色の背景が、画像、テキスト、技術情報を別々のプロモーションタイルにせず、ひとつにつなぎます。この狭いキャンバスにより、読み手は上から下へ予測しやすい順で読み進められます。同時に、特大の見出しは意図的に折り返す必要があり、短い商品名がこの構成を成り立たせる要素のひとつになっています。
| セクション | 表示内容 | ローンチでの役割 |
|---|---|---|
| マストヘッド | SPORT TESTと、Shop、Journal、Membersのリンク。 | 商品を見せる前にブランドを印象づけます。 |
| イラスト | Ember FlareとDrop 04のスタンプが付いたオレンジのシューズ。 | 商品名に至る前に、カラーウェイを紹介します。 |
| 発売メッセージ | Meet the Axis Pro、説明文、ダークカラーの購入ボタン1つ。 | 商品の個性、約束、次に取ってほしいアクションをまとめます。 |
| スペック | 小さなブランドフッターの上に並ぶ、ラベル付きの4つの値。 | 主要なプロモーションメッセージの後に、技術的な詳細を補います。 |
カラーウェイでアートディレクションを導く
このシューズは商品写真ではなく、ベクターイラストです。オレンジのアッパー、淡い色のソール、濃いアウトラインが暖色のグラデーションの上に置かれています。見えるEmber Flareのスタンプが、色の選択を商品ストーリーの一部にします。その下では、Axis Proがオレンジのイタリック体で、ほかは濃い色の大文字で組まれた見出しの中に現れ、同じアクセントをメッセージへ引き継ぎます。
これは、ひとつの印象的なシルエットや仕上げを軸にしたローンチに有効です。イラストなら、雑多な背景と競合せずに簡略化でき、周囲のクリーム色が、長いメールをオレンジ一色の塊にしません。一方で、再現性にはトレードオフがあります。様式化されたベクターは質感やクッション性を示唆できますが、実物のシューズが実際にどう見えるかを保証することはできません。
商品の横にあるカラー名
Ember Flareはイラストと発売コピーの両方に現れます。これにより、オレンジを単なる装飾にせず、カラーウェイとメッセージを結びつけています。複数のバリエーションを扱うキャンペーンでは、選んだバリエーションを同じように明示する必要があります。
スケールが商品の見せ場をつくる
シューズはヒーローエリアの大部分を占め、小さなスタンプは端に寄せています。このコントラストにより、シルエットが最初に目に入ります。長い宣伝ラベルがあればこのバランスが弱まるため、周囲のテキストは意図的に簡潔にしています。
大きな見出しから測定可能な詳細へ
発売メッセージは「Meet the Axis Pro. A sneaker that runs.」です。大きな縦長の大文字が、短い一文を存在感のある視覚的な塊に変えます。オレンジのイタリック体の商品名は、発売する対象をほかの文から切り離します。その後、小さめの段落がサンプルのポジショニングを伝え、ダークカラーの「Shop the Axis Pro」ボタンへと続きます。
メッセージ内で目立つ購入アクションは1つだけです。マストヘッドのリンクははるかに小さく、別の主要アクションには見えません。単一商品の告知としては理にかなっていますが、実際のキャンペーンでは、有効なリンク先に加え、そもそもナビゲーションをメールに含めるかどうかの判断も必要です。
| 表示される値 | 補足ラベル | ラベルが重要な理由 |
|---|---|---|
| 7.4 OZ | 重量、女性用US 8。 | 単位と例として示した靴のサイズがあることで、重量の主張を解釈できます。 |
| 34 MM | ヒール部の最大クッションスタック。 | 位置を示すことで、次の測定値とスタック高を区別できます。 |
| 8 MM | ヒールトゥドロップ。 | 同じ単位でも別の関係を表しており、もうひとつのスタック高ではありません。 |
| Gel-02 | ヒールと前足部のジェルショックポッド。 | これは部品の識別子であり、ほかの値と同じ尺度の数値ではありません。 |
メールデザインであり、配信済みキャンペーンではない
このOpenDesignの例は、ブラウザーでレンダリングされるHTMLメールのコンセプトを示すものです。商品スペック、ブランドの住所、発売文言は例示です。購入、配信登録、ナビゲーションのリンクにはプレースホルダーのリンク先を使っており、チェックアウト、メーリングリスト、配信サービス、配信停止のワークフローは用意されていません。
幅の狭いビューポートでは、ソースはマストヘッドのナビゲーションを非表示にし、余白と見出しサイズを小さくします。これはブラウザー上のレスポンシブな処理を示すもので、メールクライアントでの互換性が検証されたわけではありません。ソースはモダンなflexとgridのスタイルを使っています。実際のキャンペーンを送る前に、メール互換の実装を用意してテストし、商品の主張を確認し、配信登録リンクを適切なサービスに接続してください。
OpenDesignで商品ローンチメールをデザインする方法
1つの商品と1つの主要アクションを指示する
まず商品名、カラーウェイ、ターゲット、促したいアクションを決めます。例として使われているAxis Proの値は残さず、確認済みの自社スペックを入力してください。以下のプロンプトは再現のための提案であり、元の生成セッションについて述べるものではありません。
推奨プロンプト私のフットウェアブランド向けに、単一商品のローンチメールのコンセプトを作成してください。幅680pxの狭いクリーム色のキャンバス、コンパクトなブランドマストヘッド、暖色の4:3の商品イラスト、カラーウェイのアクセントを入れた特大の縦長見出し、主要な購入ボタン1つ、ラベル付きの4つのスペック、控えめな配信登録フッターを使ってください。商品情報は私が提供したものだけを使用してください。スマートフォンでは余白と見出しサイズを小さくしてください。購入リンクと配信登録リンクは、実際のリンク先を提供するまでプレースホルダーとして扱い、メールクライアントでの互換性やEC連携を主張しないでください。
商品の見せ方と見出しを磨く
暖色の背景の上でもシルエットが読み取れることを確認し、実際の商品名で見出しを確かめます。名前が長い場合は、改行位置を変えるか、スケールを抑える必要があるかもしれません。カラーウェイのアクセントは見えるように保ちつつ、すべてのテキストブロックには使わないでください。
ラベル、リンク、狭いレイアウトを確認する
4つのスペックを、単位と補足条件を残したまま確認します。スマートフォンでのレイアウトを点検し、プレースホルダーのリンク先をすべて置き換え、配信登録フッターを検証してください。実際にメールとして送信する場合は、メールクライアント向けの実装とテストを別の制作工程として行います。
エクスポートして共有リンクを取得
完成したデザインをエクスポートし、OpenDesignの「共有」機能を使って共有リンクを取得してください。別のブラウザウィンドウでリンクを開き、意図したバージョンとそのアセットが正しく表示されることを確認してから送付してください。
AIワークフローのエディトリアルポスターデザイン
AIワークフローのエディトリアルポスターデザインは、番号付きの章、具体的なプロンプト例、クリーム色と錆色のタイポグラフィを使い、6つのワークフローに関する主張を視覚的に紹介します。
グラフィックデザイン
AIワークフローのソーシャルカルーセルデザイン
縦長の7枚のカードで、特大サイズの中国語見出し、番号付きの習慣、変化するカラーフィールド、締めくくりのステートメントを用いて、AI編集ワークフローを説明します。
グラフィックデザイン
Aurora Fieldシェーダーデザイン
自動アニメーションする青緑色のノイズフィールドがWebGLヒーローに雰囲気を与え、固定された見出しと小さなローカルフレームレートバッジがシーンを引き締めます。
グラフィックデザイン
Aurora Veilシェーダーデザイン
Aurora Veilは、レイヤー化された光、星、カーソルの動きを、空気感のあるWebGLヒーローへと変換するインタラクティブなシェーダーコンポジションです。
グラフィックデザイン