No.031 JTB

No.031 JTB

JTB公式

旅行会社JTBの公式サイト。

選んだポイント

フォームが埋め込まれたサイトを見てみたかったため。

ファーストビューの印象

大きく配置された検索窓、内容がひと目で分かるCTAボタンがたくさん配置されたサイト。

「どこに行きたいか決まっている人」「どこかに行きたい人」どちらにも対応できるように作られている。

レイアウト

シングルカラム

レスポンシブ対応

あり
ブレイクポイント：600px,641px,720px,767px,769px,897px,970px,1120px,1200px

フォント

見出し：Applesistem
本文：helvetica ,Meiryo

メニュー

PC：ナビゲーションバー/ハンバーガーメニュー
SP：ハンバーガーメニュー

カラー

ベースカラー：#F5F5F5　グレー
アクセントカラー：#C81428　レッド

感想、参考になった部分

サイトから「昔ながら」の雰囲気が漂うが、やはり特に旅行サービスを使う中高年に訴求するためであると思われる。

一番成約率が高い「どこに行きたいか決まっている人」を対象に、まずツアー検索窓が目に飛び込むようになっている。また、行き先では選択肢を表示する、日付選択ではカレンダーを表示するなどして、それぞれの検索対象ごとに直感的に使いやすいウィンドウがポップアップするようになっていて、操作性を理由とした離脱を防いでいる。

フォームはJavaScriptにより制御され、様々なボタンが実装されているため複雑。911行の記述からなる。

見出しの<h1>が見当たらない。すでに検索の最上位に来るので必要ないのかと思うが、自分なら配置する。

No.031 JTB|Webサイト100選