成功
ログインフォーム
ブランドに合ったテキスト、色、背景、レイアウト設定で、顧客のサインイン領域をカスタマイズします。
このセクションを使って、顧客がアカウントにアクセスするために使用するメインのサインイン領域をコントロールします。ページのメッセージや表示を調整しながら、ログイン体験をわかりやすく使いやすい状態に保つのに役立ちます。
基本設定では、ログインフォームと一緒に表示される見出し、サブ見出し、任意のアイコンをカスタマイズできます。より広い設定の概要については、セクションとブロックに関するShopifyドキュメント を参照してください。ここは、短い歓迎メッセージを追加したり、このページが再訪した顧客向けであることを明確にしたり、ストア全体のトーンに合わせたりするのに最適です。
見出しまたはサブ見出しを空白のままにすると、このセクションでは代わりにテーマのデフォルトコンテンツを使用できます。これは、すばやくすっきりした設定にしたい場合に便利ですが、カスタムの文言を使うと通常はより洗練されたアカウント体験になります。
これらの設定は、このセクションにのみ、テーマ全体の色を上書きします。ログイン領域により強いコントラスト、よりやわらかいトーン、またはカスタム背景とのよりよい整合性が必要な場合に使用してください。
アイコン、メインテキスト、サブ見出しは個別に調整できるため、明確な視覚的階層を作成できます。背景画像、グラデーション、または動画を追加した場合は、テキストが読みやすいままであることを確認するために、デスクトップとモバイルの両方でセクションを確認してください。明示的な色の選択、グラデーション、メディアの上書きにより、この領域はより独立した印象になります。一方、空白または透明の値は通常、テーマのフォールバックスタイルを維持します。
装飾的な背景は、読みやすさを損なってはいけません。ログイン領域の見やすさが下がる場合は、背景を簡素化するか、オーバーレイの強さとテキストのコントラストを上げてください。
標準セクション設定
Section titled “標準セクション設定”セクション背景設定
Section titled “セクション背景設定”セクション背景設定 を使用して、ログインセクションの背後に色、グラデーション、画像、または動画を追加します。このセクションでは、背景はフォームの邪魔にならずにブランドを支える場合に最も効果的です。
オーバーレイの色と不透明度は、画像や動画の上でも読みやすさを保つのに役立ちます。モバイル専用の背景メディアは、デスクトップ用のアートが不自然に切り取られたり、小さい画面で重く見えたりする場合に特に便利です。そのため、異なるメディアを使う場合は両方の表示領域を確認してください。
余白設定 を使用して、ログインコンテンツの上部と下部の余白をコントロールします。ページが窮屈に感じられる場合や、サインイン領域を全体のページレイアウト内でより自然に配置したい場合に便利です。
デスクトップとモバイルの間隔は個別に調整できるため、画面サイズをまたいでセクションのバランスを保てます。モバイルの余白を狭めると、ページが詰まって見えることなく、フォームをより早く表示できることがよくあります。
区切り線設定
Section titled “区切り線設定”区切り線設定 を使用して、セクションの上部または下部に線を追加します。ログインページでは、このセクションと周囲のコンテンツの境界をより明確にしたい場合に、区切り線が特に役立ちます。
ここでは、控えめな区切り線で十分なことがほとんどです。区切り線の色を透明のままにすると、このセクションは一般的な border-color の動作に戻ります。
幅設定 を使用して、コンテンツの幅とセクション全体の広がりをコントロールします。ほとんどのログインページでは、コンテンツ幅を狭めるとフォームに注目しやすくなり、見やすくなります。
セクション幅は、背景の見せ方も使う場合に特に重要です。全幅または full-bleed のレイアウトをテストする場合は、エディター上の見え方によって実際のページでの幅の変化が異なって見えることがあるため、実際のストアフロントでもプレビューしてください。
使用上の注意
Section titled “使用上の注意”- メッセージは短く保つ。 直接的な見出しと簡潔な補足テキストを使い、顧客がすばやくサインインできるようにします。
- コントラストを確保する。 画像、グラデーション、または動画を使用する場合は、セクションが一目で読みやすいままでいられるよう、オーバーレイとテキスト色を調整してください。
- 両方の表示領域を確認する。 デスクトップとモバイルのコントロールは、レイアウト、配置、表示、切り抜き方を変えることがあるため、公開前に両方の画面サイズでログインフォームを確認してください。
- 集中しやすい幅を優先する。 コンテンツ領域を狭めたほうが、広いレイアウトよりもログインページに適していることが多く、フォームに注意を向けやすくなります。
- モバイルの余白を調整する。 小さい画面でフォームが下に寄りすぎる場合は、モバイルの余白を減らしてください。
- わかりやすい状態を使う。 フォームが空の場合、送信された場合、または検証フィードバックが表示される場合でも、顧客がすばやく対応できるよう、成功メッセージとエラーメッセージを読みやすく保ってください。