見落としがちな「お問合せページ」デザインまとめてみた！

Blogブログ

どうも！くまweb広報野田です！
これまでくまwebコラムではさまざまなWebサイトのまとめ記事を書いてきましたが、
盲点に気づきました！
それは「お問合せページ」です！

トップページがスタートなら、お問合せはゴール。
実際のクライアントの利益に結びつく最後のバトンです。

アクセス解析を見ていて問合せページの離脱率が高かった時の焦燥感は計り知れません。
故に派手ではないけど、工夫をこらした部分が多いのがお問合せページ。

今日はそんなお問合せページをまとめていきたいと思います👍️

2カラムで情報を伝えつつフォーム入力させるお問合せ

まずは制作会社baigieさんのお問合せページからご紹介！
https://baigie.me/contact/

PCで閲覧すると左側に主な実績やコンサルタントの写真、支援資料が並びます。
これがフォームの上に来ちゃうとフォームまでたどり着く導線を邪魔しちゃうので離脱率が上がる可能性がありますが、左右に分けることでそれを回避し、ポジティブな情報で後押しをすることで、入力中の離脱を下げる効果もありそうです。
また、スマホでは左側の情報はなくなりますが、おそらく事業内容やターゲット的に問合せをする場合はPCユーザーを想定しているのかなと思いました。

かわいいデザインと右側のFAQが技ありなお問合せ

UGOKKO
https://ugokko.jp/contact/

子供向けのウェルネスジムUGOKKOさんのお問合せページ。
警戒心を解くかわいいイラストや、左側にFAQページへの導線を掲載しているのもあまり耳慣れないサービスや業種の場合はとてもいい手法だと思いました。
また、細かい部分だと通常「必須項目」は項目名に「必須」と強い色で表示させることが多いのですが「任意」のみ表示させることで暗にその他が必須であることを伝えていることです。
そうすることで警戒心を和らげてるのかなと感じました！技あり〜！

必須項目カウントはかなり有効ですよね

W BRIDGE ADVISORY
https://wbridge-advisory.co.jp/contact

W BRIDGE ADVISORYさんの問合せで実装されていた「必須項目カウント」
こちらは様々なお問合せでも見かけた手法です。
ちなみに「未完了のものが気になる」という効果をツァイガルニク効果といいます。
必須項目の残りを表示させることで途中でやめるのがモヤモヤするという心理的効果も期待できそうです。（トップページのローディングを％表示するのも同じ効果）

LPのようなつくりで訴求していくお問合せページ

SANWA
https://tochi-sanwa.jp/contact/

こちらのWebサイトではLPのように長めの作りの構成のお問合せページになっています。
コンバージョンが「無料相談会」への予約になるので前提の説明が必要になるため上記のような構成になっていることが考えられます。
リアルで会うシチュエーションの場合はフォームだけぽつんとあってもなかなかコンバージョンまでたどり着きにくいもの。

特に不動産、住宅、車業界などは問合せからの営業メール＆電話ラッシュが来たりとユーザーも警戒していることも多いので、安心感を与えるLP風の作りは有効だと思います。

ユニークなセキュリティ対策のお問合せフォーム

Re LOOP
https://re-loop.jp/contact/

Re LOOPさんのお問合せページはシンプルなデザインですが、必須項目カウントやFAQへの導線、初めての方へやLINEへの導線など非常によく作られています。

特にこのセキュリティ対策ははじめてみたんですが面白いですね笑
こういった部分にも会社のらしさを出すのも一つのブランディングかもしれません。

googleフォームを使うパターンも増えているお問合せページ

KANTO SOGYO
https://www.k-setagaya.co.jp/

こちらは非常に面白い事例で、Googleフォームをお問合せフォームとして使用しています。
https://docs.google.com/forms/d/e/1FAIpQLSdxyZQjO9CvHMYwMGNnyZTKDOKKZVFwXos2doDmQIAH2a1g1A/viewform

実際今回の調査で100サイト以上見たんですが、同様にgoogleフォームを使っている企業が4社ほどいました。
コスト面でも有効ですが、昨今メールソフトのスパム対策が厳密になったことできちんと設定をしないとフォームからの返信が迷惑メールに格納されて連絡が滞ってしまうパターンもよく聞きます。

以前まではgoogleフォームは一般の人が気軽に使える無料のフォームツールという認識だったんですが
KANTO SOGYOさんのように従業員70人以上の大きな会社でもgoogleフォームを選択するというのはひとつ時代の流れかもしれません。

色味での分類わけが上手なお問合せページ

こばクリニック
https://koba-clinic.jp/contact/

こちらのサイトはサイト全体の色数を抑えつつも非常に巧みな色使いでデザインをしているのですが
問合せページもお上手です。
複数のグレーを組み合わせつつ、白とアクセントカラーの青でメリハリをつけています。
このバランス感覚が素晴らしいので非常に視認性や可読性を担保しています。
こういったデザインは一歩間違えればデザイナーのエゴが強くなってしまいユーザビリティが損なわれてしまうこともあるんですが、素敵なバランスでつくられています。

導線の制限と多様性に配慮したお問合せページ

電子ビジネス専門学校
https://www.denbi.ac.jp/contact/

専門学校のWebサイトのお問合せフォームなのですが、まず他の下層ページと違う単一のレイアウトにしグローバルメニューやフッターメニューのような他のページへの導線をなくしているのが印象的です。
実際、お問合せページにおいて導線を制限することは有効といわれていて動画配信やECサイトのサービス会員登録画面でもよく使用されます。

また、性別のチェックボックスにおいて「その他」の項目を表示している点は学校としてLGBTQ+への理解を表明することができています。
こういった配慮面もフォーム上で表現することができるという気付きになりました。興味深い。

たかがお問合せページ、されどお問合せページ

今回100以上のサイトを調査してみて感じたのが、毎回同じ形式になりがちなお問合せページやフォームにも様々な工夫が凝らされていて、そのひとつひとつの積み重ねが離脱率の低下やコンバージョンへとつながる布石になっていくんだなと感じました。
コーディングはもちろんですが、こういった問合せ項目やどうやったら実装できるの？みたいなご相談もくまwebでお受けできますのでお気軽にご相談ください👍️

■■■■ ご依頼お待ちしてます！ ■■■■

基本設計量、CSS作成費用は一切なし！
安くて、早くて、上手い！がモットーのくまwebへコーディングのお仕事お待ちしております！