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

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


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

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

この記事を保存

メールアドレスを入力すれば、この記事のURLをメールで送ります。

フォーム送信することでプライバシーポリシーに同意するとみなされます。

ありがとうございます!フォームが送信されました。
送信中にエラーが発生しました

最近の記事

テキストが空でクリックできない時の対処法

テキストが空でクリックできない時の対処法

テキストを入力している際に、文字を全部消してしまい入力方法がわからなくなった経験はありませんか? この問題の解決策はとても簡単です。

ノウハウ
NoteのクローンをWebflowで作れる?

NoteのクローンをWebflowで作れる?

Noteのような、記事を投稿できる会員サイトをWebflowとその関連なノーコードツールを使った実装方法の紹介

ノウハウ
Webflowサイト公開前チェックリスト15選!

Webflowサイト公開前チェックリスト15選!

サイトを公開する前にチャックしないといけない忘れがちな項目の15選!説明付です!

豆知識
動画教材数が100本を達成

動画教材数が100本を達成

LikePay.dev Academyの動画教材数が100本を達成したことをお知らせします。

ニュース