レスポンシブと相性がいいカード型UIのレイアウトやデザインの実装アイデアのまとめ

Pinterestから人気が出始めたカード型UIは、ここ1, 2年の間に日本でも多くのWebサイトで見かけるようになりました。BootstrapやMaterial Designにも採用されており、レスポンシブデザインとも非常に相性がよいUIコンポーネントです。

そんなカード型UIのレイアウトやデザイン、アニメーションを伴ったインタラクションの実装アイデアを紹介します。
各リンク先ではHTMLやCSS、使用していればJavaScriptも編集・ダウンロードできます。

カード型UIのデモのキャプチャ

Recipe Card

インタラクションの一部をアニメーションにしてみました。他にも写真がズームしたり、タブ(機能は未)などが用意されており、省スペースに多くの情報を掲載することができます。

カード型UIのデモのキャプチャ

San Francisco Card

フェードやスライドの美しいアニメーションを備えたカードで、背景になっている箇所もズームします。

カード型UIのデモのキャプチャ

Article News Card

カード型UIのデモのキャプチャ

Location Card

カード型UIのデモのキャプチャ

Material Design Card

スクリーンサイズによって異なるレイアウトになるカード。

カード型UIのデモのキャプチャ

Pet Adoption Card

肉球のアイコンは、ずるいw

カード型UIのデモのキャプチャ

Personal Social Card

個人向けのソーシャル用のカードで、下と対になっています。

カード型UIのデモのキャプチャ

Personal social card

カード型UIのデモのキャプチャ

Music card

波状の区切り線は美しいアニメーションで表現されています。

カード型UIのデモのキャプチャ

Cards

カード型UIのデモのキャプチャ

Material Design: Profile Card

カードのロード時は、何もない状態からボールが弾み、カードを作り出します。

カード型UIのデモのキャプチャ

Blog Cards

ブログ記事の一覧用のカード。このくらいのホバーエフェクトがちょうどよいですね。

カード型UIのデモのキャプチャ

Interactive profile card

半透明のカードはドラッグで移動することができます。

カード型UIのデモのキャプチャ

Product Card

カード型UIのデモのキャプチャ

Iconic Tinder Cards 2

気持ちいいアニメーションでカードを次々に表示させます。

カード型UIのデモのキャプチャ

Scalable Card Component

斜めの区切り、斜めのタイポグラフィは、サイズが変更されても維持されています。

カード型UIのデモのキャプチャ

90's profile card

z-indexを使ったデザイン、アリですね。

sponsors

top of page

©2018 coliss