読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

Contactページって何だ

WebDev

 ページを作っていく中で、AccessやAbout、あるいはContactのページ間でコンテンツをどう振り分けたらいいのかが、さっぱりわからなくなってしまった時があった。難しく考えすぎなければ、Aboutには自己紹介文、Accessには住所表記とGoogle Maps埋め込み、Contactにはフォーム埋め込みって感じで、済ませてしまえばいいし、多くのところはそんな感じだ。
 だいたい、「これ」というような答えはない。それなのに、どこかいつまでもコンテンツ配分にスッキリできないのは、唯一絶対解が常に存在していた受験勉強の残滓のせい。早く忘れよう。
 とはいえ、せっかくなのでもう少し深く検討してみたい。繰り返すけれど、最終的には個人の好みに託されるので、振り分けの例は示さない。
 想定される要素をリストアップしてみよう。これらは、贅沢に盛った場合の話で、どれかが欠けたとしても問題ない。全ては必要に応じて掲載されるか否かが決まる。

  • address + zip code
  • e-mail address
  • phone number
  • map
  • contact form
  • some texts
  • open hours

 要素としては重要ながら領域を広く使ってしまうフォームやMapを省いているサイトもある。フォームがない代わりに、mailto:とtel:を、Mapを埋め込む代わりにただのリンクを、という対処でも全く問題がないように思える。 
 しかし、contactといっても、様々で、mailto:で代替されえないような、複雑なフォームもある。例えば、Contact UX Passion: We are just a click away! のサイトのContactのページは、メールで済んでしまう単なる連絡のためのフォームではなく、「プロジェクトの第一段階」としてフォームを位置づけている。そういったサイトではmailto:やtel:だけでは逃してしまうものがあるだろう。
 また、もう一つ例のとして、あるブライダル関連のサイトでは、フォームに記入する内容がそのまま仮契約の書類になるので、ユーザーの個人情報を深く問う、inputの箇所が20近くあるような複雑なフォームになっている。なお、このサイトでは、Contactページに移ると、httpからhttpsに切り替わる。

付録 Contactページ等で使えるFont Awesomeアイコン
  • fa-map-marker (「住所」に相当)
  • fa-phone (「電話番号」に相当)
  • fa-envelope-o (「メール」に相当)
  • fa-clock (「開店時間」に相当)