CSSで作れるユニークなバッジのコードスニペット8選

ソーシャルメディアからGoogleマップまで、バッジはWeb上のあらゆるところに使われています。この記事を読んでいる瞬間にも、スマートフォンの画面上下にバッジが表示されていませんか？

一口にバッジといっても、プレーンなものからアニメーション化されたものまで、その種類はさまざま。サイズは小さくても、ユーザーの目をおおいに楽しませてくれます。

今回はデザイナーによるバラエティ豊かなバッジのアイデアを、実例とともにご紹介します。さまざまなスタイルや技術レベルに対応しているので、きっと活用できるものが見つかるでしょう

1. コレクション欲をくすぐる六角形

See the Pen Hexagon Badges with Font Awesome icons by Olivia (@oliviale) on CodePen.

はじめにご紹介するのは『Font Awesome』のアイコン／バッジ。アイコンとタイトルを組み合わせてバッジを手軽に作成できます。

上記のコードスニペットは、人気のアイコンフォントライブラリを含む六角形のバッジ。カラフルでなめらかなデザインに、コレクション欲をくすぐられます。

2. シンプルで穏やかな風景のアニメーション

See the Pen Dribbble Recreation: Berlin Badge by Antoinette Janus (@internette) on CodePen.

次にご紹介するのは、シンプルで美しいアニメーションつきのバッジ。テレビ塔を中心に、ベルリンの風景が描かれています。

レトロカラーのグラデーションと穏やかなアニメーションが絶妙にマッチしており、細部へのこだわりが見られます。

3. 昼と夜で色をスイッチ

See the Pen Tatooine Badge by LukyVJ (@LukyVj) on CodePen.

このバッジが制作されたのは数年前ですが、その魅力はまったく衰えていません。

スターウォーズをテーマにしたこの作品のポイントは、多くを詰め込みすぎずにシンプルに仕上げているところ。色が切り替わる「ナイトモード」でユーザーを楽しませてくれます。

4. デザイン言語でバッジに意味を

See the Pen Material design verified badge by Rasmus Bergström (@af_bergstrom) on CodePen.

Googleのマテリアルデザインは、デザイナーにとても大きな影響を与えています。

こちらはデザイン言語にインスピレーションを得て制作された、「認証済み」を意味するバッジ。色と影を適切に使うことによって、視覚的に何を意味するか分かりやすいデザインになっています。

5. オンカーソルで星がダンス

See the Pen SCSS Star Badges by Joey Hoer (@joeyhoer) on CodePen.

きれいなガラス細工をもらって嬉しかった少女時代。あの頃の気持ちを思い出させてくれるのが、この星型のバッジたちです。

カーソルをあわせると小刻みに動く様子は、まるで星がダンスをしているよう。

6. きらめくホログラム

See the Pen Batman holographic badge ? by pixelmort (@guyom) on CodePen.

バットマンに憧れるデザイナーにおすすめしたいのがこちらのバッジ。

カーソルをあわせると、背景がホログラムのようにきらめきます。お菓子などについてくるシールを思わせる、ワクワクするデザインです。

7. ふわふわ漂うUFO

See the Pen Contributor badge flip exploration by Chris Johnson (@ChrisJohnson) on CodePen.

このなめらかに動くUFOのバッジは、オンラインコミュニティに貢献した人へのリワードとして制作されました。

カーソルをあわせると、宇宙人を乗せたUFOが動きだします。宇宙人のまばたきなど、細部にもこだわっています。

8. バッジの中に広がる風景

See the Pen Landscape Badge CSS Animation by Christine Clark (@chrstnclark) on CodePen.

こちらのバッジのテーマは「旅」。最初に表示されるのはなにもない風景で、はじめはなにが描かれているのかもわかりません。

しかしオンカーソルすると、アニメーションが横にスライドしていき、さまざまな要素があらわれます。ほかの例とは異なったアプローチですが、効果的にユーザーの注意をひくデザインです。

バッジでWebをおもしろくしよう

バッジは、ユーザーに小さな幸せを届け、感情を揺さぶります。「千里の道も一歩から」というように、小さな目標をクリアしていくことは、その先の大きな成功につながっています。その「一歩」を手助けしてくれるのがバッジなのです。

また、バッジはユーザーを楽しませる存在でもあります。ユニークでクリエイティブなデザインは、ユーザーの意欲を高めるだけでなく、ユーザーの目を楽しませ、一日をすこしハッピーにできるはずです。

今回ご紹介した例を参考に、ユーザーに愛される、ユニークなバッジを制作してみてください。

（原文：Eric Karkovack　翻訳：Asuka Nakajima）