フォートラベル デザインブログ

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

デザインリニューアル変遷(随時更新)。

デザイン責任者の仕事 デザイナーマネジメントの仕事

フォートラベルデザイン室の横山義です。このページでは、リニューアルしたページ、または新規につくったページを貼っていきます。リニューアルのデザインコンセプトは「簡単・すぐみつかる」です。

 

サイトトップ(リニューアル)

http://i.4travel.jp/

最上部のスライダ部分は、閲覧履歴やユーザー属性をふまえてパーソナライズしながら旅行商材をリコメンドします。商材ボタンなど各階層トップへの誘導ボタン下では新着順でキュレーション記事を紹介しながら、フォートラベルが旅行メディアであることの認知訴求をします。f:id:yokoyama_y:20161220093826p:plain

海外都市階層エリアページ(リニューアル)

http://i.4travel.jp/city/paris

ユーザーの知りたい情報順にページ構造を再構築。旧ページでは、もう1タップしないと情報が取得できないディレクトリ構造だったものを見直しました。合わせてPCページにはあるけど、スマホページには無いコンテンツ、あるいはそもそも遷移先スマホページが存在しない…などのデバイス毎の情報差の問題も解消しています。

f:id:yokoyama_y:20161221163458p:plain

4travel.hatenablog.jp

フッターにナビ導線設置(新規)

サイトの特性から、最も大きいボリュームゾーンである「クチコミや旅行記のロングテールで入ってきた一見さん」への、更なる有用な情報提供(直帰率の減少)、サービス案内・ブランド認知を目的に、各ページフッターにナビ導線を設置しました。各ボタンの遷移先は、それぞれのページのエリア属性にひもづいた旅行商材や観光情報になります。

f:id:yokoyama_y:20161207212429p:plain

ヘッダー(リニューアル)&グローバルナビ導入(新規)

上記スマホフッター同様、PCページのサイト内回遊を目的に共通グローバルヘッダーを導入。サイト回遊と合わせてフォートラベルで旅行商材を買えるという、ビジネスの認知にも貢献するのが目的です。

f:id:yokoyama_y:20161207182802p:plain

 

ここまではデザイン室で先にデザインを作ってしまって「どう?いいでしょ?やるべきでしょ?やろうよ!」と強引に進めた案件ですw。詳しくはこちら。

4travel.hatenablog.jp

 

海外ホテル個別詳細ページ(リニューアル)

http://i.4travel.jp/shisetsu/10120358?dmos=os

個別ホテル名で検索流入してきたスマホユーザーに対して、旅行会社別の部屋タイプ・料金比較を最安値順に1stビューから表示。合わせてホテルの特徴もページ内で把握できる情報構造にリニューアルしました。

f:id:yokoyama_y:20161222093636p:plain

海外ホテルエリア別一覧ページ(リニューアル)

http://i.4travel.jp/city/honolulu/hotel

海外エリア名☓ホテルなどで検索流入してきたスマホユーザーに対して、ホテルのクチコミランキング順に、部屋代の最安値を出している旅行会社とプラン表示をし、ホテル毎の料金相場を知った上でホテル比較をしていただき、旅行会社ページ、あるいはホテル詳細ページへ遷移する導線設計にリニューアルしました。

f:id:yokoyama_y:20161207185044p:plain

海外ホテル個別詳細ページ(リニューアル)

http://4travel.jp/os_hotel_each-10120358.html

個別ホテル名で検索流入してきたPCユーザーは、スマホユーザーに比べ、大きな写真を見たいという需要が強いので、PCユーザー動向に合わせたページ構造にリニューアルしました。

f:id:yokoyama_y:20161207180017p:plain

海外ホテルエリア別一覧ページ(リニューアル)

http://4travel.jp/os_hotel_list-city-honolulu.html

海外エリア☓ホテルなどで検索流入してきたPCユーザーも、スマホユーザーに比べ、大きな写真を見たいという需要が強いので、PCユーザー動向に合わせたページ構造にリニューアルしました。

f:id:yokoyama_y:20161207180021p:plain

海外ツアーエリア別一覧ページ(リニューアル)

http://i.4travel.jp/tour/search?dmos=os&area_code1=HNL&area_type1=city

エリア決定済みのスマホユーザーは、このページで各プランを比較・検討し、決定まで行いたい傾向が強いので、一覧性を重視した情報構造にリニューアルしました。

f:id:yokoyama_y:20161207185137p:plain

海外ツアー検索(リニューアル)

http://4travel.jp/os_tour.html

PCグローバルヘッダーの恩恵を受け、海外ツアートップへの流入が伸びるため、これまで拾えていなかった「行き先をまだ決めていない潜在層」へリーチするツアートップページにリニューアルしまいた。エリア名以外にもテーマ性を持ったカテゴリをもうけ多様なニーズに対応することを目指しています。

f:id:yokoyama_y:20161220164159p:plain

海外ツアーエリア別一覧ページ(リニューアル)

http://4travel.jp/os_tour_search/?d_mon=1&CITY_CD1=CI-HNL

海外ツアーを探しているPCユーザーは、絞り込み機能を使って、なるべく比較・検討するツアーそのものの数を絞り込みたいという傾向が強いので、絞り込み機能をメインにしたレイアウトにリニューアル。

f:id:yokoyama_y:20161207180221p:plain

海外格安航空券検索(リニューアル)

http://4travel.jp/os_airticket.html

f:id:yokoyama_y:20161207180325p:plain

国内格安航空券エリア別ページ(新規)

http://4travel.jp/dm_airticket_list-todofuken-hokkaido.html

f:id:yokoyama_y:20161207210652p:plain

国内格安航空券検索結果ページ(新規)

f:id:yokoyama_y:20161207191926p:plain

 

国内ホテル個別詳細ページ(リニューアル)

http://hotel4travel.jp/dm_hotel_each-10041564.html

f:id:yokoyama_y:20161207204608p:plain

フォートラベル GLOBAL WiFi(新規)

http://4travel.jp/wifi.html

f:id:yokoyama_y:20161207190258p:plain

フォートラベル GLOBAL WiFi同梱サービス概要冊子(新規)

f:id:yokoyama_y:20161207194017p:plain

観光スポットクチコミまとめ(新規)

http://spot4travel.jp/landmark/dm/10667842

f:id:yokoyama_y:20161207190527p:plain

4travel.hatenablog.jp

広告を非表示にする