制作実績

ベル・ジュバンス エージェンシー

パララックス効果を利用してダイナミックな動きの体験の中で商品の魅力を感じてもらえるサイトを実現

公開後1週間でアクセス数44%UP

ブルー・バンブー株式会社では、「美しく、若返る」をコンセプトに弱酸性シャンプーをはじめ美容サービスを展開する株式会社ベル・ジュバンス エージェンシーのオフィシャルサイトをリニューアルしました。

ヒアリング、企画提案

従来は200ページほどのボリュームのあるサイトで、商品やサロン情報に加えて、美容関係の情報を発信していました。しかし、過去に作成した企画系コンテンツが整理されないまま多数残っていたりと、ユーザーにとって必要以上の情報量があり、本来伝えるべき商品の魅力を伝えきれていないことを課題とされていました。

そこで、従来のサイトをベースに情報を整理していくのではなく、まずは商品の魅力を伝えるために本当に必要な情報だけを掲載したサイトを構築し、その後さらにサイトを充実させていくというプランをご提案し、プロジェクト開始となりました。

キックオフ、仕様策定

1ページだけで商品の魅力を伝えることへの挑戦

当初5ページ程度のサイトを想定していましたが、画面設計を重ねていく中で、サイトを1ページだけで表現する事で、本当に必要な情報が絞られ、商品の魅力を伝えることができるという方針が見えてきました。

サイトそのものを『体験』してもらう

ユーザーにサイトそのものを『体験』してもらうために、最新の手法であるパララックス効果を利用して、ページのスクロールやクリックに応じてダイナミックな動きが生まれる仕掛けを採用しました。

デザイン

パララックスの効果を引き出すデザイン

ページの前面と背景をバラバラに動かくことができるパララックスの効果を最大限に生かすために、奥行きのある動きが楽しめる設計にしました。

「みずみずしさ」を表現

全体的に水玉をモチーフとした「丸」を中心としたデザインとすることで、商品を使うことにより得られる「みずみずしさ」を表現しました。

ページ制作、開発

ファーストビュー

ファーストビューで商品が円を描きながら飛んできて、画面いっぱいに表示されるという動きを実装しました。ユーザーにサイトに興味を持ってもらい、商品を印象づけます。 円の軌道やスピードの計算など、ユーザーにとって一番気持ちがいい表現ができるよう、ディレクター、デザイナー、コーダー間で打ち合わせ、開発、調整を繰り返しました。

パララックスの実現

多数のJSを実装することで、スクロールに応じてコンテンツが出現したり、奥行きが生じたりなどダイナミックな表現を実現しました。

運用

今回のリニューアルは第一弾リリースとし、今後サイトをさらに充実させていく予定です。

リニューアル後の効果

公開後に多くの反響があり、1週間でアクセス数44%UPを達成しました。 Webサイトをご覧いただいたお客様から、商品に関するお問い合わせも増えたとお伺いしております。

お問い合わせTel:03-5489-7110(受付時間:平日10:00〜18:00)
フォームからのお問い合わせ