今回の取り組みについて
デパートでは基本的に動きやアニメーションの提案はデザイナーが行います。コンペや動きの実装に重きを置いたページ制作の場合はこれに限りませんが、アートディレクターやデザイナーがデザインカンプ作成時に、表現企画に沿った演出の想定を考え、必要であればXDやアニメーション作成ツールにてプロトタイプをつくります。その企画を元にエンジニアは詳細をすり合わせながら実装を行います。
ただこの場合、アニメーションの実現可否がデザイナーで判断しづらい面もあり、思い切った動きをつけることが難しいという課題がありました。また、実装してみると想定していた工数を遥かに超えてしまうことも。
そこで今回は、エンジニア主体でアニメーション・演出を考えることで、デザイナー発信の表現設計では叶わなかった実装技術発信でのダイナミックな演出・表現を行うことを目的として、以前よりECサイトの構築で協力させていただいていた方波見牧場さんの精肉ブランド「やまの華豚」ブランドページを作成させていただきました。
また、弊社に実績のない構築方法を模索し、方波見さんがスマホメインのターゲットと言うことで、近年よく見られるスマホレイアウトをPCにそのまま活用するレイアウトにもチャレンジしています。
▼スマホベースのページをPCで流用したようなサイトの例
一般的なレスポンシブと比べ、PCはスマホのデザインを踏襲する形になるので、工数が抑えられるんじゃないか、という想定の元、どのくらい工数に差が出るかを測る実験的な側面もありました。
表現を企画する上で重視したところ
- 普段あまりデザイナーから提案の来ないような動きにしたい
- ブランドページということで、ただただ動きをつけるのではなく、サイトの雰囲気、ブランドコンセプトに沿った提案にしたい
一番最初に思ったのは、この二つでした。
エンジニアが主体でアニメーションを考えるといっても、サイトの雰囲気を損なうようなサイトにはしたくなかったですし、かといって普段デザイナーから提案されるような動きの真似事をしては今回の主旨に反してしまいます。
この2点をどうするか、最初は少し悩みましたが、すでにある方波見牧場様のECサイト、ロゴのコンセプト円＝縁から来ている、という部分からヒントをいただきました。 円が広がる＝賑やかな宴、縁が広がる様を表現できないかと思ったのです。
そこで、普段あまり使うことのないclip-pathでの要素の切り抜きやラインアニメーションを用いて円が広がる動きを全体に取り入れてみよう、という大体の方向が決まっていきました。
また、今回ページ制作の作業をエンジニア2人で分担することになったため、認識齟齬を減らすために絵コンテを用意しより具体的なイメージで実装してもらえるように心がけました。
▼共有した絵コンテ
実装方法
細かい動きの調整やスクロールに合わせたアニメーションの得意なライブラリ、GSAPを使用しました。
◆GSAP
また、紆余曲折あったものの、MVのエリアのアニメーションはGSAPの機能にあるScrollTriggerは使わず、通常であればスライダー実装に使うプラグインであるSwiperを使い、スクロール（＝mousewheelでの動き）を検知したタイミングで次セクションへ移るアニメーションが着火するような形をとりました。
進行上での苦労・反省点
ページ制作の進行、技術選定について
最初、スクロールアニメーションということでGSAPのScrolltriggerを用いて実装を行なっていました。
ただ、想像以上に調整が困難だったのが、スマホ操作での挙動がユーザーによってバラつく点でした。
【一つ一つのコンテンツ、要素を見える形、ユーザーの操作を阻害しない】×【アニメーションの出し方、表現方法】を考えた時に、GSAPのScrollTriggerだとスクロール量に依存してアニメーションが着火する仕様上、タイミングよく、心地よいスピード感でのアニメーションを実現が難しかったのです。
スマホのブラウザの仕様で、アドレスバーが伸び縮みするところでのガタつきや、素早くスクロールした時にバグっぽく見えてしまう挙動の調整がやりたい動きとどうしてもマッチせず、結果、完全にスクロールに連動した動き（GSAP、ScrollTriggerオプションのscrub）ではなく、一度のスクロールでアニメーションが着火するような仕様に変更することにしました。
そこで登場するのがSwiperです。
◆Swiper
Swiperは通常スライダーを実装する際に用いるプラグインですが、様々なオプションが用意されており、スライドが切り替わった時のコールバック関数の数も豊富で、一般的なスライダー実装だけではなく、１スクロールでページが切り替わるような動きをつけることも可能です。
1スクロールでページを切り替えるプラグインは他にもありますが、コールバック関数や実際の使い心地を過去に検証した結果、Swiperが使いやすいと思い採用に至りました。
スクロールした際のアニメーションの着火は透明なSwiperによるスライドをサイト全体に大きく設置、その上でスクロール＝スライドが切り替わるイベントを元に次のセクションへ切り替わるような仕様になっています。
Swiperに切り替えて実装を進めたところ、最初に想定していた動きに近いものができ、バグっぽく見えてしまっていた挙動もかなり安定させることができました。
shopifyでの留意点について
今回は動きの提案を先に進めてしまい、shopifyの開発環境外で開発を行なっていた為、shopifyに統合した際に共通パーツと共通ファイルのバッテイングが起こってしまう場面がありました。
通常であれば調査、テスト段階で、shopifyのassetsファルダの階層分けができないこともあるので、共通ファイルを考慮した、開発環境の設定が必要となってきます。
また、固定ページについては、/pages/任意スラッグ/の形でしか、URLは設定できないため、
先にページのURLが、この形式になることを先方と握っておく必要があります。
結果、まとめ
順番やタイミングが重要になってくるアニメーションの場合はGSAPだけではなくSwiper等のスライダーの仕様を組み合わせた実装にするのが良さそう
もちろん絶対にこの組み合わせで、ということではありませんが、Swiperのコールバック関数でGSAPのアニメーションを着火させた方が簡単かつ挙動も安定するようになり、何より工数も抑えられたような気がします。少しの動きであればGSAP、ScrollTriggerを使う方が良さそうなので、事前にどちらの方向で実装するかはじっくり検討しながら進めると良いでしょう。
事前に導入予定のCMSを加味したディレクトリ構成、環境を整えておく
今回はshopifyでしたが、他のCMSの場合でも統合の前提条件があれば、ディレクトリ構成を開発環境下に落とし込んだ上で進めておく方がよいでしょう。shopifyの場合だと、特に開発新工場で問題なければ、shopify CLIでローカル環境で構築が最適です。加えて、assetsファイル内で階層分けができないため、固有のファイル名でcss、jsファイルを作っておき、ハンドル名での条件分岐ができるようにしておくと良いでしょう。
SPの見た目をそのまま流用してPCを作成した場合工数は抑えられる
タブレット等の動きの想定は別で考える必要がりましたが、確かに工数は抑えることはできました。初めての実装方法だったので想定外のところで時間がかかってしまう場面がありましたが、mixin等を効率よく活用すれば次回以降の制作スピードは格段に上がってくるのではないかと思いました。
感想
今回エンジニア主体でアニメーションを考える形で制作を進めましたが、自分で考えた動きが後々首を絞めてきたり、構想の段階だと想定しきれなかった部分が多くありました。ただ、こういう動きにしてみたい、普段使わないこのプロパティを使ってみたい等、コーダーならではの発想でアニメーション制作を勧められたのはよかったと思っています。
今後の制作でも、クライアントの要望によってはエンジニア主体でアニメーションを考えるような体制、フローを確立していければと思います。