優れたウェブサイトデザインについて考えるとき、思い浮かぶのはトップページやブログ、製品ページかもしれません。

ですが「お問い合わせ」ページはどうでしょうか?

多くのウェブデザイナーにとって、お問い合わせページのコピーライティングやデザインは残念ながら優先順位が低いもののひとつです。残りのページは最新の美しいデザインなのに、お問い合わせのページだけ90年代から変わっていないかのようなウェブサイトを、皆さんも何度も見たことがあると思います。

コンバージョン率を高めるランディングページ作成のノウハウをまとめた無料ガイドはこちらからダウンロードできます。

ですがこれは大きな間違いです。「お問い合わせ」ページは、ウェブサイトで最も重要なページのひとつです。ほとんどの企業ウェブサイトで、お問い合わせページの訪問数は上位に入ります。

では、理想的な「お問い合わせ」ページとはどのようなものなのでしょうか?

その条件を下記にまとめました。

  • なぜ問い合わせをするべきなのかを説明し、訪問者の抱えている問題をどのように解決に導くことができるかを描写している。
  • 訪問者が欲しい情報をすぐに見つけられるようメールアドレスと電話番号が記載されている。
  • 問い合わせた人について知ることができる入力欄を使った簡単なお問い合わせフォームがある。
  • 問い合わせた人をウェブサイト上に留まらせ、フォームを入力したくない人に別のオプションを提供するCTAがある。
  • 最新のブログ記事のリストやメディアによる自社についての報道記事などを掲載し、企業のソートリーダーシップをアピールする。
  • Twitter、Facebook、Instagram、LinkedInなど自社のSNSアカウントのリンクを記載し、つながりを保つ手段を提供する。
  • いつ、どのように連絡を折り返すかを記載したサンキューページへリダイレクトする。

では早速、お手本をご紹介しましょう。下に、特にデザインが優れている海外の「お問い合わせ」ページの例を11点集めました。どうぞご覧になり、どうすればそのアイデアを皆さんのお問い合わせページに取り入れることができるか考えてみてください。(このほかの「お問い合わせ」ページのアイデアについては、随時更新されるCrayonのデザインコレクションをこちらからご覧ください。)

秀逸デザインの海外の「お問い合わせ」ページ11選

1) Tune(チューン)

Tuneのお問い合わせページがお手本となる理由はたくさんあります。美しいデザイン、CTA、明確に表示されたお問い合わせ先情報、そして具体的な内容を問い合わせたい訪問者のためのお問い合わせフォームなどです。

ですがTuneのページで一番素晴らしいと思うのは、訪問者を歓迎する雰囲気作りです。「We're ready to lead you into the future of mobile marketing(モバイルマーケティングの未来へお連れします)」や「Get in touch with us(どうぞお問い合わせください)」といったメッセージは、訪問者に「大切にされている」感覚を抱かせます。多くの企業のお問い合わせページは、どことなく冷たい印象を与えがちです。ですが、お問い合わせページをフレンドリーにすればするほど、訪問者への印象はよくなります。最終的な目的は、問い合わせしたいと思わせ、サポートを提供して関係を築くきっかけにすることです。

tune-contact-us-page-update.png

[実際の「Contact Us(お問い合わせ)」ページはこちら。]

2) Achieve3000(アチーブ3000)

ほかの多くの企業と同じようにAchieve3000のウェブサイトを訪れる人々のタイプは幅広く、それに応じて問い合わせ内容も大きく異なります。そこでAchieve3000ではすべての問い合わせに対応する汎用型アプローチよりもさらに深く掘り下げたデザインを採用しました。

感じの良いヒーローイメージと、問い合わせで得られるメリットをアピールしたコピーの下には、デモの予約、営業部への問い合わせ、そしてカスタマーサポートへの問い合わせの3つのオプションが用意されています。それぞれのオプションをクリックすると、下に掲載したスクリーンショットのように新しいランディングページが表示されます。多様なサイト訪問者の最も一般的なニーズに応えるのにぴったりのやり方です。

achieve3000-contact-us-page.png

[実際の「Contact Us(お問い合わせ)」ページはこちら。]

こちらはカスタマーサポートへの問い合わせ専用のランディングページです:

achieve3000-customer-support-contact-page.png

3) Choice Screening(チョイス・スクリーニング)

Choice Screeningのお問い合わせページの一番の魅力は何と言ってもコピーです。まず目に飛び込んでくるのは、「Talk to a Human(本物の人間と話そう)」という簡潔で愉快なヘッダーです。これ以上のコピーがあるでしょうか?

