• Top
  • HTML/CSS
  • サイトの信頼感はフォームで決まる ─ HTML/CSS改善術
HTML/CSS
投稿日：

サイトの信頼感はフォームで決まる ─ HTML/CSS改善術

サイトの信頼感はフォームで決まる ─ HTMLCSS改善術

こんにちは、株式会社ファストコーディングのWebディレクタの働くおかんです！

以前、上の子の習い事の体験申し込みをオンラインでしようとした時のことです。サイトはきれいにデザインされていて、写真も素敵で「ここにしようかな！」と思っていました。でも、いざ申し込みフォームに進んだら、入力欄が分かりにくくて、エラーメッセージも「入力内容に誤りがあります」と一言だけ。どこが間違っているのか全然分からなくて、結局諦めて電話で問い合わせることにしました。

子どもが隣で「ママ、まだ〜？」と急かすし、夕飯の準備もあるしで、もうイライラしてしまって。「せっかくいいなと思ったのに、このフォームのせいで台無しだなぁ」と正直思いました。

その経験があってから、仕事でフォームを作るときには「このフォーム、本当に使いやすいかな？」と改めて考えるようになりました。

フォームが与える信頼感の大きさ

Webサイトでは、フォームが最後の砦なんですよね。

どんなにデザインが素敵でも、どんなに情報が充実していても、最終的にユーザーがアクションを起こすのはフォームです。お問い合わせ、会員登録、商品購入、資料請求…すべてフォームを通じて行われます。

つまり、フォームという「入力体験」を通じて、ユーザーは企業の姿勢や信頼性を判断しているんです。

実際、私が担当したプロジェクトでも、フォームを改善しただけでコンバージョン率が約25%向上したことがあります。フォームの使いやすさは、直接ビジネスの成果につながるんです！

フォームで信頼感を損なう3つの問題

フォームでユーザーが不安や不信感を抱くポイントは、主に以下の3つです。

1. 何を入力すればいいのか分からない

入力欄のラベルが曖昧だったり、プレースホルダーが不適切だったりすると、ユーザーは「何を書けばいいの？」と迷います。迷った時点で、離脱のリスクが高まります。

2. エラーが分かりにくい

「入力内容に誤りがあります」だけでは、どこが間違っているのか分かりません。ユーザーは自分で探さなければならず、それがストレスになります。

3. 入力が正しくできているか不安

入力中に「これで合ってるかな？」という不安を感じさせるフォームは、ユーザーを不安にさせます。リアルタイムのフィードバックがないと、送信ボタンを押すまでドキドキしてしまいます。

HTML/CSSで改善できる5つのポイント

これらの問題は、JavaScriptを使わなくても、HTML/CSSだけでかなり改善できます。朝、子どもを送り出した後にひと休みしながら実装してみたところ、思ったより簡単にできました！

以下、実際に効果があった改善ポイントを5つ紹介します。

ポイント1: ラベルとプレースホルダーを適切に使い分ける

ラベルは入力欄の説明、プレースホルダーは入力例を示すものです。この2つを適切に使い分けることで、ユーザーは迷わず入力できます。

HTML例：

<div class="form-group">
  <label for="name">お名前 <span class="required">*</span></label>
  <input
    type="text"
    id="name"
    name="name"
    placeholder="例: 山田太郎"
    required
  >
</div>

<div class="form-group">
  <label for="email">メールアドレス <span class="required">*</span></label>
  <input
    type="email"
    id="email"
    name="email"
    placeholder="例: example@example.com"
    required
  >
</div>

<div class="form-group">
  <label for="tel">電話番号</label>
  <input
    type="tel"
    id="tel"
    name="tel"
    placeholder="例: 03-1234-5678"
  >
</div>

CSS例：

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.required {
  color: #e74c3c;
  font-weight: 700;
}

.form-group input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

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

ラベルは常に表示され、プレースホルダーは入力例を示すことで、ユーザーが迷わず入力できます。また、フォーカス時に枠線の色が変わることで、「今ここを入力している」という視覚的なフィードバックが得られます。

ポイント2: エラーメッセージを具体的に表示する

HTML5のバリデーション機能を使えば、JavaScriptを書かなくても基本的なエラーメッセージを表示できます。さらに、CSSで見た目を調整することで、より分かりやすくできます。

HTML例：

<div class="form-group">
  <label for="email">メールアドレス <span class="required">*</span></label>
  <input
    type="email"
    id="email"
    name="email"
    placeholder="例: example@example.com"
    required
    pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}"
  >
  <span class="error-message">正しいメールアドレスを入力してください</span>
</div>

CSS例：

/* 入力前はエラー表示しない */
.form-group input:invalid:not(:placeholder-shown) {
  border-color: #e74c3c;
}

/* エラー表示 */
.form-group input:invalid:not(:placeholder-shown) + .error-message {
  display: block;
}

.form-group input:valid {
  border-color: #27ae60;
}

.error-message {
  display: none;
  margin-top: 8px;
  font-size: 13px;
  color: #e74c3c;
}

required属性やpattern属性を使うことで、HTML5が自動的にバリデーションを行います。さらに、:invalidと:validの疑似クラスを使って、入力内容が正しいかどうかを視覚的に示すことができます。

ポイント3: 入力中のフィードバックを視覚的に示す

ユーザーが入力中に「これで合ってるかな？」と不安にならないよう、入力状態に応じて視覚的なフィードバックを提供します。

CSS例：

/* アイコン表示のために親要素に相対配置を指定 */
.form-group {
  position: relative;
}

