あなたのウェブサイトのために美しくカスタマイズされたログインページを作成する方法

公開: 2017-08-10

ログインページは、ウェブサイトのランディングページと同じように、トラフィックを変換したいビジネスオーナーにとって非常に重要です。ランディングページと同じように、ログインページは、訪問者がそれほど面倒なことなく詳細を提供できるように洗練されている必要があります。

最高のログインページのほとんどは単純明快で、広告やマーケティングの仕掛けのないミニマリストスタイルを採用しています。 1つか2つの背景画像を含むフォームでログインするだけです。

訪問者を魅了し、戻ってくるように促すログインページを作成する方法はいくつかあります。

コーディング（単純なHTMLとCSS）が得意な場合は、いくつかの基本的なコードを使用して、単純で魅力的なログインページを作成できるはずです。
初心者の場合、Webサイトビルダーのテンプレートに付属しているログインページをカスタマイズする方が簡単です。ほとんどのウェブサイトビルダーとテンプレート（ WordPress 、 Weebly 、 Shopify 、 Joomlaなど）にはすぐに使えるテンプレートが付属しており、必要に応じてそれらを編集するだけです。
簡単なプラグインとテーマを使用してログインページを作成することもできます。プラグインは、ボタンをクリックするだけでログインページをカスタマイズできるので優れています。初心者だけでなく、経験豊富なWebデザイナーも使用できます。

Webサイトのログインページをカスタマイズする方法は、スキルレベルによって決まります。コーディングはある人にとっては良い方法かもしれませんが、別の人はどのコードをどこに置くべきかわからないかもしれません。プラグインは優れていますが、プレミアムなものもあります。

美しいログインページを作成およびカスタマイズする方法については、以下をお読みください。

シンプルなHTML / CSSを使用する

HTMLおよびCSSでのログインフォームの作成とカスタマイズは、3つの簡単なステップで行われます。HTMLマークアップの処理、ログインフォームのさまざまな要素の配置、最後に、魅力的に見えるようにさまざまな要素のスタイルを設定します。

HTMLマークアップ

ここでは、単純なHTMLタグを追加して、実際のフォームを作成します。 HTML部分は、コンテナー、フォーム自体、およびその他のいくつかの入力で構成されています。コードを正しく入力することで、ユーザー名部分、パスワード部分、チェックボックス、ログインボタンを備えた簡単なログインフォームを作成できます。ただし、コンポーネントは適切に配置されていません。

[xhtml]
<div id = "container">
<フォーム>
<labelfor = "username">ユーザー名：</ label>
<input type = "text" id = "username" name = "
ユーザー名 ">
<labelfor = "password">パスワード：</ label>
<input type = "password" id = "password" name
= "パスワード">
<div id = "lower">
<input type = "checkbox"> <label for = "checkbox
">ログインしたままにする</ label>
<input type = "submit" value = "Login">
</ div>
</ form>
</ div>
[/ xhtml]

要素の配置

次に、以下のような単純なコードを追加して、フォームのさまざまな部分のスタイルを設定できます。これにより、さまざまなコンポーネントがさまざまな位置に配置されます。

[css]
html、body {
幅：100％;
高さ：100％;
フォントファミリー： "Helvetica Neue"、Helvetica、sans
-セリフ;
色：＃444;
-webkit-font-smoothing：アンチエイリアス;
背景：＃f0f0f0;
}
[/ css]

この後、仕様に従ってログインページのさまざまな要素を配置できます。まず、フォントの色などの基本的な要素を指定してから、バランスをとるためにフォームをページの中央に配置する必要があります。ここでは、美しいと思うものなら何でも、好きなフォントの色を追加できます。ただし、訪問者を混乱させないように、フォームはシンプルなままにすることを常にお勧めします。

[css]
＃容器 {
位置：固定;
幅：340px;
高さ：280ピクセル;
トップ：50％;
左：50％;
マージントップ：-140ピクセル;
マージン左：-170ピクセル;
}
[/ css]

この時点では、フォームはまだ不安定に見える可能性があります。少し構造的なスタイルを追加することで、フォームを改善できます。これを行うには、ログインフォームの要素が一緒に押しつぶされておらず、読みやすいことを確認することから始めます。次のコードを追加して、フォームがきれいになるようにすることができます。

