プログラミング

プログラミング

楽しくて実用的なアニメーション付きトグルスイッチのCSSスニペット集

speckyboy

Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web.

本記事は、8 Tip-Top Toggle Switch CSS Snippets
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

    1,503 views

    読了時間 : 約4分20秒

    トグルスイッチは、フォーム内で一番目立つ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フレームワークで使用するためにデザインされています。利用可能なサイズが沢山あることと、「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.

     

    Flip the Switch

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

     

     

     

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

     

     

     

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

     

    おすすめ新着記事

    おすすめタグ