Web事業部実績紹介
Web事業部実績紹介
2016.08.29
#10
それいけ!フロントエンド

フロントエンドが参考にしたいwebサイト5選 2016年8月版!

まろ

こんにちは、まろCです。ギラギラの夏過ごしていますか?

今回はフロントエンドエンジニアの視点で、アニメーションなどの表現で参考にしたいサイトを5つ紹介したいと思います。どのサイトも素晴らしいですが、見た目だけではなく、そのサイトが持つ想いなども感じていただけたら嬉しいです。

1. 水曜日のカンパネラ

01

http://www.wed-camp.com/

最近リニューアルされたサイトです。MVの演出はもちろん、ぐにゃぐにゃしている感じが素晴らしいです。ソースやコンソールを開いてみすると、PIXIを使っているようで、webglでの演出にすごいなと感動しました。また、SVGの使い方など、技術的にも参考にしたいサイトとなっています。

2. DRAFT Inc.

スクリーンショット 2016-08-14 21.31.33
https://draft.co.jp/

左から流れる感じや、文字の使い方など、アニメーションなどがとても気持ち良いサイトです。GSAPのTweenや、DrawSVGPluginを使っているようで、僕もGSAPのプラグインはよく使うので参考にしたいところです。

ソースを見るとコンテンツ部分をレンダリングしてないけど、何か意図があるのかな?

3. すすメトロ!

スクリーンショット 2016-08-14 21.31.10

http://www.tokyometro.jp/susumetro/

キャラクターを活かし、pngアニメーションとバウンドなど、可愛らしくアニメらしい動きを効果的に取り入れたサイト。pngやgifを使ったアニメーションを選択するかはデザイナーとの相談になるので、そこもうまく連携を取っているんだな、と参考にしたいところです。

4. 株式会社イチゴウ

スクリーンショット 2016-08-14 21.30.02

http://1gou.jp/

こちらはTHREE.jsをメインビジュアルにしており、3dの背景にワクワクするポップな動きに魅了されます。ぜひ画面をクリックして、動きの多様さを楽しんでみてください! おもしろくて時間が過ぎてしまいそう……

5. BEYOND 進化ヲ恐レルナ Galaxy S7 edge

スクリーンショット 2016-08-14 21.29.14

https://www.nttdocomo.co.jp/special_contents/galaxy/

文字や背景のスライダーなど、細かくパーツパーツをwebglで描画してPIXIを使っているのだと思いますが、すごく素敵です。全体のトーンや、ざらついた感じもwebglで表現しているっぽい……。ソースを舐めまわしたいくらいのかっこよさです。

まとめ

いかがでしたか?

海外のサイトにも素敵なサイトはたくさんありますが、その企業や、キャンペーンの意図をうまく表現してそれを汲み取ることができるサイトは、日本ならではの強みだと思います。

頭が沸騰しそうなスケジュールでも、うまく、そして効果的な演出が入れられるようにしたいですね。

また素敵なまとめを作りたいと思います。それでは!