コンテンツにスキップ

メール登録

柔軟なコピー、背景、カラー、余白、レイアウトのオプションでメール登録を取得します。

このセクションを使って、関心を引きつけたい場所、プロモーションを支えたい場所、メールリストを増やしたい場所に、集中的なニュースレター登録エリアを追加できます。メッセージを短くし、メリットを明確にし、フォームを周囲のコンテンツから十分に視覚的に分離すると、より効果的です。

これらのカラーコントロールを使うと、このセクションだけに広範なテーマカラーを上書きできます。登録エリアにより強いコントラスト、キャンペーン固有の見た目、または周囲のページとのより明確な区別が必要なときに使用してください。

背景画像、グラデーション、動画を追加する場合は、読みやすさに十分注意してください。背景、見出し、補足テキストの間に強いコントラストがあることの方が、装飾的な色選びよりも重要なことが多いです。

背景メディアを使用する場合は、見出し、テキスト、フォームが読みやすいままになっているか、デスクトップとモバイルの両方でセクションを確認してください。

ヘッダー設定は、登録フォームの上にある導入コンテンツを制御します。これには、アイコン、キャプション、見出し、見出しレベル、補足テキストが含まれます。この領域を使って、なぜ購読するべきか、何を期待できるかを説明してください。

コピーは簡潔にし、メリットを前面に出してください。アイコンは任意なので、視覚的なノイズになる場合やメッセージを支えない場合は削除する価値があります。

セクション背景設定を使うと、登録エリアをカラー、グラデーション、画像、または動画の背景の上に配置できます。オーバーレイ設定はコントラストを改善し、メディア上のテキストを読みやすくするのに役立ちます。

カラーとグラデーションの両方を使う場合は、グラデーションが優先されます。オーバーレイのグラデーションにも同じことが当てはまるため、両方が同時に表示されると決めつけず、最終的な組み合わせを確認してください。

余白設定は、登録コンテンツの上下のスペースを調整します。余白を大きくするとセクションはより注目を集める呼びかけのように感じられ、狭めると他のコンテンツの間に自然に収まりやすくなります。

モバイルの余白は別途確認してください。特にサブ見出しが長い場合、登録セクションは小さい画面であっという間に窮屈に感じられることがあります。

区切り線設定は、セクションの上または下に任意の線を追加します。登録エリアが似たセクションの間にあり、さりげない視覚的な境界が必要なときに便利です。

セクションにすでに強い背景や十分な余白がある場合、区切り線は不要なことがあります。フォームと競合しないよう、控えめに使ってレイアウトを支えてください。

表示設定は、このセクションをデスクトップ、モバイル、または両方に表示するかを制御します。小さい画面向けに別の登録表示を使いたい場合に最も便利です。

別の明確な代替手段がある場合にのみ、片方のデバイスでセクションを非表示にしてください。モバイルから重要な登録機会を、別の見える購読導線なしに削除しないでください。

幅設定は、コンテンツの最大幅とセクションラッパー全体の幅を制御します。フォームを見やすく保つため、またはより広いキャンペーン風のバナーを作成するために使用してください。

多くの登録セクションでは、ほどよいコンテンツ幅がメッセージを集中させ、読みやすく保ちます。背景を使いながらセクション幅を変更する場合は、編集画面だけでなくライブページもプレビューして、効果をより正確に判断してください。テーマエディターでのセクション編集の設定ガイダンスについては、セクションのカスタマイズに関するShopifyドキュメントを参照してください。

  1. 価値を先に伝えます。 見出しとサブ見出しで、限定オファー、先行アクセス、商品更新など、購読する理由を訪問者に明確に伝えてください。
  2. セクションの読みやすさを保ちます。 背景メディアと十分なオーバーレイ、およびテキストのコントラストを組み合わせて、登録エリアが一目で分かるようにしてください。
  3. 幅で注目の範囲を調整します。 目的がシンプルな登録促しであれば、より狭いコンテンツ幅が通常適しています。バナースタイルのプロモーションには、より広いレイアウトの方が向いています。
  4. 余白を重要度に合わせます。 これが主要な行動喚起である場合は余白を増やし、長いページの流れの中に登録がある場合は余白を減らしてください。
  5. 公開前にモバイルを確認します。 小さい画面で見出しの長さ、余白、背景の読みやすさを確認し、セクションをすっきり使いやすく保ってください。
  6. 両方のビューポートを確認します。 デスクトップとモバイルのコントロールでは、配置、表示、メディア表示が異なる場合があるため、公開前に両方のサイズでセクションを確認してください。
  7. フォーム状態の可読性を保ちます。 特に、背景スタイルを強くしたりメディアの選択によってコントラストが下がったりする場合でも、成功メッセージとエラーメッセージが読みやすいことを確認してください。