[css]
形 {
マージン：0自動;
マージントップ：20ピクセル;
}
ラベル{
色：＃555;
表示：インラインブロック;
マージン左：18ピクセル;
パディングトップ：10px;
フォントサイズ：14px;
}
[/ css]

これで、ログインフォームはシンプルに見え、さまざまな要素が適切に配置された状態でほぼ完成します。ただし、ログインフォームのさまざまな入力領域のスタイルを設定して、見栄えを良くする必要があります。ここでは、色、フォントサイズ、パディング、余白、さまざまな要素の幅、およびマウスをホバーしたり要素をクリックしたときに表示される色などの他の基本事項を指定します。以下のコードを追加します。

[css]
pa {
フォントサイズ：11px;
色：#aaa;
フロート：右;
マージントップ：-13ピクセル;
マージン右：20ピクセル;
}
pa：hover {
色：＃555;
}
入力{
font-family： "Helvetica Neue"、Helvetica、
サンセリフ;
フォントサイズ：12px;
概要：なし;
}
input [type = text]、
input [type = password] {
色：＃777;
パディング-左：10px;
マージン：10ピクセル;
マージントップ：12ピクセル;
マージン左：18ピクセル;
幅：290px;
高さ：35px;
}
[/ css]

ログインページをさらに美しく見せたいので、ログインボタンとチェックボックスを少しスタイリッシュに見せるためにもう少しカスタマイズを追加することができます。次のコードを追加します。

[css]
＃低い {
背景：＃ecf2f5;
幅：100％;
高さ：69px;
マージントップ：20ピクセル;
}
input [type = checkbox] {
マージン左：20ピクセル;
マージントップ：30ピクセル;
}
。小切手 {
マージン左：3px;
}
input [type = submit] {
フロート：右;
マージン右：20ピクセル;
マージントップ：20ピクセル;
幅：80px;
高さ：30px;
}
[/ css]

フォーム要素のスタイルを設定する

この時点で、要素は適切に配置され、十分に洗練されているように見えます。ログインフォームの準備はできていますが、CSSスタイルコードを追加することで、もう少し美しくすることができます。コンテナの角を丸くし、影を付けて見栄えを良くし、奥行き感を出すことで、プロセスを開始できます。これを行うには、以下のコードをコンテナ領域に入力します。

[css]
背景：#fff;
border-radius：3px;
ボーダー：1pxソリッド#ccc;
ボックスシャドウ：0 1 px 2 pxrgba（0、0、0、.1）;
[/ css]

上記のコードをコンテナ領域に追加すると、コンテナコードは次のようになります。

[css]
＃容器 {
位置：固定;
幅：340px;
高さ：280ピクセル;
トップ：50％;
左：50％;
マージントップ：-140ピクセル;
マージン左：-170ピクセル;
背景：#fff;
border-radius：3px;
ボーダー：1pxソリッド#ccc;
ボックスシャドウ：0 1 px 2 pxrgba（0、0、0、.1）;
[/ css]

コンテナのスタイルを設定したら、同様のコードを使用してさまざまな入力領域のスタイルを設定できます。以下のコードを追加すると、入力領域が最初よりもずっと見栄えが良くなります。

[css]
ボーダー：1ピクセルソリッド＃c7d0d2;
border-radius：2px;
ボックスシャドウ：インセット0 1.5 px 3px rgba（190、
190、190、.4）、0 0 0 5px＃f5f7f8;
}
[/ css]

これで、パスワード入力コード全体が次のようになります。ログインフォームの見栄えは良くなりますが、フォームの見栄えをさらに良くするためにできるスタイリングはまだまだあります。

[css]
input [type = password] {
色：＃777;
パディング-左：10px;
マージン：10ピクセル;
マージントップ：12ピクセル;
マージン左：18ピクセル;
幅：290px;
高さ：35px;
ボーダー：1pxソリッド＃c7d0d2;
border-radius：2px;
ボックスシャドウ：インセット0 1.5 px 3px rgba（190、
190、190、.4）、0 0 0 5px＃f5f7f8;
}
[/ css]

ここで、ログインボタンの見栄えを良くする必要があります。これを行うには、コードの送信セクションに以下のコードを入力します。

