サイトに遊び心を入れられるトグルスイッチ【８選】

トグルスイッチはUIエレメンツの中で目立つものではありませんが、確実に平凡なものを面白くします。トグルは使われる前はスイッチが使われており、オンオフを切り替えていました。トグルはデザイナーがwebサイトに合わせてUIを自由にカスタマイズできるようにします。チェックボックスをよりまとまったものにします。また、マイクロインタラクションを統合する上でも役立ちます。

 

トグルスイッチはシンプルなところからどんどん進化しています。今日は、実用性がありながら楽しいものをいくつか紹介します。

 

 

Zoom-Zoom

このスイッチはレーストラックから影響をうけています。シンプルなエレメントがもっとブランドのあるメッセージを持つことができる例です。ユーザーへニュースレターのオプトインを促すことを想像してください。この手間でユーザーに必要なモチベーションを高めることができます。

 

See the Pen
Tire Toggle by Jon Kantner (@jkantner)
on CodePen.

 

 

Different Strokes

わずかなCSSで最大限までできることを証明してくれているのがこのトグルです。「skewed」「flip」に注目してください。直感的に操作できるようになっています。

 

See the Pen
Pure CSS toggle buttons by Mauricio Allende (@mallendeo)
on CodePen.

 

 

Built for Bootstrap

トグルのコレクションです。様々なサイズやOn/Offのラベルを使うことができます。他の要素のように、わかりやすいラベルは必須です。そのため、明確になっているかの確認をしましょう。

 

See the Pen
Bootstrap Button Toggle (On/Off Switch) by Aanjulena Sweet (@aanjulena)
on CodePen.

 

 

Bear with Us

一番実用的ではないかもしれませんが楽しいのはこれです。熊の鼻がトグルになっています。そして熊はその方向を見るのです。瞬きなど小さなところにまで非常に凝った作りです。

 

￥See the Pen
CSS Bear Toggle by Anastasia Goodwin (@agoodwin)
on CodePen.

 

 

Press the Button

トグルスイッチは平行にスライドするものだけではありません。プッシュするタイプのものもあります。ユーザーにとっては非常にわかりやすいものとなっています。これはクリックやタッチを行うだけで決定を表示することができます。

 

See the Pen
On/off toggle switch by Anastasia Goodwin (@agoodwin)
on CodePen.

 

 

Day and Night

コンセプトをわかりやすくするトグルを使うのはどうでしょう。スイッチをクリックすると夜から朝にアニメーションが変わります。オンラインの仕事で日勤か夜勤を決めるときなどに非常に役に立つのではないでしょうか。そんなことないですか？私だけ？

 

See the Pen
Day And Night Toggle by Chris Gannon (@chrisgannon)
on CodePen.

 

 

Tell Me How You Really Feel

最近、絵文字は日常会話を侵食していますよね。そしてその使い方によって効果は左右されます。このスイッチは遊び心があって楽しいですが、このフォームを支配される前に逃げておきましょう！

 

See the Pen
Responsive Emoji Toggles #CodePenChallenge by George W. Park (@GeorgePark)
on CodePen.

 

 

Collect Them Al

最後に、様々な種類やアニメーションのエフェクトの一覧です。プロジェクトにあったものが見つかるはずです。

 

See the Pen
Toggle Buttons by Vineeth.TR (@vineethtrv)
on CodePen.

 

 

まとめ

どうしてトグルスイッチが便利で多彩なのかに紹介してきました。チェックボックスでは出せない印象を与えることができるようになります。いろいろ試してフォームの性能を上げてみましょう。