篤史CSS176291168マイクロインタラクションは、ボタンのタップやポップアップの表示、フォーム入力時のアテンションなど、ユーザーの行動やトリガーによって起こるアクションです。単なるアニメーションではなく、ユーザビリティを向上させ、またユーザーに楽しい体験を与えることでWebサイトやサービスの利用を手助けします。FacebookやTwitterの「いいね」ボタンや、タイムラインの更新、新しい通知がある場合のアラートの表示など、さまざまなケースで使用されています。多様なマイクロインタラクションを一から自作するのは大変手間がかかるものです。本記事ではコピー&ペーストで導入でき、改変もしやすいCSSで表現したマイクロインタラクションを紹介します。こちらは筆者が制作したもので、商用・個人問わず無償利用できるMITライセンスで公開していますので、Webサイトやコンテンツ制作にご活用ください。「メニュー」と「閉じる」アイコンの変形アニメーション3本線で表現されている「メニュー」アイコンが、「✕」アイコンに変化するアニメーションです。マウスを乗せると線が変形し、「✕」アイコンへと変化します。上下の線を回転させて対角線を作り、真ん中の線を少し回転させながら消しています。上下の線をそのままの斜線にしてしまうと、元のアイコンより大きめのサイズ感になってしまうため、若干線を短くして調整しています。rotate(135deg);}円形ボタンのホバーアニメーション中心にアイコンがある、円形ボタンのホバーアニメーションです。ハートが回転しながら色が変わり、背景の円は透過しながら回転する点線へと変化します。ハートの回転はtransformのrotate3dを使って、奥行きのある自然な回転を表現しています。円の回転はtransitionではなくanimationを使い、オプションにinfiniteを設定することで永続的なアニメーションを実現しています。}}チェックマークのアニメーションチェックマークが描かれるアニメーションです。線で円を描き、その後背景を塗り潰しながらチェックマークが現れます。線を描くアニメーションは、背景と同じ色の矩形を上に重ねて線を隠し、線が徐々に見えるように矩形を回転させて表現しています。塗られる動きは内側に向かって線を太くすることで表現していますが、borderでは外向きにしか線が描けないためbox-shadowで代用しています。}}揺れるローディングアイコン「LOADING」の文字の回りを、不規則な形の背景がゆらゆらと回転するローディングアイコンです。ゆらめく表現は、正円を少し変形させて楕円形にし、さらに変形点を中心から若干ずらした状態で回転させます。それを3つ重ねてそれぞれ違う速度で回転させると、不規則で揺れているような動きが実現できます。「LOADING」の点滅は、animationと@keyframesを使って透明度を連続して変化させています。透明度が不規則な変化になるように値を設定するのが、味のある点滅にするポイントです。}}まとめ近年Webサイトやアプリケーションの制作には、マイクロインタラクションは不可欠なものとなっています。今回は簡単に導入できる形で紹介しましたが、コピペで使うだけでなく、コードを読んでロジックを理解すると知らなかったテクニックなど新しい発見があるはずです。この記事で紹介したマイクロインタラクションが自分のものになるように、ぜひソースコードを読み解いてください。ウェブのアニメーションを「いい感じ」に魅せるズルいテクニック」にて役立つテクニックを紹介しています。アニメーションの勘所がつかめるので、あわせてご覧ください。紹介したデモとソースコードは以下からまとめて確認できますので、ご参考ください。平成31年2月19日に内容をメンテナンスしています。フォロークリエイティブディレクター。最近はゲームアプリの企画/ディレクション/UIデザインなどを主な業務としています。3.0ライブラリ「Tween24」等を開発。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。