レスポンシブ対応のメールフォーム。特徴や参考にしたいメールフォームをご紹介。

WEBサイトはきちんとレスポンシブ対応になっているのにメールフォームだけ残念・・・、というサイトは結構あります。
通常のページ構成も大事ですがお問い合わせに繋げるためにメールフォームで離脱というのはWEBマーケティングの上でも好ましくありません。

この記事ではレスポンシブデザインとメールフォームについて解説し、参考にしたいメールフォームも紹介します。

レスポンシブ(レスポンシブウェブデザイン)とは？

レスポンシブウェブデザインはWEBデザインの手法のひとつで、デスクトップ版のウェブページを閲覧者の画面サイズまたはウェブブラウザに応じて表示できるようにすることです。
もう少し具体的に言うとパソコン(WindowsやMac)、ノートPC、タブレット、スマートフォンなど、異なる画面サイズの幅を基準にホームページ表示を調整し最適な表示にすることです。
そのレスポンシブウェブデザインの中にもリキッドデザインというものがあり、ブラウザの横幅に合わせてコンテンツの表示サイズも変更されるデザインのことを指します。

このリキッドデザインを最近ではレスポンシブと呼ぶことがほとんどだと思いますので、レスポンシブデザインと言えばリキッドデザインと考えて支障はないかと思われます。
なぜこのレスポンシブがサイト構築に大事かというと、ひと昔前まではホームページを閲覧する手段はパソコン一択でした。
しかしながら現代、iPadのようなタブレットやスマートフォン、ノートパソコン、デスクトップパソコンでもMacのようなレティーナディスプレイなど多種多様なデバイスがあります。
これらの多くのデバイスでかつ、いろいろなブラウザでホームページを見せるためにはこのレスポンシブという技術が便利なのです。

・HTMLファイルが1つで済むため更新の手間が1回で済むという点と表示領域、画像を自動的に適切な幅に変更できる点が大きなメリットです。

レスポンシブに対応したメールフォームとは？

レスポンシブWEBデザインに対応したメールフォームというのは、パソコンでも、スマホでもタブレットでも崩れることなく、
デバイスに応じたサイズに最適化されたフォームということになります。
具体的にいえば以下のようなことがあげられます。

・フォームの入力欄や送信ボタンがデバイスによってクリック(タップ)しやすい大きさに変わる
・スマホの場合はラベルと入力欄は1列にする
・左右にスクロールバーが出ない
・デバイスに応じてフォントサイズが変わる
・デバイスやブラウザの幅によってテキストやコンテンツが自動改行される
・デバイスやブラウザの幅によって画像が拡大・縮小される

こういったレスポンシブのフォームデザインにすることで、フォームからの離脱を減らしお問い合わせを増やすことができます。

参考にしたいレスポンシブのメールフォーム

sansan株式会社 DSOC

https://sansan-dsoc.com/contact/

sansan株式会社のDOSCのホームページ。
モノクロの配色とスタイリッシュなカーソルでクールな印象のデザインです。
画像がほぼなくテキストで作られており、斬新なデザインです。
フォントのサイズと太さで強弱をつけ、余白を大きく取ることでかっこいい作りになっています。

リブセンス

https://www.livesense.co.jp/contact/

PCでは上部にナビゲーション(入力・確認・完了)を表示させ、わかりやすいフォームとなっています。
スマートフォン幅では、ラベルと入力欄がすべて縦方向に並びます。
残念な点はスマホ時に固定ヘッダーがナビゲーションにかぶっている点です。

はなまるうどん

https://www.hanamaruudon.com/inquiry/

いわずとしれた讃岐うどんのチェーン店を展開しているはなまるうどんのサイト。
飲食店でメールフォームがきちんとレスポンシブデザインに対応しているのはなかなか少ない中きちんとしたフォーム構成になっています。
リアルタイムバリデーションも導入されています。

京都タワー

https://www.kyoto-tower.jp/contact/

PC、タブレット、スマホに適するように2点でブレイクしているメールフォームです。
右側に表示されている固定バナーもタブレットサイズ以下はフッターに固定化されていて使いやすいデザインです。
残念なのは1070pxくらいで横スクロールが出てしまっている点です。

SmartHR

https://smarthr.co.jp/contact/

ただただかっこいいデザインのメールフォーム。
入力欄はレスポンシブデザインがきちんと施されており、シンプルではありますが、ヘッダーフッターは凝った作りとなっており、さすがトレンドをきちんと導入している大手ベンチャー企業だと感じました。

ANYCOLOR株式会社

https://www.anycolor.co.jp/contact

非常にデザイン性の高いサイトでメールフォームもかっこよく制作されています。
Google reCAPTCHAも導入されており素敵なホームページです。
残念な点は横幅1000pxあたりで横スクロールがでてしまう点です。

新興産業株式会社

https://www.shinkosangyo-as.com/estimate/

EasyMailを使ったメールフォーム。
スマホ時にはラベルとフォームランが1列に並び変えられ適切なレスポンシブレイアウトになっています。
製造業のサイトでメールフォームにまでレスポンシブをきちんと導入されている会社はまだまだ少ないと思います。

NUTS

https://nutsrv.co.jp/inquiry/

キャンピングカーを販売されている企業のメールフォーム。
スマホ時にはラベルとフォームランが1列に並び変えられ適切なレスポンシブレイアウトになっています
EasyMailを使ったメールフォーム。

EasyMailはレスポンシブに対応したメールフォーム

EasyMailはレスポンシブ対応のPHPで開発された無料のメールフォームCMSです。
大きな特徴はCMSというところで、プログラムコード上で各種の設定をするようなものではなく、WordPressのように管理画面から多くのことが設定できます。

既存サイトのデザインに合わせたお問い合わせフォームを作ることが出来ます。
また、テーマもご用意していますので、デザインがない場合でも簡単にメールフォームのページを作成いただけます。

MITライセンスの下、改変でも、再配布でも、商用利用でも、有料販売でも、自由に無料でつかうことができます。

EasyMailのデモ画面からレスポンシブを体感できます。

https://www.mubag.com/demo/

デモ画面で確認できるテーマを使ってオリジナルのデザインを組み込むことができます。