.form-group input {
  /* アイコン用の余白を右側に確保 */
  padding-right: 40px;
}

/* フォーカス時 */
.form-group input:focus {
  border-color: #3498db;
  background-color: #f8fcff;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

/* 入力が正しい場合 */
.form-group input:valid {
  border-color: #27ae60;
  background-color: #f0fff4;
}

/* 入力が間違っている場合 */
.form-group input:invalid:not(:placeholder-shown) {
  border-color: #e74c3c;
  background-color: #fff5f5;
}

/* アイコン表示 - 正しい入力時 */
.form-group:has(input:valid:not(:placeholder-shown))::after {
  content: '✓';
  position: absolute;
  right: 16px;
  top: calc(50% + 14px);
  transform: translateY(-50%);
  color: #27ae60;
  font-weight: 700;
  font-size: 18px;
  pointer-events: none;
}

/* アイコン表示 - エラー時 */
.form-group:has(input:invalid:not(:placeholder-shown))::after {
  content: '✕';
  position: absolute;
  right: 16px;
  top: calc(50% + 14px);
  transform: translateY(-50%);
  color: #e74c3c;
  font-weight: 700;
  font-size: 18px;
  pointer-events: none;
}

:placeholder-shown疑似クラスを使うことで、ユーザーが何か入力を始めた後にのみバリデーションの結果を表示できます。これにより、入力前にエラー表示されることを防げます。

また、:has()セレクタと::after疑似要素を組み合わせることで、入力欄の状態に応じたアイコン（✓や✕）を入力欄の右側に表示できます。position: relativeを親要素に指定し、position: absoluteでアイコンを配置することで、確実に入力欄の内側に表示されます。

ポイント4: 送信ボタンの状態を明確にする

送信ボタンは、フォームの最終的なゴールです。ユーザーが安心してクリックできるよう、状態を明確にします。

HTML例：

<button type="submit" class="submit-button">送信する</button>

CSS例：

.submit-button {
  width: 100%;
  padding: 16px 24px;
  background-color: #3498db;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-button:hover:not(:disabled) {
  background-color: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.submit-button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(52, 152, 219, 0.3);
}

.submit-button:disabled {
  background-color: #bdc3c7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

ホバー時に少し浮き上がるアニメーションを追加することで、クリックできることを視覚的に示します。また、無効化された状態では色を変え、カーソルも変更することで、「今は送信できない」ことを明確にします。

ポイント5: 入力欄のサイズと余白を適切に設定する

スマートフォンでも入力しやすいよう、入力欄のサイズと余白を適切に設定します。タップしやすい大きさにすることで、入力ミスを減らせます。

CSS例：

/* スマートフォンでも入力しやすいサイズ */
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px; /* 16px以上でズーム防止 */
  line-height: 1.5;
  border: 2px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

/* テキストエリアは高さを確保 */
.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

/* 入力欄同士の余白 */
.form-group {
  margin-bottom: 24px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .form-group {
    margin-bottom: 20px;
  }

  .form-group input,
  .form-group textarea,
  .form-group select {
    font-size: 16px; /* iOSでのズーム防止 */
  }
}

特に重要なのは、スマートフォンでのfont-sizeを16px以上にすることです。これにより、iOSでフォーカス時に自動ズームされるのを防げます。

実装例：完全なフォームコード

以下は、上記のポイントをすべて含めた完全なフォームの例です。

※左上の「HTML」「CSS」をクリックすると、コードを見ることができます。

実際のプロジェクトでの効果

実際に、私が担当した企業サイトのお問い合わせフォームで、これらの改善を実装したところ、以下のような効果がありました。

  • フォームの完了率が約25%向上（Google Analyticsで測定）
  • 入力エラーによる離脱が約40%減少
  • お問い合わせ数が月平均で約30件増加

クライアントからも「お問い合わせが増えた」「ユーザーからの問い合わせで『フォームが分かりやすい』と言われた」という嬉しいフィードバックをいただきました！

特に、スマートフォンでの入力がしやすくなったことで、スマホからのお問い合わせが大幅に増えました。

まとめ

フォームは、ユーザーとの最初の接点であり、最後の砦です。

今回ご紹介した改善ポイントは、以下の5つです。

  1. ラベルとプレースホルダーを適切に使い分ける – ユーザーが迷わず入力できる
  2. エラーメッセージを具体的に表示する – どこがなぜ間違っているかすぐ分かる
  3. 入力中のフィードバックを視覚的に示す – 正しく入力できているのがわかって安心できる
  4. 送信ボタンの状態を明確にする – 安心してクリックできる
  5. 入力欄のサイズと余白を適切に設定する – スマートフォンでも入力しやすい

これらの改善は、JavaScriptを使わずにHTML/CSSだけで実装できます。

フォームを改善するだけでコンバージョン率の向上が期待できる上に、お問い合わせ数も大幅に増加することがわかりました。フォームの使いやすさは、直接ビジネスの成果につながるんですね！

ユーザーが「このサイト、信頼できそう」と感じるか、「なんか使いにくいな」と離脱してしまうかは、フォームの設計次第です。ぜひ今回紹介したポイントを参考に、ユーザーに優しいフォームを作ってみてください。

株式会社ファストコーディングでは、こうしたフォームのUI/UX改善もお手伝いしています。「既存のフォームを改善したい」「コンバージョン率を上げたい」とお考えの方は、ぜひお問い合わせフォームからご相談ください！

この記事を見た人がよく見ている記事

SEO