株式会社ファイブスタークラブ PROJECT

別格の旅行探しを支える
オンライン旅行予約サービスリニューアル

Introduction

ここにしかない旅行体験を伝え、ユーザーも運営者も使いやすいサービスを目指す

年2回の海外研修休暇、勤続年数に応じたご褒美旅行など自分たちでも旅をし続ける旅行会社を目指して1995年に創業したファイブスタークラブ。創業以来自らの旅行体験を活かして「他の旅行会社が絶対にできない面白い旅」の提案を続けています。

提案を支えるのは、旅好きのメンバー、そして様々な世界各地の旅をわかりやすく伝えるWebサイトです。前回のリニューアルから6年が経過し、飲食店用のCMSをカスタマイズして使っていた運営基盤および、大手旅行ポータルサイト頼みの集客構造に課題を感じ、サイトを含めたリニューアルを決断。

ファイブスタークラブならではの旅行体験を伝え、ユーザーも運営する社員も使いやすいサイトを目指してプロジェクトはスタートしました。

ロフトワークではリサーチによる現状把握からあるべき姿を可視化し、リニューアル要件を策定。旅好きが探したくなるUIから運用を支えるCMSを含めたインフラ設計など、既存システムと共存しながら、より効果的にWebサイト全体を管理・運営する仕組み作りを支援。旅行探しの体験全体をアップデートしました。

プロジェクト概要

  • 課題
    ・前回のサイトリニューアルから6年が経過し、デザインや機能面が劣化
    ・特にサイト内の検索が使いづらく、ユーザーも運用者も目的のツアーが探せない
    ・システム構成の汎用性が低く、頻繁にシステム開発が必要
    ・旅好きのための旅行サイトという独自性を訴求するも、集客が大手ポータルサイトに依存
  • 支援内容
    ・リサーチ
    ・リニューアル方針策定
    ・情報設計
    ・デザイン/コーディング
    ・CMSテンプレート開発
    ・インフラ設計
    ・検索プログラム開発
    ・コンテンツ移行
  • 体制
    クライアント:株式会社ファイブスタークラブ
    プロデュース:柏木 鉄也
    プロジェクトマネジメント:松永 篤 柳田 綾沙
    クリエイティブディレクション:上村 直人
    テクニカルディレクション:大森 誠

Approach

自社の強みとユーザーを理解し、コンセプトに落とす

リニューアル方針を策定するにあたり、社員へのインタビュー及びアンケートを実施。業務プロセスや、旅行代理店に求められること、サイトの利用状況を集約しました。さらに、実際のツアーのお問い合わせ時にWebサイトがどのように利用されているのかを把握するために、シャドーイング※1を実施。電話での顧客対応から問い合わせ、座席確認、代案の提示、予約の獲得という一連の流れにおけるWebサイトの活用状況を把握しています。

※1シャドーイング:顧客がサービスを利用しているところを客観的な立場で観察する方法

シャドーイング及び社員へのインタビューの様子

加えて最終的なユーザー理解のために、海外旅行の経験者複数名にインタビュー。旅行を考えるところから、比較検討後の予約を経てどのような旅の体験をするのか、不安を感じたのはどんなことだったのか改めてインプット。ユーザーの属性を分類し、ストーリーと共に整理しました。

これらインプットした情報へのインサイトから、設定したリニューアルコンセプトは

経験豊かなバーテンダー

経験豊かなバーテンダーは、お客様にとって最高の一杯を創る
最高の一杯は人それぞれ時々に実に多種多様
本当に求めているものは本人も知らないことも
言葉を交わし、自身の記憶と経験で提供する
時にはシンプルにお客様が呑みたい最高の一杯を
時には新たな気付きや興味を与えてくれる最高の一杯を
その言葉や真摯な態度で新たな世界に誘う
未知の体験を求め、つい通ってしまうバーには、経験豊かなバーテンダーがいる

旅のプロ集団であり、個々の社員の経験に裏打ちされた確かな情報とユーザーの要望を叶えるツアー商品で、多くの人を未知なる国々へと誘う。経験豊かなバーテンダーのようなWebサイトを目指すことになりました。

Webサイトを中心に、サービス全体をデザインする