効果的なコピーの下には、すべての部門のメールアドレスも含め、わかりやすく分類されたお問い合わせ先情報が続き、その下にはお問い合わせフォームがあります。このフォームは一般的な企業にとってはやや長いと感じるかもしれませんが、あらゆるタイプの身元調査を行うビジネスにとっては、無数のお問い合わせを分類するうえでこういった情報が必要なのでしょう。

皆さんが自社ウェブサイトのお問い合わせフォームの長さを決める際には、問い合わせの量と質のどちらを優先したいかを考えてください。一部のビジネスでは、ほかに手軽な問い合わせ方法が提供されている限りは、フォームが長くなっても問題とならない場合もあります。

choice-screening-contact-us-page.png

[実際の「Contact Us(お問い合わせ)」ページはこちら。]

4) Atlas 1031 Exchange(アトラス1031エクスチェンジ)

一見すると、Atlas 1031 Exchangeのお問い合わせページは魅力的だとは言い難いデザインかもしれません。しかしよく見ると、優れた「お問い合わせ」ページの条件をすべて満たしていることがわかります。まず最初の条件は機能性です。

はじめに、「We are incredibly responsive to your requests and value your questions(お客様からのお問い合わせを重視し、迅速に対応しています)」と問い合わせに対してどのような対応が取られているかが詳しく説明されています。そして、12時間以内という短時間応答をはじめ、問い合わせに対する「お約束」がリストアップされています。また、お問い合わせ先情報やSNSボタン、オファーへのリンク、最新のブログ記事のリストなどが見やすく配置されています。素晴らしい仕上がりです。

atlas-2031-exchange-contact-us-page.png

[実際の「Contact Us(お問い合わせ)」ページはこちら。]

5) Morroni(モローニ)

正直に言いましょう。現代人の大多数が、電話に出て誰かと話すよりもフォームに記入する方がいいと思っているはずです。フォームの記入事項を決める際には、皆さんが問い合わせをしてきた人のプロフィールを理解するのに役立ち、場合によっては潜在リードとしてカウントできるようなものを選ぶようにしましょう。

もちろん、中には電話をするのが好きだという珍しい人たちも人もいます。電話番号の前に愉快な皮肉がついているはこのためです。また、訪問者が人間であることを確認するためのチャレンジレスポンステスト「How's your math? 2+5 = ?(算数は得意ですか?2+5の答えは?)」もよくできています。

morroni-contact-us-page-update.png

[実際の「Contact Us(お問い合わせ)」ページはこちら。]

6) Pixpa(ピクスパ)

CTAが欠けている「お問い合わせ」ページがどんなに多いかを知ったら、皆さんはきっと驚かれることでしょう。お問い合わせページの主な目的は企業への問い合わせをサポートすることですが、このページへたどり着いたものの問い合わせフォームを記入したくない人も必ずいます。そんな時に活躍するのが補助的な役割をもつCTAです。

これは、ブログ記事につながるボタンのようなシンプルなものでも構いません。または、製品デモやハウツーガイドのダウンロード、動画の視聴を促すメッセージでもいいでしょう。Pixpaではお問い合わせページの一番下に無料トライアルのCTAを挿入しています。こうすることで、お問い合わせページを開いたけれど、シンプルに営業担当者と話がしたいという方にも異議のある情報を提供することができます。

pixpa-contact-us-page.png

[実際の「Contact Us(お問い合わせ)」ページはこちら。]

7) PeopleMetrics(ピープルメトリックス)

時には、シンプルなアプローチがベストな時もあります。PeopleMetricsのお問い合わせページはシンプルで丁寧に作られており、必要な機能をすべて備えています。お問い合わせページを訪問する人々のほとんどが、一番簡単で効率的な問い合わせ方法を探しているということを理解したうえで、その邪魔になるような無駄なデザイン要素を省いたのです。

また、利用者の便宜性を考えてFacebookやGoogle Appのアカウントを使ってログインするオプションも用意されており、コンバージョンパスをさらに短くする工夫がされています。さらに、「Feeling formal? Then fill this out and we'll get back to you(今日はフォーマルな気分ですか?ではこちらのフォームにご記入ください。担当者が折り返しお返事させていただきます。)」という会話のような楽しいコピーも最高です。

peoplemetrics-contact-us-update.png

[実際の「Contact Us(お問い合わせ)」ページはこちら。]

8) Legalia(リーガリア)

こちらのお問い合わせページも、シンプルで機能的なデザインです。簡単なお問い合わせフォームも含め、知りたい情報がすべて小さな空間に収まっているにも関わらず、狭苦しい印象も感じさせません。このレイアウトを可能にした工夫のひとつが、住所の下にある「voir le plan(地図を見る)」ボタンをクリックすると大きな建物の写真がアクセス情報を示す地図に切り替わる機能です。

legalia-voir-le-plan-button.gif

