Webflow:要素のステートとは?

2020-10-11
ノーコード
Web
デザイン

最近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ステートと一緒にして、マウスオーバーして、何も変わらないので、ここを押せないという印象が付きます。


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

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

最近の記事

全ての記事

Webflowをやるなら、知っておくべきツール「Jetboost」の紹介

WebflowのCMSを強くパワーアップするJetboostで実装できる機能を紹介します。本格的なサイトを作りたいなら、このツールは必見!

豆知識

新コース「Webflow高度なスタイリング」が登場!

新しい「Webflow高度なスタイリング」では、細かいデザイン設定について一気に学べます!

ニュース

セキュリティに関する表示を掲載

アカデミーのセキュリティ取り組み特別なページでまとめました

ニュース

キャリアのレベルUP!
アカデミーに
入学しよう

今まで「自分には無理」だと思っていたことが、ノーコードで簡単に可能に!
手の届かなかったシステム開発が出来るようになるノーコードのスキルをオンラインで。
好きな時間、好きな場所で学んで、キャリアアップや起業を目指そう!

学習センター