2024.11.18

[AYANA BALI]

こだわり抜いたコンテンツを

まとめました

mount初の海外案件であり、制作期間2年という大型プロジェクトのAYANA BALIのサイトがローンチされて早くも1ヶ月が経ちました。SNSでは多くの関心とコメントを寄せていただき、スタッフ一同大変嬉しく思っております。ありがとうございます。

このnoteでは、弊社のXにて公開したAYANA BALIサイトの制作コンテンツに深掘りしたポストをまとめています!
本プロジェクトのコンテンツについて、一気見したい方や、見逃してしまった方はぜひご覧ください。

目次

AYANAの魅力が詰まったダイナミックな映像

映像は深尾大樹さんが主宰する日本デザインセンター深尾映像研究室に協力いただき、AYANA BALIで体験できる様々な断片を多様に撮影しました。 それらを繋ぎ、一つの集合体として表現、広大で底しれない施設の魅力を映像に落とし込みました。

イム

NDCの深尾大樹さんの静かな感性が溢れている映像ができました。ぜひ、ご覧ください。

広大な施設を伝えるためのこだわりのコンテンツ

異なる特色が魅力的な4つの「ホテル」 

4つのホテル「RESORT」「VILLAS」「SEGARA」「RIMBA」ページでは、それぞれの異なる雰囲気とロケーションの特徴を表出し、分かりやすく伝えるとともに、現地の情景を追体験できる「ストーリーズ」も制作しました。

イム

趣の違う4つのホテルを内包するAYANA BALI。 ひとり、友人、家族など、様々なシチュエーションでの過ごし方が可能です。個人的にはAYANA RESORT ホテルをまずはおすすめしたいです。 ちなみにどこに泊まってもAYANA BALI 全体の14のプールを使えます。おすすめ。

米道

4つのホテルは、ある程度テンプレート化されてるけど、それぞれの一番いいところを写真と言葉でぎゅっと凝縮することで、ちゃんと個性も引き出すことを意識しています。

現地の高揚感を感じられる「ロックバー」と「スパ」

270mもの断崖に連なる「ロックバー」や、寺院のような神々しさをもつ「スパ」のページも力を入れ制作しました。 多くのビジュアルと言葉を優雅にダイナミックに紡ぎ、それぞれの特徴も分かりやく整理し紹介。施設に行ったときの高揚感が感じられるページを目指しました。

イム

Rock Bar は、事前に想像していたスケールの100倍くらいのスケールのバーでした。断崖270mに連なるバーにての時間の過ごし方は格別で、人生で1度は体験すべき時間になることは間違い無いです。

米道

肌で感じた感覚をそのままページに落とし込む。温度や湿度や音や匂いや光など、そのための構成やレイアウト、言葉、ビジュアルのセレクトを帰国後、脳内トリップしてやりました。

敷地内の全施設を網羅できる「ガイドマップ」

マップアプリのような使いやすさを目指して、検証や調整を細かく行いました。 各施設の詳細ページ側にも周辺の散策マップとして仕様を最適化しながら実装。 GPSとも連動して敷地内にいれば現在地も表示できます。

イム

敷地が東京ドーム20個分もあり、レストラン含む施設もたくさん。リゾート内マップUIをつくっちゃいました。現地で重宝される存在になれたらと。

米道

大きすぎてどこに何があるかわからない。そもそもどのくらい大きいのかもわからない。そういった課題感を行く前にも理解して、計画できて、現地でも使える。全部一望、全部わかる!を目指して作りました。

岡部

これは、えぐいやつです。緯度経度ベースのプロットのために難易度跳ね上がりました。ぼくが地図好きじゃなかったら匙を投げてましたね…。あと地味にAWSのアクセス元の国判定を使い、インドネシアのみ位置情報取得のアラートが出るようにしています。

渡辺

マップイラスト、実はFigmaで全て描きました。少々特殊だけど、色管理やパーツ整理、 UI込みのデザインする時に効率良く調整ができるから、 結構やりやすかったです。

様々な過ごし方を紹介する8つの「モデルコース」

それぞれの「アヤナ時間」をコンセプトにしたコンテンツ。 ターゲットごとにコースを設定し、自分に一番あった場所を見つけたり、予約したり、旅の行程が計画できるよう、膨大な情報を緻密に設計しました。

イム

ここまで敷地が広くてレストランや施設、アクティビティがたくさんあると、どのように過ごせば良いのか悩みがち。そこで、2泊のモデルコースをいくつも用意しました。お客さまも提供する側にもメリットがある施策で、予約のしやすさと顧客獲得に繋げています。

米道

それぞれの「アヤナ時間」をコンセプトに、自分にあったコースを見つけるもよし、いろんな場所をつまんでマイタイムテーブルを作るもよし、と、旅行者の計画を助ける機能として設計しました。

膨大なコンテンツ管理を支える独自のCMS

スプレッドシートからページ生成できる独自CMS

Googleスプレッドシート/Driveからページ生成できるCMSを開発し、すべてのテキスト・画像をシートで管理しています。 なじみのある操作性に加えて、複数人同時編集、セル単位でのコメント機能・編集履歴など、シート本来の機能もフル活用し、4言語で800ページ以上を作りきりました。

イム

そもそもコンテンツボリュームが多いのに、さらに4言語。800ページ!CMSありきでなければ完成が程遠すぎたこの案件の陰の功労者のCMSです。Googlsスプレッドシートのよさをすべて活かしているCMS。

