LoginSignup
0
1
@gts(T S)

色々なデザインでログイン画面を作ってみた

Posted at

ログイン画面は、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;
}

image.png

グラデーションを使ったモダンなデザイン

このデザインでは、背景にトレンディなグラデーションを使用しています。フォームは視覚的に浮かび上がり、入力項目には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);
}

image.png

かわいらしいイラストデザイン

このデザインでは、かわいらしいイラストと淡いパステルカラーを使用しています。フォームの入力項目は丸みを帯びた形状で、全体的にポップでキュートな雰囲気を醸し出しています。

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;
}

image.png

ユーモア溢れるクレイジーデザイン

このデザインは、普通とは一線を画した個性的で変わったデザインになっています。背景には派手な模様を使い、フォームの入力項目には歪んだ形状を採用しています。また、キャラクターイラストも斬新でユーモア溢れるものになっています。

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);
}

image.png

超個性的なサイケデリックデザイン

このデザインは、常識を越えた超個性的で独創的なものになっています。背景には視覚的な錯覚を起こすような幾何学模様を使い、フォームの入力項目は液体のようにゆらゆら動きます。キャラクターイラストも非常に抽象的で奇抜なものを採用しています。

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);
}

image.png

キャラクターアニメーション付きのダイナミックデザイン

このデザインでは、キャラクターイラストにアニメーションを付けることで、よりダイナミックで面白いログイン画面を目指しました。背景にはトレンディなグラデーションを使い、フォームの入力項目には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);
  }

image.png

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1