フラットだけどhoverで出っぱってon_clickでへっこむボタンジェネレータ作った - 2.5dBUTTON
昨年の今頃に作ったのだけれど、完成したらなんとなくどうでもよくなってしまってその後すっかり存在を忘れていた。これからはフラットデザインがどうのこうのと騒がれてた時期だったと思う。今更もういっかなとためらいもしたけど公開しておいた。
こんなの。
GIF動画なのでフレームレートは低いけど、大体こんな感じ。形状・色・アニメーションのスピード、出っ張る距離がカスタマイズできるジェネレータを用意した。気に入ったのができたらZIPでDLできる。
作るに至った経緯
ボタンを押すとヘっこむ振る舞いは、ユーザの物理的なマウスクリックやキー押下の感触とは一致していたのだけれど、クリック感の無いタッチ端末が登場してからは、そこに多少の違和感を覚えるようになった。これを解消し、触れるという行動に一先ず最適化したのがフラットデザインなのかなと勝手に思ってるのだけど、デバイス別に用意するのではなくハイブリッドに使えるものはないのかなと思ったのがきっかけ。
たとえばiOSのSafariではタッチするとhoverに指定した挙動を再現する。これでは良くないのでタッチデバイスで読み込んだ場合(*1)は何の変哲もないフラットなボタンとして振る舞うようにした。余計なことを考えずともレスポンシブサイトなどに利用できるはずなので幾らか便利かなと思っている。
(*1 Modernizrで取得)
アイコンフォントを使ってる
アイコンは画像ではなくkudakurage氏のLigature Symbolsを利用している。フォントなので拡縮にもジャギらず対応し、色の変更も自由なので「icon_arrow_white_2x.png」みたいなものを量産しなくていいのでありがたい。かつてのアイコンフォントといえば、アイコンの持つ意味とは無関係な一文字にそれぞれ割り当てられていたが、これは文字列を置換する仕組み（例:download→ダウンロードアイコン）なのでとてもセマンティック。最近のIEなら対応しているし、レガシーIEユーザもだいぶ数が減ってきているのでメンテナンス性を考えると選択してよいんじゃないのと思う。
よかったらつかってくださいね。
とはいえ、一年前につくったものはやっぱり飽きてしまってるので近頃はレガシーIEにもスムーズにデグレードできるモダンくさいUIを作ってます。
