Webflow：要素のステートとは？

最近LikePay.devコミュニティで話し合ったことになりますが、今回は、Webflow要素（エレメント）のステート（States）の設定についてお話したいと思います。

Webサイトを見る時に、気づかないかもしれませんが、たくさんの要素には、もともとのスタイリングだけではなく、その要素をマウスオーバーした時やクリックした時の表示仕方があります。例えば、ボタンをマウスオーバーした時に、ボタンの色が変って、要素自体が上に上がることです。

それは、要素のステート（state）で設定します。

Webflowですと、その設定はとても簡単です。クラス名の隣にある矢印ボタンをおして、ドロップダウンからステートを選択して、スタイリングをするだけです！

でもそれよりも、Webflowで設定するステートの種類を一緒に見てみましょう！

Hover（マウスオーバー）

このステートは一番使われています。もちろん、Webサイトを見ている時に、マウスを使って、要素をクリックすることが多いです。マウスオーバーして、この要素を確かにクリックや他のアクションができるとインタフェースの中で伝えるために、Hoverステートを使っています。

例えば、上記の例のように、マウスオーバーした時に、ボタンの色が変わって、少し上に上がるという風にスタイリングできますね。

特にボタン、リンクなどクリックできる要素に対してHoverステートを設定することが非常におススメです。設定するおかげで、違和感のないインタフェースを作ることができます。

このHoverステートをどう設定するかは、もちろん、皆さんの自由ですが、一番よく使われているものをいくつか紹介します。

例えば、、リンクのHoverステートを設定する時に、もちろん、文字色を変更することができます。それは結構自然です。それ以外にタイポグラフィの設定を変えると、下の線を表示（又は非表示）にすることが自然な動きとして見られると思います。

場合によって、リンクのバックグラウンド色を付けることもできますが、それはどちらかというと、ナビゲーションバーで使えます。文章の中に入るリンクのバックグラウンド色を変えると、違和感を感じてしまうかもしれません。

そして、自分もよく使うHoverステートの設定ですが、単純にオパシティ（Opacity）を70~80%に下げることです。インタフェースの中で、文字色を少し変更することと同じく感じられます。

ボタンの場合は、設定の選択肢がさらに広がります。ここでは、問題なくバックグラウンド色を変えることができます。例えば、、もともとバックグラウンド色が透明であるボタンの場合、色を付けて、文字色を逆に白にするといいかとおもいます。

もともとバックグラウンド色の付いているボタンですと、その色を少し暗めにするといいかもしれません。

色以外に、トランスフォーム（Transform）の設定を使って、ボタンを上に持っていくと自然な動きを作れます。そして、Z軸の動きもいいかもしれません。そこにシャドウの変化も付けると、さらにカッコよく見えると思います。

これは、一番よく使われるパターンですが、もちろん、皆さんの考えたデザイン通りに設定をしてください。

Pressed（押された）

こちらのステートは、要素を実際にクリックした時のステートになります。言い換えると、要素をマウスオーバーして、押し続けている状態です。インタフェースの中、確かにこと要素をクリックしたと伝えるために存在します。

正直、あまり使われていない印象ですので、皆さんのこだわりでスタイリングしてください。こちらに関しては、おススメのパターンもあまり書くこともできません。

Focused（フォーカスされた）

このステートも非常に珍しいですし、逆に触らない方がおススメです。

いつ使われるかというと、パソコンにマウスやタッチパッドがなく、キーボードだけでナビゲーションする時です。その場合、キーボードのTabを押すと、順番で一つずつの要素がフォーカスされていきます。ボタンやリンクですね。フォーカスされた状態でEnterを押すと、そのリンク先に飛ぶようになります。

非常に珍しいステートですし、ブラウザごとにデフォルトで設定されていますし、逆に変更すると違和感が出そうな気がします。

Visited（訪問済み）

こちらは、もう既に訪問したリンク先を強調するために使われる要素のステートです。Googleの検索検索では、非常に使われています。既に訪問したことあるリンクが紫色になることです。サイト内にも同じく設定することができると思いますが、自分はほとんど使っていません。

Current（現在）

このステートは、ナビゲーションバーやフッターでよく使われています。リンク先のページを開いて、そのリンクにCurrentステートが自動的に適用されます。

だいたいいつもHoverステートと同じような設定にしています。「ここのリンク先は、現在開かれたページですので、クリックしても何も起きない」ということをインタフェースの中で伝えるために使っています。なので、Hoverステートと一緒にして、マウスオーバーして、何も変わらないので、ここを押せないという印象が付きます。

こちらは、、だいたい全ての一番よく使われるステートになります。皆さんのデザインでは、是非設定してみてください！

そして、是非トランジションも設定して、ステートの変化スムーズにしましょう。