米道

世界中から旅行者が来る施設だから地味にすごい裏側。単純な機械翻訳でなく多言語での1からの翻訳とテキストコントロールを効率的に行えるように。日本語だけでなく全言語このシートを使いながら目で見て何度も調整をかけています。

岡部

「最強のCMSはスプレッドシートだ!」強気な時の岡部は言いました。いざ作りはじめ、使い始めると、困難の連続で何度青ざめたことか…。でも、日英中韓の4言語が横並びで見られるビューは、やはりスプシ以外考えられない。。

クライアントの英断と撮影チームの底力による大規模撮影

現地での撮影の様子

使用されてる膨大な量の写真の殆どはリニューアルに合わせて撮り下ろしました。 ロケハン、本撮影と延べ17日間に及ぶ現地での撮影は4チーム編成で行い、計約3万枚以上の写真と230名のエキストラを導入する大規模な撮影となりました。

イム

エキストラ230名を使いロックバーを完全に貸切状態にしたクライアントの英断とそれを説得したチームに最大の敬意を表したいです。いいものをつくるためには、この協力体制が必須。230人の撮影なんて、やっぱ考えられないな。😂

米道

見えてる写真・映像のほとんどをコントロールしています。営業中のロックバーで数百人のエキストラを入れて撮ったり、敷地全体を撮るためヘリを用意して空撮をしたり、モデルや人の配備などクライアントの協力のもと行えました。

おもてなしの心を込めて翻訳にもこだわった多言語対応

4言語すべてをこだわって作成

世界中の旅行者が来られるAYANAだからこそ、多言語にもこだわりました。800ページの日・英・中・韓の4言語すべてのデザインフォーマット作成、翻訳後の改行調整まで目を配っています。

日:https://ayana.com/ja/bali/
英:https://ayana.com/bali/?redirect=off…
中:https://ayana.com/zh/bali/
韓:https://ayana.com/ko/bali/

イム

世界中のお客様におもてなしをするためには、コミュニケーションも丁寧に。ということで、日英中韓と4つの言語のデザインにもエネルギー注いでいます。

米道

フォーマットだからこそすべて同じ基準に。多言語サイト制作において実はとても大事なところ。翻訳者、入力者、実装者の細かなチューニングを経て、どの言語で見ても気持ちいい仕上がりにしています。

膨大なページ制作の裏には、膨大な画面設計

検証し尽くして設計したWF

視察で撮影した実際の写真とそれを紡ぐ言葉を、この時点ですべて書き起こし、現地で感じた情景や良さが浮き上がるように検証していきました。 また、ページ間の回遊施策として、今閲覧している場所の近くには何があるのか?近隣、同エリア、施設全体へと選択肢の幅を広げるような導線を設計しました。

イム

ウェブサイトにおける体験デザインを実現するためには、まずはクライアントを知ること、その先のユーザーを知ることからはじまります。それらを考え抜いた上で誰に何をどの順番で見せていくのか、感じさせていくのかを組み立てていく。リゾートのサイトだからこそ、これらの視点はとても重要でした。

米道

写真も文章も、実際に入るものに近いものを全部入れてみる、書いてみる。ワイヤーフレームの段階でちゃんと伝えたいことが伝わるかの検証をすることが大事。

静止画から映像を作成するためAIを活用

トップページの空撮映像は、AIによる深度推定を用いて、1枚の静止画から空撮風動画をつくり出しました。

効率化を図るためのプラグイン開発

Webサイトで使用している約1200枚の画像を効率よくCMSに反映するために、Figmaプラグインを開発しました。

▼ プラグインの機能
1. レタッチ前/後の画像をファイル名マッチで一括置換
2. デザインデータから書き出し用フレームを一括生成
 ・フレームのサイズが小数点になってしまう問題に対応し整数化
 ・パララックスのための余剰分を追加
 ・使用箇所とデバイスに応じて書き出し倍率を自動設定

米道

初めてFigmaでデザインをしたプロジェクトでした。覚悟を決めて勉強しながら、時間に追われながら、でも最終的にはプラグインにも助けられて、今ではフォトショには戻れないです。

山下

正直に言うと、このプラグインが誕生してなかったら私は泣いてました。笑本来であれば1200枚の画像を1枚ずつ置換するところを、ボタンひとつで一括置換してくれる救世主のようなプラグイン。書き出す際にもたくさんの便利機能が私を救ってくれました。

最後に

Web Designing 様とのコラボ企画で提案資料も公開させていただき、サイトだけでなく弊社の制作の取組み方についても知っていただく機会になったと思います。

提案資料は下記URLのフォームからダウンロードいただけます!
https://forms.gle/akNpyqEnoeGhipRk7

SNSの投稿や資料ダウンロードのフォームで感想を書いてくださった方、#WD_AYANA をつけてコメントをいただいた方、ひとつひとつ大切に読ませていただきました。ありがとうございました!
今後の制作の励みになります✨

そして、AYANAチームのパートナーの皆さまへ、この場を借りて改めて感謝申し上げます。このプロジェクトを無事に終えることができたのは、皆さまの多大なるお力添えがあってこそです。
世界一のAYANAチーム、最高です…!!

2024/11/19 Edit : 山下 亜加里(mount inc.)

つくることではなく、課題の解決が目的です。ぜひお悩みからお聞かせください。

お問い合わせ