L O A D I N G

SNS

MENU

CLOSE

0422-70-3802

C O N T A C T

1
EN

HELLO!

JP

CONTACT - STEP01

お問い合わせ内容を以下の中から選択してください。

お仕事のご依頼
採用のお問い合わせ
その他お問い合わせ

CONTACT - STEP02

以下の項目よりご依頼内容を選択してください。

ブランディングに関するお問い合わせ
ディレクションに関するお問い合わせ
制作全般に関するお問い合わせ
デザインに関するお問い合わせ
開発に関するお問い合わせ

CONTACT - STEP03

以下よりご予算を選択してください。

APPROXIMATE BUDGET
0 yen
0 yen
~
2,000,000 yen
~
4,000,000 yen
~
6,000,000 yen
~
8,000,000 yen
~
10,000,000 yen

CONTACT - STEP04

以下よりプロジェクトの公開日を選択してください。

ESTIMATED TIMELINE
0 month
0 month
~
1 month
~
2 month
~
3 month
~
4 month
~
5 month
~
6 month

CONTACT - STEP05

以下のフォームよりプロジェクトの情報を入力し、
プライバシーポリシーをご確認の上、確認画面へ進んでください。

NAME ✳︎
COMPANY ✳︎
E-MAIL ✳︎
TEL ✳︎
INQURY CONTENT ✳︎

CONTACT - STEP02

以下の項目より職種を選択してください。

ディレクター
デザイナー
ディベロッパー
その他

CONTACT - STEP03

以下よりご経験年数を選択してください。

YEARS OF EXPERIENCE
1 year
0 year
~
1 year
~
2 year
~
3 year
~
4 year
~
5 year
~
6 year
~
7 year
~
8 year
~
9 year
~
10 year

CONTACT - STEP04

以下の項目よりご希望の雇用形態を選択してください。

正社員
契約社員

CONTACT - STEP05

以下のフォームより志望動機をご記入ください。

NAME ✳︎
ORGANIZATION ✳︎
E-MAIL ✳︎
TEL ✳︎
URL ✳︎
INQURY CONTENT ✳︎

CONTACT - STEP02

以下のフォームより情報を入力し、
プライバシーポリシーをご確認の上、確認画面へ進んでください。

NAME ✳︎
ORGANIZATION ✳︎
E-MAIL ✳︎
TEL ✳︎
INQURY CONTENT ✳︎
STEP01

C L O S E

S U B M I T

CONTACT COMPLETE

お問い合わせありがとうございます。
お問い合わせ内容を確認させていただき次第、担当者より返信させていただきます。

THANK YOU
CLOSE

NEWS

BLOG Nov.27.2016

コーポレートサイトのアニメーション実装

by Staff

SHARE

(本ブログ内容は、2016年に公開された弊社コーポレートサイトについて、ご説明させていただいております。なお、弊社コーポレートサイトは2019年にリニューアルしております。)

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

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

WebGLを利用した煙の演出

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

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

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

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

イラストレーター 小峯が書いたイラストをより印象付けるため、各イラストを奥行きごとにレイヤーに分け、アニメーションさせています。

連続した画像を配置したPNGをCSSで切り替える方法や、Canvasを利用した方法などを試したのですが、今回イラスト自体のアニメーションはGIFで行うことにしました。
今回のイラストは白黒のため、色数も少なく、軽量化でき軽快に動かすことができました。

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

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

音を使った演出

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

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

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

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

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

今後Developerとして

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

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

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

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

by Staff

SHARE

OTHER ARTICLES

BLOG
Nov.13.2019

UNIEL 8月-10月 公開プロジェクト

by Mami Ohtani

BLOG
Nov.30.2017

コードを書くときに考えていること

by Staff

BLOG
Nov.13.2019

小さい会社の社内制度

by Mami Ohtani

SCROLL TO
CLICK TO
N E W S   A L L
TAP TO NEWS ALL