• Web

FIELDS

オフィスに似せたWeb空間を、優木まおみが御案内オフィスに似せたWeb空間を、優木まおみが御案内


フィールズ株式会社の公式サイトをリニューアル
~スムーズなパララックス遷移で、企業をより深く知ってもらえるサイトに~

FIELDS株式会社のコーポレートサイト( http://www.fields.biz/ )をチームラボがリニューアルしました。
新サイトは、FIELDSの実際のオフィスを模して制作しており、主要事業部の実績や雰囲気を、まるでユーザーがオフィスを訪れたかのような感覚で閲覧することができます。また、パララックス効果(※)を使ったページデザインにより、キーボードの方向キーでスムーズにサイト内を移動することができます。
Keyword :
Client :
FIELDS株式会社
Date :
2013.09
Website :

 

コンセプト──Webと実空間のシームレス化

オフィスビルを模したサイト内の構成は、1Fの受付および企業コンセプトを紹介するフロア、2Fのコミック・ライセンス部門、3Fのアニメーション部門、4Fの映像・ラブメディア部門、5Fのインタラクティブメディア部門、6Fのコンシューマープロダクツ事業部門、7Fのパチンコ・パチスロ部門からなり、それぞれに部門の紹介画面、各部門のコンテンツ一覧画面、そして、コンテンツの詳細を伝える実績詳細画面があります。1Fと2Fの背景は、実際の社内と同様の調度品や空間構成になっています。そのため、サイトを訪れた人には、フィールズの会社の各部門の業務や実績だけでなく、オフィスの雰囲気も知ってもらえるようになっています。

演出──サイトの閲覧履歴に応じてコンシェルジュがコメント

仮想オフィスとも言えるサイトに訪れた“お客様”をもてなしてくれるコンシェルジュとして、優木まおみさんが登場。アニメーションと共にユーザーに語りかけてくれます。
cookie情報からユーザーの閲覧頻度、最後に見た画面などのデータを取得することで、フロアごとに決まったものではなく、状況に合わせたメッセージを表示します。

技術──企業のイメージを形作るデザイン×テクノロジー

JavaScriptを徹底的に最適化することで、ページ遷移なくスムーズに移動できるFLASHサイトのような操作感を実現しながら、各ページを検索結果に表示させ、直接閲覧することができるなどのSEO施策も同時に行っています。企業のブランドイメージを形作るコーポレートサイトとして、デザイン性と実用性を両立しました。

 

 

※パララックス効果…レイヤーのように重ねた画像を異なる速度でスクロールさせることで奥行きや動きを表現する方法。

 

【関連リンク】
・ これはスゴい!html5やjavascript、jQueryなど動的要素が素敵なWEBサイトまとめ(NAVERまとめ)


News

MEDIA

ウェブサイト『MND』にて、「teamLab: Living Digital Forest and Future Park」の紹介。

MEDIA

ウェブサイト『WIDEWALLS』にて、「チームラボ」の紹介。

MEDIA

ウェブサイト『Art Practical』にて、teamLab:Living Digital Space and Future Parksの紹介。

MEDIA

ウェブサイト『BIZBASH』にて、「teamLab:Living Digital Space and Future Parks」の紹介。

MEDIA

『家庭画報 INTERNATIONAL Japan EDITION』(2016年春/夏号)にて、「チームラボアイランド 踊る!美術館と、学ぶ!未来の遊園地」の紹介。

CONTACT

制作のご依頼・ご相談・お見積もり

お問い合わせ

RECRUIT

エンジニア、ディレクター、デザイナー、アルバイト募集中

採用について

Other Case

Web