カード型UIのユニークデザインとコーディングサンプルまとめ

カード型UIは、情報をグループ化することでユーザーの視認性を高めてくれる。さらに領域自体がクリッカブルになることで、操作性の向上が見込め、ユーザビリティ観点からみても魅力的なインターフェースであることは間違いない。

カード型UIの構造としては、画像、要約、リンク、シェアボタンなどで組まれることが多い。画像は、円形でアバター写真だったり、カード背景全面に表示したり、アレンジしたものも見受けられる。リンクは、詳細ページへの誘導を目的としていて、遷移先にさらにボリュームをもった情報があることを感じさせる。

柔軟なレイアウトをもつカード型UIであるが、レスポンシブデザインで勝手がよい。要約文が増えればカードが伸びるし、表示幅が変わればカード幅が可変する。またカルーセル式に配置して省スペースを有効活用する場合にも効果的だ。

そんなカード型UIがいかにしてコーディングされているのか、いくつかcodepen.ioのサンプルを紹介したい。

カード型UIのコーディング

Bumble Card

See the Pen Bumble Card by Dave Kwiatkowski (@davekwiatkowski) on CodePen.light

Awesome Profile Card

See the Pen Awesome Profile Card by SercaN (@iZMiRLy) on CodePen.light

Visit Card

See the Pen Visit Card by Slavko (@djoga98) on CodePen.light

Codepenchallenge: Card [WIP]

See the Pen Codepenchallenge: Card [WIP] by Travis John (@travis_john) on CodePen.light

CodePen Challenge: Hearthstone Card

See the Pen CodePen Challenge: Hearthstone Card by wheatup (@wheatup) on CodePen.light

CodepenChallenge Fairly Colourful Profile Card

See the Pen #CodepenChallenge Fairly Colourful Profile Card by Takane Ichinose (@takaneichinose) on CodePen.light

Business Card

See the Pen Business Card by Maciej Caputa (@MaciejCaputa) on CodePen.light

Contact Cards

See the Pen Contact Cards by Callum Brown (@___cbrown___) on CodePen.light

a Basic Card

See the Pen a Basic Card by Mehdi Mohseni (@mhdmhsni) on CodePen.light

User Card

See the Pen User Card by Ashish Mehra (@mehra_as) on CodePen.light

Video Course Card Concept

See the Pen Video Course Card Concept by Mason Fox (@masonfox) on CodePen.light

Nike Cards

See the Pen Nike Cards by dwb (@dwbelliston) on CodePen.light

まとめ

カード型UIのコーディングサンプルの紹介だった。ユニークなデザインで実案件で役立つか疑わしいものも含まれるがコーディング知識としては、有用なものだと思う。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です