【参考サイト】フリースタイルエンターテイメント
面白いサイトがないかリサーチしていると、ふと、「お！」と目を引かれるサイトがありました。
▼株式会社フリースタイルエンターテイメントというWeb制作会社のホームページです。
フリースタイルエンターテイメントさんは、数多くの制作事例があり、リクナビ新卒採用の業界エリア部門4年連続1位を誇る人気企業。
そのフリースタイルエンターテイメントさんのコーポレートサイトがつい先日リニューアルしたということで見てみたのですが、、、
まさにフリースタイル。
ファーストビューのビジュアルが80年代風でふざけててイケてるとかいう事もありますが、それ以上に、実際アクセスして見て頂くとサイトの動きに驚かされませんか。
Web屋がWeb屋を褒めてると上から目線みたいですが、逆です。
単純に「うわ、すご！どうやってるんだろう」と感服してます。
背景でビュンビュン動くロゴや、ファーストビューからセカンドビューへのスクロール遷移の際の要素の移り変わりなど、非常にインパクトが大きいサイトだと感じました。
こういうサイトの作り方は是非マネして自分もしっかりスキルアップしておきたいので、技術的なところをちょっと調べてみました。
動きのあるサイトづくりや、サイトのリサーチ方法にご興味お持ちの方の参考になれば幸いです。
JSアニメーションライブラリ、GSAPとSnap.svg
どうやらロゴなど色々動かしている技術は、GSAPやSnap.svgというJavaScriptのライブラリを用いて実現しているようです。
どちらもJSでアニメーションさせたい時に有用で、以下のような特徴になっています。
- GSAP…色んな機能がひとまとめになった統合型のライブラリ。元はTweenLite/TweenMax/TimelineLite/TimelineMaxと分割されていたもの。
- Snap.svg…SVGをシンプルにアニメーションさせるライブラリ。メソッドがjQueryと似ている。Adobe製オープンソース。
AdobeのAnimateとかもたしかTweenMaxなど使っていたので、全体的にAnimateで制作されたのかもしれません。
実際にどの部分にどのライブラリが用いられているかというと、ファーストビューのビジュアルのロゴによる画像のマスキングはSnap.svgの技術が用いられていそうです。
各セクションでのふわふわと動く要素はCSSアニメーション。
背景のロゴ要素が散らばって浮かんでいるのは、canvasですね。このcanvasをスクロールに紐づけて動かしているのがGSAP、Animateとかでしょうか。。
深く深くソースを読み解けばわかるかもしれませんが、minifiedされているのでざっくりの見立てです。見当違いかもしれません。
とはいえこうして調べて自分ならどう実装するかなど考えるだけで勉強になります。
スペシャルコンテンツページの角度の変わった気合の入り方は株式会社LIGなんかに通じるものがありますね。
サイトの技術調査にはWappalyzer
サイトにどんな技術が使われているか調べるには、WappalyzerというChrome拡張機能を使うと便利です。
拡張機能を有効にしていると、見ているサイトで使われているプログラミング言語やCMS、JSライブラリ、フレームワークやサーバーなども分かります。
その他、デベロッパーツールにもアニメーションを検証できる方法があります。
参考になるサイトリサーチ力も大切
Webデザイナーたるもの、どこかに新しいイケてるサイトがないか、常にアンテナを張っておきたいものです。
私の場合、RSSリーダーでウェブサイト集を新着チェックして、好みのサイトがあればEvernoteにメモしています。
Webデザイナーにとっては必要なリサーチですね。
「RSSリーダー」とは、サイトが発信しているRSSフィードという新着情報をチェックできるアプリやサービスの事。
▼私が使っているのはInoreaderというサービスで、WebとアプリどちらもあるのでPCでもスマホでも同じフィードが見れて便利です。
Inoreader以外にも色々あるので、こういったツールを活用してリサーチ力をつけて、新しい情報をキャッチアップ出来るようにしておくといいですね。
▼参考になるといえば手元でササっと見れる良質見本。コンセプト別で参照出来て、制作前に非常にテンションの上がる本です。
Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集
▼WebクリエイターボックスManaさんの新書が今度発売されるということで予約受付中です。リサーチ！
ほんの一手間で劇的に変わるHTML&CSSとWebデザイン実践講座
最後までお読みいただきありがとうございました！
