# ログインページ

### **学べること**

* レガシー顧客アカウント用のログインページテンプレートを有効化およびカスタマイズする方法
* テーマ設定を使用してログインフォームの外観を変更する方法
* テキスト、ボタンスタイル、レイアウト、リンクを調整する方法

***

### 🧩 概要

このログインページはShopifyの一部です **従来の顧客アカウントシステム** テーマエディタを使って完全にカスタマイズできます。カスタムレイアウトブロック、サイド画像、スタイライズされた入力フィールドをサポートしており、顧客のログイン体験の視覚的制御を完全に提供します。

> ⚠️ このログインページは次の場合にのみ適用されます **レガシー顧客アカウント** が次の場所で有効になっている場合 **設定 > 顧客アカウント**.

***

### 🎨 ページ構成

ログインページは以下のセクションで構成されています：

* **ロゴ＆時計** （オプション）
* **ログインフォーム** （コア機能）
* **ミュージックプレーヤー** （オプション）
* **フッター** （オプション）

***

### ✏️ ログインフォームのカスタマイズ

に移動 **テーマエディタ → テンプレート → customer/login.liquid**\
左パネルの **ログインフォーム** ブロックからカスタマイズを開始します。

#### 🔳 ログイン サイド画像

* **画像を選択** – ブランディング画像をアップロードまたは選択
* **サイド画像の位置** – 左または右を選択
* **サイド画像を曲線にする** – 角を丸くする
* **サイド画像を削除** – 完全に非表示にする切り替え

***

#### 🧾 ログイン ヘッダーコンテンツ

* **ヘッダーテキスト** – ログインブロックのタイトル（例：「ログイン」または「おかえりなさい」）
* **サブヘッダーテキスト** – 短い説明やカスタムメッセージ

次もカスタマイズできます **ヘッダーおよびサブヘッダーテキストの色**.

***

#### 🔐 入力フィールド

各フォームフィールドにはそれぞれのデザイン設定があります：

**メールフィールド**

* ラベルの色
* ボーダーの色
* テキスト色

**パスワードフィールド**

* ラベルの色
* ボーダーの色
* テキスト色

***

#### 🔘 ログインボタン

カスタマイズ：

* **ボタンテキスト** （例：「Enter」または「Sign In」）
* **テキスト色**
* **背景色**

アクセシビリティを維持するために強いコントラストの太字を使用してください。

***

#### ❗ エラースタイリング

を設定する **ログインエラー情報のテキスト色** ブランドのアラートスタイル（通常は赤）に合わせます。

***

#### 🔗 追加リンク

次のテキストと色を更新できます：

* **登録リンク**
* **パスワードをお忘れですかリンク**
* **ショップに戻るリンク**

これらはログインフォームの下または周辺に表示されます。

***

#### 🎨 その他

* **フィールドとボタンの角丸** – 入力欄とログインボタンの角を丸くするにはオンにします。

***

### ✅ 完了です！

カスタムログインページは以下で完全にスタイル設定され公開されています：\
`yourstore.com/account/login`

> 💡 ヒント：「登録ページ」と「アカウントページ」のドキュメントと組み合わせると、顧客の導線を完全に構築できます。

### **ヘルプが必要ですか？**

* 💬 **Discordでコミュニティに参加：** <https://discord.gg/hcc2GvgZc6>
* 📧 **メールでお問い合わせ：** <support@openspaces.design>
* 💻 **ライブチャット：** 月〜金、現地時間午前10時〜午後6時（EST）に当社ウェブサイトで直接対応