STEP01お問い合わせ内容を以下の中から選択してください。STEP02以下の項目よりご依頼内容を選択してください。STEP03以下よりご予算を選択してください。STEP04以下よりプロジェクトの公開日を選択してください。STEP05以下のフォームよりプロジェクトの情報を入力し、プライバシーポリシーをご確認の上、確認画面へ進んでください。プライバシーポリシーに同意します。営業、人材紹介の連絡ではありません。STEP02以下の項目より職種を選択してください。STEP03以下よりご経験年数を選択してください。STEP05以下のフォームより志望動機をご記入ください。プライバシーポリシーに同意します。営業、人材紹介の連絡ではありません。STEP02以下のフォームより情報を入力し、プライバシーポリシーをご確認の上、確認画面へ進んでください。プライバシーポリシーに同意します。営業、人材紹介の連絡ではありません。COMPLETEお問い合わせありがとうございます。お問い合わせ内容を確認させていただき次第、担当者より返信させていただきます。StaffSHARE(本ブログ内容は、2016年に公開された弊社コーポレートサイトについて、ご説明させていただいております。弊社コーポレートサイトは2019年にリニューアルしております。)以前のコーポレートサイトには、大きくわかるようなものから、細かいものまでさまざまなアニメーションを追加しています。今回、サイト内の情緒を表現できればと思いながら制作しました。そこで、ここではアニメーションの実装について、どなたでも読んでいただけるように、あまり硬くなりすぎないように、ラフに書こうとおもいます。読んでいただきながらぜひ、サイトのいろんな部分を見ていただければと思います。WebGLを利用した煙の演出まず最初に見て、印象深いのが煙の演出です。下からもくもくと湧き上がってくる煙、そしてロゴも煙で見え隠れするようになっています。下からもくもくと湧き上がる煙はWebGLという技術を利用しています。WebGLというと3D表現のようなイメージを持つ方もいらっしゃると思いますが、今回はモデリングしたものを動かすとかではなく、画面内で煙のパーツを動かして、もくもくとした表現をしています。多くのものを動かす必要があったので、煙の動きはGLSL側で処理をしています。GLSLとはWebGLで使えるシェーディング言語です。高速に描画をするために、このような方法を利用しました。小峯が書いたイラストをより印象付けるため、各イラストを奥行きごとにレイヤーに分け、アニメーションさせています。連続した画像を配置したPNGをCSSで切り替える方法や、Canvasを利用した方法などを試したのですが、今回イラスト自体のアニメーションはGIFで行うことにしました。今回のイラストは白黒のため、色数も少なく、軽量化でき軽快に動かすことができました。マウスの動きによって、イラストの各レイヤーがズレるようになっています。一枚ずつ動く幅を変えることで要素に対して遠近感をつけています。イラストの動く率や方向も微妙に調節しながら気持ちいい動きができるように調整しました。音を使った演出PCでサイトを見た際に下の方で動いている波は微妙に音に合わせて動いています。APIを利用して音の波の値を取得して、表現に加えています。トップページと下層ページでは、音の響きが変わるように調整をしています。APIで音にフィルタをかけて、音が篭ったような表現にしています。コーポレートサイトの音楽に関しては長尾さんにご協力いただきました。今回はサイトのBGMだけでなく、リンクのホバー時や、画面遷移時などの細かい音もつけていただきました。素敵なものに仕上がっていますので、ぜひ音楽も楽しんでいただければと思います。上記で紹介した以外にも、様々な部分で工夫をつけながらアニメーションの実装に特に力を入れました。PCからも、スマホからもサイトをご覧いただければと思います。今後Developerとして今回、全てご紹介はできませんでしたが、サイト内には様々な演出を加えているので、ぜひじっくりご覧いただければと思います。私は今回のコーポレートサイトの制作を通して、表現の難しさと新しい技術にチャレンジすることの楽しさを学びました。今後はデザイナーの方の表現をより引き出せる、そして表現を一緒に作り上げていけるようなDeveloperになりたいとあらためて思いました。Webのフロントエンドはとても流れが早く、実装環境や、フレームワーク、表現方法など次々と新しいものが生まれています。そこをしっかりキャッチアップしながらも、見てくれる人にいいものを提供するにはどのようにすれば良いのかをしっかりと考え、最適な方法を選択し、実装できるように日々頑張っていきたいと思います。今後も技術に関して共有できる部分があればいろいろと書いていこうと思うので、弊社がどんなことをやっているのか気になる方は注目していただければと思います。