焼津の宿泊施設「bo-kaap YAIZU」のLPコーディングを担当しました

プロジェクト概要

南アフリカのケープタウンにある観光名所 bo-kaap（ボカープ）をテーマとした、焼津の宿泊施設「bo-kaap YAIZU」のランディングページです。南アフリカを連想させるカラフルなデザインと、アフリカの雑貨が数多く配置されているのが特徴的です。

こだわりポイント

①サイトの雰囲気に合わせたポップなアニメーション

クライアント様から「雑貨が揺れたり、カラフルなキューブが動くような可愛いアニメーションをつけてほしい」という要望をいただき、特にアニメーション部分に力を入れて制作させていただきました。アフリカ雑貨にはカタカタと揺れるようなアニメーションを、カラフルなキューブは上下にふわふわと浮くようなアニメーションを実装しました。

②サイトパフォーマンスの向上・軽量化

縦幅15,000pxを超えるボリュームに加え多くのJSアニメーション、画像スライダー等を実装しているので、サイトのパフォーマンス向上にも力を入れて制作しました。画像はWebP対応のブラウザではWebPを使用し、非対応ブラウザにはフォールバックとしてjpg / png形式の画像を表示することで軽量化を図りました。

さらに画像スライダーには、画像の遅延読み込みや、表示領域外ではスライド自動切り替えを停止するなどの処理をしてブラウザに対する負荷を軽減しました。

ギャラリー