NOV.27.2016
SOCIAL NETWORK SHARE :

コーポレートサイトのアニメーション実装 Implementation of our website animation

初めまして。

Developerの小見です。

ただいま見ていただいているコーポレートサイトには、大きくわかるようなものから、細かいものまでさまざまなアニメーションを追加しています。
今回、私はDeveloperとしてこのサイトの情緒を表現できればと思いながら制作しました。

そこで、ここではアニメーションの実装について、どなたでも読んでいただけるように、あまり硬くなりすぎないように、ラフに書こうとおもいます。
読んでいただきながらぜひ、サイトのいろんな部分を見ていただければと思います。

WebGLを利用した煙の演出

まず最初に見て、印象深いのが煙の演出です。
下からもくもくと湧き上がってくる煙、そしてロゴも煙で見え隠れするようになっています。

article-siteimage-capture01

下からもくもくと湧き上がる煙はWebGLという技術を利用しています。
WebGLというと3D表現のようなイメージを持つ方もいらっしゃると思いますが、今回はモデリングしたものを動かすとかではなく、画面内で煙のパーツを動かして、もくもくとした表現をしています。

なるべく多くのものを動かす必要があったので、煙の動きはGLSL側で処理をしています。
GLSLとはWebGLで使えるシェーディング言語です。より高速に描画をするために、このような方法を利用しました。

SERVICEのイラストアニメーション

イラストレーター 小峯が書いたイラストをより印象付けるため、各イラストを奥行きごとにレイヤーに分け、アニメーションさせています。
連続した画像を配置したPNGをCSSで切り替える方法や、Canvasを利用した方法などを試したのですが、今回イラスト自体のアニメーションはGIFで行うことにしました。
今回のイラストは白黒のため、色数も少なく、軽量化でき軽快に動かすことができました。

また、マウスの動きによって、イラストの各レイヤーがズレるようになっています。一枚ずつ動く幅を変えることで要素に対して遠近感をつけています。

article-siteimage-capture02

イラストの動く率や方向も微妙に調節しながら気持ちいい動きができるように調整しました。

音を使った演出

PCでサイトを見た際に下の方で動いている波は微妙に音に合わせて動いています。これはWeb Audio APIを利用して音の波の値を取得して、表現に加えています。

article-siteimage-capture04

また、トップページと下層ページでは、音の響きが変わるように調整をしています。これは音を2種類用意しているのではなくWeb Audio APIで音にフィルタをかけて、音が篭ったような表現にしています。

コーポレートサイトの音楽に関しては長尾さんにご協力いただきました。今回はサイトのBMGだけでなく、リンクのホバー時や、画面遷移時などの細かい音もつけていただきました。

とても素敵なものに仕上がっていますので、ぜひ音楽も楽しんでいただければと思います。

上記で紹介した以外にも、様々な部分で工夫をつけながらアニメーションの実装に特に力を入れました。
ぜひ、PCからも、スマホからもサイトをご覧いただければと思います。

今後Developerとして

今回、全てご紹介はできませんでしたが、サイト内には様々な演出を加えているので、ぜひじっくりご覧いただければと思います。

私は今回のコーポレートサイトの制作を通して、表現の難しさと新しい技術にチャレンジすることの楽しさを学びました。
そして今後はデザイナーの方の表現をより引き出せる、そして表現を一緒に作り上げていけるようなDeveloperになりたいとあらためて思いました。

 

Webのフロントエンドはとても流れが早く、実装環境や、フレームワーク、表現方法など次々と新しいものが生まれています。そこをしっかりキャッチアップしながらも、見てくれる人にいいものを提供するにはどのようにすれば良いのかをしっかりと考え、最適な方法を選択し、実装できるように日々頑張っていきたいと思います。

 

また今後も技術に関して共有できる部分があればいろいろと書いていこうと思うので、弊社がどんなことをやっているのか気になる方は注目していただければと思います。宜しくお願いいたします。

 NOV.27.2016
SOCIAL NETWORK SHARE :