レスポンシブデザインに相性がいい、カード型コンポーネントの実装アイデアのまとめ

カード型のUIはPinterestから人気が出始め、ここ1,2年の間に数多くのWebサイトで採用されるようになりました。レスポンシブデザインに相性が非常によいのも人気である原因の一つでしょう。

次のプロジェクトで使いたくなるような実装アイデアを備えたカード型レイアウトやカード型コンポーネントを紹介します。
まずは、アニメーションの動きが気持ちいいカード型UIから。

デモのアニメーション

Delivery Card Animation

各カードをタップすると、コンテンツがぱたぱたと開いて表示されます。飛行機っぽくて楽しいですね。

デモのアニメーション

Material Overlay Animation

アイコンをタップすると、オーバーレイでコンテンツを表示します。

デモのアニメーション

Gift Card UI

商品購入時に、アニメーションでラッピングしてくれます。Pure CSSで実装。

デモのアニメーション

Drag And Throw 3D Card Pile

ドラッグ&スローで、カードをぽいっと放ることができます。

デモのアニメーション

Material Share Interaction

フッタに備えたアイコンで、ソーシャルコンテンツを表示。

デモのキャプチャ

Article News Card

左は通常時、右はホバー時で、カードのレイアウトが変化します。

デモのキャプチャ

Material Design Cards

表示サイズに合わせて、3タイプのレイアウトを備えたカード。

デモのキャプチャ

Scalable Card Component

さまざまな表示サイズに対応したカードで、中央の斜めのラインはどのサイズでも維持されています。

デモのキャプチャ

Material Design - Responsive card

Material Designのカラーパレットを使ったカード、アイコンのタップでレイアウトが切り替わる時のアニメーションも気持ちいいです。

デモのキャプチャ

Card Slide - CSS reveal

カードがスライドして、その下にリスト状のコンテンツが表示されます。

デモのキャプチャ

Responsive Menu App

アコーディオンを備えたカードで、レスポンシブ対応。小さいサイズではタイル状に変化します。

デモのキャプチャ

Product Card

プロダクト用に必要な要素をうまく配置したカード。

デモのキャプチャ

Shop Card

モーダルウインドウを開くように表示されるカード。

デモのキャプチャ

CSS Business Card

名刺のようにデザインされたカードコンテンツで、タップで情報が表示されます。

デモのキャプチャ

Hover Card

デフォルト時はサークル状のアイコン、ホバーするとアニメーションでカードに変形します。

デモのキャプチャ

Places comments widget (CSS3)

カードの下部がコメントを配置するウィジェットになっており、スクロールしてコメントが表示されます。

デモのキャプチャ

Twitter Profile

Twitterのプロフィールをカード型に配置。

デモのキャプチャ

Movie Card Interactive UI With Pure CSS3 Animation Rating

レイティングをアニメーションで付けられるカード型コンテンツ。

デモのキャプチャ

Food Widget

こちらもアニメーション対応のレイティング。付箋もカードに合いますね。

デモのキャプチャ

Add To - Shopping cart slider

スライダー機能を備えたカード。

デモのキャプチャ

Card Swipe Animation Material Design

スワイプ時にただ横に移動させるだけでなく、スケールも変化させます。

デモのキャプチャ

jQuery. Fly to cart effect.

「Fly to」の文字通り、「Add to Cart」をタップするとカートに飛んでいきます。

top of page

©2016 coliss