FOOT-005 公開  更新

メール登録つき型 フッター

フッターにメール登録の欄を置き、記事やお知らせを続けて受け取ってもらう設計です。
届く内容・頻度・解除の方法を登録の前に伝え、入力欄の名前は欄の外に見える形で置きます。
形式の間違いは入力欄から離れたときや登録を押したときに伝えて入力を残し、送信のあとは確認待ちであることと次にすることを表示することで、確認のメールを通して登録を最後まで完了してもらえるようにします。

ワイヤーフレーム(PC)

メール登録つき型 フッター PC版ワイヤーフレーム

ワイヤーフレーム(SP)

メール登録つき型 フッター SP版ワイヤーフレーム

SP版の特徴

  1. 入力欄とボタンは縦に並べる:横に並べると入力欄が狭くなるため、縦に並べてどちらも横いっぱいにしています。
  2. メールアドレス用のキーボード:「@」や「.」を入力しやすいキーボードが出るようにしています。
  3. 登録欄を一番上に:フッターの中で、登録欄がリンクの下に埋もれないようにしています。
  4. エラーと送信結果は欄の中に:入力した場所のすぐ近くで、結果が分かるようにしています。

採用前の判断ポイント

向いているケース

  • 記事やお知らせを、続けて受け取ってもらいたい
  • ブログやお知らせを定期的に更新している
  • セミナーや新しいサービスなどの案内を、メールで届けたい
  • メディア、BtoBのサービス、スクール、ECなどのサイト

向かないケース

  • 定期的に届けられる内容がまだない(登録しても届かない状態になりやすいです)
  • 問い合わせや来店など、ほかの行動を最後に案内したい(CTA併設型などが向きます)
  • 本文の最後の登録欄とフッターが隣り合い、同じ案内が続く(どちらかにまとめるか、フッター側を控えめにします)

このワイヤーの特徴

記事を読み終えた人に、続けて受け取る手段を用意できる

記事やお知らせを読み終えた人の中には、また読みたいと感じている人がいます。フッターにメール登録の欄を置き、どのページからでも登録できるようにしています。

何が届くのかを、登録の前に伝える

何がどのくらい届くのか分からないと、メールアドレスを入れる気になれません。登録欄の上に、届く内容と頻度、いつでも解除できることを書いています。

入力欄の名前が、入力中も見える

入力欄の中の薄い文字だけで名前を示すと、入力を始めたとたんに何の欄か分からなくなります。入力欄の上に「メールアドレス」の名前を置き、入力例は欄の中に添えています。

間違いはその場で伝え、入力を消さない

登録したあとで何も起きない、入力が消える、といった作りでは、読み手は困ってしまいます。形式が正しくないメールアドレスは、入力欄から離れたときか登録ボタンを押したときにエラーを出し、入力した内容は残したまま、直し方を具体的に示しています。
入力を始めた直後にはエラーを出さず、正しい形式に直したら消えます。

送信のあとに、確認待ちであることと次にすることが分かる

登録ボタンを押したあとに何をすればよいかが分からないと、登録が完了しないままになります。送信中は「送信中…」と表示して二重の送信を防ぎ、送信できたら、確認のメールを送ったこと、まだ登録は完了していないこと、メールの中のボタンで登録が完了すること、届かないときの確かめ方を表示しています。
メールアドレスを直して送り直す入口も用意しています。

制作時のよくある失敗

何が届くのか、どのくらい届くのかを書かない

内容や頻度が分からないまま登録を求めると、登録する人が減り、登録したあとで解除されやすくなります。
届く内容・頻度・解除の方法を、登録欄の近くに書きます。

入力欄の名前を、欄の中の薄い文字だけで示す

欄の中の薄い文字は、入力を始めると消えてしまい、読み上げでも名前として伝わらないことがあります。
入力欄の名前は欄の外に書き、入力例は補足として添えます。

同意のチェックを、最初から入れておく

宣伝や案内のメールでは、受け取る人の同意を得ることや、送る側の情報を表示することなど、守るべき決まりがあります。
同意のチェックを最初から入れておくと、本人が選んだのか分かりません。
必要な表示や同意の取り方は、送るメールの内容に合わせて確かめます。

送信したあと、何が起きたか分からない

ボタンを押しても画面が変わらない、または小さな表示だけで終わると、登録できたのか分かりません。
送信中であることを示して二重の送信を防ぎ、送信を受け付けたことと次にすることをはっきり表示して、読み上げでも伝わるようにします。
送信に失敗した場合は入力内容を残し、もう一度送れるようにします。

本文の登録欄と、フッターの登録欄が二重に並ぶ

記事の最後に登録欄があるページで、すぐ下のフッターにも同じ欄があると、同じ内容が続きます。
本文に登録欄があるページでは、フッター側を控えめにするか、どちらかにまとめます。

よくある質問

登録のあとに、確認のメールを送ったほうがよいですか?

確認のメールの中のボタンを押してもらってから登録を完了する形(ダブルオプトイン)にすると、打ち間違いや他人のメールアドレスでの登録を防ぎやすくなります。
その場合は、登録のあとの画面で、確認のメールが届くことと、届かないときの確かめ方を伝えます。

フッターの登録欄には、名前などの項目も必要ですか?

フッターではメールアドレスだけにするのが扱いやすいです。
項目が増えるほど登録する人は減りやすくなります。
名前や興味のある分野などは、確認のメールのあとや、配信の設定のページで聞く方法があります。

宣伝のメールを送る場合、気をつけることはありますか?

宣伝や案内のメールを送る場合は、受け取る人の同意を得ることや、送る側の名前・連絡先、配信を止める方法を表示することなど、守るべき決まりがあります。
必要な表示や同意の取り方は、送るメールの内容に合わせて確かめたうえで作ります。

配信の解除は、どこから行えるようにすればよいですか?

届いたメールの中から解除できるようにするのが基本です。
あわせて、フッターなどサイトの中にも「配信の解除」への入口を置いておくと、メールが見つからない人も解除できます。

同じパーツのPattern

フッターの型の選び方と一覧を見る

関連ページ

この型をシェアする

チームや制作先に、この型のページを送れます。

この型は役に立ちましたか?

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

代表取締役/ディレクター/デザイナー

Web業界歴14年。これまでに500件以上のWeb制作プロジェクトに携わり、企業サイト、採用サイト、ECサイトなど幅広い領域を手がけてきました。情報設計・ディレクション・デザインを中心に、Webサイトの企画から改善まで携わっています。近年はAIO(AI Optimization)・GEO領域に注力し、ChatGPTやPerplexity、Google AI Overviewなど生成AI検索からの引用獲得を支援しています。

レビュー・修正の履歴

  1. 公開 アバター画像岡野 優太 この型を公開