Studioのアニメーションを移行先で再現する手順は？
Studioではパネルで「通常時」と「ホバー」「出現時」などのスタイルを並べるだけで動きが付きました。一方、移行先では同じ動きをコードで書くことになります。Studioにはサイト全体のHTMLコードを外部へ出力する機能がありません。
作業の流れは次のとおりです。
- 公開サイトで動く要素を洗い出し、ホバー・出現時・スクロール連動のどれにあたるかを書き分ける
- Chromeの開発者ツールで、動きの時間や遅延を低速再生しながら確かめる
- Studioのエディタを開き、要素ごとのイージング・時間・遅延の値を控える
- 移行先でCSSのtransitionや、必要ならJavaScriptで書く
- 元のサイトと並べて、動き出しと戻りを見比べる
Studioの動きは、通常時のスタイルと特定の条件を満たしたときのスタイルという、2つの状態の差分によって組み立てられています。変化の緩急を決めるイージング、変化にかける時間、開始までの遅延という3項目を調整する仕組みです。この設定項目は、Web制作で広く使われるCSS transitionの指定内容とそのまま対応しています。
調べるときはDevToolsのAnimationsパネルが便利です。CSSアニメーションやトランジションは拾えますが、requestAnimationFrameで動かしているものは表示されません。読み込み直後に始まる動きは、パネルを開いたまま再読み込みすると記録できます。
もうひとつ忘れやすいのが、元に戻るときの動きです。Studioでは通常時のスタイルに付けた設定が、ホバーが外れて元の見た目へ戻る動きに使われます。行きと戻りで速さが違うこともあるので、カーソルを外した瞬間まで見ておきましょう。
Studioのホバー時のアニメーションはCSSでどう書きますか？
Studioではパネルの数値を変更するだけで作れていたボタンのホバーを、CSSではどう記述すればよいのかと戸惑う声は少なくありません。Studioで設定したホバー演出は、CSSの通常ルールと「:hover」という擬似クラスを組み合わせ、そこにtransitionプロパティを指定することで再現できます。通常時のスタイルに初期の背景色や文字色を書き、:hover側にマウスカーソルが乗った後のスタイルを記述します。そして通常側の記述にtransitionを加え、変化させたいプロパティ名、変化にかかる時間、イージング、遅延時間を指定する流れです。背景色と変形など複数のプロパティを同時に動かしたい場合は、カンマで区切ってプロパティごとの設定を並べます。
移行前に確かめたいのが、ホバーと（in）ホバーの使い分けです。ホバーはボタン全体の変化、（in）ホバーは親のボックスにカーソルが乗ったときに中のテキストやアイコンだけを変える設定でした。CSSでは後者を.card:hover .icon { ... }のように、親のホバーをきっかけに子を指定して書きます。どちらで作られているかを見ずに書き始めると、アイコンだけ動かない、といったズレが出やすいですね。
あわせて、端末で「視差効果を減らす」などを選んでいる人への配慮も入れておきます。@media (prefers-reduced-motion: reduce)は条件を判定するだけなので、その中で動きを止めるスタイルを書かないと動きは残ります。transition: none;を入れるのが手軽な書き方です。
Studioのスクロール時に表示されるアニメーションはどう再現しますか？
画面をスクロールして要素が視野に入ったとき、下からふわりと浮き上がる演出はどのように再現すればよいでしょうか。Studioでは条件付きスタイルの「出現時」を選択し、縦方向の移動距離と不透明度を組み合わせることでこの表現を作っています。移行先で同じ効果を出すには、ブラウザのIntersectionObserverとCSSのtransform、opacityを連動させる手法が適しています。
IntersectionObserverは、対象の要素が画面の表示領域に入ったかどうかを非同期で検知する仕組みです。基準となる表示領域をnullに設定するとブラウザの画面全体が基準になり、thresholdで「要素が何割見えたら処理を起こすか」という境界値を指定できます。
監視対象が画面に入ったら、JavaScriptでその要素にクラスを付け、CSSのtransformとopacityを切り替えて表示させます。一度だけ表示させたい場合は、クラスを付与した直後にunobserveを実行して要素の監視を解除しましょう。画面を行き来するたびに何度もフェードインを繰り返したいときは、監視を継続させて交差状態の出入りに合わせてクラスを付け外しします。
動かすプロパティは、できるだけopacityとtransformに絞ります。この2つは描画の最後の段階で処理しやすく、marginやtopを動かすより滑らかになりやすいからです。
もっとも、Studioのエディタでも出現時のフェードインとは別に、スクロール量に連動して動き続ける条件設定が存在するため、単なる登場演出なのかスクロール連動なのかを事前に切り分けて実装に入ります。
Studioのアニメーションの代わりにGSAPを使うべきですか？
たとえば、スクロールに合わせて背景の画像がゆっくりずれ、その上で見出しと本文が順番に現れるトップページ。こうした演出なら、GSAPのScrollTriggerが向いています。特にGSAPのScrollTriggerプラグインを使うと、スクロールバーの進行とアニメーションの再生度合いをscrub機能で直接同期させることが可能です。タイムライン機能を使って複数のアニメーションを連結し、精密な時間差で再生するような表現も整ったコードで書けます。
一方で、ボタンの色が変わる、カードが少し浮く、といった状態の切り替えはCSSで十分です。クラスの付け外しだけJavaScriptで行い、動き自体はCSSに任せる書き方もできます。前の見出しで書いたフェードインがまさにこの形でした。
JavaScriptのライブラリが必要になるのは、動きを途中で止める、一時停止する、逆再生するといった細かい操作がしたいときです。もうひとつ、移行先ですでにGSAPを使っているかどうかも関わります。テーマや他の部品が読み込んでいるなら、追加の負担は小さく済みますね。
ScrollTriggerはGSAP本体のコアファイルには含まれておらず、利用時には別途読み込みやインポートの記述が必要です。移行前にStudioの設定を見直し、ホバーと出現時のフェードインしかないならGSAPは入れず、スクロールに連動する演出があるページにだけ読み込みます。
Studioのテンプレートのデザインを移行先で再現しても著作権上問題ありませんか？
購入したテンプレートで作ったサイトを、別のサービスで同じ見た目に作り直してよいのでしょうか。Studioの利用規約では、テンプレートの知的財産権は出品者のものとされ、利用料を払ったユーザーには複製や改変を含む非独占的な利用権が認められています。ただ、Studioの外で同じデザインを作り直してよいかまでは書かれていません。
この点は、テンプレートを作ったデザイナーに直接聞くのが早道です。Studio.Storeも、購入したテンプレートの不明点はデザイナーへ相談するよう案内していました。
また、Studio.Storeで配布されているテンプレート内の画像やフォントには、テンプレート本体とは異なる個別の利用条件が定められているケースもありますね。
逆に、自分で一から作ったサイトなら、ユーザーが作ったコンテンツとサイトの権利は、Studioのサービス内にある素材単体の部分を除いてユーザーにあります。
文化庁の解説では、単なるアイデアやありふれたレイアウトなど著作物にあたらない表現は自由に利用できるとされていますが、創作性のあるデザイン表現は著作物として保護されます。しかし、どのレイアウトが「ありふれた表現」にあたるかは個別に決まるもので、画像を差し替えれば大丈夫、とも言い切れません。他人の著作物を利用する際は、法律上の例外規定に当てはまらない限り、権利者の許諾を得るのが原則です。テンプレート由来の部分は、出品者の許可を取ってから作り直します。