この記事はバージョン Winter ’26 において執筆しています。
現在の動作と異なる場合がありますので、ご認識おきください。
サイトのトップページは綺麗に作ったのに、「ログイン画面」だけデフォルトの質素なデザインのまま… なんてことになっていませんか？
ログイン画面は、会員サイトにおいてユーザーが最初に目にする「玄関」です。ここが質素すぎると、サービスへの期待値も下がってしまいます。 Auraサイト時代は、ログイン画面のデザインを変更するのに「ログインレイアウト」ごとの変更が必要だったり、Visualforceが必要だったりと面倒でした。
しかし、LWRサイトでは「ログイン画面も、ただのページの一つ」として扱われます。つまり、ホーム画面と同じように、ドラッグ＆ドロップで自由にデザインできるのです！
今回は、CSSを一切書かずに、標準コンポーネントだけで「今風のログイン画面」を作るテクニックを紹介します。
ログインページの仕組み
エクスペリエンスビルダーを開き、ページメニューから [ログイン] ページを選択します。
デフォルトでは、画面の中央にポツンと「ログインフォーム」が置かれているだけのシンプルな構成です。 LWRにおいて、このページは特別なものではありません。
- 不要なコンポーネントは削除できます。
- 好きな画像を配置できます。
- グリッドを使ってレイアウトを分割できます。
この柔軟性を活かして、デザインを一新しましょう。
実践：流行りの「左右分割レイアウト」を作る
最近のWebサービスでよく見る、「画面の半分がイメージ画像、もう半分がログインフォーム」というレイアウトを作ってみましょう。
手順①：レイアウトの初期化
まず、既存のコンテンツを削除するなどして整理します。
手順②：セクションの設定
- 「列のレイアウト」を「等しい幅の2列」にし、「6 : 6」（半々）に設定します。
- 「セクションの最小の高さ」を「100vh」にすると、縦幅いっぱいに表現できるのでおすすめです。
手順③：画像の配置（右側）
右側の列に 「画像」 コンポーネントを配置します。
- 企業のブランドイメージや、サービスの魅力が伝わる写真を設定します。
- 「幅 (%)」を「100」して、画面の横幅いっぱいに見えるようにすると没入感が出ます。
手順④：フォームの配置（左側）
左側の列に、標準の 「ログインフォー コンポーネントをドラッグ＆ドロップします。 その上に「テキストブロック」で、「おかえりなさい」や「サービスへログイン」といった見出しを付けると、より親切です。ロゴを配置するのもいいですね。
これだけで、デフォルトとは見違えるようなモダンなログイン画面が完成します。
「ログインフォーム」の設定プロパティ
配置した「ログインフォーム」コンポーネント自体にも、いくつか重要な設定があります。
- セルフ登録URL / パスワードを忘れた場合のURL: ここが設定されていないと、ユーザーは「新規登録」や「パスワードリセット」ができません。それぞれのページ（「登録」ページ、「パスワードを忘れた場合」ページ）へのリンクを正しく設定しましょう。
- ボタンの表示ラベル: 「ログイン」というボタンの文言を変更できます。
忘れがちな「関連ページ」もセットでデザイン
ログイン画面を綺麗にしたら、必ずセットで修正すべきページがあります。
- 登録 (Register): 新規会員登録ページ
- パスワードを忘れた場合 (Forgot Password): リセット要求ページ
- パスワードの確認 (Check Password): メール送信完了ページ
これらのページも、ログイン画面と同様に「セクション」や「列」を使って同じレイアウト（左にフォーム、右に画像）に統一することで、サイト全体に一貫したブランド体験を提供できます。
まとめ
- LWRのログイン画面は、通常のページと同じ感覚で自由に編集できる。
- 「列」を使えば、画像とフォームを組み合わせたリッチなデザインもノーコードで可能。
- ログイン画面だけでなく、「登録」や「パスワードリセット」ページのデザイン統一も忘れずに。
玄関が美しければ、ユーザーは安心して中に入ってきてくれます。
ぜひ、あなたのサイトにぴったりの「おもてなし」をログイン画面で表現してみてください。
次回は、サイトを作った後に必ず設定しておきたい「Google Analytics 4 (GA4)」の連携方法について。実はLWRなら、タグを埋め込む設定画面が標準で用意されているんです。
読者の声