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で音にフィルタをかけて、音が篭ったような表現にしています。

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

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

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

今後Developerとして

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

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

 

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

 

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

Hello and nice to meet you. I am Omi and I am the developer at UNIEL.

As you can see, many animations are used on this website. I created these animations with the hope of delivering the character that I wanted this website to have.

Today in this blogpost, I would like to explain about implementing animations to websites. Now this is a technical topic, but I will explain as clear and simple as I can so anyone even who doesn’t know about these things much can still understand easily. Please check out our website along with reading this article.

Rendering smoke effect using WebGL

The first thing you’ll see when you access to our corporate website is the smoke coming up from the bottom of the screen. Our logo comes and go as the smoke moves.

article-siteimage-capture01

The effect I used for the smoke to come up from the bottom of the screen is called WebGL. Some of you might think WebGL works the best for 3D models, but it actually works very well with two demential also, so I used it to move around the parts of the smoke to express the ‘floating’ movement. I used GLSL code as I needed to move as many parts of the smoke as possible. GSGL code is a Shading language that is used with WebGL. I used this method to speed up the performance of the effect.

Illustrations on Service page

I divided each illustrations our illustrator Komine drew into layers and turned them into animations to make them more lively and memorable. I tried using other methods like Canvas and CSS animation with PNG, but I figured GIF format suited best for this occasion. The illustrations were in black and white so we could make the file size small, and have smooth motion. Also, I set each layer to shift with the mouse movement to make the illustration to have more depth.

article-siteimage-capture02

I smoothed out the movement of those illustrations by adjusting the ratio and direction of their movements little by little.

Sound Effects

The wave icon you can see in the bottom of our website when accessed from PC is programmed to move in sync with the sound. I analyzed the volume of the sound wave using Web Audio API to achieve this effect.

article-siteimage-capture04

And the sound effect in the top page and the subpage is adjusted so that it sounds different from other pages. You might guessed that there are two different sound samples to achieve this, but that’s actually not the case. I actually added a filter to the sound using Web Audio API so that it sounds muffled.

Nagao-san helped me with the sound effects – from the BGM to the mouse over/screen transition sound effects on our corporate website. I am very happy with how they turned out, so I would love it if you can listen to them too. I’m sure you’ll enjoy your experience.

There are many other animation effects on our corporate website that I worked so hard on but didn’t mention in this article. It would be awesome if you can visit it from both your PC and smart phone to experience them all.

Conclusion

I would love you to have  look at every page on our website to see all the effects I implemented. Through my experiences on creating this website, I learnt how difficult, but fun it is to challenge on the new techniques. This experience made me want to become a developer who can express the emotions inside of the design with our designers.

The tooling and techniques are changing at an extremely rapid pace for front-end web development. I need to be willing to adopt new techniques, but at the same time, I need to contemplate what skill set to use to create the best quality website. I will continue dedicating to self-improvement to keep up.

I am planning on sharing you about the new techniques and tools that I learn, so please come back to our blog if you are interested in what we do.

 NOV.27.2016
SOCIAL NETWORK SHARE :