CSSで作るフォームUI完全ガイド

CSSで作るフォームUI完全ガイド

フォームUIは、ユーザー体験に直結する重要なパーツです。見た目・使いやすさ・分かりやすさがそのままコンバージョンに影響します。

この記事では、実務で使えるフォームUIを初級〜上級に分けて紹介します。すべてコピペOKです。

初級：基本のフォームデザイン

① inputの基本スタイル

CSS
input {
  width: 100%;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 0.4em;
  padding: 0.5em 1em;
}

まずはベースとなるinputデザイン。余白と角丸を整えるだけで、かなり見やすくなります。

② フォーカス時のスタイル

CSS
input:focus {
  border-color: #3498db;
  outline: none;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

フォーカス状態を明確にすることで、入力中であることをユーザーに伝えます。

中級：使いやすさを高めるUI

③ エラー表示

CSS
.input-error {
  border-color: #e74c3c;
}

.error-text {
  color: #e74c3c;
  font-size: 14px;
  margin-top: 0.5えｍ;
}

エラーは「色＋テキスト」で伝えるのが基本です。

入力エラー

④ プレースホルダーの調整

CSS
::placeholder {
  color: #999;
  font-size: 14px;
}

プレースホルダーは補助情報なので、主張しすぎない色にします。

上級：モダンUIパターン

⑤ カスタムチェックボックス

HTML
<label class="custom-checkbox">
  <input type="checkbox">
  <span></span>
  利用規約に同意する
</label>
CSS
.custom-checkbox {
  display: flex;
  align-items: center;
}

.custom-checkbox input {
  display: none;
}

.custom-checkbox span {
  width: 18px;
  height: 18px;
  border: 2px solid #3498db;
  border-radius: 4px;
  margin-right: 8px;
  position: relative;
}

.custom-checkbox input:checked + span::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 10px;
  border: solid #3498db;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

デフォルトのチェックボックスをカスタマイズすることで、デザイン統一ができます。

⑥ フローティングラベル

HTML
<div class="form-group">
  <input type="text" id="name" placeholder=" " required>
  <label for="name">お名前</label>
</div>
CSS
.form-group {
  position: relative;
}

.form-group input {
  width: 100%;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 0.4em;
  padding: 0.5em 1em;
}

.form-group label {
  position: absolute;
  top: 50%;
  left: 1em;
  transform: translateY(-50%);
  background: #fff;
  padding: 0 0.5em;
  color: #999;
  transition: 0.3s;
}

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label {
  top: -1em;
  font-size: 12px;
  color: #3498db;
}

入力時にラベルが上に移動するモダンなUI。UX向上に効果的です。

まとめ

  • フォームUIはUXとコンバージョンに直結する
  • フォーカス・エラー・補助情報を明確にすることが重要
  • カスタムUIでデザインの統一感を出せる

実務では「見た目」と「使いやすさ」の両方を意識して設計することが重要です。

関連記事

PAGE TOP