Recently, a reader asked me how to make a custom client login page. They wanted their site to look more professional and to show their brand to their clients in a better way.
This got me thinking about how useful a custom login page can be. By creating one, you can give your site a polished look and let clients see your brand every time they log in. So, inspired by their question, I decided to put together this guide to show you how it works.
In this article, I’ll explore several ways to create a client login page in WordPress. We’ll go through each step—from choosing the right tools to customizing the login page to match your brand perfectly.
How to Create a Client Login Page in WordPress:
顧客ログインページとは何か？
A client login page is a secure area on a website where users enter a username and password to access their accounts or private information. It keeps sensitive data safe and only lets authorized users in.
デフォルトのWordPressログイン画面は、個人サイトには優れたソリューションですが、一般的で退屈に見えます。クライアント向けのWordPressサイトには、よりプロフェッショナルに見え、クライアントに良い印象を与えるログイン画面が必要です。
カスタムクライアントログインページを使えば、クライアントの好みに合わせてカスタマイズできます。また、デフォルトのログイン画面を隠すことができるので、ログインスパムを減らし、WordPressサイトを安全に保つことができます。
ログインページの例をご覧ください。
適切なクライアント・ログイン・ページ・WordPressプラグインの選択
WordPressの公式プラグインリポジトリには、クライアントログインページの作成に役立つプラグインがたくさんあります。しかし、今日は市場で最高のWordPressプラグインの2つに焦点を当てます：SeedProdとWPFormsです。
コードを書かずにリアルタイムで任意のページを作成するユーザーフレンドリーなWordPressページビルダーが必要な場合は、SeedProdを使用してください。
SeedProdの特筆すべき機能は以下の通り：
- リアルタイムのライブプレビューが可能なドラッグ＆ドロップのビジュアルページビルダー
- プロがデザインしたログインページテンプレート
- 強力なページエレメントで顧客ログインページのあらゆる要素をカスタマイズ
- WordPressの任意のページにログインフォームを追加する
ドラッグ＆ドロップでフォームを作成できるWordPressフォームプラグイン です。
WPFormsの特筆すべき機能は以下の通り：
- あらゆるタイプのフォームに対応する、あらかじめ用意されたテンプレート
- コードや制限なしでログインフォームをカスタマイズする
- クライアントログインフォームをWordPressの投稿やページに掲載する
- カスタムログインウィジェットでWordPressサイドバーに顧客ログインフォームを埋め込む
これらの無料ログインページプラグインはどちらも数百万人のユーザーとWordPressコミュニティの信頼を得ています。
方法1：SeedProdを使用してクライアントログインページを作成する
ビデオ・チュートリアル
今回はSeedProdを使って、WordPressでクライアントのログインページを作成する方法を紹介します。以下のステップに従ってください。
ステップ1.SeedProdのインストールとアクティベート
最初のステップは、SeedProdプラグインをダウンロードし、WordPressウェブサイトにアップロードして有効化することです。
詳しい手順については、WordPressプラグインのインストール方法をご覧ください。
プラグインを有効化すると、SeedProdのライセンスキーを入力するウェルカムスクリーンが表示されます。ライセンスキーは、SeedProdアカウントのダウンロードの見出しの下にあります。
ライセンスキーを確認した後、下にスクロールして「最初のページを作成」ボタンをクリックします。
次の画面では、SeedProdのランディングページダッシュボードが表示され、様々なタイプのランディングページを作成することができます。ログインページの設定]ボタンをクリックして開始します。
ステップ2.ログインページのテンプレートを選択する
SeedProdでは、クライアントログインページのテンプレートを選択できるようになりました。たくさんのテンプレートから選ぶことができ、ゼロから始めたい場合は空白のテンプレートもあります。
ログインページのテンプレートを選択するには、そのサムネイルにマウスカーソルを合わせ、チェックマークアイコンをクリックします。
テンプレートがSeedProdのビジュアルページビルダーで開きます。
ステップ3.クライアントログインページのテンプレートをカスタマイズする
SeedProdの最も優れた点の1つは、開発者を雇うことなく、ドラッグ＆ドロップビルダーでクライアントログインポータルをカスタマイズできることです。カーソルでテンプレート要素をポイント＆クリックするだけで、簡単にカスタマイズできます。
例えば、「サインイン」の見出しをクリックすると、左側にパネルが開き、見出しの内容、テキストサイズ、配置、フォントなどを変更することができます。
SeedProdのランディングページブロックを使えば、クライアントログイン画面に新しいコンテンツを追加するのも簡単です。画面の左側からブロックを選び、右側にドラッグ＆ドロップするだけです。
様々なブロックから選ぶことができる：
- 画像
- ボタン
- ソーシャル・プロフィール・ボタン
- カウントダウン・タイマー
- プログレス・バー
- その他多数
ブロックと同様に、SeedProdもヘッダー、フッター、特集、FAQなどの様々なプリメイドセクションを提供しています。セクションにカーソルを合わせてプラス（+）アイコンをクリックするだけで、簡単にページに追加することができます。
クライアントログイン画面のルック＆フィールをもっとコントロールしたい場合は、グローバル設定パネルにアクセスしてください。画面の左下にある歯車のアイコンをクリックしてください。
グローバル設定パネルでは、各要素の設定を個別に変更することなく、ページの背景、タイポグラフィ、配色を変更することができます。
例えば、Colorsの見出しをクリックすると、グローバルカラースキームを変更できます。そこからカスタムカラーを選ぶか、カラーパレットボタンをクリックして20以上の既成カラーパレットから選ぶことができます。
クライアントログインページの見た目に満足したら、画面右上の保存ボタンをクリックします。
ステップ4.ページ設定を行う
顧客ログイン画面でメールアドレスを収集する場合は、画面上部の接続 タブをクリックすることで、オプトインフォームをメールマーケティングサービスに接続することができます。
そこから、リストからメールマーケティングプロバイダーを選択し、指示に従ってアカウントの接続と認証を行います。これで、顧客がオプトインフォームから登録するたびに、自動的にあなたのメールリストに追加されます。
さらに、「ページ設定」タブで他のいくつかの設定を行うことができます。
この画面で編集できる設定の一部を紹介します：
- 一般 - ログインページ名とURLの変更、SeedProdアフィリエイトリンクの表示など。
- SEO-WordPressのSEOプラグインを使用している場合は、ページのSEOタイトル、メタディスクリプションなどを設定することができます。
- アナリティクス- MonsterInsightsのようなアナリティクスプラグインを使ってログインページのパフォーマンスを追跡します。
- スクリプト- CookieやFacebookトラッキングピクセルなどのトラッキングコードやリターゲティングスクリプトを貼り付けます。
覚えておいてください：定期的にSaveボタンをクリックして変更を保存してください。
ステップ5.顧客ログインページを公開する
クライアントログイン画面に満足したら、それを公開し、ウェブサイト上で公開する準備ができました。これを行うには、保存ボタンの隣にあるドロップダウン矢印をクリックし、公開をクリックします。
その後、あなたのページが公開されたというメッセージが表示されます。
新しいクライアントログインページをプレビューするには、「ライブページを見る」ボタンをクリックしてください。
これがテストウェブサイトに作成したページだ：
あとは、WordPressの管理画面でログインページモードを有効にするだけです。
SeedProdビルダーを終了し、メインのSeedProdダッシュボードに戻ります。ログインページモードで、非アクティブからアクティブに切り替えます。
以上です！あなたのクライアントログインページがカスタムデザインになりました。
方法2：WPFormsを使用してクライアントログインページを作成する
それでは方法2、WPFormsを使ってクライアントのログインページを作る方法を見てみましょう。
ステップ1：WPFormsをインストールする
まず、WPFormsプラグインをダウンロードし、WordPressサイトにインストールして有効化します。そこからWPForms" SettingsにアクセスしてWPFormsのライセンスキーを入力します。
ライセンスキーはWPFormsウェブサイトのアカウントエリアにてご確認いただけます。
WPFormsでクライアントのログインフォームを作成するには、User Registrationアドオンが必要です。
アドオンはWPForms " Addonsから見つけることができます。次に、ユーザー登録アドオンの隣にあるアドオンのインストールをクリックし、有効化をクリックします。
アドオンを有効化したら、カスタムクライアントログインフォームを作成する準備ができました。
ステップ2: カスタムクライアントログインフォームの作成
WPFormsの強力なドラッグアンドドロップフォームビルダーは、コードを書くことなく、わずか数分で簡単にフォームを作成することができます。
クライアントログインフォームを作成するには、 WPForms " 新規追加 にアクセスしてください。そこから Addon Templates フィルタをクリックし、User Login Formテンプレートを選択します。
以下の画面では、初心者向けのフォームビルダーが表示され、フォームフィールドを追加、削除、カスタマイズすることができます。デフォルトのフォームフィールドはユーザー名とパスワードのフィールドだけです。
フォームフィールドのカスタマイズは簡単です。フォームビルダー上で任意のフィールドをクリックし、左側のフィールドパネルで変更を加えるだけです。
フォームをカスタマイズしたら、設定タブをクリックしてフォームの設定を行います。
ステップ 3: フォームの設定
WPForms にはいくつかのフォーム設定があります。例えば、一般 設定でフォームの名前、説明、送信ボタンなどをカスタマイズできます。
このタイプのフォームはデフォルトで通知がオフになっているので、通知タブについて心配する必要はありません。つまり、クライアントがあなたのウェブサイトにログインするたびにメールが届くことはありません。
通常、クライアントがログインフォームからサイトにログインすると、あなたのホームページが表示されます。これをカスタムウェルカムスクリーンやサンキューページに変更したい場合は、[確認]タブをクリックしてください。
次に、ドロップダウンメニューから「Go to URL」確認タイプを選択し、「Confirmation redirect URL」フィールドにご希望のページを入力します。
設定を保存するには、忘れずに「保存」をクリックしてください。
ステップ 4: 顧客ログインフォームの公開
クライアントログインフォームの外観に満足したら、WordPressウェブサイトに公開することができます。WPFormsではフォームを投稿、ページ、またはWordPressのサイドバーウィジェットとして公開することができます。
まず、投稿やページにフォームを公開する方法を見てみましょう。
WordPressで新しい投稿またはページを作成し、ブロックエディタのプラス（+）アイコンをクリックします。そこからWPFormsを検索し、WPFormsブロックをクリックしてページに追加することができます。
次に、WPFormsブロック内のドロップダウンメニューをクリックし、クライアントのログインフォームを選択します。WPFormsは自動的にあなたのページにフォームを追加します。
これでPublishをクリックし、ウェブサイト上でページを公開することができます。
WordPressのサイドバーにログインフォームを追加することもできます。そのためには、外観 " ウィジェットに行き、WPFormsウィジェットをサイドバーに追加します。
ウィジェットの設定でクライアントログインフォームを選択し、更新ボタンをクリックして変更を保存します。
よくやったクライアントログインフォームがWordPressのサイドバーに表示されました。
それだけだ！
I hope this article helped you learn how to create a client login page in WordPress. While you’re here, you might also enjoy the following guides:
- WordPressでゲートコンテンツ・ランディングページを作成する方法
- WordPressでサービスページのデザインを作成する方法
- WordPressでリードを生み出す404ページを作る方法
- WordPressサイトをパスワードで保護する方法：究極のガイド
お読みいただきありがとうございました！ご質問やご意見がありましたら、お気軽にコメントをお寄せください。
また、YouTube、X（旧Twitter）、Facebookでも、ビジネスの発展に役立つコンテンツを配信しています。
