デザイン

デザイン

【Webデザインのコツ】カードを使ってスタイリッシュで見やすいサイトデザイニングを

244 views

Webサイトにおいて、カードコンポーネントは、複雑な情報への入り口のような役割を果たす、ユーザインタフェースの構成要素のひとつです。

カードには、あらゆる情報を集約したものが分かりやすく表示されていますが、目まぐるしい速さで移っていくユーザの視線を如何にとらえるかが今まで以上に重要になってきています。

この記事では、カードデザインにおいて気を付けるべきポイントとコツをまとめてみました。

 

カードの形

カードは複数のコンテンツをまとめて表示することで、ユーザに概要をみせて閲覧を促します。

同じような質の情報が店の棚と同じような要領で並べられていて、何かアクションを起こす前に一つひとつを吟味することができます。

1-dAcqhaROvQ4WWrjc1SRJMg (1)

カードは柔軟性が高く、どんなスクリーンにも対応できるのも利点ですね。

 

カードの分解

カードがどんな情報で構成されているのかを理解すれば、より使い易くデザインすることができます。

見出し、要約、メディア、画像や動画、グラフ、コメント、アクションなどが挙げられますね。

1-pI3d6mbBfL4A4SUEKSA1SQ

表示のされ方も個別、タイムライン、ギャラリー、並列など様々です。

 

カードデザインのコツ

1-p35TzsOv8C-l_dSif18bSw

数行もないようなコンテンツはリスト化すると見やすくなります

1-pCor-TRdnh4gv8UD4BdyBw

境界線を強調しすぎたり、間を空けすぎたりしないこと。理由についてはこちらの記事をご覧ください。

1-zck2XlaFuBvordZ0fSQggQ

1つのカードに内容を詰め込み過ぎずに、分けるようにしましょう

1-1EJuhe4ppeypqly7THYK2w

コンテンツの表示のされ方に強弱をつけて、視線を集めやすくすると良いですよ。

1-n9ipnUPu6xit99FkAaOyWw

リンクを貼りすぎずに、アクションは制限しましょう。

 

いかがでしたか?カードはあくまで情報の容器ですが、工夫次第でWebサイトを豊かにも使いにくくもします。

この記事が少しでもデザイナーの皆さんの参考になれば幸いです。

 

(※本記事は、Design Better Cardsを翻訳・再構成したものです)

関連記事

おすすめ記事