レスポンシブと相性がいいカード型UIのレイアウトやデザインの実装アイデアのまとめ
Post on:2016年6月8日
Pinterestから人気が出始めたカード型UIは、ここ1, 2年の間に日本でも多くのWebサイトで見かけるようになりました。BootstrapやMaterial Designにも採用されており、レスポンシブデザインとも非常に相性がよいUIコンポーネントです。
そんなカード型UIのレイアウトやデザイン、アニメーションを伴ったインタラクションの実装アイデアを紹介します。
各リンク先ではHTMLやCSS、使用していればJavaScriptも編集・ダウンロードできます。
![カード型UIのデモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016060803-01.gif)
インタラクションの一部をアニメーションにしてみました。他にも写真がズームしたり、タブ(機能は未)などが用意されており、省スペースに多くの情報を掲載することができます。
![カード型UIのデモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016060802-02.png)
フェードやスライドの美しいアニメーションを備えたカードで、背景になっている箇所もズームします。
![カード型UIのデモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016060802-03.png)
![カード型UIのデモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016060802-04.png)
![カード型UIのデモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016060802-05.png)
スクリーンサイズによって異なるレイアウトになるカード。
![カード型UIのデモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016060802-06.png)
肉球のアイコンは、ずるいw
![カード型UIのデモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016060802-07.png)
個人向けのソーシャル用のカードで、下と対になっています。
![カード型UIのデモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016060802-08.png)
![カード型UIのデモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016060802-09.png)
波状の区切り線は美しいアニメーションで表現されています。
![カード型UIのデモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016060802-10.png)
![カード型UIのデモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016060802-11.png)
カードのロード時は、何もない状態からボールが弾み、カードを作り出します。
![カード型UIのデモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016060802-12.png)
ブログ記事の一覧用のカード。このくらいのホバーエフェクトがちょうどよいですね。
![カード型UIのデモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016060802-13.png)
半透明のカードはドラッグで移動することができます。
![カード型UIのデモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016060802-14.png)
![カード型UIのデモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016060802-15.png)
気持ちいいアニメーションでカードを次々に表示させます。
![カード型UIのデモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016060802-16.png)
斜めの区切り、斜めのタイポグラフィは、サイズが変更されても維持されています。
![カード型UIのデモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016060802-17.png)
z-indexを使ったデザイン、アリですね。
sponsors