《課題解決 編》mountが挑んだ、バリ島「AYANA Bali」リニューアルの舞台裏。徹底したリサーチが導いた最適解とは?

mountが手掛けた、インドネシアのバリ島にある大規模リゾート施設「AYANA Bali」のWebサイトリニューアルでは、制作前に膨大なリサーチを重ね課題解決の方法を導き出していきました。その資料を特別に公開し、どのような道筋で制作されたかご紹介していきます(前後編の後編)。

【調査・分析 編】はこちら

目次

OUTPUT①|全体像を端的に伝え、高い回遊性を実現

リニューアル後は、トップ画面をスクロールするだけで、海に面した広大な敷地に7つのエリアがあり、施設や過ごし方の選択肢が多いという特徴が伝わります。

すべてのページでホテルや各施設の情報を構造的に並べたナビゲーションメニューを開くことができるので、ここを見るだけで素早く全体像を把握できます。予約メニューも大きく掲載し、自社サイトからの集客を訴求。同内容のメニューは各ページのフッタにも配置し、コンテンツ間のリンクでも回遊性を高めています。

また、このWebサイトはGoogleスプレッドシートをデータソースとする独自開発のCMSで制作し、運用やアレンジがしやすくなっています。

トップ画面を少しスクロールすると表示されるビジュアル1枚だけで、海に面した島に7つのエリアがあり、面積が90ヘクタールもあることがわかります。左上に表示されるドットのメニューをクリックするとナビゲーションが開き、施設のジャンルやコンテンツが構造的にリスト化されているので、ここでも施設の全体像を掴みやすくなっています。このナビゲーションは全ページにあり、Webサイト内で迷いにくく回遊性を高めています
クライアントの希望は、レイアウト変更に対応しやすいようHTML納品でした。しかし、膨大な量のWebサイトの初期構築・運用には何らかの仕組みが必要だと考え、Google スプレッドシートを使った独自開発のCMSを提案。セルの文字や画像を修正するだけで更新でき、編集履歴の閲覧・復元、シート上でのコミュニケーションもできます。簡易的なプラグインを作成し、右下に他のページへ遷移しやすいメニュー一覧を追加しました

OUTPUT②|圧倒的な情報量を編集し、滞在を追体験させる表現に

ホテルやレストランといった施設のページも、それぞれの特徴が伝わりやすいようコンセプトやポイントを明記し、詳細情報を充実させました。ホテルのページでは、部屋タイプ別に客室を比較できる一覧表も追加しています。

そうした必要情報に加えて、編集チームに現地での滞在を追体験できるよう詩的なコピーを書いてもらいました。そして余白を活かしたデザインにすることで、時間の流れを優雅に感じる“間”を意識しています。

また、文字間を調整するカーニング機能を開発し、見出しなどの文字バランスを手作業で調整していきました。根幹となるコンセプトや目を惹くコピー、ビジュアルも大事ですが、こうして細部まで質を高めていくことも意識しています。

ホテルやプールなどの紹介ページは、旅雑誌のようなイメージを持ちながら、実際に現地で滞在する時間が追体験できるように、第三者目線で表現しています。写真やコピーも時間の流れが優雅に感じるような“間”を意識してレイアウトしました
独自開発したカーニング機能を使って文字と文字の間の余白を調整し、各ページの見出しなどのバランスを手作業で整えています

OUTPUT③|スケール感が伝わる写真と映像

リゾートの魅力を伝える上で写真や映像は重要な要素です。現地視察時に撮影した写真を元にWebサイトで使用するものをリスト化し、AYANA Baliでの本撮影を行いました。20人ほどモデルを用意しましたが、実際に行ってみると、バーなど広い画角で撮影する方が適切な場所がありました。

そこで、お客様が写りこまないよう、クライアントに急遽エキストラとして関係者や知り合い200人近くを集めてもらい、画角内を埋めつくして撮影しました。その席分のお客様の売上はなしになります。それでも協力いただけたのは、クライアントが「ともによいWebサイトをつくりたい」という思いを共有してくしてくれたからです。

海沿いの断崖にあるロックバーは、AYANA Baliの中でも人気のある名所で、270mほど続く場所です。滞在中のお客様がいるため貸切にはできず、アピールポイントである夕陽の時間に、急遽集めていただいた数百人のエキストラとモデルで画角を埋め尽くすことで、この場所の魅力を伝える写真を撮ることができました。プールやスパなどの写真は、モデルを起用し撮影しています
AYANA Baliの広大さが視覚的にもわかりやすいよう、ヘリコプターからの空撮を行いました。動画チームと4つの写真チームで分担し、他にも部屋や料理、各施設、朝日や夕陽の時間のビュースポットなど、大量で複雑なカットリストを10日間のスケジュールの中で撮り漏らさないように緻密な予定表を練って挑みました。こうした写真や動画を多用しているため、Webサイトの軽量化にもこだわっています

OUTPUT④|複数のモデルコースを設定し、施設の利用を促進

カップルやファミリーなどさまざまなペルソナを想定して、8つのモデルコースを新たにつくりました。見どころの説明はもちろん、撮影のベストタイムや移動方法・時間なども明記しています。あまりに選択肢の多い場所のため、やれることが多すぎて迷ってしまう場合にも、負担なくさまざまな施設やアクティビティを楽しんでもらえます。

また、Googleマップのように拡大・縮小や施設情報を表示できるガイドマップも作成しました。これにより各施設の場所、徒歩や周遊しているトラムでの移動時間がどの程度かかるかを把握できます。また、現地でスマホで見れば、自身の現在地もわかります。

各モデルコースには新婚旅行や友達同士など想定する客層と写真撮影などの重視しているポイントを記載しています。また、各スポットには、説明に加えて撮影のベストタイムも明記しました
ガイドマップのページではAYANA Baliの全体地図が見られます。現地でスマホで見ると、自身の現在地も表示され、目的地までのトラムまたは徒歩での所要時間がわかるようになっています。一見するとGoogleマップのマナーに則したUIではありますが、しっかり編集・デザインしグラフィカルでワクワクする地図にするため独自で開発しています

クライアントからの声

AYANA BaliのWebサイト制作において、mountとのコラボレーションは非常に満足のいくものでした。私たちの最大の課題は、広大な敷地に広がる統合型リゾートの魅力を効果的に表現し、直接予約のコンバージョンを最大化するための戦略的なサイト設計を実現することでした。

mountは、事前に広範なヒアリングやフィールドリサーチを行い、AYANAのブランド価値やゲスト体験を正確に反映したWebサイトを制作してくれました。彼らのチームは、撮影ディレクション、コンセプトデザイン、システム開発など、各分野のエキスパートを揃え、最新技術とトレンドを取り入れたクリエイティブなアプローチでプロジェクトに臨みました。

結果として、リゾートのスケール感を視覚的に表現しつつ、ユーザーエンゲージメントを高め、直接予約を促進する効果的なプラットフォームを構築でき、大変感謝しています。(AYANA ESTATE・園田美知さん)

Text:平田順子、Photo(人物):ただ(ゆかい)、Photo(AYANA Bali):(株)JXL 、加藤純平
※本記事は「Web Designing 2024年12月号」の記事を一部修正・再構成して掲載しています。

  • URLをコピーしました!
目次