UIUXクイズ - 02.カード型デザイン

はじめに

こんにちは。LYZONのWEBデザイナー キムと申します。

UIUXクイズ第2弾です!

第1弾をまだご覧になっていない方はまず下記のリンクから確認お願いします。
UIUXクイズ - 01.ポップアップデザイン

今回はWEBサイトでよく使われてるカード型のデザインです!

まず、A案とB案のデザインを確認してみましょう。

デザイン - A案

デザイン - B案

A案のデザインでは、各要素の間に余白を使って要素をグループ化しています。ボタンは、目立たせたいボタンにはブランディングカラーを使用しています。

一方、B案のデザインでは、各要素の間に線を引いて要素を区切っています。そして、各ボタンには役割を明確に伝えるためにカラーを使っています。

では、どちらが正解だと思いますか?

正解は。。。

ここをクリックしてください

正解はA案のデザインです!

解説

2つのデザインの違いは、各要素をグループ化する際に線を使用するか、余白を利用するかの違いですね。このデザインではタイトルと本文が同じ内容なので、線を用いるとタイトルと本文が別の領域のように見えてしまいます。そのため、線ではなく余白のみを使用して、同じ領域に属することを示しています。本文とボタンの間には線を引いても問題ないと思いますが、あえて線を省いて余白で区切ることにしました。

ボタンの場合は、以前にも述べた内容ですが、両方にカラーを使用すると両方が強調されてしまい、どちらが重要かがわかりにくくなります。そのため、「取消」ボタンにはラインのみを入れて背景色のトーンを下げます。ここでは、テキストの色のトーンを下げずに、明確に表記してください。

最後に

要素を区切る方法はいくつかありますが、それぞれのメリットやデメリットを考慮して最適な選択をしましょう。ボタンには、その役割に応じたスタイルを与えることが、ユーザーが操作を理解しやすくするポイントです。

第3弾では、さらに面白いネタを用意してきますので、お楽しみに!

キム

キム Webデザイナー

Sitecore SXAサイト構築では中核を担うなど、Webデザイン・コーディング幅広く担当している。2017年入社。
美容も気遣うLYZONデザインユニットのムードメーカー。