フリーランスの月商10万円、50万円、100万円の壁の攻略方法
- お金
- コラム
- ビジネス
カード型UIは、商品一覧からブログ記事のフィードにまで活用できる、汎用性抜群のデザインです。
そんなカード型UIと相性がいいのが、マウスカーソルを合わせると変化が起きる「ホバーエフェクト」。見た目を魅力的にするだけでなく、UX向上にも役立ちます。
今回は、カード型UIにクールなホバーを実装した8つの事例をご紹介します。
目次
シンプルなタイトルと背景画像で構成されたカード型UI。説明文とCTAがホバーで表示されます。CSSのみで作られているシンプルさも魅力です。
See the Pen Card Hover Interactions by Ryan Mulligan (@hexagoncircle) on CodePen.
カードにホバーすると、写真の一部が拡大され、名前とSNSのリンクが表示されます。情報をミニマルかつ魅力的に提示する好例です。CSSで作られています。
See the Pen Profile Card Hover Effect by P (@petegarvin1) on CodePen.
誰もがワクワクするような、ホログラム加工が施されたカード型UI。アニメーションGIFとグラデーションで作られたホログラムが、カードの魅力を引き立てています。制作に使われているのは、JavaScriptとCSSです。
See the Pen Pokemon Card Holo Effect by Simon Goellner (@simeydotme) on CodePen.
グレースケールのカードにホバーすると、カラフルな色がつき、かつ上下にスライドして展開されます。ユーザーは、きっと目をとめるはずです。CSSのみで制作されています。
See the Pen CSS Card Hover Effects by Jhonier Riascos Zapata (@Jhonierpc) on CodePen.
ボタンに近いスタイルのミニカードが、文章やCTAとともに展開し、動画が再生されます。小さなスペースに魅力を詰め込んだ、とても優秀なカード型UIです。CSSのみで制作されています。
See the Pen Holiday Feature Folding Cards [Pure CSS] by Madalena (@Maza-designDev) on CodePen.
カード全体ではなく、カード下部のタブにだけホバーエフェクトがついています。タブを使って1枚のカードに3倍のコンテンツを組み込んだ、とても賢いカード型UIです。グラスモーフィズムを採用しており、JavaScriptとCSSで作られています。
See the Pen Profile Card UI by JotForm (@jotform) on CodePen.
ホバーすると色が広がり、情報が表示されます。クリーンでカラフル、そしてコンパクトなデザインです。CSSのみで制作されています。
See the Pen Player/User Cards by Alvaro Montoro (@alvaromontoro) on CodePen.
重なり合ったカードにホバーすると、カードをピックアップできるスニペット。アクティブなカードには円形のアニメーションが表示されますが、これはテキストや画像に置き換えることも可能です。CSSのみで制作されています。
See the Pen CSS-Tricks Card Carousel by William Goldsworthy (@william-goldsworthy) on CodePen.
ホバーエフェクトは、さまざまな要素にインタラクティブ性とちょっとした遊び心を与えられます。
目的や用途にあわせて、カード全体を大きく変化させるようなものから、カードの一部のみに対応するものまで、さまざまな形式でホバーエフェクトを適用してみましょう。
情報を効率的に整理するカード型UIと、機能性と遊び心を兼ね備えたホバーエフェクトを組み合わせれば、魅力的なUIを実装できるはずです。
(執筆:Eric Karkovack 翻訳:Asuka Nakajima 編集:少年B 提供元:speckyboy)
初心者でも簡単実装!ドロップダウンリストのコードスニペット10選【CSS/JavaScript】
Workship MAGAZINE
CSS/JavaScriptで文字に動きを!テキストアニメーション30選
Workship MAGAZINE
CodePenとは?使い方/埋め込み方法/ライセンス表記を画像付きで解説
Workship MAGAZINE