単純なトグルスイッチを実用性はそのままに魅力的に変えるCSSスニペット集

トグルスイッチは、フォーム内で一番目立つUI要素というわけではないかもしれませんが、つまらない作業を面白くするということに関しては、おそらく他のどの要素よりも貢献してきました。トグルがまだなかった頃には、私たちは、チェックボックスを使用して、オン・オフを切り替えていました。作業を終わらせるにはそれで十分でしたが、見た目はそれほど魅力的ではありませんでした。

 

 

一方トグルスイッチは、デザイナーにウェブサイトの他の部分とマッチするように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.

 

 

 

 

 

 

Build for Bootstrap：Bootstrap向け

 

このスイッチのコレクションは、Bootstrapフレームワークで使用するためにデザインされています。利用可能なサイズが沢山あることと、「OFF / ON」のラベリングの分かりやすさを自身で確かめてみてください。他のフォーム要素と同様に、はっきりしていてわかりやすいラベルはトグルにも必須です。

 

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

 

 

 

 

 

Bear with Us：クマの動きが可愛い

 

最も実用的なトグルスイッチというわけではないかもしれないが、紛れもなく創造的で楽しい実例です。クマの鼻はトグルすることができ、反対の方向へ顔を向けさせることができます。ウィンクする目も含めて、絶妙なデザイン感覚が、このスイッチを1つにまとめています。

 

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 All：トグルスイッチのセット

 

最後に、さまざまなスタイルとアニメーション効果を備えたトグルコレクションがあります。 この魅力的なセットには珍しいことは何もありませんが、あなたは次のプロジェクトに合ったものを見つけることができるはずです。

 

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

 

結論

ここまでに紹介してきたスニペットは、トグルスイッチがどのように有用であり、信じられないほど汎用性があるかを示しています。 チェックボックスには勝ち目がないという印象を与え、創造性鍛える機会を提供してくれています。 時間をかけて実験し、これらの要素がフォームをさらに強化するのを確認してみてください。

 

 

 

※本記事は、8 Tip-Top Toggle Switch CSS Snippetsを翻訳・再構成したものです。

 

 

 

▼こちらの記事もおすすめです！