こんにちは！ブダペスト在住Webデザイナーのみほこです。
今日はR GARDENさんのWebサイトプロジェクトを振り返ってみたいと思います。
R GARDENさんは富士山中湖にあるグランピングキャビン。私が仲良くさせていただいている経営者の大先輩でもある渡辺里奈さんが、ご夫妻で23年にオープンされました。
Webサイト制作をご依頼いただき大感激！なんたってセンス溢れるとっても素敵な場所なんです！
焚き火もあるんです。秋の夜長に焚き火を囲んでゆっくりしたいですよね。
宿泊施設専用の予約システムChilln（チルン）にすでにご登録されていて、そこをもっとブラッシュアップできないか、というお話だったのですが、
Chillnはそこまでデザインの自由度が高くなかったため、Wordpressでホームページを作り、そこからChillnに連携させるということになりました。
メインビジュアルの可愛いイラストと、ロゴ、背景色は決まっている状態だったので、そこからデザインを展開させてデザインを制作。
Chillnでは作成が難しかった、イラストをメインに大きく配置したトップページと、施設の画像をたくさん掲載したギャラリーページ、施設へのアクセスページも制作し、その他のページはChilln連携としました。
なお、Chillnで出来たページも編集を担当させていただきました。
メインのイラストは、最初は静止画だったんですが、今は動くアニメーションとなってるんです。これもとても可愛いのでぜひサイトに訪れてみてみてください。
R GARDEN公式サイト：https://rgarden.jp/
この動画をアニメーション動画をデザインとして挿入するのがなかなか難関で・・・
基本のWebM形式と、safariのためのQuickTime形式での書き出しとhtmlでの出し分けをするんですが、背景透過で書き出してもらっても透過にならない、表示されない、動かない、などありました。
ここは単純な私のスキルと経験値不足なので、もっと勉強せねばといったところです。
最終的にどのデバイスでも綺麗に表示されるようになったのですが、まだ少し表示に時間がかかりすぎていたので、Cloudflareでページに高速化を行いました。Cloudflareとは、Cloudflare上のサーバにメディア（画像や動画など）をキャッシュさせておくことで、読み込み速度をスピードアップしてくれます。サイトの読み込みが気になるときはぜひ使ってみてください。
Cloudflare（クラウドフレア）公式サイト：https://www.cloudflare.com/ja-jp/
それでは、また！
