HTML入力フォームデザインのベストプラクティス

この文章では、効果的なHTML入力フォームデザインの手法やツールについて説明しています。ユーザーにとって使いやすく、魅力的なフォームを作成するためのポイントを解説します。

問い合わせフォームのデザイン9選！コピペで使えるHTMLとCSSを紹介

お問い合わせフォームは、Webサイトにおいてユーザーとコミュニケーションを取り、コンバージョンにつなげるための重要な役割を果たします。ユーザーが使いやすい、つまり入力しやすく、最後まで入力したくなるようなデザインにすることが、お問い合わせ数の増加に繋がります。

この記事では、デザインに迷った方のために、コピペしてすぐに使える問い合わせフォームのHTMLとCSSのサンプルコードを紹介します。さらに、問い合わせフォームで必要不可欠なEFO（入力フォーム最適化）についても解説し、自社のフォームデザインを考える際に役立つ情報を提供します。

1. シンプルな問い合わせフォームのデザイン

シンプルながらも、フォントや見出し、角丸加工、パステルカラーなどを活用することで、おしゃれでユーザーフレンドリーな問い合わせフォームを作成できます。以下に、4つのシンプルなデザイン例とそのHTMLとCSSのサンプルコードを紹介します。

例1：シンプルでもフォントの工夫でおしゃれに

シンプルなフォームでも、フォントを変えるだけで印象が大きく変わります。例えば、本文にゴシック体を使用している場合は、問い合わせフォームのテキストに明朝体を使用することで、上品で洗練された印象を与えることができます。

<div class="form-example">
  <h3>お問い合わせ</h3>
  <label for="name">お名前</label>
  <input type="text" id="name" name="name">
  <label for="email">メールアドレス</label>
  <input type="email" id="email" name="email">
  <label for="message">お問い合わせ内容</label>
  <textarea id="message" name="message"></textarea>
  <button type="submit">送信</button>
</div>

.form-example label {
  font-family: "serif"; /* 明朝体に変更 */
}

例2：見出し設定をつけた問い合わせフォーム

問い合わせフォームであることを明確にするために、見出しを設定しましょう。「お問い合わせ」や「Contact」などの見出しを付けることで、ユーザーが迷わずフォームにアクセスできます。

<h2>お問い合わせ</h2>
<div class="form-example">
  </div>

例3：角丸加工した問い合わせフォーム

角丸加工を施すことで、フォームに柔らかさを与え、親しみやすい印象にすることができます。CSSのborder-radiusプロパティで簡単に角丸を設定できます。

.form-example {
  border-radius: 10px;
}

例4：パステルカラー×角丸の問い合わせフォーム

パステルカラーと角丸加工を組み合わせることで、さらに優しい雰囲気のフォームを作成できます。背景色や枠線にパステルカラーを使用してみましょう。

.form-example {
  background-color: #f8f8ff; /* 薄いパステルブルー */
  border: 1px solid #e0ffff; /* 薄いパステルシアン */
  border-radius: 10px;
}

2. おしゃれな問い合わせフォームのデザイン

色使いやクリックで開く入力項目、アニメーション、背景画像などを活用することで、より個性的な、おしゃれな問い合わせフォームを作成することができます。以下に、4つのおしゃれなデザイン例と具体的なHTML、CSS、JavaScriptのコードを紹介します。

例1：色を工夫したおしゃれな問い合わせフォームデザイン

入力必須項目のアイコンに緑を使用したり、黒と赤を組み合わせるなど、色使いを工夫することで、フォームのデザイン性を高めることができます。

HTML

<div class="form-example">
  <h3>お問い合わせ</h3>
  <label for="name">お名前 <span class="required-icon">*</span></label>
  <input type="text" id="name" name="name" required>
  <label for="email">メールアドレス <span class="required-icon">*</span></label>
  <input type="email" id="email" name="email" required>
  <label for="message">お問い合わせ内容</label>
  <textarea id="message" name="message"></textarea>
  <button type="submit">送信</button>
</div>

CSS

.form-example {
  background-color: #f0f0f0; /* 背景色を薄いグレーに */
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 5px;
}

