レスポンシブデザインに相性がいい、カード型コンポーネントの実装アイデアのまとめ
Post on:2016年3月30日
カード型のUIはPinterestから人気が出始め、ここ1,2年の間に数多くのWebサイトで採用されるようになりました。レスポンシブデザインに相性が非常によいのも人気である原因の一つでしょう。
次のプロジェクトで使いたくなるような実装アイデアを備えたカード型レイアウトやカード型コンポーネントを紹介します。
まずは、アニメーションの動きが気持ちいいカード型UIから。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201601/2016033003-01.gif)
各カードをタップすると、コンテンツがぱたぱたと開いて表示されます。飛行機っぽくて楽しいですね。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201601/2016033003-02.gif)
アイコンをタップすると、オーバーレイでコンテンツを表示します。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201601/2016033003-03.gif)
商品購入時に、アニメーションでラッピングしてくれます。Pure CSSで実装。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201601/2016033003-04.gif)
ドラッグ&スローで、カードをぽいっと放ることができます。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201601/2016033003-05.gif)
フッタに備えたアイコンで、ソーシャルコンテンツを表示。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016033002-01.png)
左は通常時、右はホバー時で、カードのレイアウトが変化します。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016033002-02.png)
表示サイズに合わせて、3タイプのレイアウトを備えたカード。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016033002-03.png)
さまざまな表示サイズに対応したカードで、中央の斜めのラインはどのサイズでも維持されています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016033002-04.png)
Material Design - Responsive card
Material Designのカラーパレットを使ったカード、アイコンのタップでレイアウトが切り替わる時のアニメーションも気持ちいいです。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016033002-05.png)
カードがスライドして、その下にリスト状のコンテンツが表示されます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016033002-06.png)
アコーディオンを備えたカードで、レスポンシブ対応。小さいサイズではタイル状に変化します。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016033002-07.png)
プロダクト用に必要な要素をうまく配置したカード。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016033002-08.png)
モーダルウインドウを開くように表示されるカード。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016033002-09.png)
名刺のようにデザインされたカードコンテンツで、タップで情報が表示されます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016033002-10.png)
デフォルト時はサークル状のアイコン、ホバーするとアニメーションでカードに変形します。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016033002-11.png)
カードの下部がコメントを配置するウィジェットになっており、スクロールしてコメントが表示されます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016033002-12.png)
Twitterのプロフィールをカード型に配置。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016033002-13.png)
Movie Card Interactive UI With Pure CSS3 Animation Rating
レイティングをアニメーションで付けられるカード型コンテンツ。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016033002-14.png)
こちらもアニメーション対応のレイティング。付箋もカードに合いますね。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016033002-15.png)
スライダー機能を備えたカード。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016033002-16.png)
Card Swipe Animation Material Design
スワイプ時にただ横に移動させるだけでなく、スケールも変化させます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016033002-17.png)
「Fly to」の文字通り、「Add to Cart」をタップするとカートに飛んでいきます。
sponsors