AI要約
WordPressウェブサイトのログインページをカスタマイズしたいですか？WPFormsを使えば、コーディング不要でログインフォームをスタイリングする方法がたくさんあります！
この記事では、人気サイトの7つの異なるログインページ例と、それらを再現する方法を紹介します。
ここで紹介する例と同じスタイルで、数回クリックするだけで各フォームを作成するプロセスを説明します。
始めましょう！
優れたログインページとは？
ログインページには通常、ユーザーがユーザー名、メールアドレス、パスワードなどを入力するいくつかのフィールドが含まれています。ウェブサイトの訪問者がサイトにアクセスするために資格情報を入力する場所です。
これらの訪問者はサイトにアカウントを持っているか、ウェブサイトにログインする必要があるその他の理由がある場合があります。優れたログインページは、表面上は似ていなくても、同じような決定を共有する傾向があります。
- 1つの明確に述べられたジョブ：ログインページは資格情報を要求し、気を散らすものを減らし、ユーザーがアカウントにアクセスできるようにするために邪魔になりません。
- アカウントを持っていない人のための出口：驚くべき数のログインページ訪問者が間違った場所にいます。目立つサインアップリンクは、離脱を防ぎます。
- 見つけやすいパスワードリセットリンク：パスワードを忘れたことは、人がログインページに2回連続でアクセスする最も一般的な理由です。
- サイトだと感じさせる十分なブランド表示：ロゴやヘッダー画像があれば十分です。読者は、一般的すぎる見た目のページにパスワードを入力することに不安を感じます。
- 実際の人々を罰しないスパム対策：ボットは常にログインフォームを標的にしています。チェックボックスや目に見えないチェックで、手間を増やすことなくほとんどのスパムを防ぐことができます。
- スマートフォンで余裕のあるスペース：窮屈なフィールドや小さなタップターゲットは、デスクトップで問題が発生するずっと前に、モバイルで失敗します。
ログインページの7つの例
以下の各例は、今すぐアクセスして確認できる実際のページです。それぞれのページの下には、それが機能する具体的なデザインの選択を抜き出しました。これにより、ピクセルをコピーするのではなく、パターンを参考にすることができます。
1. HubSpot
このHubSpotウェブサイトのログインページは非常に基本的で、フォームに含まれる詳細はあまりありません。フォームは、メール入力、パスワード、チェックボックス、ログインボタンで構成されています。
このようなフォームの点は、他のすべてのログインフォームの例の基盤のようなものであるということです。ログインページに必要な最も基本的な要素が含まれています。
また、お好みで、独自のログインページもこのように簡略化できます。WPFormsはWordPress向けの最高のフォームビルダープラグインであり、ウェブサイトにカスタムログインページを追加することを非常に簡単にします。
まず、WPFormsをインストールし、ユーザー登録アドオンにアクセスするためにProプランにサインアップする必要があります。WPFormsの設定にライセンスキーを入力したら、ダッシュボードのWPForms » Addonsに移動します。
利用可能なアドオンをスクロールしてユーザー登録アドオンを見つけ、それもインストールします。インストールしたら、必ずアドオンを有効にしてください。
これでログインフォームの作成準備が整いました。WPForms » Add Newに移動し、利用可能なアドオンテンプレートからUser Login Formテンプレートを見つけます。
Use Templateボタンをクリックしてこのテンプレートを選択し、フォームビルダーを開きます。WPFormsのフォームビルダーを使用すると、この既製のテンプレートをニーズに合わせて簡単に編集できます。
オンラインフォームに欲しいほぼすべての要素をカバーする、豊富なフォームフィールドのセレクションが見つかります。必要なのは、各フィールドを所定の位置にドラッグアンドドロップするだけです。
ユーザーログインフォームには、必要なフィールドがすでに読み込まれていることがわかります。しかし、すべてのWPFormsテンプレートと同様に、このフォームは高度にカスタマイズ可能なので、さまざまな方法でフォームにフィールドを追加したり編集したりできます。
このフォームでは、HubSpotのログインページ例のように、フォーム下部の送信ボタンを「ログイン」と表示するように編集しましょう。ボタンをクリックするだけで、設定を展開できます。
次に、ボタンのテキストを変更するには、一般タブを開き、送信ボタンのテキストボックスまでスクロールします。
次に、ボタンに表示したいテキスト（例：「ログイン」）を入力します。フォームを再度見ると、フォーム下部のボタンがこのページのログインの性質により一致しています。
これで、HubSpotのログインページで使用されているような基本的なログインフォームを作成するために必要なすべてが完了しました。ここから、このフォームをSaveしてください。
保存されると、このフォームはWordPressダッシュボードのWPFormsすべてのフォームページで使用できるようになります。
これで、サイトにすばやく公開できるシンプルなログインフォームができました。または、より詳細なログインページを作成するための基本として使用することもできます。これらは、ここで取り上げたいくつかのログインページ例すべてに必要とされる基本的な手順です。
2. WordPress.org
最初の例でカバーしたように、WordPress.orgのログインページをご覧ください。このページもかなり基本的です。しかし、上部には説明文の短いスニペットがあり、あなたのフォームにもそれを含めることができます。
述べたように、ここで行う各フォームは、このフォームも含め、最初にユーザーログインフォームテンプレートを必要とします。再度テンプレートを選択してください。
次に、フォームビルダーで、コンテンツフィールドをフォームの上部にドラッグしてドロップします。
前述のように、このフィールドをフォームの好きな場所にドラッグアンドドロップできます。しかし、上記のログインページの説明文に似せるために、フィールドを一番上に配置しましょう。
フィールドをクリックして、画面左側にあるカスタマイズ可能なオプションを開きます。次に、テキストエディターを使用して、このフィールドに表示したい指示テキストを入力します。
上記の例のように、ユーザーがウェブサイトにログインするために情報を入力するように指示することができます。
テキストエディターのおかげで、カスタマイズ可能なフォントスタイル、色などがこのフィールドで利用可能になり、多くのオプションが指先で利用できます。
たとえば、例1のHubSpotログインページをもう一度見てください。非常に短い説明文のスニペットがあることに注意してください。
説明文は「アカウントをお持ちでないですか？サインアップ」と表示され、ユーザーがアカウントを作成できるページへのリンクが提供されています。
これは、フォームのコンテンツフィールドのテキストエディターでも可能です。まず、指示テキストを入力し、リンクしたい部分をハイライトします。次に、テキストエディターツールバーのリンクアイコンをクリックします。
次に、ユーザーに着陸させたいページへのURLを挿入します。完了したらOKをクリックします。
これで完了です！フォームに指示テキストとリンクが表示されました。
いつものように、フォームは後で保存するか、ページに埋め込むことができます。ログインページをサイトで公開する準備ができた際には、公開方法の詳細をこの投稿の最後に共有します。
3. ヘッダー画像
ログインページでユーザーログインフォームをカスタマイズするもう1つの方法は、好みのヘッダー画像を追加することです。フォームの上部に画像を使用することは、フォームをパーソナライズしたり、ウェブサイトのスタイルを引き立てたりするのに良い方法です。
ヘッダー画像を追加するには、再度コンテンツフィールドとユーザーログインフォームテンプレートを使用します。以前のように、このフィールドをフォームの上部にドラッグアンドドロップしてください。
ただし、今回はテキストエディタの上にあるメディアを追加ボタンをクリックします。
次に、好みの画像をアップロードします。これはテキストエディターのテキストの上に表示されます。今回は、必要であればテキストを削除して、画像のみで作業することもできます。
画像をクリックして表示設定にアクセスし、画像を好みの位置に配置してください。
例の画像が実際のヘッダー画像として機能するように、配置を中央揃えにし、フルサイズを選択します。好みに合わせてこれらの設定を何度か調整してください。
変更を適用するには、必ず青い更新ボタンをクリックしてください。また、詳細設定タブのフィールドサイズの変更など、その他の設定タブを調べることもできます。
大フィールドサイズを試して、実際のヘッダー画像のように、フォームの上部に画像がさらに大きく表示されるのを確認してください。
再度、フォームは後で保存してください。この例に関連するヒントについては、フォームにヘッダー画像を追加するに関するこの投稿全体を確認してください。
4. SendLayer
SendLayerのログインページを見てみましょう。以前説明した指示テキストの上、フォームの上部には、ウェブサイトのロゴが配置されています。
ユーザーログインフォームのコンテンツフィールドを再度使用して、あなたもフォームにロゴを追加できます。
ヘッダー画像をアップロードするためにコンテンツフィールドを使用したことを覚えていますか？ロゴを表示するために同様のプロセスを使用してみてはどうでしょうか？フォームビルダーのおかげで、フォームにロゴを配置するための複数のオプションがあります。
コンテンツフィールドをフォームの目的の位置にドラッグするだけです。
上記の例に似せるために、ロゴをフォームの上部に配置しましょう。これはヘッダー画像のようなものなので、横長のロゴがここに最適かもしれません。
ロゴをアップロードするには、コンテンツフィールドのメディアを追加ボタンをクリックするだけです。
追加の設定もお忘れなく。ロゴを中央揃えにしたり、フルサイズにしたり、高度な設定でフィールドサイズを変更したりしたい場合があります。
指示テキストの例で説明したように、ロゴの下のテキストを編集することもできます。これにより、ここのフォームが例と非常によく似たものになります。
これで、ログインページにロゴがフォームに明確に表示されました。必要に応じて、下部、またはコンテンツフィールドをドラッグしたい他の場所に別のロゴを追加することもできます！
5. TrustPulse
次に、TrustPulseのログインページに注目しましょう。このログインフォームは、画面の片側に認証情報が入力され、その上に小さなロゴが表示され、反対側には大きなイラストが表示されています。
レイアウトフィールドとコンテンツフィールドを組み合わせて、あなたもこのようなフォームを作成できます。まず、レイアウトフィールドをユーザーログインフォームにドラッグします。
レイアウトフィールド自体にフォームの事前読み込み済みフィールドをドラッグすることになるため、現時点ではレイアウトフィールドをどこにドラッグアンドドロップしても、それほど重要ではありません。
とりあえず、整理のためにフォームの上部にドラッグしておきましょう。レイアウト内の列の向きも選択します。これにより、このフィールド内のコンテンツのサイズと配置が決まります。
次に、TrustPulseの例のようにここにロゴを表示できるように、フォームのレイアウトフィールドの最初の列にコンテンツフィールドをドラッグします。
メディアの追加ボタンを使用して、もう一度ロゴをアップロードし、画像の向きとサイズが希望通りになるように設定を確認してください。
次に、フォームの他のフィールドをレイアウトフィールドのその側にドラッグアンドドロップします。
マウスで各フィールドをつかみ、レイアウト列にドラッグしてドロップするだけです。メールフィールド、パスワードフィールド、チェックボックスがフォームの左側の列に配置されます。
次に、レイアウトフィールドのもう一方の列にコンテンツを追加します。再度コンテンツフィールドを選択し、フォームの右側にある大きい方の列にドラッグします。
これで、フォームのこの側に大きく表示されるように、好みのイラストを追加できます。反対側で行ったようにメディア追加ボタンをクリックして、イラストをアップロードしてください。
そして、再度、イラストのサイズと配置をカスタマイズするためにフィールド設定を調整してください。例のような大きなイラストの場合は、コンテンツフィールドから追加のテキストを削除した方がよいかもしれません。
これで、フォームの片側には小さなロゴと認証情報入力欄、反対側には大きなイラストが表示されます。
いつものように、このフォームをダッシュボードのWPFormsに保存し、使用する準備ができたらWordPressページに埋め込む必要があります。
6. ExactMetrics
次に、ExactMetricsのログインページを見てみましょう。これは前のログインと似ていますが、フォームの片側にイラストの代わりにコールトゥアクションボタンがあります。
片側には小さなロゴ、メール入力欄、パスワード入力欄、ログインボタンがあり、もう片側にはかなりの量のテキストがあり、その後にクリック可能なCTAがあります。
独自のフォームで同様の外観を作成するには、前の例で説明した手順に従うだけです。まず、レイアウトフィールドをユーザーログインフォームに追加し、フィールドをレイアウトの片側または列にドラッグします。
ロゴをアップロードするためにコンテンツフィールドをレイアウトにドラッグし、次にフォームの残りのフィールドもその側のレイアウトにドラッグすることを忘れないでください。
しかし、レイアウトフィールドのもう一方の側、2列目については、何もアップロードする必要はありません。ここにあるテキストを編集するだけです。
プリロードされたテキストの一部が、その下にあるテキストよりも大きく太字になっていることに注意してください。これは、例のテキストスタイルに似ています。
これにより、テキストを例のように簡単に作成できますが、テキストエディタを有利に活用できる他のすべての方法を忘れないでください。テキストのサイズ、向き、色などを必要に応じて変更できます。
また、コンテンツフィールドのテキストエディター内で、コードスニペットを挿入してCTAボタンを作成することもできます。ボタンを作成するために使用したいコードをコピーして貼り付けるには、テキストエディターボックスのテキストタブをクリックします。
CTAボタンの外観を好きなようにスタイル設定するために、コードスニペットを編集できます。
これで、フォームにCTAボタンができました！再度、フォームを保存し、使用する準備ができたらWordPressページに埋め込む必要があります。
7. WPForms
ログインフォームのスタイル設定に関するより複雑な方法をすべて見てきましたので、次に、フォームのどこにでも簡単に追加できるセキュリティ要素の1つを見てみましょう。
reCAPTCHA検証は、WordPressウェブサイトを、フォームを使用してサイトに侵入しようとするボットやスパムから保護するのに役立ちます。
ご覧のとおり、WPFormsのログインページでこれを使用しています。
あなたのログインフォームにもreCAPTCHAフィールドを簡単に追加できます。ただし、まずWPFormsの設定で設定する必要があります。
WordPressダッシュボードから、「WPForms」→「設定」に移動します。次に、「CAPTCHA」画面が表示されていることを確認します。
画面の中央から「reCAPTCHA」オプションを選択します。
次に、使用したいreCAPTCHA検証の種類を選択します。チェックボックスreCAPTCHA v2を選択しましょう。
次に、Googleから提供された「サイトキー」と「シークレットキー」をこの設定ページに入力する必要があります。これらのキーを受け取るには、GoogleのreCAPTCHA管理コンソールでセットアッププロセスに従う必要があります。
詳細情報と完全なチュートリアルについては、WordPressフォームでのreCAPTCHAの設定と使用に関する記事をご覧ください。
これらの設定をreCAPTCHAフィールドに適用するために、画面下部にある「保存」をクリックすることを忘れないでください。
これで、フォームにreCAPTCHA検証を追加する準備ができました。フォーム作成ページに戻り、ユーザーログインフォームで有効にするには、reCAPTCHAフィールドをクリックするだけです。
これで完了です！あなたのログインフォームは、そうでなければあなたのサイトに侵入する可能性のあるボットやスパムから保護されています。
さらに、フォームにreCAPTCHAアイコンが表示され、ユーザーに情報が安全であることを伝えます。
WordPressにカスタムログインページを追加する方法
WPFormsのフォームビルダーの便利な点は、これらの例に着想を得たカスタマイズ可能なオプションとスタイリングの選択肢をすべて、フォーム自体で作成できることです。
ただし、これらの例で達成されたスタイルの一部は、ログインページでの追加の編集の結果である可能性があります。
したがって、WPFormsを使用してWordPressページでさらに多くのスタイリングを実現する方法についての詳細なヒントについては、CSSでフォームをスタイリングする方法に関するこの記事をご覧ください。
また、ここで取り上げたすべての作成済みフォームと例について、編集が完了したらフォームを保存する必要があることを覚えておいてください。
その後、必要に応じて後で、フォームをページに埋め込み、準備ができたら公開できます。または、フォームビルダーから、今すぐフォームをページに埋め込むことができます。
埋め込むをクリックすると、すでに作成したウェブサイトのページにログインフォームを埋め込むか、このログインフォーム用の新しいページを今すぐ作成できます。
新しいページを作成することにした場合は、WordPressダッシュボードで簡単に見つけられるように、ウェブサイトの他のページの名前と同じようにページに名前を付ける必要があります。
続行するには 開始する！をクリックしてください。WPFormsは自動的にログインフォームを新しいページに追加します。
フォームが埋め込まれた後、WPFormsブロックの設定にアクセスしたり、ページの他のスタイリング要素を編集したりすることで、WordPressページ自体でさらにいくつかのことを編集できます。
WordPressログインページを編集およびカスタマイズする方法に関するその他のアイデアについては、この記事をご覧ください。
そして、すべてのWordPressページと同様に、埋め込まれたフォームを含むページを公開して、ウェブサイトでライブにする必要があることを忘れないでください。公開前にページをプレビューしたり、後で下書きを保存したりすることもできます。
このトピックについてさらに詳しく知りたい場合は、ログインフォームと登録フォームの表示方法をカバーするこのチュートリアルをご覧ください。
ログインページ例に関するFAQ
ログインページの設計は、特にサイトが登録を受け付け始めたら、WordPressサイトの所有者の間でよく話題になります。ここでは、最もよく聞かれる質問を紹介します。
WordPressでカスタムログインページを作成するにはどうすればよいですか？
ユーザー登録アドオンをインストールし、ユーザーログインフォームテンプレートから開始して、フォームビルダーでカスタマイズしてから、ページに埋め込んで公開します。WordPressはデフォルトのログイン画面をwp-login.phpに維持し、カスタムページはそれを置き換えるのではなく、並行して機能します。
ログインページにサインアップリンクを追加できますか？
はい、サイトで登録が公開されている場合は、そうすべきです。ログインフォームにコンテンツフィールドを追加し、テキストエディタのリンクツールを使用して登録ページを指します。HubSpotの「アカウントをお持ちでないですか？サインアップ」という行は、コピーするパターンです。
ログインページにCAPTCHAは必要ですか？
実際のユーザーアカウントを持つすべてのサイトで、はい。ログインフォームは、それに気づいているかどうかにかかわらず、自動化されたトラフィックを取得し、失敗した試行はどこにも目立つように表示されません。reCAPTCHA、hCaptcha、Cloudflare Turnstileはすべて、無料バージョンを含むすべてのライセンスでWPFormsと連携します。
wp-login.phpの代わりにカスタムログインページを使用できますか？
カスタムページは、どこにでもリンクするログインページにすることができますが、WordPressコアが依存しているため、wp-login.phpはバックグラウンドでアクティブなままです。それを非表示または移動するには、フォームではなく専用のプラグインが必要であり、オプションの概要は、ログインページプラグインのガイドに記載されています。
次に、新規登録ユーザーを登録ユーザーに変えましょう
ログインページは、人々がログインするためのアカウントを持ってから初めて価値を発揮します。登録側も構築している場合は、PayPalでWordPress登録フォームを作成するガイドを確認してください。
これは、新しいユーザーのサインアップと支払いの受け取りを同じステップでカバーしており、通常、ログインページの後に人々が次に望むことです。
誰がいつサインアップしたかの記録が必要な場合は、フォーム送信をPDFに印刷するを参照してください。
フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
このブログ記事がお役に立ちましたら、無料のWordPressチュートリアルやガイドをさらにご覧いただくために、 Facebook と X (Twitter) でフォローしてください。