また細かいことですが、海外のお客様との取引がある企業なら気をつけておきたいことがひとつあります。Legaliaのお問い合わせ先電話番号をみてください。先頭に国番号がついています。国際電話をかけ慣れていない人の多くが見落としてしまいがちですが、国番号をつけておくと海外の同業者やお客様にとっては非常に便利です。お住いの国の国番号をご存じでない方は、こちらの国番号リスト(英語)をご覧ください。

こちらはページの全体像です。

legalia-contact-us-page.png

[実際の「Contact Us(お問い合わせ)」ページはこちら。]

9) Elluminati(エルミナティ)

Elluminatiのウェブサイトはアクセス情報に力を入れています。まず、トップのヒーローイメージは実はElluminatiの場所を示す埋め込みされたGoogleマップになっています。ユーザーは地図をクリックしたり、ズームインやズームアウトをすることができるうえ、埋め込みされた地図からそのままGoogleマップアプリで行き方を検索することもできるようになっています。モバイルユーザーも含めすべてのユーザーに便利な機能です。

白い文字は目障りに感じることもありますが、人目を引くブロックカラーの背景にとてもよくマッチしています。また、カーソルを合わせると色がつくSNSボタンなどの、さりげなくスタイリッシュなデザイン要素もハブスポットで好評でした。

elluminati-contact-page-social.gif

また、ページが開くとウェブチャットウィンドウが現れ、すぐに問い合わせをすることもできるようになっています。

elluminati-contact-us-chat.png

こちらはページの全体像です。

elluminati-contact-us-page.png

[実際の「Contact Us(お問い合わせ)」ページはこちら。]

10) Weifield Group Contracting(ウェイフィールド・グループ・コントラクティング)

モバイルデバイスからのウェブ閲覧が増加し続けており、Google検索エンジンの結果ページでモバイル対応のウェブサイトが優先される‏時代には、「お問い合わせ」ページも含めたすべてのウェブページがモバイルデバイスでの表示に対応していることが重要です。

例えば、シンプルなナビゲーション、短くわかりやすいフォーム、指でタップしやすい大きなCTAボタン、モバイルデバイスから入力する際にピンチアウトする必要のない広々とした記入欄などです。

Weifield Groupのお問い合わせページは、モバイル対応で応答の速いデザインのよいお手本です。こちらがデスクトップバージョン、そしてその下にあるのがモバイルバージョンです。お問い合わせページのあらゆる要素がモバイル向けに最適化されているのがおわかりいただけるでしょうか?文字は大きく、フォームの記入欄がタイプしやすくなっているほか、CTAボタンも指でタップしやすい大きめサイズで、より一層スムーズなモバイル体験が実現されています。

デスクトップバージョン:

weifield-contact-us-update.png

[実際の「Contact Us(お問い合わせ)」ページはこちら。]

モバイルバージョン:

wefield-group-contact-us-mobile-1.png weifield-group-contact-us-mobile-2.png

HubSpotのお客様へ:Content Optimization System(COS)上にあるウェブサイトは、技術的にはすでにモバイル対応済みです。HubSpot COSはあらゆるモバイルデバイスに合わせて順応するレスポンシブデザインを使っており、Googleの最新アルゴリズムに含まれている簡易テストをクリアできるように作られています。

11) Survicate(サヴィケイト)

Survicateのお問い合わせページも、シンプルで美しいレイアウトとフレンドリーで歓迎の気持ちがこもったコピーを組み合わせたデザインを見事に成功させています。スクロールするとフォームのすぐ上に現れるサブヘッダー、「Let's talk about your project(お客様のプロジェクトについてお話ししましょう)」も素晴らしいと感じました。こういったまるで会話しているかのような砕けた表現こそ、サイト訪問者にブランドをより身近に感じさせるコピーの鍵なのです。

お問い合わせフォームもシンプルで、記入欄もCTAボタンもモバイルデバイスで使いやすい大きめサイズになっています。その下には本社の住所や電話番号、メールアドレス、営業時間といった標準的なお問い合わせ先情報が、読みやすく、必要な項目を見つけやすいレイアウトで記載されています。

最後に、アイコンやメインのCTAにSurvicateのロゴと同じ黄色が使われている点もとても気に入りました。こういったシンプルな工夫がクリーンで魅力的なデザインを作ります。

survicate-contact-us-update.png

[実際の「Contact Us(お問い合わせ)」ページはこちら。]

ハブスポットが選んだおすすめの「お問い合わせ」ページ、いかがでしたでしょうか?ぜひ現在のお問い合わせページをご覧になって、どれだけお手本に近いか、またはさらに使いやすく魅力的なページにするために改善できるところはないか見直してみてください。

New Call-to-action

元記事発行日: 2018/12/19 20:00:00, 最終更新日: