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

公開: 2017-08-10

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

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

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

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

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

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

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

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

HTMLマークアップ

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

<div id="container">
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="
username">
<label for="password">Password:</label>
<input type="password" id="password" name
="password">
<div id="lower">
<input type="checkbox"><label for="checkbox
">Keep me logged in</label>
<input type="submit" value="Login">
</div>
</form>
</div>

要素の配置

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

html, body {
width: 100 %;
height: 100 %;
font-family: "Helvetica Neue" , Helvetica, sans
-serif;
color: # 444 ;
-webkit-font-smoothing: antialiased;
background: #f0f0f0;
}

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

#container {
position: fixed;
width: 340px;
height: 280 px;
top: 50%;
left: 50%;
margin-top: -140 px;
margin-left: -170 px;
}

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

form {
margin: 0 auto;
margin-top: 20 px;
}
label {
color: # 555 ;
display: inline-block;
margin-left: 18 px;
padding-top: 10px;
font-size: 14px;
}

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

p a {
font-size: 11px;
color: #aaa;
float: right;
margin-top: -13 px;
margin-right: 20 px;
}
p a:hover {
color: # 555 ;
}
input {
font-family: "Helvetica Neue" , Helvetica,
sans-serif;
font-size: 12px;
outline: none;
}
input[type=text],
input[type=password] {
color: # 777 ;
padding-left: 10px;
margin: 10 px;
margin-top: 12 px;
margin-left: 18 px;
width: 290px;
height: 35px;
}

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

#lower {
background: #ecf2f5;
width: 100%;
height: 69px;
margin-top: 20 px;
}
input[type=checkbox] {
margin-left: 20 px;
margin-top: 30 px;
}
.check {
margin-left: 3px;
}
input[type=submit] {
float: right;
margin-right: 20 px;
margin-top: 20 px;
width: 80px;
height: 30px;
}

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

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

background: #fff;
border-radius: 3px;
border: 1px solid #ccc;
box-shadow: 0 1 px 2 pxrgba( 0 , 0, 0, .1 );

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

#container {
position: fixed;
width: 340px;
height: 280 px;
top: 50 %;
left: 50 %;
margin-top: -140 px;
margin-left: -170 px;
background: #fff;
border-radius: 3px;
border: 1px solid #ccc;
box-shadow: 0 1 px 2 pxrgba( 0 , 0, 0, .1 );

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

border: 1 px solid #c7d0d2;
border-radius: 2px;
box-shadow: inset 0 1.5 px 3px rgba( 190 ,
190 , 190 , .4 ), 0 0 0 5px #f5f7f8;
}

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

input[type=password] {
color: # 777 ;
padding-left: 10px;
margin: 10 px;
margin-top: 12 px;
margin-left: 18 px;
width: 290px;
height: 35px;
border: 1px solid #c7d0d2;
border-radius: 2px;
box-shadow: inset 0 1.5 px 3px rgba( 190 ,
190 , 190 , .4 ), 0 0 0 5px #f5f7f8;
}

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

font-size: 14 px;
font-weight: bold;
color: #fff;
background-color: #acd6ef; /*IE fallback*/
background-image: -webkit-gradient(linear,
left top, left bottom, from (#acd6ef), to(# 6ec2
e8));
background-image: -moz-linear-gradient(
top left 90deg, #acd6ef 0 %, # 6ec2e8 100%);
background-image: linear-gradient(top left
90 deg, #acd6ef 0%, # 6 ec2e8 100 %);
border-radius: 30px;
border: 1px solid # 66add6;
box-shadow: 0 1 px 2 pxrgba( 0 , 0, 0, .3 ),
inset 0 1px 0 rgba( 255 , 255 , 255 , .5 );
cursor: pointer;
}

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

input[type=submit] {
float: right;
margin-right: 20 px;
margin-top: 20 px;
width: 80px;
height: 30px;
font-size: 14px;
font-weight: bold;
color: #fff;
background-color: #acd6ef; /*IE fallback*/
background-image: -webkit-gradient(linear,
left top, left bottom, from (#acd6ef), to(# 6ec2
e8));
background-image: -moz-linear-gradient(
top left 90deg, #acd6ef 0 %, # 6ec2e8 100%);
background-image: linear-gradient(top left
90 deg, #acd6ef 0%, # 6 ec2e8 100 %);
border-radius: 30px;
border: 1px solid # 66add6;
box-shadow: 0 1 px 2 pxrgba( 0 , 0, 0, .3 ),
inset 0 1px 0 rgba( 255 , 255 , 255 , .5 );
cursor: pointer;
}

ログインフォームの見栄えが良くなりました。フォームは単純なままにしておくことをお勧めします。他の要素を追加してページを乱雑にする代わりに、ビジネスのロゴと単一の画像を追加できます。訪問者は非常に多くの詳細に気を取られる傾向があります。エルゴ、あなたはそれができる限りシンプルでありながら、それでも美しく、訪問者が再び戻ってくるように魅力的なウェブサイトのログインページを持ちたいと思うでしょう。 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サイトのログインページのスタイルを設定する方法についての洞察を得ることができます。それを乱雑にすることなく、そして詳細を省くことなく。