ログイン画面は、Webアプリケーションにおいて最初に目にする重要な部分です。シンプルでありながらも、ブランディングや利用者体験を左右する要素でもあります。そこで今回は、さまざまなログイン画面のデザインを作成してみました。
クラシックなデザイン
最初のデザインは、クラシックなスタイルを意識しました。白を基調としたシンプルなレイアウトで、フォームの入力項目が中央に配置されています。
HTML
<link href="login.css" rel="stylesheet" />
<div class="login-container">
<h1>ログイン</h1>
<form>
<div class="form-group">
<label for="username">ユーザー名</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">パスワード</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">ログイン</button>
</form>
</div>
.login-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
button[type="submit"] {
width: 100%;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
グラデーションを使ったモダンなデザイン
このデザインでは、背景にトレンディなグラデーションを使用しています。フォームは視覚的に浮かび上がり、入力項目にはNeumorphismスタイルを採用しています。
body {
background: linear-gradient(45deg, #8e44ad, #3498db);
font-family: 'Helvetica Neue', sans-serif;
color: #fff;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.login-container {
background-color: rgba(255, 255, 255, 0.2);
padding: 40px;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.form-group {
margin-bottom: 20px;
}
input {
width: 100%;
padding: 15px;
border: none;
background-color: rgba(255, 255, 255, 0.4);
border-radius: 5px;
color: #fff;
font-size: 16px;
}
input::placeholder {
color: rgba(255, 255, 255, 0.8);
}
input:focus {
outline: none;
box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
button {
width: 100%;
padding: 15px;
background-color: rgba(255, 255, 255, 0.8);
border: none;
border-radius: 5px;
color: #8e44ad;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: rgba(255, 255, 255, 1);
}
かわいらしいイラストデザイン
このデザインでは、かわいらしいイラストと淡いパステルカラーを使用しています。フォームの入力項目は丸みを帯びた形状で、全体的にポップでキュートな雰囲気を醸し出しています。
body {
background-color: #ffefd5;
font-family: 'Comic Sans MS', cursive, sans-serif;
color: #ff6b6b;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.login-container {
background-color: #fff;
padding: 40px;
border-radius: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
.character {
width: 150px;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
input {
width: 100%;
padding: 10px 15px;
border: 2px solid #ffc0cb;
border-radius: 25px;
font-size: 16px;
}
input::placeholder {
color: #ffb6c1;
}
input:focus {
outline: none;
border-color: #ff69b4;
box-shadow: 0 0 5px rgba(255, 192, 203, 0.5);
}
button {
width: 100%;
padding: 10px;
background-color: #ff69b4;
border: none;
border-radius: 25px;
color: #fff;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #ff1493;
}
ユーモア溢れるクレイジーデザイン
このデザインは、普通とは一線を画した個性的で変わったデザインになっています。背景には派手な模様を使い、フォームの入力項目には歪んだ形状を採用しています。また、キャラクターイラストも斬新でユーモア溢れるものになっています。
body {
background-color: #ffd670;
background-image: radial-gradient(circle, #ff9770, #ffd670);
font-family: 'Comic Sans MS', cursive, sans-serif;
color: #4d2600;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.login-container {
background-color: #fff2cc;
padding: 40px;
border-radius: 50% 20% / 10% 40%;
box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1);
text-align: center;
}
.character {
width: 200px;
transform: rotate(-15deg);
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
input {
width: 100%;
padding: 15px 20px;
border: 3px dashed #ff9770;
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
font-size: 16px;
background-color: #fffde7;
}
input::placeholder {
color: #ffb347;
}
input:focus {
outline: none;
border-color: #ff6347;
box-shadow: 0 0 10px rgba(255, 99, 71, 0.5);
transform: scale(1.05);
}
button {
width: 100%;
padding: 15px;
background-color: #ff6347;
border: none;
border-radius: 50px 20px;
color: #fff;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: transform 0.3s ease;
}
button:hover {
transform: scale(1.1);
}
超個性的なサイケデリックデザイン
このデザインは、常識を越えた超個性的で独創的なものになっています。背景には視覚的な錯覚を起こすような幾何学模様を使い、フォームの入力項目は液体のようにゆらゆら動きます。キャラクターイラストも非常に抽象的で奇抜なものを採用しています。
body {
background-color: #000;
background-image: radial-gradient(circle, #ff0081, #ffa500, #00ff00, #00ffff, #8a2be2, #ff0081);
background-size: 800% 800%;
animation: bgAnimation 30s ease infinite;
font-family: 'Verdana', sans-serif;
color: #fff;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
@keyframes bgAnimation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.login-container {
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 40px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
text-align: center;
}
.character {
width: 200px;
filter: hue-rotate(360deg);
animation: hueRotate 10s infinite linear;
margin-bottom: 20px;
}
@keyframes hueRotate {
0% { filter: hue-rotate(0deg); }
100% { filter: hue-rotate(360deg); }
}
.form-group {
margin-bottom: 15px;
}
input {
width: 100%;
padding: 15px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
animation: liquidAnimation 5s ease-in-out infinite;
}
@keyframes liquidAnimation {
0%, 100% { transform: translate(0, 0) rotateZ(0deg); }
25% { transform: translate(5px, 5px) rotateZ(2deg); }
75% { transform: translate(-5px, -5px) rotateZ(-2deg); }
}
input::placeholder {
color: rgba(255, 255, 255, 0.8);
}
input:focus {
outline: none;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}
button {
width: 100%;
padding: 15px;
background-color: rgba(255, 255, 255, 0.2);
border: none;
border-radius: 5px;
color: #fff;
font-size: 18px;
font-weight: bold;
cursor: pointer;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease;
}
button:hover {
background-color: rgba(255, 255, 255, 0.3);
}
キャラクターアニメーション付きのダイナミックデザイン
このデザインでは、キャラクターイラストにアニメーションを付けることで、よりダイナミックで面白いログイン画面を目指しました。背景にはトレンディなグラデーションを使い、フォームの入力項目にはNeumorphismスタイルを採用しています。
<link href="login.css" rel="stylesheet" />
<div class="login-container">
<div class="character-container">
<div class="character creature1">
<div class="body">
<div class="eye"></div>
<div class="pupil"></div>
<div class="eye"></div>
</div>
</div>
<div class="character creature2">
<div class="body">
<div class="antennae"></div>
<div class="eye"></div>
<div class="pupil"></div>
<div class="eye"></div>
</div>
</div>
<div class="character creature3">
<div class="body">
<div class="wing"></div>
<div class="eye"></div>
<div class="pupil"></div>
<div class="eye"></div>
<div class="wing"></div>
</div>
</div>
</div>
<h1>キャラクター<br>ログイン</h1>
<form>
<div class="form-group">
<input type="text" id="username" name="username" placeholder="ユーザー名" required>
</div>
<div class="form-group">
<input type="password" id="password" name="password" placeholder="パスワード" required>
</div>
<button type="submit">ログイン</button>
</form>
</div>
body {
background-color: #000;
background-image: radial-gradient(circle, #ff0081, #ffa500, #00ff00, #00ffff, #8a2be2, #ff0081);
background-size: 800% 800%;
animation: bgAnimation 30s ease infinite;
font-family: 'Verdana', sans-serif;
color: #fff;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
@keyframes bgAnimation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.login-container {
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 40px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
text-align: center;
}
.character-container {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.character {
width: 100px;
height: 100px;
margin: 0 10px;
position: relative;
animation: characterMove 5s infinite;
}
@keyframes characterMove {
0% { transform: translateY(0); }
25% { transform: translateY(-20px); }
50% { transform: translateY(0); }
75% { transform: translateY(20px); }
100% { transform: translateY(0); }
}
.body {
width: 100%;
height: 50%;
background-color: #ffcc00;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
animation: bodyMove 2s infinite;
}
.eye {
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 20%;
animation: eyeMove 2s infinite;
}
.eye:first-child {
left: 20%;
}
.eye:last-child {
right: 20%;
}
.pupil {
width: 10px;
height: 10px;
background-color: #000;
border-radius: 50%;
position: absolute;
top: 25%;
left: 45%;
animation: pupilMove 2s infinite;
}
.antennae {
width: 30px;
height: 10px;
background-color: #000;
position: absolute;
top: 10%;
left: 35%;
border-radius: 50% 50% 0 0;
animation: antennaeMove 2s infinite;
}
.wing {
width: 30px;
height: 30px;
background-color: #ff69b4;
border-radius: 50% 0;
position: absolute;
top: 20%;
animation: wingMove 2s infinite;
}
.wing:first-child {
left: 10%;
transform: rotate(45deg);
}
.wing:last-child {
right: 10%;
transform: rotate(-45deg);
}
@keyframes bodyMove {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes eyeMove {
0%, 100% { transform: translateX(0) translateY(0); }
50% { transform: translateX(5px) translateY(-5px); }
}
@keyframes pupilMove {
0%, 100% { transform: translateX(0) translateY(0); }
50% { transform: translateX(-5px) translateY(5px); }
}
@keyframes antennaeMove {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(20deg); }
}
@keyframes wingMove {
0%, 100% { transform: rotate(0deg); }
25%, 75% { transform: rotate(45deg); }
50% { transform: rotate(90deg); }
}
.form-group {
margin-bottom: 15px;
}
input {
width: 100%;
padding: 15px;
border: none;
border-radius: 5px;
font-size: 16px;
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
input::placeholder {
color: rgba(255, 255, 255, 0.8);
}
input:focus {
outline: none;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}
button {
width: 100%;
padding: 15px;
background-color: rgba(255, 255, 255, 0.2);
border: none;
border-radius: 5px;
color: #fff;
font-size: 18px;
font-weight: bold;
cursor: pointer;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease;
}
button:hover {
background-color: rgba(255, 255, 255, 0.3);
}