顧客体験の向上と業務改善を同時に実現する
サービスサイトリニューアル

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

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

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

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

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

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

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

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

経験豊かなバーテンダー

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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