カードとは、一つのリンクの中に画像やテキスト等を複数含めることができる要素です。

ブログサイトの記事一覧やサービス紹介の一覧などで使われることが多く、ユーザーに対して多くの情報を一度に見せることができます。

この記事では、カードのメリット〜設定方法を解説していきます。

・カードのメリット

・カードの設定方法

　・カードの配置

　・要素の設定〜スタイルの編集

　・アニメーションの設定

　・カードの設定

例えば、ECサイトでは、商品画像、詳細、値段、ボタンなどがコンパクトにまとめられており、一つのページに多くの商品が表示されています。縦長のリスト表示とは異なり、より多くの量の商品を表示領域内で表示できます。

大きな画面では横並びに、小さな画面では一つずつ縦に表示というように、どのスクリーンサイズやブレークポイントでも適応できます。特にモバイルユーザーの多いWebサイトでは頻繁に利用されています。

カードには、様々なエフェクトを追加できます。例えば、カーソルを合わせた際に画像の拡大や色の変化など、エフェクトによってユーザーにクリックできることを伝えられます。

サイドバーの追加＞エレメント＞カードで配置します。

今回は、カード内に画像とテキストを配置してカードをデザインします。

カード内の画像を選択した状態で、サイドバーの画像／動画より配置したい画像を選択し、テキストも任意の文字列に変更します。

また、画像・テキストともにスタイルパネルより、サイズや色、余白などを設定します。

レイアウト構築の詳細に関しては、こちらの記事をご参照ください。

スタイルパネルのhoverを選択し、アニメーションから不透明度や回転等の数値を設定します。

アニメーションの設定に関しては、こちらの記事をご参照ください。

変化の濃度を調整しながら、ユーザーが使いやすいカードをデザインしてみてください。

最後に、カードをクリックした際のリンクの設定をします。

カードを選択した状態で、スタイルパネル内のリンクよりリンクの種類と設定を行います。

その後、プレビュー画面で設定したカードを確認します。

リンクの設定に関しては、こちらの記事をご参照ください。