成功
ギフトカード
ブランドに合ったメッセージ、アートワーク、カラー、レイアウトでギフトカードページをカスタマイズします。
このセクションでは、受取人がギフトカードを確認して利用するためのメインのギフトカードページを管理します。メッセージをカスタマイズし、ブランドに合ったアートワークに差し替え、レイアウトを調整して、ページをわかりやすく、洗練された印象にし、ストア全体と一貫した見た目にできます。これらのコントロールがエディターでどのように機能するかの詳細については、テーマエディターに関するShopifyドキュメントを参照してください。
見出しとサブ見出しを使用してギフトカードを紹介し、受取人が次にできることを簡潔で役立つヒントとして伝えます。これらのフィールドを空白のままにすると、このセクションはデフォルトのテーマコンテンツにフォールバックでき、よりシンプルな構成にしたい場合に便利です。
画像設定では、組み込みのギフトカードアートワークを自分のブランドに合ったビジュアルに置き換えられます。これは、画像がギフトカードの詳細と競合せずにページを補完する場合に最適です。
画像スタイルとアスペクト比の設定では、アートワークのフレームの見え方を管理します。画像がそのスペース向けにすでに設計されている場合はデフォルトの比率を使用し、異なる画像間でより一貫した表示にしたい場合は固定比率を選択します。
モバイルには独自のアスペクト比オプションがあります。デスクトップでの切り抜きが小さい画面では横に広すぎる、または縦に長すぎると感じる場合は、画像を置き換えるのではなくモバイルの比率を調整してください。
デスクトップのレイアウト設定では、画像とギフトカードの詳細がどのようにスペースを分けるかを決定します。列の幅でどちらの側をより目立たせるかが変わり、ギャラリーの位置で画像を左または右のどちらに表示するかを制御します。モバイルでは、レイアウトは常に1列に折りたたまれます。セクションとブロックの動作については、セクションとブロックに関するShopifyドキュメントを参照してください。
公開する前に、カスタムアートワークをデスクトップとモバイルの両方で確認してください。デスクトップではバランスよく見える切り抜きでも、小さい画面では画像の重要な部分が隠れることがあります。
このグループでは、このセクションのデフォルトのテキストカラーとサブ見出しカラーを上書きできます。カスタム背景を追加して、より強いコントラストや、より明確な視覚的階層が必要な場合に特に役立ちます。
読みやすさを最優先にしてください。明るい画像、グラデーション、動画の背景を使う場合は、メインメッセージと補足コピーの両方がひと目で読み取れることを確認してください。
標準セクション設定
Section titled “標準セクション設定”セクション背景設定
Section titled “セクション背景設定”セクション背景設定では、ギフトカードのコンテンツの背後にある視覚的なキャンバスを管理します。カラー、グラデーション、画像、動画を使用し、オーバーレイを追加してテキストとギフトカードの詳細を目立たせることができます。
このページは、控えめな背景処理を使うと通常は最も効果的です。装飾的なメディアを選ぶ場合は、ページがまず機能的に見えるように、オーバーレイの強さとテキストカラーをあわせて調整してください。
余白設定では、コンテンツの上下の余白を管理します。ページをより引き締まって実用的に見せたいときや、よりソフトなブランド表現にしたいときに活用できます。
余白を小さくすると、特にモバイルで重要な詳細を早く表示できます。より強い背景処理を使い、余白が必要な場合は、余白を大きくする方が適しています。
区切り線設定
Section titled “区切り線設定”区切り線設定では、セクションの上または下に任意の線を追加できます。ページの周囲に他のコンテンツがある場合に、ギフトカード領域をより明確に区別するのに役立ちます。
ここでは区切り線は控えめにしてください。薄い区切り線であれば、ギフトカード自体の印象を損なわずに、ページを視覚的に分けるのに十分です。
幅設定では、コンテンツの最大幅とセクションラッパーの幅を管理します。ページをより狭くして読みやすくしたい場合や、より没入感のある背景と組み合わせて広く見せたい場合に便利です。
多くのストアでは、コンテンツの幅を中程度にすると、集中しやすい体験になります。より広いセクション背景を使う場合は、ライブページをプレビューして、レイアウトが引き続きバランスよく、読みやすく見えるか確認してください。
使用上の注意
Section titled “使用上の注意”- コピーは短く保つ。 受取人が何を見ていて、次に何をすべきかが伝わる、短い見出しとサブ見出しを使います。
- デフォルトのスタイルとフォールバックコンテンツに、ページの多くを担わせたい場合は、空白のフィールドを使います。
- 発行済みの状態と利用済みの状態の両方で、メッセージが読みやすいようにします。
- 切り抜きの相性が良いアートワークを選ぶ。 シンプルなブランドビジュアルは、小さい画面で見栄えが落ちる可能性のある細かいグラフィックよりも、通常はうまく機能します。
- 切り抜きとレイアウトは表示領域によって変わることがあるため、デスクトップとモバイルを個別に確認してください。
- モバイル専用のアートワークは、同じ画像を単にサイズ変更するためではなく、読みやすさを保つための方法として扱います。
- コントラストを優先する。 カスタムカラーや背景を使用する場合は、ギフトカードのコンテンツがすぐに読み取れることを確認してください。
- より強いローカルカラー、グラデーション、またはメディアを使うと、セクションを周囲のスタイルからより独立して見せられます。
- デフォルトまたは空白のスタイルを維持すると、テーマのフォールバック表示がより反映されます。
- デスクトップのレイアウトを意図的に使う。 より大きい列は、より視覚的な重みを持たせたい側に割り当て、ページがモバイルでは縦に積み重なることを前提にします。
- モバイルのレイアウトではページの見え方が変わることがあるため、小さい画面で配置と表示を再確認してください。
- デスクトップではちょうどよくてもモバイルでは窮屈に感じる場合は、レイアウトを調整してください。
- ページ全体をプレビューする。 最終デザインを確定する前に、ライブのストアフロントで余白、幅、背景の選択を確認してください。
- フォームや利用案内のメッセージがある場合は特に注意し、送信済み、空、エラーの各状態が読み取りやすいままか確認してください。
- コンテンツ、コントロール、アートワークが一緒に表示されたときに、最終ページが引き続きわかりやすく見えることを確認してください。