【日本語版Webflow University】 インタラクションの概要

この投稿はWebflow社が提供する「Intro to Interactions」の内容を元に作成しています。

引用元：https://university.webflow.com/lesson/intro-to-interactions

日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。

‍

‍

Webflowのインタラクション機能を活用して、ノーコードでダイナミックなデザインや、UXに優れたサイト構築を行うための、概要を解説します。

通常、JavaScriptやCSSを用いたコーディング作業が必要であり、学習コストの高いインタラクションの実装も、Webflowであればノーコードで視覚的に実装することが可能です。

‍

インタラクションはサイトを閲覧するユーザーの使い勝手を向上させるために非常に有効な手段です。

正確な操作を誘導し、スクロールやページ遷移など次のアクションを予想させ、サイトの離脱を防ぐなど、その役割は多岐にわたります。

また、企業やプロダクトのブランディングも図れることから、現代のWebサイトにとって実装必須となる手法です。

従来、インタラクションを実装するには特殊なJavaScriptライブラリで構築されることが多く、

これらのリソースは非常に特殊な JavaScript ライブラリで構築されることが多く、扱いの難しいプラグインを必要とするため、インタラクションの実装スキルの学習コストは非常に高いものになっていました。

しかし、Webflow では、インタラクションを視覚的に構築する（まるでpptのアニメーションの様に）だけでなく、コンテンツを非常に細かく制御するために必要なすべての機能が備わっています。

一言メモ

他のノーコードツールと異なる点は「Webflowではインタラクションを自作できる」ということです。通常のノーコードツールでは、標準機能で定められたインタラクションを個々に設置していくイメージですが、Webflowはあらゆる動きを複雑に組み合わせ、タイミングや時間の長さなど細かく数値で制御できるため、Webデザイナーの意図するインタラクションを実装することができます。

Webflowで実装できるインタラクションの概要

Webflowはトリガーとアニメーションの2つのステップで様々なインタラクションを実装出来ます。

トリガーとは、「クリック」「スクロール」「マウスホバー」「マウス操作」「ページロード」などアニメーションを起動させるきっかけとなるユーザーアクションを指し、アニメーションとはトリガーによって起動されるインタラクティブなサイトの動き自体を指します。

アニメーションは次のような動きをWebサイトの要素単位で設定することができます。

＜単純動作＞

• フェード
• スライド
• フリップ
• グロー
• シュリンク
• スピン
• フライ
• ドロップ

＜強調動作＞

• ポップ
• ジグル
• パルス
• ブリンク
• バウンス
• フリップ
• ラバーバンド
• ジェロ

一言メモ

当社ではアニメーションのニーズをお伺いする際に、下記サイトで挙動についての打ち合わせを行っています。

動くWebデザインアイデア帳

一般的なノーコードツールとは違い、仕様に制限される範囲が狭いため、こうした自由なご提案・検討ができるのも、Webflowのインタラクションの強みです。

‍

まとめ

いかがでしょうか。

当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。

以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。

ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。

Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。

今後とも宜しくお願い致します。

‍

Webflowとはなにか？についてはこちらで解説しています。合わせてご覧ください。

‍Webflowについての基本的な使い方について解説した他の記事はこちらからご覧ください。

Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。

‍