[css]
フォントサイズ：14ピクセル;
フォントの太さ：太字;
色：#fff;
背景色：＃acd6ef; / * IEフォールバック* /
背景画像：-webkit-gradient（linear、
左上、左下、（＃acd6ef）から（＃6ec2
e8））;
背景画像：-moz-linear-gradient（
左上90度、＃acd6ef 0％、＃6ec2e8 100％）;
背景画像：線形グラデーション（左上
90度、＃acd6ef 0％、＃6 ec2e8 100％）;
border-radius：30px;
ボーダー：1pxソリッド＃66add6;
ボックスシャドウ：0 1 px 2 pxrgba（0、0、0、.3）、
インセット01px 0 rgba（255、255、255、.5）;
カーソル：ポインタ;
}
[/ css]

送信セクションのコード全体は次のようになり、ログインボタンの色などが変更され、次のような簡単なログインフォームが作成されます。

[css]
input [type = submit] {
フロート：右;
マージン右：20ピクセル;
マージントップ：20ピクセル;
幅：80px;
高さ：30px;
フォントサイズ：14px;
フォントの太さ：太字;
色：#fff;
背景色：＃acd6ef; / * IEフォールバック* /
背景画像：-webkit-gradient（linear、
左上、左下、（＃acd6ef）から（＃6ec2
e8））;
背景画像：-moz-linear-gradient（
左上90度、＃acd6ef 0％、＃6ec2e8 100％）;
背景画像：線形グラデーション（左上
90度、＃acd6ef 0％、＃6 ec2e8 100％）;
border-radius：30px;
ボーダー：1pxソリッド＃66add6;
ボックスシャドウ：0 1 px 2 pxrgba（0、0、0、.3）、
インセット01px 0 rgba（255、255、255、.5）;
カーソル：ポインタ;
}
[/ css]

ログインフォームの見栄えが良くなりました。フォームは単純なままにしておくことをお勧めします。他の要素を追加してページを乱雑にする代わりに、ビジネスのロゴと単一の画像を追加できます。訪問者は非常に多くの詳細に気を取られる傾向があります。エルゴ、あなたはそれができる限り単純であるが、それでも訪問者が再び戻ってくるように美しくそして魅力的なウェブサイトのログインページを持ちたいと思うでしょう。 Snoggle News 、 Dropbox 、 Freshbooks 、 MailChimp 、 Theidealistなどの人気のあるWebサイトからログインフォームの例をとることができます。グーグルやフェイスブックなどのウェブサイトもミニマリストスタイルを採用しており、それらのログインページは、ログインフォーム、会社のロゴ、およびその他のいくつかの詳細だけで見栄えがします。

jQueryログインボックス

jQueryログインボックスは多くのWebサイトで使用されており、常に革新的であり、新時代のWebサイトログインフォームのデザインに取り入れられています。シンプルでありながらスタイリッシュに見えます。以前とは異なり、最近のログインは単純なページで行われ、jQueryの挫折を心配する必要はありません。

jQueryを使用すると、Webサイトのホームページにログインボタンを作成できます。これにより、訪問者はjQueryを利用したログインページに移動できます。フォームにはAjax呼び出しが含まれており、外部PHPスクリプトを使用してログインの資格情報を確認し、アクセスを許可または拒否します。 jQueryを使用すると、ログインボックスのすぐ下に登録リンクを簡単に追加できます。これにより、プロセスがスムーズになり、ユーザーはスムーズなエクスペリエンスを得ることができます。あなたの訪問者はあなたのウェブサイトで登録/サインアップページを見つけるのが簡単であるとわかるでしょう。同じログインボックスを使用してアカウントにアクセスすることもできます。

HTMLとCSSを使用してログインページを作成およびスタイル設定する場合と同様に、ここのログインボックスで、ページが乱雑にならないようにビジネスについて少し説明する必要があります。 jQueryで作成するログインフォームはシンプルで見栄えがします。ただし、より魅力的にするには、画像またはビジネスロゴのみを追加する必要があります。ログインページはユーザーフレンドリーである必要があります。

ウェブサイトビルダーのログインフォームテンプレート

魅力的なログインフォームを作成するための最も初心者に優しい方法は、ウェブサイトビルダーのログインフォームテンプレートを使用することです。ここでは、コーディングを知る必要はなく、他のWebサイトを作成したこともありません。ログインフォームはボタンをクリックするだけで作成されます。 WeeblyやWordPressなどのウェブサイトビルダーは、フリーミアムとプレミアムのフォームを提供しています。

