アドベントカレンダー21日目は、エンジニアの髙木です。
今回のアドベントカレンダーを機に、以前から気になっていたノーコードツール「Framer」を触ってみました。
この記事では、アニメーション設定を中心に、Framerでどのような表現ができるかを備忘録として記録しています。実際に触れてみてよかった点や苦戦した点などについてもまとめました。
ぜひご覧いただけると嬉しいです。
Framerとは？
Framerは、ノーコードのWebサイト制作ツールです。
neccoでも使用しているデザインツール「Figma」とUIが似ており、直感的な操作が可能です。プログラミングの知識がなくても、ウェブサイトを公開できるのが特徴です。
普段からFigmaを使用している、neccoのデザイナーメンバーであれば、すぐに使いこなせそうだと感じました🎉
デスクトップアプリは私の環境だと落ちる頻度が高く、現在はブラウザ版を使用しています。ブラウザ上で操作できるためとても手軽に試すことができます。
代表的なアニメーションEffectsの種類
Effectsの種類が豊富で、デフォルトのアニメーション設定を使用するだけでも動きのあるリッチなウェブサイトを作ることができます。
Framerだけで設定できるEffectsを比較して試してみました。
Text Effects
Effects > Text でテキストアニメーションを設定することができます。
以下の検証例は、Framerで用意されているPresetを適用し、比較用にアニメーションの速度（Time）を変えています。
テキストアニメーションは共通して、PerをCharacterに設定し文字を分割しています。
Perの種類について
Perの設定を変えることで文字の分割方法を変更することができます。
設定は「Character（文字）」「Word（単語）」「Line（行）」「Element（要素）」が選択できます。
「Line」と「Element」の違いがとても分かりにくいですが、Perの設定で、以下の設定例のように印象を変えることができます。
普段はJavaScriptやGSAPなどのフレームワークで設定することが多い文字分割も簡単に設定することができます。
Loop Effect
ループするアニメーションを設定したい場合は、Effects > Loop を設定します。
Mirrorを選択すると、初期位置に戻る時もアニメーションが付与され、より自然なアニメーションにすることができました。
Scroll Speed
パララックスにしたい場合は、Effects > Scroll Speed で設定できます。
Scroll Speedを利用することで、比較的簡単にパララックスを表現できます🎉
以下のように特定の枠内で画像のScroll Speedを変更することも可能です。
枠内で画像のScroll Speedを変更する場合は、画像の表示位置によっては背景が見えてしまうことがあります。画像の初期設定位置や高さ、スピードには注意が必要です。
コンポーネントを使用したホバーインタラクション
Componentを作成して、「Hover」や「Pressed」したときのインタラクションを設定します。Componentは、左のサイドバーのAssets > 「＋」マーク > New Componentから追加できます。
コンポーネントが作成できると、以下のようにコンポーネントを管理する画面に切り替わります。
一番左上のフレームがコンポーネントのデフォルトです。
Variantを追加する場合は、右の「Variant」を追加していきますが、ホバー設定を追加したいため、コンポーネントの下にある、「Hover / Pressed」をクリックして追加します。
「Hover / Pressed」をクリックすると、以下のどちらを設定するか選択肢が表示されるので、任意の設定を選択します。
- 「Hover」：コンポーネントをホバーした時
- 「Pressed」：コンポーネントをクリックした時
あとはお好みのEffectsを設定し、ホバー（またはPressed）のインタラクションを設定します。
Overlaysを利用して、メニューの出現を設定する
「Overlays」というプロパティを使うと、以下のようなメニューの動作を再現できます。
メニューボタンは、コンポーネントを作成し、開いている間のcloseボタンはVariantで作成しています。
メニューボタンを選択した状態でOverlaysをクリックし、追加するコンテンツのposition（relative or fixed）を選択すると、編集レイヤーが追加されます。
追加されたOverlayレイヤーの中に、メニューなど表示したいコンテンツを追加すると、ボタンをクリックするとコンテンツが表示される仕組みを作成できます。
メニューに出現アニメーションをつける場合は、Effectsを使って設定します。今回はPresetを「Slide In Right」に設定し、右から表示されるようにしました。
詳しい設定方法は、Framer公式でも操作ガイドを掲載しているので、合わせてご覧ください。
Framerを使ってみて感じたこと
私自身、普段コードで実装することが多いので、毎回ノーコードツールを使用する際は戸惑い、思い出すところからのスタートになるのですが、Framerは、FigmaのUIととても似ているのでFigmaを使いこなすデザイナーの方がすぐに使いこなせると感じました🎉
良いと思った点
- 文字分割の設定が簡単（普段は、JavaScriptやGSAPなどのフレームワークを使うことが多いため手軽で感動…！！）
- デフォルトで用意されているEffectsのPresetだけでもいい感じのアニメーションをつけることができた。
- Overlaysの設定方法が最初よくわからなかったが、公式のガイド動画で確認することができた。他にもガイドがあり親切。公式ガイド（動画）はこちらから。
- Figmaに慣れていればすぐに使いこなせる🎉
- A/Bテストができるため、ページごとにパターンを使って検証が可能✨
設定で苦戦した点
- Scale設定でX軸、Y軸を個別に選べない点。X軸にのみ変化させたいアニメーションなどは、widthで調整した。
- ダッシュボードは英語のみで、CSSと名称が異なるプロパティなど（例：「duration」→「time」など）は、少々戸惑った。
- Studioのように積み上げるレイアウト構成ではないため、position関連の感覚を掴むのに苦戦した。
- パララックスの設定では、画像の背景がチラ見えしてしまうことがあるので、初期位置やスピードには注意が必要。
さいごに
普段はCSSやJavaScriptなどでアニメーションを設定することがほとんどですが、Framerはデフォルトで用意されている設定のみでも、さまざまなパターンのアニメーションを作成することができました🎉
現在、neccoでは、Framerを使った実績はありませんが、今後お問い合わせがあった場合に対応していけるようキャッチアップは続けていきたいと思います。
今年のアドベントカレンダーも残すところあと4日です！
明日のnecco Noteもお楽しみに🎄