.form-example label {
  display: block;
  margin-bottom: 5px;
  color: #333; /* ラベルの色を濃いグレーに */
}

.form-example input,
.form-example textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.form-example button {
  background-color: #e53935; /* ボタンの背景色を赤に */
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.required-icon {
  color: #4caf50; /* 必須項目アイコンを緑色に */
}

例2：クリックで入力項目が開く問い合わせフォーム

アコーディオンメニューのように、クリックすると入力項目が開くフォームは、スペースを節約し、スタイリッシュな印象を与えます。

HTML

<div class="form-example accordion">
  <h3>お問い合わせ</h3>
  <div class="accordion-item">
    <h4 class="accordion-title">お名前 <span class="required-icon">*</span></h4>
    <div class="accordion-content">
      <input type="text" id="name" name="name" required>
    </div>
  </div>
  <div class="accordion-item">
    <h4 class="accordion-title">メールアドレス <span class="required-icon">*</span></h4>
    <div class="accordion-content">
      <input type="email" id="email" name="email" required>
    </div>
  </div>
  <div class="accordion-item">
    <h4 class="accordion-title">お問い合わせ内容</h4>
    <div class="accordion-content">
      <textarea id="message" name="message"></textarea>
    </div>
  </div>
  <button type="submit">送信</button>
</div>

CSS

/* 例1のCSSに加えて */
.accordion-item {
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.accordion-title {
  background-color: #eee;
  padding: 10px;
  cursor: pointer;
}

.accordion-content {
  padding: 10px;
  display: none; /* 初期状態では非表示 */
}

JavaScript

const accordionTitles = document.querySelectorAll('.accordion-title');

accordionTitles.forEach(title => {
  title.addEventListener('click', () => {
    const content = title.nextElementSibling;
    content.style.display = content.style.display === 'block' ? 'none' : 'block';
  });
});

例3：入力したくなる問い合わせフォーム

エアメール風のアニメーションやイラストなどを用いることで、ユーザーの入力意欲を高めることができます。これは、CSSアニメーションやJavaScriptライブラリなどを活用して実装することができます。具体的な実装方法は、使用するアニメーションやイラストによって異なります。

例4：画像を活用した問い合わせフォーム

背景に画像を使用することで、フォームに視覚的なインパクトを与えることができます。ただし、画像のサイズや選択には注意が必要です。

HTML

<div class="form-example" style="background-image: url('background.jpg');">
  </div>

CSS

/* 例1のCSSに加えて */
.form-example {
  background-size: cover; 
  background-position: center;
  /* 必要に応じて、テキストが見やすいように背景色を調整 */
  background-color: rgba(255, 255, 255, 0.7); 
}

これらの例を参考に、色使い、アニメーション、画像などを効果的に活用することで、ユーザーの目を引く、おしゃれな問い合わせフォームを作成することができます。

3. EFOを重視した問い合わせフォームのデザインとは？

EFO（入力フォーム最適化）とは、ユーザーが入力フォームをスムーズに、ストレスなく入力できるように改善することで、入力完了率を高めるための施策です。EFOを意識したフォームデザインは、コンバージョン率の向上に大きく貢献します。

EFOとは？

EFOとは、「Entry Form Optimization」の略で、日本語では「入力フォーム最適化」と呼ばれます。ユーザーが入力フォームで離脱してしまうのを防ぎ、入力完了率を高めるための施策全般を指します。

EFOを意識したフォームデザインとは？

EFOを意識したフォームデザインとは、ユーザーにとって入力しやすい、分かりやすいフォームデザインのことです。具体的には、以下のような要素が挙げられます。

• 入力必須項目を明確にする

• プレースホルダーを活用する

• 住所自動入力機能を実装する

• エラーメッセージを分かりやすく表示する

• スマートフォンに対応したデザインにする

4. 入力完了しやすい問い合わせフォームとは？

入力完了率を高めるためには、以下の6つのEFO施策を意識することが重要です。

1. 入力必須項目の明記: 必須項目には「必須」と明記するか、アスタリスク(*)などの記号を付けて、ユーザーに分かりやすく示しましょう。

2. プレースホルダーの活用: 入力欄に薄い文字で入力例や説明文を表示することで、ユーザーは何を入力すれば良いのか理解しやすくなります。

3. 住所自動入力: 郵便番号を入力すると住所が自動入力される機能は、ユーザーの入力の手間を大幅に削減します。

4. 半角/全角の切り替え操作を簡略化: 電話番号やメールアドレスなど、半角/全角が指定されている項目では、自動で変換されるように設定することで、ユーザーのストレスを軽減できます。

5. レスポンシブ対応: PCだけでなく、スマートフォンやタブレットからも快適にアクセスできるように、レスポンシブデザインを採用しましょう。

6. リアルタイムバリデーション: 入力中にエラーがあれば即座に指摘することで、ユーザーが修正をスムーズに行えるようにします。

5. スマホでも入力しやすい問い合わせフォームとは？

スマートフォンユーザーが増加している現在、スマホでも入力しやすい問い合わせフォームは必須です。以下のポイントを踏まえることで、スマホユーザーの利便性を向上させることができます。

1. デバイスに応じて適正な大きさに変化させる: レスポンシブデザインを採用し、入力欄やボタンのサイズをスマホの画面サイズに合わせて調整しましょう。

2. ラベルと入力欄を1列にする: スマホの画面幅は限られているため、ラベルと入力欄を横並びにすると、入力欄が狭くなってしまいます。縦並びにすることで、入力しやすくなります。

3. 左右のスクロールバーが出ないようにする: 横スクロールが発生すると、ユーザーはストレスを感じ、離脱してしまう可能性が高まります。フォームの幅を調整して、横スクロールが発生しないようにしましょう。

6. 問い合わせフォームのデザインを30秒で作れる「formrun」

「formrun」は、誰でも簡単に、そしてスピーディーに高品質な問い合わせフォームを作成できるツールです。HTMLやCSSの知識がなくても、ドラッグ&ドロップで直感的にフォームを作成することができます。

formrunの特徴

• 豊富なテンプレート：様々なデザインのテンプレートが用意されており、ニーズに合わせて選択できます。

• EFO機能：入力必須項目のチェック、プレースホルダーの設定、住所自動入力など、EFO対策に必要な機能が充実しています。

• 直感的な操作性：ドラッグ&ドロップで簡単にフォームを作成できます。コーディングの知識は不要です。

• モニタリング機能：フォームのアクセス状況や入力完了率などを分析することができます。

7. 使いやすい問い合わせフォームのデザインを目指そう

問い合わせフォームは、ユーザーが企業に連絡を取るための重要な窓口です。ユーザーがストレスなく、スムーズに情報を入力できるよう、使いやすさを追求したデザインにすることが重要です。

そのためには、今回紹介したEFOの principles を意識し、formrun のようなツールを活用することも検討しましょう。ユーザーにとって使いやすい問い合わせフォームは、顧客満足度向上、そしてコンバージョン率向上に繋がるでしょう。

レスポンシブデザインの重要性

モバイルデバイスでの利用も考慮したレスポンシブデザインの必要性とその実践方法について述べます。以下のCSSメディアクエリは、レスポンシブデザインを実現するための例です。

<style>
  @media (max-width: 600px) {
    form {
      width: 100%;
    }
  }
</style>

参考文献

以下の記事は、HTML入力フォームデザインについてさらに学ぶための参考になります：

• Accessible Web Forms

Q&A

Q: 入力フォームをデザインする際に最も重要な要素は何ですか？

A: ユーザビリティと直感的なインターフェースが最も重要です。

Q: レスポンシブデザインはなぜ必要ですか？

A: モバイルデバイスの利用が増加しているため、どのデバイスでも快適に使用できるようにする必要があります。

Q: フォームのエラーメッセージはどのように表示すべきですか？

A: エラーメッセージは明確で親しみやすい言葉で表示し、ユーザーが修正しやすい場所に配置するべきです。

その他の参考記事:html 入力 フォーム