ログインページを作成するには、フォームプラグインをインストールしてから、テンプレート/プラグインの設定ページにアクセスして、好みに合わせてカスタマイズします。 WordPressでは、 WPFormsをインストールしてから、購入コードを入力して確認する必要があります。設定ページにアクセスして、[アドオン]をクリックします。ここでは、任意の要素を追加できます。 [ユーザー登録アドオン]をクリックすると、準備が整います。

「新規ページの作成」をクリックし、「ユーザーログイン」フォームを選択します。すべてのフィールドが事前に作成されたテンプレートが表示されます。必要なのは、フィールドをクリックして編集することだけです。各フィールドを編集した後、[設定]タブをクリックして、訪問者がログインした後に何が起こるかを決定します。あなたはそれらを特定のURLに向けることができます。

フォームを作成したら、ログインフォームの新しいページを作成します。エディターが表示され、その上部にある[フォームの追加]をクリックします。ポップアップが表示され、作成したフォームを選択できます。ニーズに合わせてページの編集を続けることも、保存して公開することもできます。作成したカスタムログインをウィジェットとしてWebサイトのサイドバーに追加できます。

ウェブサイトビルダーが提供するログインテンプレートを扱う場合、プロセスはほぼ同じです。テンプレートをインストールし、好みに合わせて編集し、新しいページを作成して、作成したフォームを挿入します。これは、ウェブサイトのデザインに不慣れな人にお勧めです。

サードパーティのテーマとプラグイン

テーマ

あなたのウェブサイトビルダーは、無料またはプレミアムでログインテンプレートまたはテーマを提供しているかもしれませんが、それはあなたのニーズを満たしていないかもしれません。幸いなことに、特にWordPress用のサードパーティのテーマとプラグインは多数あります。テーマは、さまざまなスタイルをもたらすWebサイト全体のテンプレートのようなものであり、それらのほとんどを使用すると、スタイリッシュで魅力的なログインページを取得できます。テーマは、ログインページだけでなく、Webサイトの他の側面にも影響を与えます。

お気に入りのログインページでテーマを選択する必要があります。良い点は、ほとんどのテーマで、インストールする前に機能のツアーを行うことができることです。テーマの費用は2ドルから100ドル以上までです。テーマは、Webビルダーのテンプレートと同じように、簡単に編集できます。デザインの色、フォント、サイズをお好みや好みに合わせて変更できます。

テーマは、Webサイトビルダー、プレミアムテーマ、またはThemeforestなどのサードパーティ開発者からのものにすることができます。

プラグイン

プラグインはシンプルです。 Webサイトのほぼすべての側面に影響を与えるテーマとは異なり、Webサイトのさまざまな側面に対応するプラグインがあります。エルゴ、ログインフォームまたは登録フォームを作成するためだけにプラグインをインストールできます。プラグインは無料で利用でき、一部はプレミアムです。あなたの予算とあなたのニーズに基づいて1つを選択してください。

すべてのウェブサイトビルダーには、選択可能なプラグインがあります。 Weebly 、 Joomla 、 WordPressのいずれを使用していても、多数のテーマがあります。プラグインを使用してログインページを作成するには、ダッシュボードにアクセスして、Webサイトビルダーで使用可能なプラグインのリストを表示します。必要なプラグインをインストールすると、プラグインの料金を支払うチェックアウトページが表示されます。

プラグインをインストールした後、さまざまな要素を編集するように求められます。編集する各要素をクリックしてから、[変更を保存]をクリックします。新しいページを作成し、プラグインを使用して作成したフォームを追加します。

結論

ログインページは、魅力的である必要があるのと同じくらい単純である必要があります。最近、さまざまなログインページのデザインが目撃されています。使い慣れたログインページの作成方法のみを選択してください。コードに精通していない場合は、コーディングを選択しないでください。専門家から設計支援を受けることができますが、さらに良いことに、ログインページの設計について支援を受けることができます。

人々はソーシャルログインも使用しています。ここでは、訪問者がFacebookやTwitterなどのソーシャルメディアアカウントの詳細を使用してログインできるようにします。これは、十分にシンプルであり、ビジネスのソーシャルメディアの存在感とパフォーマンスを向上させることを考えると、これも良いオプションです。人気のあるWebサイトのログインページをチェックして、Webサイトのログインページのスタイルを設定する方法についての洞察を得ることができます。それを乱雑にすることなく、そして詳細を省くことなく。