Scroll

MENU

2018.07.12 Lab

TOPページでバクが落ちてくる!?

お客様に「ジュニのコーポレートサイト面白い」「どうやって作ってるの?」と

ありがたく嬉しいお声をいただくことがあります。
そこで、Labではサイトがどんな風に作られたか、少しずつご紹介したいと思います!

コチラでは、「TOPページ」の見どころをお伝えします♪
まずは、チェックポイントをGIFアニメでご確認ください。

 

バクが…………落ちてきましたねッ!!!

 

ジュニのコーポレートサイトのイントロ画面では、ジュニのキャラクターである「バク」の3Dオブジェクトを、上から落としています。

PCだけでなく、スマートフォンでもバクが落ちてくるよう制御していますが、動きに負荷がかからないように設計しています。
それでは、それをどうやって作ったかご説明致します♪

アニメーション実装

こちらのアニメーションの実装には
【Three.js】と【Cannon.js】というライブラリを利用しています。

2つは相性がよく、簡単にコンテンツを作成できます。
そのあたりは下記の記事でも取り扱ってますのでぜひ。

>「Three.jsとCannon.jsを使ってだるま落としをつくってみた」

今回は、実装の細かい部分よりも
演出メインでちょっとお話をしたいと思います。

ユーザーアクションでの3D演出

最近は様々なWebサイトでWebGLが使われており、
ダイナミックで、眺めているだけでも楽しいようなサイトが増えてきました。

なかには3DCGを使ったサイトもあり、平面なサイトが時代遅れと言われる未来はすぐそこまでやってきています。(もう既に…!?)
それでも、まだ3Dでの表現は少なく、特に”物理演算”を使ったサイトはまだまだ少ないのではないでしょうか。

弊社サイトではそんな物理演算を使った演出をしてみました。

なぜ物理演算を使ったか

物理演算は計算処理が非常に多いため、うかつに使用するとサイトが重くなってしまうなどの危険性もあります。
そんなリスクがありながらも、なぜ物理演算を使ったかというと、
「物理演算によって “ストーリー” が生み出される」からです!

ここでいうストーリーとは”物が飛ぶ”だったり”動く”だったり、
実際起こしていることはすごくカンタンなことです。

3Dと物理演算を用いることで、
アクセスすると、ジュニのキャラクターであるバクが吹っ飛んでいく。
そんなコンテンツを通して、
ジュニで何かが起こる、ジュニが何かを起こしてくれる、
そんなストーリーを感じていただくことを目指しました。

まとめ

いかがでしたか?
今回はトップページで物理演算を使った演出についてお話ししました。
これから、端末の処理能力や3DCGのライブラリがより一層進化し、Webでの3DCGの表現はさらに手軽になると思われます。
3Dの新しい表現でWebの世界をさらに盛り上げていきたいと思います!

今後は、弊社のサイトだけではなく制作物の内容もご紹介していけたらと思っておりますのでお楽しみに♪

#theejs
#WebGL

Back to List

【個人情報の取り扱いについて】

株式会社ジュニ(以下「当社」)は、以下のとおり個人情報保護方針を定め、個人情報保護の仕組みを構築し、全従業員に個人情報保護の重要性の認識と取組みを徹底させることにより、個人情報の保護を推進致します。

個人情報の管理
当社は、お客さまの個人情報を正確かつ最新の状態に保ち、個人情報への不正アクセス・紛失・破損・改ざん・漏洩などを防止するため、セキュリティシステムの維持・管理体制の整備・社員教育の徹底等の必要な措置を講じ、安全対策を実施し個人情報の厳重な管理を行ないます。
個人情報の利用目的
お客さまからお預かりした個人情報は、当社からのご連絡や業務のご案内やご質問に対する回答として、電子メールや資料のご送付に利用いたします。
個人情報の第三者への開示・提供の禁止
当社は、お客さまよりお預かりした個人情報を適切に管理し、次のいずれかに該当する場合を除き、個人情報を第三者に開示いたしません。

  • お客さまの同意がある場合
  • お客さまが希望されるサービスを行なうために当社が業務を委託する業者に対して開示する場合
  • 法令に基づき開示することが必要である場合
個人情報の安全対策
当社は、個人情報の正確性及び安全性確保のために、セキュリティに万全の対策を講じています。
ご本人の照会
お客さまがご本人の個人情報の照会・修正・削除などをご希望される場合には、ご本人であることを確認の上、対応させていただきます。
法令、規範の遵守と見直し
当社は、保有する個人情報に関して適用される日本の法令、その他規範を遵守するとともに、本ポリシーの内容を適宜見直し、その改善に努めます。
お問い合せ
当社の個人情報の取扱に関するお問い合せは下記までご連絡ください。
株式会社ジュニ
〒160-0022 東京都新宿区新宿1-10-2 黒新ビル2F
TEL:03-5295-8445 FAX:050-3737-3451
Mail: info@junni.jp

page top