メルマガ登録フォームはWebサイトのデザインを壊さずに目立つのが大事

所要時間 1 メールマーケティングノウハウ

(この記事は2017年1月の記事をUI変更に伴いリライトしたものです。)
こんにちは、ライターの遠藤です。

メールマガジンを送る相手(読者)を増やすために、Webサイトに「登録フォーム」を設置している方も多いと思います。

メールマガジンの入り口である「登録フォーム」ですが、Webサイトのデザインの調和を乱したりしていませんか?

手本になるメルマガ登録フォーム

いくつかBenchmarkを使っている会社のなかから、登録フォームをWebデザインと、うまく合わせているところをご紹介します。

Bizna

Biznaの登録フォーム

Biznaは、サイドバーに「メールマガジン登録フォーム」を設置しています。Benchmarkの「埋込み型フォーム」を使っていますね。

入力項目が「メールアドレス」だけというのもシンプルですが、背景色をWebサイトと同じにしてあったり、ボタンの色も「緑(緑は青と黄色が混ざった色)」が使われていています。

Webサイトのデザインを壊すことなく、バランスが取れた登録フォームですね。また、適度に目に留まるので、登録フォームがあることを、Webサイトの訪問者が認知することができますね。

創業手帳Web

創業手帳Webの登録フォーム

創業手帳Webはメールマガジン購読用のページを用意をしています。サイドバーには、購読ページへのバナー画像が貼られていますね。

登録フォームで入力項目が多い場合に、無理に設置するとサイドバーやページのバランスが崩れてしまうことがあります。そのような場合には、メールマガジン購読用の専用ページを用意して、登録フォームを設置するといいでしょう。

創業手帳の登録フォームはBenchmarkの「クラシックフォーム」を使っていますね。

関連記事:メールのリンククリック率30%以上!創業手帳が行うBtoB向けメールマーケティング – Benchmark Email マーケティングブログ

WEBマスターの手帳

WEBマスターの手帳の登録フォーム

最後に手前味噌ではありますが、私が運営している「WEBマスターの手帳」です。Benchmarkの「埋込み型フォーム」を使っています。

WEBマスターの手帳では、Webサイトのデザインは崩さない。だけど、しっかりと目立つように「色選び(配色)」に気を使っています。

また登録フォームの背景色をWebサイトの背景色と少しだけ変えることで、登録フォームの存在をアピールしています。

Benchmarkで登録フォームをつくる

すでにご存じの方がほとんどだと思いますが、Benchmarkの「登録フォーム」では、様々な登録フォームを作ることができます。

「クラシックフォーム」を使えば、企業名や住所、電話番号などを入力項目に追加することができます。

「埋込み型フォーム」を使えば、氏名とメールアドレスだけの登録フォームが簡単に作れます。シンプルなデザインにしたい場合にオススメです。

登録フォームの色選びにオススメの方法

先ほど、WEBマスターの手帳で「色選び」に気を使っていると書きました。

Webデザイナーの方でも「配色」は難しいと聞いたことがあるほど、色選びは簡単ではありません。デザイナーでないならなおさら難しいでしょう。

色選びを間違えると、簡単にWebサイトのデザインが壊れてしまいます。そこでオススメしたいのが「Color Hex」です。

Color Hex

Webサイトで使っている色(メインカラー)を元に、様々な「配色パターン」を教えてくれる優れたWebサイトです。

特に私のオススメは「Triadic Color(3色配色)」です。メインカラーとは違う色だけどバランスの良い色がわかるので、よく参考にしています。

配色パターン

使い方は、TOPページの「入力スペース」にカラーコード(#ffffffなど)を入力してメガネマークをクリックするだけなので、簡単です。

登録フォームはバランスを取りつつ、だけど埋もれずに

メールマガジンの登録フォームはWebサイトの大事な部分です。特にWebサイトのゴールに「メールマガジンの購読」を設定している場合はなおさらでしょう。

Webサイトで、目立ちすぎるのも良くありませんが、目立たない(埋もれてしまう)のも良くありませんよね。

今回の記事を、Webサイトのデザインとバランスを取りながらも、Webサイトを訪問した人の目に留まる「登録フォーム」づくりの参考にして頂けたら嬉しいです!

また、お手持ちのWEBサイトがWordPressで制作されている場合はプラグインを活用することで、
簡単な設定でサイトのデザインに合わせた登録フォームを設置することができます。

WordPressプラグインでメール配信する方法を図解してみた

よりスマートな方法で顧客関係の構築を

Benchmarkではより実用的なメールマーケティングを提案しています。購読者との関係を築くことで売上や顧客満足度の向上を達成しましょう。

avatar
  Subscribe  
Notify of