これで完璧!マテリアルデザインの「カード」の使い方

マテリアルデザインのカードの使い方

マテリアルデザインでは「カード」と呼ばれる表現がよく使われます。カードはマテリアルデザインをグッと華やかに見せるの重要なパーツです。この記事ではカードの意味使い方のルールを紹介します。

1. カードとは?

紙のカードの画像

その名の通り、カードと聞いて思い浮かべるようなデザインのことです。画像や文字がプリントされた四角い紙をイメージすると良いでしょう。

カード(静止時)

これはカードデザインの一例です。マテリアルデザインでは影をつけることで「現実世界のように触れられる」感覚を再現します。

カードは関連性のある情報をまとめる紙です。つまり「1カード1テーマ」とする必要があります。

2. 使い方とガイドライン

基本的な考え方

画像や文字はインクで印刷されている

カード

カード上ではテキストや写真、文字など様々なモノを表現することができます。このとき重要なのは「文字や画像がインクで印刷されている」というイメージを持つことです。

はみ出してはいけない

印刷されているため紙からはみ出してはいけない

カードから文字や画像をはみ出してはいけません。なぜなら直接印刷されているからです。上にのっているわけではありません。

レイアウト

上に立体感のあるボタンを重ねない

他のマテリアルの上にのせない

立体的なボタンを上にくっつけるのも適切ではありません。立体感のあるものが何層にも重なっていると見た目がクドくなってしまいます。

フラットボタンの正しい使い方

リンクボタンをつけたいときはシンプルでフラットなものにします。色を変えるなどしてボタンであることが一目で分かるようにします。

FABを1枚1枚のカードの上においてはいけない

また、1枚1枚のカードの上にフローティング操作ボタン(円形の浮き上がったボタン)をのせるのもNGです。フローティング操作ボタンは1ページにつき1つだけ使います。

※ ボタンの使い方はこちらの記事でまとめています。

カード同士を重ねてはダメ

カードを複数枚使うときも重ねてはいけません。平面上に、均等に並べることで情報が整理して見やすくなります。

複数枚並べるときは縦スクロールで見る

複数枚を横に並べ、横にスクロールできるようにするのはNGです。スクロールできるのは縦だけです。

デザイン

重要な情報を上に

カード(静止時)

基本的には重要な内容をカードの上部に配置するようにします。

文字はサイズを変えて強調

重要な文字はサイズを大きめにします。フォントサイズにしっかりと差を作ることで見やすさとデザイン性が向上します。

文字を画像の上にのせてもOK

文字は画像の上にのせることもできます。ただし、見づらくならないように「フォントサイズ」や「色」を調整します。また、文字の下に半透明やグラデーションのカバーをのせるのも効果的です。

角は少しだけ丸くする

角に丸みをもたせる

カードの角は少しだけ丸くします。ガイドラインでは「2dp」となっており、これはだいたい2〜3pxに相当します。

背景色をカラフルにしてもOK

カラフルな背景に

カードの背景色はカラフルしても構いません。このとき模様はつけず無地にします。また、見やすさを保つために文字色と背景色にははっきりとコントラストをつけます。

文字のまわりには十分な余白を取る

カードの端に文字が近づくのは美しくありません。

十分な余白を取る

文字のまわりには十分な余白を取ります。

Googleのガイドラインでは細かい余白の数字が決められています。とはいえカードごとに文字数などが異なってくることを考えると、その数字をきちんと守るのは至難の業です。最低限広めの余白をバランス良くとることは心かげましょう。

カード内でのスクロールはNG

情報が収まりきらなかったとしても、カード内でスクロールできるようにしてはいけません(イメージは紙のカードなのです)。

動き・アニメーション

縮小・拡大ができる

縮小と拡大ができる

カードを変形させるのはOKです。ただし四角形を保ち、平面に沿った動きで変形させます(X軸とY軸方向にのみ変形するということですね)。

カーソルを当てると浮き上がる

ホバー、クリック、タップ時には影を少し大きめにします。これにより紙が浮き上がったように見せることができます。

Saruwaka Material Design

カードにカーソルを当てたり、タップしたりすると浮き上がります。


リップルエフェクトを使っても良い

タップ時やクリック時にはリップルエフェクト(波紋が広がるようなアニメーション)を加えてもOKです。

Saruwaka Material Design

カードをクリックしたときにリップルエフェクトがかかります。

並び替える操作もOK

ユーザーの操作によりカードどうしを並び替えたり、移動させたり、非表示にしたりすることもできます。

3. カードの使いどころ

カードは詳しい情報への入り口としてよく使われます。例えば「記事一覧」などですね。そのため情報を詰め込まず、重要な事柄だけに絞って載せることが大切です。

カード自体がボタンになる

カードにテキストのリンクボタンをのせることもできますが、基本的にはカード自体がボタンになります。つまり「カードのどこかをタップすれば、詳しい情報の書かれたページに移動する」というようにするのが基本なわけですね。

カードを使うべきでない場合

カードを使うことでオシャレに情報をまとめることができますが、使用シーンには注意が必要です。

影のないリストを使うべき例

マテリアルデザインだからといって「カードを使わなければならない」というわけではありません。

リストを使うべき例

たとえば、1パターンで少量の情報を均一的に並べるときにはリストが向いています。画面が影だらけになるとクドいからですね。ただしガイドラインでは「4行以上のテキストをまとめるときにはリストではなくカードを使うべき」とされています。

影のないグリッドを使うべき例

グリッドを使うべき例

グリッドとは画像などを格子状に並べるレイアウトのことです。グリッド状かつ均質的に写真が並ぶギャラリーページではカードを使うべきではありません。写真を探すうえで影が目障りになるからです。

サルワカ