私なりカードUI


概要、カードはある主題のコンテンツをまとめて表示するコンテナとなるコンポーネントである。
あらゆる種類のコンポーネントやアクション、コンテンツなどを格納できる。

よってカードは自由度が高い。

デジタル庁では、アクセリビリティや用途の想起をしやすいように、あえて自由度に制約を課している。


ユースケース
画像等メディアとテキストをグループ化して提示したいとき
他の情報と区別がしやすくなります。
一覧やグリッド形式でコンテンツを提示するとき
視覚的に比較・選択しやすくします。

注意が必要なケース

データの比較を詳細に行いたい場合はテーブルを使う
データの比較や分析には、カード形式よりも行と列を使ったテーブルのほうが適しています。

---

そんなあらゆるコンポーネントを格納できるわけで、
カードコンポーネントは最大で4つのパーツから構成されます。

1 コンテナ（必須）
メインエリア、イメージエリア、サブエリアを包含するパーツです。
必ず視覚的な外周をもち、当該カードとしての形状を示します。
カードUIができたら、そこはもうコンテナですね
2メインエリア（必須）

コンテナに必ず内包されるパーツで、タイトルやコンテンツ等を含みます。


3イメージエリア
コンテナに内包できる、省略可能なパーツです。画像や動画等の画像データを含みます。サブエリアに隣接させることはできません。
4サブエリア
コンテナに内包できる、省略可能なパーツです。イメージエリアに隣接させることはできません。


外観




メインエリアについて

メインエリアがもつコンテンツのタイトルです。コンテナ自体、メインエリア自体、またはタイトルがリンクである場合、タイトルにアンダーラインを付与します。

タイトルまたはコンテンツに対する付加的な情報や分類等を提供します。プレーンなテキスト以外の表現（バッジ表現等）を用いても構いません。

メインエリアがもつコンテンツです。テキスト（テキストリンク）、リスト（リンクリスト）、ボタン、画像など、ある程度自由な範囲でコンポーネントや要素を格納することができます。

エリア自体に1つまで付与できる機能です。コンテクストメニューとしてメニューリストを呼び出す縦三点リーダー（more_vert）や、カードを操作するためのフォームコントロール（ラジオボタンやチェックボックス、あるいはゴミ箱アイコン等）を配置する際に使用します。




---

イメージエリア
イメージ（必須）
画像データ（動画や音声等を含む）が配置されます。イメージ自体がリンクとなる場合はイメージエリアの全体がクリッカブルエリア（フォーカス可能エリア）になるようにします。
ラベル
このラベルはイメージの上に重ねて配置される場合があります。ただしラベルがリンクである場合は、イメージがリンクでない時に限り重ねることができます。
機能ボタン
カード内の機能ボタンが2つまでの範囲において、イメージエリアには機能ボタンを1つまでもつことができます。イメージの上に重ねて配置される場合があります。イメージが画像リンクまたは動画の場合は重ねることができません。


リンクリスト
リンクリストまたはアクションボタンはいずれか必須です。
アクションボタン
リンクリストまたはアクションボタンはいずれか必須です。
ラベル
プレーンなテキスト以外の表現（バッジ表現等）を用いても構いません。
機能ボタン
カード内の機能ボタンが2つまでの範囲において、サブエリアには機能ボタンを1つまでもつことができます。

クリッカブルエリア










デジタル
https://design.digital.go.jp/dads/components/card/