辺境への旅行を検討中のユーザーが、ファイブスタークラブのサイトと接点を持ち、楽しみながらツアーを探し相談する。運営側はユーザーが検討しているツアーを素早く見つけ出し、予約業務を代行する。

Webサイトを中心として提供されるオンライン旅行予約サービスの全体像は、利用者や運営者の一連の流れを、サービス・ブループリントの手法をベースに整理しています。

サービス・ブループリントの例:利用者の行動に合わせ、フロントエンドやバックエンドの運営者やシステムがどう連携して動くかも整理する。(photo by bschmove, Brandon Schauer, Adaptive Path under Creative Commons – Attribution-ShareAlike 2.0 Generic – CC BY-SA 2.0 (Original).

Output

UXデザイン

旅好きが“探したくなる仕組み”を創る

主要なターゲットである旅慣れた旅行者は、エリア・地域で横断的に旅先を探す。というメインターゲットのストーリーを再現すべく、トップページでは大きく地域から探すインタフェースを採用しました。

気になる地域を選ぶと、近隣エリアを含めた国名からツアーを探すことができます。

「セルビアからは、ルーマニアとブルガリアまで足を伸ばせそうだな」と近隣国の情報を参照してもらう狙いがあります。様々な国の情報を参照していると、いつのまにか複数のツアーを検討しているという仕組みをデザインしています。

ユーザーとの接点を作り、旅のマイスターからその国のならではを学ぶ

地域から国に入っていくと、それぞれのオススメ地域とツアーの情報ををみることができます。

過去6年に渡って書き溜められた旅行記は、サイト内のそれぞれの地域で現地の生の様子を伝える他、ファイブスタークラブを知らないユーザーの検索エンジンからのランディングページとしても機能しています。

その国のならではを旅行記から知り、さらに気になった情報は「旅のプロに相談する」という導線から、問い合わせや相談が可能です。

相談方法もユーザーに合わせて複数導線を用意

テクノロジー

サービス全体を支えるインフラを構築する

“探したくなる仕組み”を実現するために、UIだけでなく、インフラもサイト利用者と運営者、双方のストーリーに合わせる必要がありました。

まずは更新の自由度が低かった既存のCMSを、更新が容易なWordPressに置き換え、旅のプロ集団による豊富な旅行体験をコンテンツ化しやすい基盤を整備しました。

ただ、豊富なコンテンツから、予約・申込みに繋げるためのツアー情報は基幹システムで登録されています。出力されたファイルを取り込む形でシステムを構築する必要があり、プロジェクトを進行しながら方針を決めていくことにしました。

バックエンド側で求められている機能は大きく以下に分類されました。

  • 基幹システムから出力したファイル(ツアー情報)の取り込み機能
  • 誰がツアー情報を取り込んだのかのログ機能(ログイン機能、アカウント管理等)
  • 取り込んだツアー情報をWebに表示する機能

これらの機能を実現するために、「スクラッチ開発」、「WordPressの機能拡充」、「Drupalによる機能開発」の3つのアプローチを考えました。

求められている機能を網羅するにはスクラッチ開発が必要でしたが、スクラッチ開発は全てを開発するため品質管理(バグ、脆弱性、保守性)が難しくなります。次に、採用を決めていたWordPress自体の機能拡充による対応も検討しましたが、スクラッチ開発と同程度の難易度が予想されたため、CMSでもありフレームワークとして機能するDrupalを採用しました。

Drupalは、モジュールという機能単位でレゴブロックのように積み上げてシステム構築します。必要な機能だけを組み合わせることができるので、いわゆる一般的なWebサイト管理のCMSとしての使い方から、データの連携のみを行うAPI化など様々な形で利用が可能です。独自モジュールでの開発も、PHPフレームワークであるSymfonyを利用できるため、品質を担保しながらスピーディーに行うことができます。

Drupal側ではデータのやり取りだけで画面の表示を行っていません。これをデカップルド・アーキテクチャ(ヘッドレス化)と言います。ヘッドレス化することでWebサイトだけでなくサイネージ、ウェアラブルデバイス、スマホアプリが共通言語(REST API)によってデータ取得できる環境を作っています。

フロントエンドとバックエンドの依存度が弱い疎結合な状態になったのでお互いに干渉することなくスムーズに開発を進められました。共通言語(REST API)のパラメターや戻り値のカスタマイズのしやすさもDrupalならではと言えます。

APIへのパラメータ
REST APIからの戻り値

素早く、正確に、情報に到達しユーザーに伝える

旅行好きユーザーの琴線に触れる「探す」体験に加え、ファイブスタークラブ社内で窓口対応を行うスタッフも、瞬時に目的のツアーを探し出す必要がありました。

接客時にユーザーと共通の情報を参照する上で重要だったのが、ツアーコードです。新しいWebサイトでは、各ツアー情報にわかりやすくコードを記載した他、バックエンドに格納した情報とREST APIの連結により、ツアーコードに加えエリアやフリーワードでも目的のツアー情報へ瞬時にアクセスが可能になりました。

今回のプロジェクトでは、検索プログラムをいちから再設計。DrupalをAPI化し一挙に330万レコードのCSVを取り込んでいます。取り込んだ情報群は、新たに構築したWordpressに受け渡し、整理された約15,000件のツアー情報として、リアルタイムで参照可能にしています。

世界的に普及したオープンソースCMSを組み合わせたことで、課題のひとつだったシステム構成の汎用化にも対応。改修時のコスト発生を抑えた運用を実現した他、更新のしにくさも解消し、スピーディーな情報発信も同時に担保しています。

旅行探しの体験をアップデート

ユーザーのインサイトそして運営者の課題から、旅行探しの体験をアップデートすべく生まれ変わったファイブスタークラブのWebサイトは、新たに構築したインフラの元、ユーザー、運営者双方の旅への想いを損なうことなく、探す楽しみと利便性を担保し、ここにしかない新しい旅との出会いを提供しています。

Five Star Club Webサイト

Member

松永 篤

株式会社ロフトワーク
クリエイティブディレクター

Profile

大森 誠

株式会社ロフトワーク
テクニカルディレクター

Profile

柳田 綾沙

株式会社ロフトワーク
クリエイティブDiv. シニアディレクター

Profile

上村 直人

株式会社ロフトワーク
クリエイティブディレクター

Profile

柏木 鉄也

株式会社ロフトワーク
シニアプロデューサー

Profile

メンバーズボイス

“前回のリニューアルから5年以上経過しており、古さが否めないサイトとなっておりました。さらに、お客様がツアーを検索する側面と営業スタッフがツアー内容を確認する業務ツールとしての側面を持っていたため、両面を満たしつつ、弊社の世界観も表現するという非常に大変なリニューアルでした。ロフトワーク様とプロジェクトを進めることで、他の旅行代店様が取り扱わないような国々も網羅し、「独自性」をデザインで表現できました。機能性も損なわず、良い意味で「旅行代理店らしくない」、非常にオリジナリティの高いサイトにリニューアルすることができました。ありがとうございました!”

株式会社ファイブ・スター・クラブ
東京本社 システム開発課 課長 加藤 和彦

“旅行を検討するお客様だけでなく、業務基盤として使われているWebサイトのリニューアルだったため、サービスデザインの手法であるシャドーイングやインタビューをお客様・運用者の両者に実施した他、サービス・ブループリントの考えをベースに、フロントとバックエンドを含めて、それぞれのサービス利用の流れを整理しています。過去十数年にも及ぶ写真や旅行記を資産として有効活用するため外部ブログサービスとのAPI連携などシステム的にも新たな挑戦をしています。是非、気になる国を地図から選び、新しい旅行探しを体感ください。”

株式会社ロフトワーク クリエイティブ・ディレクター 松永 篤

“ツアー情報の登録と検索APIをDrupalで構築出来たことによって、ログインの仕組みなど作成することなく、改修のレスポンスも良い構造をデザインできました。保守性にも優れていて、長期的に運用しやすい構成になったと思います。CMSが2つ入っている状態を少し奇異に感じるかもしれませんが、それぞれのCMSの特性を活かしてそれらが競合しないように設計できたのは、色々なCMSを導入している弊社だからかもしれません。”

株式会社ロフトワーク テクニカルディレクター 大森 誠

Keywords

Next Contents

Credit Tech企業の雄、ネットプロテクションズが目指した
コーポレートブランディング

お困りですか?